Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeForge — AI Code Studio</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-primary: #0a0e17; | |
| --bg-secondary: #111827; | |
| --bg-tertiary: #1a2236; | |
| --bg-card: #151d2e; | |
| --bg-hover: #1e2a42; | |
| --bg-active: #243352; | |
| --border: #1e2d45; | |
| --border-light: #2a3f5f; | |
| --text-primary: #e8edf5; | |
| --text-secondary: #8892a8; | |
| --text-muted: #5a6478; | |
| --accent: #6c5ce7; | |
| --accent-hover: #8b7cf7; | |
| --accent-dim: rgba(108, 92, 231, 0.15); | |
| --accent-glow: rgba(108, 92, 231, 0.3); | |
| --green: #00d2a0; | |
| --green-dim: rgba(0, 210, 160, 0.12); | |
| --yellow: #ffc048; | |
| --yellow-dim: rgba(255, 192, 72, 0.12); | |
| --red: #ff5c72; | |
| --red-dim: rgba(255, 92, 114, 0.12); | |
| --blue: #4facfe; | |
| --blue-dim: rgba(79, 172, 254, 0.12); | |
| --orange: #ff8a4c; | |
| --orange-dim: rgba(255, 138, 76, 0.12); | |
| --cyan: #22d3ee; | |
| --cyan-dim: rgba(34, 211, 238, 0.12); | |
| --pink: #f472b6; | |
| --pink-dim: rgba(244, 114, 182, 0.12); | |
| --teal: #2dd4bf; | |
| --teal-dim: rgba(45, 212, 191, 0.12); | |
| --sidebar-width: 280px; | |
| --statusbar-height: 26px; | |
| --header-height: 52px; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| height: 100vh; | |
| width: 100vw; | |
| } | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--border-light); } | |
| .app { display: flex; flex-direction: column; height: 100vh; } | |
| /* ===== HEADER ===== */ | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| height: var(--header-height); | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 16px; | |
| gap: 12px; | |
| flex-shrink: 0; | |
| position: relative; | |
| z-index: 100; | |
| } | |
| .header::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--accent-glow), transparent); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-weight: 700; | |
| font-size: 16px; | |
| color: var(--text-primary); | |
| flex-shrink: 0; | |
| } | |
| .logo-icon { | |
| width: 28px; | |
| height: 28px; | |
| background: linear-gradient(135deg, var(--accent), var(--blue)); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| color: #fff; | |
| } | |
| .anycoder-link { | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-size: 11px; | |
| font-weight: 500; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| background: var(--accent-dim); | |
| transition: all 0.2s; | |
| white-space: nowrap; | |
| } | |
| .anycoder-link:hover { | |
| background: var(--accent-glow); | |
| color: var(--accent-hover); | |
| } | |
| .header-separator { | |
| width: 1px; | |
| height: 24px; | |
| background: var(--border); | |
| flex-shrink: 0; | |
| } | |
| /* Selector Buttons */ | |
| .selector-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| .selector-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 14px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| color: var(--text-primary); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-family: 'Inter', sans-serif; | |
| white-space: nowrap; | |
| position: relative; | |
| } | |
| .selector-btn:hover { | |
| border-color: var(--accent); | |
| background: var(--bg-hover); | |
| } | |
| .selector-btn.active { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 1px var(--accent-dim), 0 0 12px var(--accent-dim); | |
| } | |
| .selector-btn .sel-icon { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 5px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| flex-shrink: 0; | |
| } | |
| .selector-btn .sel-chevron { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| transition: transform 0.2s; | |
| } | |
| .selector-btn.open .sel-chevron { | |
| transform: rotate(180deg); | |
| } | |
| .header-spacer { flex: 1; } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .header-action-btn { | |
| width: 34px; | |
| height: 34px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| border-radius: 8px; | |
| font-size: 15px; | |
| transition: all 0.2s; | |
| } | |
| .header-action-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| border-color: var(--border); | |
| } | |
| .generate-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 7px 20px; | |
| background: linear-gradient(135deg, var(--accent), #8b5cf6); | |
| border: none; | |
| border-radius: 8px; | |
| color: #fff; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s; | |
| font-family: 'Inter', sans-serif; | |
| white-space: nowrap; | |
| box-shadow: 0 2px 12px var(--accent-dim); | |
| } | |
| .generate-btn:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| } | |
| .generate-btn:active { | |
| transform: translateY(0); | |
| } | |
| .generate-btn.generating { | |
| opacity: 0.8; | |
| pointer-events: none; | |
| } | |
| .generate-btn.generating i { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ===== DROPDOWN PANELS ===== */ | |
| .dropdown-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 500; | |
| display: none; | |
| } | |
| .dropdown-overlay.show { display: block; } | |
| .dropdown-panel { | |
| position: absolute; | |
| top: calc(var(--header-height) + 4px); | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px var(--border); | |
| z-index: 600; | |
| display: none; | |
| overflow: hidden; | |
| animation: dropIn 0.15s ease; | |
| } | |
| .dropdown-panel.show { display: block; } | |
| @keyframes dropIn { | |
| from { opacity: 0; transform: translateY(-6px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .dropdown-search { | |
| padding: 10px 12px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .dropdown-search input { | |
| width: 100%; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border); | |
| color: var(--text-primary); | |
| padding: 7px 10px 7px 32px; | |
| font-size: 13px; | |
| border-radius: 6px; | |
| outline: none; | |
| font-family: 'Inter', sans-serif; | |
| transition: border-color 0.2s; | |
| } | |
| .dropdown-search input:focus { border-color: var(--accent); } | |
| .dropdown-search input::placeholder { color: var(--text-muted); } | |
| .dropdown-search-wrap { | |
| position: relative; | |
| } | |
| .dropdown-search-wrap i { | |
| position: absolute; | |
| left: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .dropdown-list { | |
| max-height: 340px; | |
| overflow-y: auto; | |
| padding: 6px; | |
| } | |
| .dropdown-category { | |
| padding: 6px 10px 4px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--text-muted); | |
| } | |
| .dropdown-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 10px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .dropdown-item:hover { background: var(--bg-hover); } | |
| .dropdown-item.selected { | |
| background: var(--accent-dim); | |
| border: 1px solid rgba(108, 92, 231, 0.3); | |
| } | |
| .dropdown-item .dd-icon { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 7px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| } | |
| .dropdown-item .dd-info { flex: 1; min-width: 0; } | |
| .dropdown-item .dd-name { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| .dropdown-item .dd-desc { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .dropdown-item .dd-check { | |
| color: var(--accent); | |
| font-size: 13px; | |
| opacity: 0; | |
| } | |
| .dropdown-item.selected .dd-check { opacity: 1; } | |
| .dropdown-item .dd-tag { | |
| font-size: 9px; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| /* ===== MAIN CONTENT ===== */ | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| overflow: hidden; | |
| } | |
| /* ===== SIDEBAR ===== */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| transition: width 0.25s, opacity 0.25s; | |
| overflow: hidden; | |
| } | |
| .sidebar.collapsed { | |
| width: 0; | |
| border-right: none; | |
| } | |
| .sidebar-section { | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .sidebar-section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 14px; | |
| cursor: pointer; | |
| transition: background 0.15s; | |
| } | |
| .sidebar-section-header:hover { background: var(--bg-hover); } | |
| .sidebar-section-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--text-secondary); | |
| } | |
| .sidebar-section-title i { font-size: 12px; } | |
| .sidebar-section-chevron { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| transition: transform 0.2s; | |
| } | |
| .sidebar-section.collapsed .sidebar-section-chevron { | |
| transform: rotate(-90deg); | |
| } | |
| .sidebar-section-content { | |
| padding: 4px 8px 10px; | |
| } | |
| .sidebar-section.collapsed .sidebar-section-content { | |
| display: none; | |
| } | |
| /* Model Card in Sidebar */ | |
| .model-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| margin-bottom: 6px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .model-card:hover { | |
| border-color: var(--accent); | |
| background: var(--bg-hover); | |
| } | |
| .model-card.active { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 1px var(--accent-dim); | |
| } | |
| .model-card-icon { | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| flex-shrink: 0; | |
| } | |
| .model-card-info { flex: 1; min-width: 0; } | |
| .model-card-name { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .model-card-provider { | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .model-card-check { | |
| color: var(--accent); | |
| font-size: 13px; | |
| opacity: 0; | |
| } | |
| .model-card.active .model-card-check { opacity: 1; } | |
| /* Language Pills */ | |
| .lang-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 4px; | |
| } | |
| .lang-pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 7px 10px; | |
| border-radius: 7px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| border: 1px solid transparent; | |
| } | |
| .lang-pill:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .lang-pill.active { | |
| background: var(--accent-dim); | |
| color: var(--accent); | |
| border-color: rgba(108, 92, 231, 0.3); | |
| } | |
| .lang-pill i { font-size: 14px; } | |
| /* Quick Actions */ | |
| .quick-actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| padding: 8px; | |
| } | |
| .quick-action { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 10px; | |
| border-radius: 7px; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .quick-action:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .quick-action i { | |
| width: 18px; | |
| text-align: center; | |
| font-size: 13px; | |
| } | |
| .quick-action .qa-shortcut { | |
| margin-left: auto; | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* ===== EDITOR AREA ===== */ | |
| .editor-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| min-width: 0; | |
| } | |
| /* Prompt Bar */ | |
| .prompt-bar { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 12px 16px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .prompt-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: linear-gradient(135deg, var(--accent), var(--blue)); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| color: #fff; | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .prompt-input-wrap { | |
| flex: 1; | |
| position: relative; | |
| } | |
| .prompt-input { | |
| width: 100%; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border); | |
| color: var(--text-primary); | |
| padding: 8px 14px; | |
| font-size: 13px; | |
| border-radius: 10px; | |
| outline: none; | |
| font-family: 'Inter', sans-serif; | |
| resize: none; | |
| min-height: 36px; | |
| max-height: 120px; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| line-height: 1.5; | |
| } | |
| .prompt-input:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-dim); | |
| } | |
| .prompt-input::placeholder { color: var(--text-muted); } | |
| .prompt-send { | |
| width: 36px; | |
| height: 36px; | |
| background: linear-gradient(135deg, var(--accent), #8b5cf6); | |
| border: none; | |
| border-radius: 8px; | |
| color: #fff; | |
| cursor: pointer; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s; | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .prompt-send:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 2px 12px var(--accent-glow); | |
| } | |
| /* Tabs */ | |
| .tabbar { | |
| display: flex; | |
| align-items: stretch; | |
| height: 38px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; | |
| flex-shrink: 0; | |
| } | |
| .tabbar::-webkit-scrollbar { height: 0; } | |
| .tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 0 16px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| border-right: 1px solid var(--border); | |
| white-space: nowrap; | |
| position: relative; | |
| transition: all 0.15s; | |
| } | |
| .tab:hover { background: var(--bg-tertiary); color: var(--text-secondary); } | |
| .tab.active { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--accent), var(--blue)); | |
| } | |
| .tab .tab-icon { font-size: 13px; } | |
| .tab .tab-close { | |
| margin-left: 8px; | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 4px; | |
| font-size: 10px; | |
| opacity: 0; | |
| transition: all 0.15s; | |
| } | |
| .tab:hover .tab-close, .tab.active .tab-close { opacity: 0.7; } | |
| .tab .tab-close:hover { opacity: 1; background: var(--bg-hover); } | |
| .tab .tab-modified { | |
| margin-left: 8px; | |
| width: 6px; | |
| height: 6px; | |
| background: var(--green); | |
| border-radius: 50%; | |
| } | |
| /* Editor Container */ | |
| .editor-container { | |
| flex: 1; | |
| display: flex; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .line-numbers { | |
| width: 54px; | |
| background: var(--bg-primary); | |
| padding: 14px 0; | |
| text-align: right; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| line-height: 1.65; | |
| color: var(--text-muted); | |
| user-select: none; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| } | |
| .line-num { | |
| padding-right: 16px; | |
| height: 21.45px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| } | |
| .line-num.active { color: var(--text-primary); } | |
| .code-editor { | |
| flex: 1; | |
| padding: 14px 18px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| line-height: 1.65; | |
| color: var(--text-primary); | |
| background: var(--bg-primary); | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| overflow: auto; | |
| white-space: pre; | |
| tab-size: 2; | |
| } | |
| .code-editor::selection { background: var(--accent-dim); } | |
| /* Minimap */ | |
| .minimap { | |
| width: 56px; | |
| background: var(--bg-primary); | |
| border-left: 1px solid var(--border); | |
| overflow: hidden; | |
| position: relative; | |
| flex-shrink: 0; | |
| cursor: pointer; | |
| } | |
| .minimap-content { | |
| padding: 14px 4px; | |
| transform: scaleX(0.35) scaleY(0.35); | |
| transform-origin: top right; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| line-height: 1.65; | |
| color: var(--text-muted); | |
| white-space: pre; | |
| opacity: 0.5; | |
| pointer-events: none; | |
| } | |
| .minimap-viewport { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 40px; | |
| background: rgba(108, 92, 231, 0.08); | |
| border: 1px solid rgba(108, 92, 231, 0.2); | |
| border-radius: 2px; | |
| pointer-events: none; | |
| transition: top 0.1s; | |
| } | |
| /* ===== BOTTOM PANEL ===== */ | |
| .panel-area { | |
| border-top: 1px solid var(--border); | |
| flex-shrink: 0; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg-secondary); | |
| } | |
| .panel-area.hidden { display: none; } | |
| .panel-tabs { | |
| display: flex; | |
| align-items: center; | |
| height: 34px; | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 10px; | |
| gap: 2px; | |
| } | |
| .panel-tab { | |
| padding: 5px 14px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| border-radius: 5px; | |
| transition: all 0.15s; | |
| position: relative; | |
| } | |
| .panel-tab:hover { color: var(--text-secondary); } | |
| .panel-tab.active { | |
| color: var(--text-primary); | |
| background: var(--bg-hover); | |
| } | |
| .panel-tab .badge { | |
| background: var(--red); | |
| color: #fff; | |
| font-size: 9px; | |
| padding: 1px 5px; | |
| border-radius: 8px; | |
| margin-left: 4px; | |
| font-weight: 600; | |
| } | |
| .panel-actions { | |
| margin-left: auto; | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .panel-actions button { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 13px; | |
| padding: 4px 6px; | |
| border-radius: 4px; | |
| transition: all 0.15s; | |
| } | |
| .panel-actions button:hover { | |
| color: var(--text-primary); | |
| background: var(--bg-hover); | |
| } | |
| .terminal { | |
| height: 180px; | |
| overflow-y: auto; | |
| padding: 10px 16px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| background: var(--bg-primary); | |
| } | |
| .terminal-line { margin-bottom: 2px; } | |
| .terminal-prompt { color: var(--green); } | |
| .terminal-path { color: var(--blue); } | |
| .terminal-cmd { color: var(--text-primary); } | |
| .terminal-output { color: var(--text-secondary); } | |
| .terminal-error { color: var(--red); } | |
| .terminal-info { color: var(--accent); } | |
| .terminal-input-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .terminal-input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 12px; | |
| outline: none; | |
| } | |
| /* ===== STATUS BAR ===== */ | |
| .statusbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: var(--statusbar-height); | |
| background: linear-gradient(90deg, var(--accent), #8b5cf6); | |
| padding: 0 12px; | |
| font-size: 11px; | |
| color: #fff; | |
| flex-shrink: 0; | |
| } | |
| .statusbar-left, .statusbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 2px; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 0 8px; | |
| cursor: pointer; | |
| height: 100%; | |
| transition: background 0.15s; | |
| border-radius: 3px; | |
| } | |
| .status-item:hover { background: rgba(255,255,255,0.15); } | |
| .status-item i { font-size: 11px; } | |
| /* ===== NOTIFICATIONS ===== */ | |
| .notification-area { | |
| position: fixed; | |
| bottom: 40px; | |
| right: 16px; | |
| z-index: 2000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .notification { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 12px 16px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.5); | |
| min-width: 300px; | |
| max-width: 400px; | |
| animation: notifIn 0.3s ease; | |
| font-size: 13px; | |
| } | |
| .notification.hiding { animation: notifOut 0.3s ease forwards; } | |
| @keyframes notifIn { | |
| from { opacity: 0; transform: translateX(30px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes notifOut { | |
| from { opacity: 1; transform: translateX(0); } | |
| to { opacity: 0; transform: translateX(30px); } | |
| } | |
| .notif-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } | |
| .notif-icon.info { color: var(--blue); } | |
| .notif-icon.success { color: var(--green); } | |
| .notif-icon.warning { color: var(--yellow); } | |
| .notif-icon.error { color: var(--red); } | |
| .notif-content { flex: 1; } | |
| .notif-title { font-weight: 600; margin-bottom: 2px; font-size: 13px; } | |
| .notif-msg { color: var(--text-secondary); font-size: 12px; } | |
| .notif-close { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 14px; | |
| padding: 0; | |
| transition: color 0.15s; | |
| } | |
| .notif-close:hover { color: var(--text-primary); } | |
| /* ===== TYPING ANIMATION ===== */ | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .cursor-blink { | |
| display: inline-block; | |
| width: 2px; | |
| height: 16px; | |
| background: var(--accent); | |
| animation: blink 1s step-end infinite; | |
| vertical-align: middle; | |
| margin-left: 1px; | |
| } | |
| /* ===== RESPONSIVE ===== */ | |
| @media (max-width: 900px) { | |
| .sidebar { display: none; } | |
| .minimap { display: none; } | |
| .selector-btn .sel-label { display: none; } | |
| .generate-btn span { display: none; } | |
| .generate-btn { padding: 7px 12px; } | |
| } | |
| @media (max-width: 600px) { | |
| .header { padding: 0 8px; gap: 6px; } | |
| .logo span { display: none; } | |
| .anycoder-link { display: none; } | |
| .header-separator { display: none; } | |
| .prompt-bar { padding: 8px 10px; } | |
| } | |
| /* Ambient glow effect */ | |
| .glow-orb { | |
| position: fixed; | |
| width: 300px; | |
| height: 300px; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 0; | |
| filter: blur(100px); | |
| opacity: 0.04; | |
| } | |
| .glow-orb.orb1 { | |
| top: -100px; | |
| right: -100px; | |
| background: var(--accent); | |
| } | |
| .glow-orb.orb2 { | |
| bottom: -100px; | |
| left: -100px; | |
| background: var(--blue); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="glow-orb orb1"></div> | |
| <div class="glow-orb orb2"></div> | |
| <div class="app"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="logo"> | |
| <div class="logo-icon"><i class="fa-solid fa-bolt"></i></div> | |
| <span>CodeForge</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a> | |
| <div class="header-separator"></div> | |
| <div class="selector-group"> | |
| <!-- Language Selector --> | |
| <button class="selector-btn" id="langSelectorBtn"> | |
| <span class="sel-icon" id="langSelIcon" style="background:var(--yellow-dim);color:var(--yellow);"> | |
| <i class="fa-brands fa-js"></i> | |
| </span> | |
| <span class="sel-label" id="langSelLabel">JavaScript</span> | |
| <i class="fa-solid fa-chevron-down sel-chevron"></i> | |
| </button> | |
| <!-- Model Selector --> | |
| <button class="selector-btn" id="modelSelectorBtn"> | |
| <span class="sel-icon" id="modelSelIcon" style="background:var(--accent-dim);color:var(--accent);"> | |
| <i class="fa-solid fa-brain"></i> | |
| </span> | |
| <span class="sel-label" id="modelSelLabel">GPT-4o</span> | |
| <i class="fa-solid fa-chevron-down sel-chevron"></i> | |
| </button> | |
| </div> | |
| <div class="header-spacer"></div> | |
| <div class="header-actions"> | |
| <button class="header-action-btn" id="toggleSidebarBtn" title="Toggle Sidebar"> | |
| <i class="fa-solid fa-bars"></i> | |
| </button> | |
| <button class="header-action-btn" id="toggleTerminalBtn" title="Toggle Terminal"> | |
| <i class="fa-solid fa-terminal"></i> | |
| </button> | |
| <button class="header-action-btn" title="Settings"> | |
| <i class="fa-solid fa-gear"></i> | |
| </button> | |
| <button class="generate-btn" id="generateBtn"> | |
| <i class="fa-solid fa-wand-magic-sparkles"></i> | |
| <span>Generate</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content"> | |
| <!-- Sidebar --> | |
| <div class="sidebar" id="sidebar"> | |
| <!-- AI Models Section --> | |
| <div class="sidebar-section" id="modelsSection"> | |
| <div class="sidebar-section-header" onclick="toggleSection('modelsSection')"> | |
| <div class="sidebar-section-title"> | |
| <i class="fa-solid fa-brain"></i> | |
| AI Models | |
| </div> | |
| <i class="fa-solid fa-chevron-down sidebar-section-chevron"></i> | |
| </div> | |
| <div class="sidebar-section-content" id="sidebarModels"></div> | |
| </div> | |
| <!-- Languages Section --> | |
| <div class="sidebar-section" id="langsSection"> | |
| <div class="sidebar-section-header" onclick="toggleSection('langsSection')"> | |
| <div class="sidebar-section-title"> | |
| <i class="fa-solid fa-code"></i> | |
| Languages | |
| </div> | |
| <i class="fa-solid fa-chevron-down sidebar-section-chevron"></i> | |
| </div> | |
| <div class="sidebar-section-content"> | |
| <div class="lang-grid" id="sidebarLangs"></div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="sidebar-section" id="actionsSection"> | |
| <div class="sidebar-section-header" onclick="toggleSection('actionsSection')"> | |
| <div class="sidebar-section-title"> | |
| <i class="fa-solid fa-bolt"></i> | |
| Quick Actions | |
| </div> | |
| <i class="fa-solid fa-chevron-down sidebar-section-chevron"></i> | |
| </div> | |
| <div class="sidebar-section-content"> | |
| <div class="quick-actions"> | |
| <div class="quick-action" onclick="handleQuickAction('explain')"> | |
| <i class="fa-solid fa-lightbulb"></i> | |
| Explain Code | |
| <span class="qa-shortcut">Ctrl+E</span> | |
| </div> | |
| <div class="quick-action" onclick="handleQuickAction('refactor')"> | |
| <i class="fa-solid fa-arrows-rotate"></i> | |
| Refactor | |
| <span class="qa-shortcut">Ctrl+R</span> | |
| </div> | |
| <div class="quick-action" onclick="handleQuickAction('debug')"> | |
| <i class="fa-solid fa-bug"></i> | |
| Debug | |
| <span class="qa-shortcut">Ctrl+D</span> | |
| </div> | |
| <div class="quick-action" onclick="handleQuickAction('optimize')"> | |
| <i class="fa-solid fa-gauge-high"></i> | |
| Optimize | |
| <span class="qa-shortcut">Ctrl+O</span> | |
| </div> | |
| <div class="quick-action" onclick="handleQuickAction('document')"> | |
| <i class="fa-solid fa-file-lines"></i> | |
| Document | |
| <span class="qa-shortcut">Ctrl+Shift+D</span> | |
| </div> | |
| <div class="quick-action" onclick="handleQuickAction('test')"> | |
| <i class="fa-solid fa-flask"></i> | |
| Generate Tests | |
| <span class="qa-shortcut">Ctrl+T</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor Area --> | |
| <div class="editor-area"> | |
| <!-- Prompt Bar --> | |
| <div class="prompt-bar"> | |
| <div class="prompt-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></div> | |
| <div class="prompt-input-wrap"> | |
| <textarea class="prompt-input" id="promptInput" rows="1" placeholder="Describe what you want to generate... (e.g., 'Create a React hook for fetching data with caching')"></textarea> | |
| </div> | |
| <button class="prompt-send" id="promptSendBtn" title="Send"> | |
| <i class="fa-solid fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="tabbar" id="tabbar"> | |
| <div class="tab active" data-tab="main"> | |
| <i class="fa-brands fa-js tab-icon" id="tabIcon" style="color:var(--yellow);"></i> | |
| <span id="tabName">index.js</span> | |
| <span class="tab-close" onclick="event.stopPropagation();"><i class="fa-solid fa-xmark"></i></span> | |
| </div> | |
| </div> | |
| <!-- Editor --> | |
| <div class="editor-container"> | |
| <div class="line-numbers" id="lineNumbers"></div> | |
| <textarea class="code-editor" id="codeEditor" spellcheck="false"></textarea> | |
| <div class="minimap"> | |
| <div class="minimap-content" id="minimapContent"></div> | |
| <div class="minimap-viewport" id="minimapViewport"></div> | |
| </div> | |
| </div> | |
| <!-- Bottom Panel --> | |
| <div class="panel-area" id="panelArea"> | |
| <div class="panel-tabs"> | |
| <div class="panel-tab active" data-panel="terminal">Terminal</div> | |
| <div class="panel-tab" data-panel="output">Output</div> | |
| <div class="panel-tab" data-panel="problems">Problems <span class="badge">2</span></div> | |
| <div class="panel-actions"> | |
| <button onclick="document.getElementById('panelArea').classList.add('hidden')"><i class="fa-solid fa-xmark"></i></button> | |
| </div> | |
| </div> | |
| <div class="terminal" id="terminal"> | |
| <div class="terminal-line"> | |
| <span class="terminal-prompt">~<span class="terminal-path">/my-project</span>$</span> | |
| <span class="terminal-cmd">npm run dev</span> | |
| </div> | |
| <div class="terminal-line"><span class="terminal-output"> VITE v5.0.12 ready in 342 ms</span></div> | |
| <div class="terminal-line"><span class="terminal-output"> ➜ Local: http://localhost:5173/</span></div> | |
| <div class="terminal-line"><span class="terminal-output"> ➜ Network: http://192.168.1.42:5173/</span></div> | |
| <div class="terminal-line"><span class="terminal-info"> ready in 342ms</span></div> | |
| <div class="terminal-input-line"> | |
| <span class="terminal-prompt">~<span class="terminal-path">/my-project</span>$</span> | |
| <input type="text" class="terminal-input" id="terminalInput" placeholder="Type a command..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Bar --> | |
| <div class="statusbar"> | |
| <div class="statusbar-left"> | |
| <div class="status-item"><i class="fa-solid fa-code-branch"></i> main</div> | |
| <div class="status-item"><i class="fa-solid fa-circle-check"></i> 0 errors</div> | |
| <div class="status-item"><i class="fa-solid fa-triangle-exclamation"></i> 2 warnings</div> | |
| </div> | |
| <div class="statusbar-right"> | |
| <div class="status-item" id="statusLang"><i class="fa-brands fa-js"></i> JavaScript</div> | |
| <div class="status-item" id="statusModel"><i class="fa-solid fa-brain"></i> GPT-4o</div> | |
| <div class="status-item">Ln 1, Col 1</div> | |
| <div class="status-item">UTF-8</div> | |
| <div class="status-item">Spaces: 2</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Language Dropdown --> | |
| <div class="dropdown-overlay" id="langDropdownOverlay"></div> | |
| <div class="dropdown-panel" id="langDropdown" style="left:120px;width:320px;"> | |
| <div class="dropdown-search"> | |
| <div class="dropdown-search-wrap"> | |
| <i class="fa-solid fa-magnifying-glass"></i> | |
| <input type="text" placeholder="Search languages..." id="langSearchInput"> | |
| </div> | |
| </div> | |
| <div class="dropdown-list" id="langDropdownList"></div> | |
| </div> | |
| <!-- Model Dropdown --> | |
| <div class="dropdown-overlay" id="modelDropdownOverlay"></div> | |
| <div class="dropdown-panel" id="modelDropdown" style="left |