Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeSpace - بيئة تطوير متكاملة</title> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-javascript.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-html.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-css.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-python.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-json.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-markdown.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/theme-one_dark.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ext-language_tools.min.js"></script> | |
| <style> | |
| :root { | |
| --bg-primary: #0d1117; | |
| --bg-secondary: #161b22; | |
| --bg-tertiary: #21262d; | |
| --bg-hover: #30363d; | |
| --border-color: #30363d; | |
| --text-primary: #e6edf3; | |
| --text-secondary: #8b949e; | |
| --text-muted: #6e7681; | |
| --accent-blue: #58a6ff; | |
| --accent-green: #3fb950; | |
| --accent-orange: #f0883e; | |
| --accent-purple: #a371f7; | |
| --accent-red: #f85149; | |
| --accent-yellow: #d29922; | |
| --accent-cyan: #39c5cf; | |
| --sidebar-width: 260px; | |
| --panel-height: 180px; | |
| --header-height: 48px; | |
| --tab-height: 36px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .header { | |
| height: var(--header-height); | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| position: relative; | |
| z-index: 100; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| color: var(--text-primary); | |
| } | |
| .logo-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 16px; | |
| } | |
| .project-name { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 12px; | |
| background: var(--bg-tertiary); | |
| border-radius: 6px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .project-name:hover { | |
| background: var(--bg-hover); | |
| } | |
| .project-name input { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: inherit; | |
| width: 120px; | |
| outline: none; | |
| } | |
| .header-center { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .run-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 24px; | |
| background: linear-gradient(135deg, var(--accent-green), #238636); | |
| border: none; | |
| border-radius: 8px; | |
| color: white; | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| box-shadow: 0 2px 8px rgba(63, 185, 80, 0.25); | |
| } | |
| .run-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(63, 185, 80, 0.4); | |
| } | |
| .run-btn:active { | |
| transform: translateY(0); | |
| } | |
| .run-btn.running { | |
| background: linear-gradient(135deg, var(--accent-orange), #da3633); | |
| } | |
| .run-btn i { | |
| transition: transform 0.3s ease; | |
| } | |
| .run-btn:hover i { | |
| transform: scale(1.1); | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .header-btn { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: none; | |
| border-radius: 6px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .header-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .credit-link { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| transition: all 0.2s; | |
| } | |
| .credit-link:hover { | |
| color: var(--accent-blue); | |
| background: var(--bg-tertiary); | |
| } | |
| .main-container { | |
| display: flex; | |
| height: calc(100vh - var(--header-height)); | |
| } | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-secondary); | |
| border-left: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| transition: width 0.3s ease; | |
| overflow: hidden; | |
| } | |
| .sidebar.collapsed { | |
| width: 48px; | |
| } | |
| .sidebar-header { | |
| padding: 12px 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border-bottom: 1px solid var(--border-color); | |
| min-height: 44px; | |
| } | |
| .sidebar-title { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: var(--text-secondary); | |
| letter-spacing: 0.5px; | |
| } | |
| .sidebar-actions { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .sidebar-btn { | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: none; | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 0.85rem; | |
| } | |
| .sidebar-btn:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .file-tree { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 8px 0; | |
| } | |
| .file-tree::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .file-tree::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .file-tree::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 4px; | |
| } | |
| .tree-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 16px; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| position: relative; | |
| } | |
| .tree-item:hover { | |
| background: var(--bg-tertiary); | |
| } | |
| .tree-item.active { | |
| background: var(--bg-tertiary); | |
| } | |
| .tree-item.active::before { | |
| content: ''; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: var(--accent-blue); | |
| } | |
| .tree-item .icon { | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.85rem; | |
| } | |
| .tree-item .icon.html-icon { color: var(--accent-orange); } | |
| .tree-item .icon.css-icon { color: var(--accent-blue); } | |
| .tree-item .icon.js-icon { color: var(--accent-yellow); } | |
| .tree-item .icon.py-icon { color: var(--accent-cyan); } | |
| .tree-item .icon.json-icon { color: var(--accent-yellow); } | |
| .tree-item .icon.md-icon { color: var(--text-secondary); } | |
| .tree-item .name { | |
| font-size: 0.9rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .editor-area { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| .tabs-container { | |
| display: flex; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-color); | |
| height: var(--tab-height); | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| } | |
| .tabs-container::-webkit-scrollbar { | |
| height: 4px; | |
| } | |
| .tabs-container::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 2px; | |
| } | |
| .tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 0 16px; | |
| height: 100%; | |
| background: transparent; | |
| border: none; | |
| border-left: 1px solid var(--border-color); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| white-space: nowrap; | |
| font-family: inherit; | |
| font-size: 0.85rem; | |
| position: relative; | |
| } | |
| .tab:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .tab.active { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--accent-blue); | |
| } | |
| .tab .close-btn { | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 4px; | |
| opacity: 0; | |
| transition: all 0.15s; | |
| } | |
| .tab:hover .close-btn { | |
| opacity: 1; | |
| } | |
| .tab .close-btn:hover { | |
| background: var(--bg-hover); | |
| } | |
| .split-view { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| } | |
| .editor-pane { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| } | |
| .editor-pane:first-child { | |
| border-left: 1px solid var(--border-color); | |
| } | |
| .editor-wrapper { | |
| flex: 1; | |
| display: flex; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .editor-container { | |
| flex: 1; | |
| position: relative; | |
| } | |
| #editor { | |
| width: 100%; | |
| height: 100%; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| } | |
| .ace_editor { | |
| font-family: 'JetBrains Mono', monospace ; | |
| } | |
| .ace_gutter { | |
| background: var(--bg-secondary) ; | |
| color: var(--text-muted) ; | |
| } | |
| .ace_gutter-active-line { | |
| background: var(--bg-tertiary) ; | |
| } | |
| .preview-panel { | |
| width: 50%; | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--bg-primary); | |
| } | |
| .preview-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 16px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-color); | |
| min-height: 40px; | |
| } | |
| .preview-title { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .preview-url { | |
| flex: 1; | |
| margin: 0 16px; | |
| padding: 4px 12px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px; | |
| color: var(--text-secondary); | |
| font-size: 0.8rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| direction: ltr; | |
| text-align: left; | |
| } | |
| .preview-actions { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .preview-frame-container { | |
| flex: 1; | |
| position: relative; | |
| background: white; | |
| } | |
| #preview-frame { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| background: white; | |
| } | |
| .terminal-panel { | |
| height: var(--panel-height); | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| transition: height 0.2s ease; | |
| } | |
| .terminal-panel.collapsed { | |
| height: 36px; | |
| } | |
| .terminal-header { | |
| display: flex; | |
| align-items: center; | |
| padding: 0 16px; | |
| height: 36px; | |
| background: var(--bg-tertiary); | |
| border-bottom: 1px solid var(--border-color); | |
| gap: 8px; | |
| } | |
| .terminal-tab { | |
| padding: 6px 12px; | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| border-radius: 4px; | |
| transition: all 0.15s; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .terminal-tab:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .terminal-tab.active { | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| } | |
| .terminal-actions { | |
| margin-right: auto; | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .terminal-content { | |
| flex: 1; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .terminal-output { | |
| width: 100%; | |
| height: 100%; | |
| background: var(--bg-primary); | |
| padding: 12px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| overflow-y: auto; | |
| direction: ltr; | |
| text-align: left; | |
| } | |
| .terminal-output::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .terminal-output::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 4px; | |
| } | |
| .terminal-line { | |
| margin-bottom: 4px; | |
| } | |
| .terminal-line.command { color: var(--accent-cyan); } | |
| .terminal-line.output { color: var(--text-secondary); } | |
| .terminal-line.error { color: var(--accent-red); } | |
| .terminal-line.success { color: var(--accent-green); } | |
| .terminal-line.info { color: var(--accent-blue); } | |
| .terminal-input-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .terminal-prompt { | |
| color: var(--accent-green); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| } | |
| .terminal-input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| outline: none; | |
| direction: ltr; | |
| text-align: left; | |
| } | |
| .status-bar { | |
| height: 24px; | |
| background: var(--bg-tertiary); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| } | |
| .status-left, .status-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .status-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.2s; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| width: 90%; | |
| max-width: 480px; | |
| transform: scale(0.95); | |
| transition: transform 0.2s; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1); | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .modal-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .modal-close { | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: transparent; | |
| border: none; | |
| border-radius: 6px; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .modal-close:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .modal-body { | |
| padding: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 16px; | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .form-input:focus { | |
| border-color: var(--accent-blue); | |
| } | |
| .form-select { | |
| width: 100%; | |
| padding: 10px 14px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| color: var(--text-primary); | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| padding: 16px 20px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 6px; | |
| font-family: inherit; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-hover); | |
| } | |
| .btn-primary { | |
| background: var(--accent-blue); | |
| border: none; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #4393e6; | |
| } | |
| .context-menu { | |
| position: fixed; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 6px 0; | |
| min-width: 180px; | |
| z-index: 1001; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: scale(0.95); | |
| transition: all 0.15s; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| } | |
| .context-menu.active { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: scale(1); | |
| } | |
| .context-menu-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px 16px; | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .context-menu-item:hover { | |
| background: var(--bg-tertiary); | |
| } | |
| .context-menu-item i { | |
| width: 16px; | |
| color: var(--text-secondary); | |
| } | |
| .context-menu-divider { | |
| height: 1px; | |
| background: var(--border-color); | |
| margin: 6px 0; | |
| } | |
| .toast-container { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| z-index: 1002; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .toast { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .toast.success { border-color: var(--accent-green); } | |
| .toast.error { border-color: var(--accent-red); } | |
| .toast.info { border-color: var(--accent-blue); } | |
| .toast-icon { font-size: 1.1rem; } | |
| .toast.success .toast-icon { color: var(--accent-green); } | |
| .toast.error .toast-icon { color: var(--accent-red); } | |
| .toast.info .toast-icon { color: var(--accent-blue); } | |
| .console-panel, .problems-panel { | |
| display: none; | |
| height: 100%; | |
| overflow: auto; | |
| background: var(--bg-primary); | |
| padding: 12px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 13px; | |
| } | |
| .console-panel.active, .problems-panel.active { | |
| display: block; | |
| } | |
| @media (max-width: 1024px) { | |
| .sidebar { | |
| position: fixed; | |
| right: 0; | |
| top: var(--header-height); | |
| bottom: 0; | |
| z-index: 50; | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| .preview-panel { | |
| width: 100%; | |
| } | |
| .split-view { | |
| flex-direction: column; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-center { display: none; } | |
| .project-name { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-right"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <span>CodeSpace</span> | |
| </div> | |
| <div class="project-name"> | |
| <i class="fas fa-folder"></i> | |
| <input type="text" id="project-name" value="مشروعي الأول" spellcheck="false"> | |
| </div> | |
| </div> | |
| <div class="header-center"> | |
| <button class="run-btn" id="run-btn" onclick="runCode()"> | |
| <i class="fas fa-play"></i> | |
| <span>تشغيل</span> | |
| </button> | |
| </div> | |
| <div class="header-left"> | |
| <button class="header-btn" onclick="toggleSidebar()" title="إظهار/إخفاء الشريط الجانبي"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <button class="header-btn" onclick="downloadProject()" title="تحميل"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="credit-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <div class="main-container"> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <span class="sidebar-title">الملفات</span> | |
| <div class="sidebar-actions"> | |
| <button class="sidebar-btn" onclick="showNewFileModal()" title="ملف جديد"> | |
| <i class="fas fa-file-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="file-tree" id="file-tree"></div> | |
| </aside> | |
| <main class="editor-area"> | |
| <div class="tabs-container" id="tabs-container"></div> | |
| <div class="split-view"> | |
| <div class="editor-pane"> | |
| <div class="editor-wrapper"> | |
| <div class="editor-container" id="editor-container"> | |
| <div id="editor"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="editor-pane preview-panel" id="preview-panel"> | |
| <div class="preview-header"> | |
| <span class="preview-title"> | |
| <i class="fas fa-eye"></i> | |
| معاينة مباشرة | |
| </span> | |
| <input type="text" class="preview-url" id="preview-url" value="localhost:3000" readonly> | |
| <div class="preview-actions"> | |
| <button class="header-btn" onclick="refreshPreview()" title="تحديث"> | |
| <i class="fas fa-sync-alt"></i> | |
| </button> | |
| <button class="header-btn" onclick="openPreviewInNewTab()" title="فتح في نافذة جديدة"> | |
| <i class="fas fa-external-link-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="preview-frame-container"> | |
| <iframe id="preview-frame" sandbox="allow-scripts allow-same-origin"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="terminal-panel" id="terminal-panel"> | |
| <div class="terminal-header"> | |
| <div class="terminal-tab active" onclick="switchTerminalTab('terminal')"> | |
| <i class="fas fa-terminal"></i> | |
| الطرفية | |
| </div> | |
| <div class="terminal-tab" onclick="switchTerminalTab('console')"> | |
| <i class="fas fa-bug"></i> | |
| الكونسول | |
| </div> | |
| <div class="terminal-actions"> | |
| <button class="sidebar-btn" onclick="clearTerminal()" title="مسح"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| <button class="sidebar-btn" onclick="toggleTerminal()" title="تصغير/تكبير"> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="terminal-content"> | |
| <div class="terminal-output" id="terminal-output"> | |
| <div class="terminal-line info">مرحباً بك في CodeSpace! اضغط على زر "تشغيل" لتنفيذ الكود.</div> | |
| </div> | |
| <div class="console-panel" id="console-panel"></div> | |
| <div class="problems-panel" id="problems-panel"></div> | |
| <div class="terminal-input-line"> | |
| <span class="terminal-prompt">$</span> | |
| <input type="text" class="terminal-input" id="terminal-input" placeholder="أدخل الأمر..."> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="status-bar"> | |
| <div class="status-left"> | |
| <div class="status-item"> | |
| <i class="fas fa-code-branch"></i> | |
| <span>main</span> | |
| </div> | |
| <div class="status-item" id="status-sync"> | |
| <i class="fas fa-check-circle"></i> | |
| <span>جاهز</span> | |
| </div> | |
| </div> | |
| <div class="status-right"> | |
| <div class="status-item" id="status-language"> | |
| <span>HTML</span> | |
| </div> | |
| <div class="status-item" id="status-position"> | |
| <span>سطر 1، عمود 1</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-overlay" id="new-file-modal"> | |
| <div class="modal"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">ملف جديد</h3> | |
| <button class="modal-close" onclick="closeModal('new-file-modal')"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label class="form-label">اسم الملف</label> | |
| <input type="text" class="form-input" id="new-file-name" placeholder="script.js"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">نوع الملف</label> | |
| <select class="form-select" id="new-file-type"> | |
| <option value="javascript">JavaScript (.js)</option> | |
| <option value="html">HTML (.html)</option> | |
| <option value="css">CSS (.css)</option> | |
| <option value="python">Python (.py)</option> | |
| <option value="json">JSON (.json)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" onclick="closeModal('new-file-modal')">إلغاء</button> | |
| <button class="btn btn-primary" onclick="createNewFile()">إنشاء</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="context-menu" id="context-menu"> | |
| <div class="context-menu-item" onclick="renameFile()"> | |
| <i class="fas fa-edit"></i> | |
| <span>إعادة تسمية</span> | |
| </div> | |
| <div class="context-menu-item" onclick="deleteFile()"> | |
| <i class="fas fa-trash"></i> | |
| <span>حذف</span> | |
| </div> | |
| </div> | |
| <div class="toast-container" id="toast-container"></div> | |
| <script> | |