Spaces:

hadidadi
/

anycoder-1a206013

Running

App Files Files Community

hadidadi commited on 26 days ago

Commit

18f6a74

verified ·

1 Parent(s): f00a7bb

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1135 -1543

index.html CHANGED Viewed

@@ -1,1564 +1,1156 @@
 <!DOCTYPE html>
 <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: 200px;
-            --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 */
-        .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 20px;
-            background: linear-gradient(135deg, var(--accent-green), #238636);
-            border: none;
-            border-radius: 6px;
-            color: white;
-            font-family: inherit;
-            font-size: 0.9rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .run-btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(63, 185, 80, 0.3);
-        }
-        .run-btn:active {
-            transform: translateY(0);
-        }
-        .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 Layout */
-        .main-container {
-            display: flex;
-            height: calc(100vh - var(--header-height));
-        }
-        /* Sidebar */
-        .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.folder {
-            font-weight: 500;
-        }
-        .tree-item .icon {
-            width: 18px;
-            height: 18px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 0.85rem;
-        }
-        .tree-item .icon.folder-icon {
-            color: var(--accent-orange);
-        }
-        .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-blue);
-        }
-        .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;
-        }
-        .tree-children {
-            padding-right: 16px;
-        }
-        .tree-children.collapsed {
-            display: none;
-        }
-        /* Editor Area */
-        .editor-area {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-        }
-        /* Tabs */
-        .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);
-        }
-        .tab.modified .name::after {
-            content: '●';
-            margin-right: 4px;
-            color: var(--accent-orange);
-        }
-        /* Editor */
-        .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 !important;
-        }
-        .ace_gutter {
-            background: var(--bg-secondary) !important;
-            color: var(--text-muted) !important;
-        }
-        .ace_gutter-active-line {
-            background: var(--bg-tertiary) !important;
-        }
-        /* Preview Panel */
-        .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 */
-        .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;
-        }
-        /* Resize Handle */
-        .resize-handle {
-            position: absolute;
-            background: transparent;
-            z-index: 10;
-        }
-        .resize-handle.horizontal {
-            left: 0;
-            right: 0;
-            height: 4px;
-            cursor: ns-resize;
-            top: -2px;
-        }
-        .resize-handle.vertical {
-            top: 0;
-            bottom: 0;
-            width: 4px;
-            cursor: ew-resize;
-            right: -2px;
-        }
-        .resize-handle:hover {
-            background: var(--accent-blue);
-        }
-        /* Welcome Screen */
-        .welcome-screen {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 40px;
-            text-align: center;
-            background: var(--bg-primary);
-        }
-        .welcome-icon {
-            width: 80px;
-            height: 80px;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 36px;
-            margin-bottom: 24px;
-            animation: pulse 2s ease-in-out infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-        }
-        .welcome-title {
-            font-size: 2rem;
-            font-weight: 700;
-            margin-bottom: 12px;
-        }
-        .welcome-subtitle {
-            color: var(--text-secondary);
-            font-size: 1.1rem;
-            margin-bottom: 32px;
-            max-width: 500px;
-        }
-        .welcome-actions {
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-        .welcome-btn {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px 24px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 0.95rem;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .welcome-btn:hover {
-            background: var(--bg-hover);
-            border-color: var(--accent-blue);
-        }
-        .welcome-btn.primary {
-            background: var(--accent-blue);
-            border-color: var(--accent-blue);
-        }
-        .welcome-btn.primary:hover {
-            background: #4393e6;
-        }
-        /* Modal */
-        .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-input::placeholder {
-            color: var(--text-muted);
-        }
-        .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 */
-        .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 */
-        .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);
-        }
-        /* Status Bar */
-        .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;
-        }
-        /* Loading */
-        .loading-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: var(--bg-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 100;
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.3s;
-        }
-        .loading-overlay.active {
-            opacity: 1;
-            visibility: visible;
-        }
-        .loading-spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid var(--bg-hover);
-            border-top-color: var(--accent-blue);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        /* Responsive */
-        @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%;
-            }
-            .editor-wrapper {
-                flex-direction: column;
-            }
-        }
-        @media (max-width: 768px) {
-            .header-center {
-                display: none;
-            }
-            .project-name {
-                display: none;
-            }
-            .welcome-title {
-                font-size: 1.5rem;
-            }
-            .welcome-subtitle {
-                font-size: 1rem;
-            }
-        }
-        /* Animations */
-        @media (prefers-reduced-motion: no-preference) {
-            .fade-in {
-                animation: fadeIn 0.3s ease;
-            }
-            @keyframes fadeIn {
-                from { opacity: 0; }
-                to { opacity: 1; }
-            }
-        }
-        /* Split View */
-        .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);
-        }
-        /* Search Panel */
-        .search-panel {
-            padding: 12px 16px;
-            background: var(--bg-tertiary);
-            border-bottom: 1px solid var(--border-color);
-            display: none;
-        }
-        .search-panel.active {
-            display: block;
-        }
-        .search-input-wrapper {
-            display: flex;
-            gap: 8px;
-        }
-        .search-input {
-            flex: 1;
-            padding: 8px 12px;
-            background: var(--bg-primary);
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.9rem;
-            outline: none;
-        }
-        .search-input:focus {
-            border-color: var(--accent-blue);
-        }
-        .search-btn {
-            padding: 8px 16px;
-            background: var(--accent-blue);
-            border: none;
-            border-radius: 6px;
-            color: white;
-            font-family: inherit;
-            font-size: 0.85rem;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .search-btn:hover {
-            background: #4393e6;
-        }
-        /* Console Panel */
-        .console-panel {
-            display: none;
-            height: 100%;
-            overflow: auto;
-        }
-        .console-panel.active {
-            display: block;
-        }
-        /* Problems Panel */
-        .problems-panel {
-            display: none;
-            padding: 12px;
-        }
-        .problems-panel.active {
-            display: block;
-        }
-        .problem-item {
-            display: flex;
-            align-items: flex-start;
-            gap: 8px;
-            padding: 8px;
-            border-radius: 4px;
-            margin-bottom: 4px;
-            font-size: 0.85rem;
-        }
-        .problem-item:hover {
-            background: var(--bg-tertiary);
-        }
-        .problem-item.error {
-            color: var(--accent-red);
-        }
-        .problem-item.warning {
-            color: var(--accent-yellow);
-        }
-        /* Git Panel */
-        .git-panel {
-            padding: 16px;
-            display: none;
-        }
-        .git-panel.active {
-            display: block;
-        }
-        .git-status {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 12px;
-            background: var(--bg-tertiary);
-            border-radius: 6px;
-            font-size: 0.85rem;
-            margin-bottom: 12px;
-        }
-        .git-branch {
-            color: var(--accent-green);
-        }
-        .git-commit-input {
-            width: 100%;
-            padding: 10px 12px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 0.9rem;
-            margin-bottom: 12px;
-            resize: none;
-            min-height: 80px;
-        }
-        .git-commit-btn {
-            width: 100%;
-            padding: 10px;
-            background: var(--accent-green);
-            border: none;
-            border-radius: 6px;
-            color: white;
-            font-family: inherit;
-            font-size: 0.9rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .git-commit-btn:hover {
-            background: #2ea043;
-        }
-    </style>
 </head>
 <body>
-    <!-- Header -->
-    <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" 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="shareProject()" title="مشاركة">
-                <i class="fas fa-share-alt"></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>
-    <!-- Main Container -->
-    <div class="main-container">
-        <!-- Sidebar -->
-        <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>
-                    <button class="sidebar-btn" onclick="showNewFolderModal()" title="مجلد جديد">
-                        <i class="fas fa-folder-plus"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="file-tree" id="file-tree">
-                <!-- Files will be rendered here -->
-            </div>
-        </aside>
-        <!-- Editor Area -->
-        <main class="editor-area">
-            <!-- Tabs -->
-            <div class="tabs-container" id="tabs-container">
-                <!-- Tabs will be rendered here -->
-            </div>
-            <!-- Split View -->
-            <div class="split-view">
-                <!-- Editor Pane -->
-                <div class="editor-pane">
-                    <div class="search-panel" id="search-panel">
-                        <div class="search-input-wrapper">
-                            <input type="text" class="search-input" id="search-input" placeholder="بحث...">
-                            <input type="text" class="search-input" id="replace-input" placeholder="استبدال...">
-                            <button class="search-btn" onclick="searchInEditor()">بحث</button>
-                            <button class="search-btn" onclick="replaceInEditor()">استبدال</button>
-                        </div>
-                    </div>
-                    <div class="editor-wrapper">
-                        <div class="editor-container" id="editor-container">
-                            <div id="editor"></div>
-                        </div>
-                    </div>
-                </div>
-                <!-- Preview Pane -->
-                <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 class="resize-handle vertical"></div>
-                    </div>
-                </div>
-            </div>
-            <!-- Terminal Panel -->
-            <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-tab" onclick="switchTerminalTab('problems')">
-                        <i class="fas fa-exclamation-triangle"></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! اكتب 'help' للحصول على المساعدة.</div>
-                    </div>
-                    <div class="terminal-input-line">
-                        <span class="terminal-prompt">$</span>
-                        <input type="text" class="terminal-input" id="terminal-input" placeholder="أدخل الأمر..." autofocus>
-                    </div>
-                </div>
-            </div>
-        </main>
     </div>
-    <!-- Status Bar -->
-    <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>JavaScript</span>
-            </div>
-            <div class="status-item" id="status-position">
-                <span>سطر 1، عمود 1</span>
-            </div>
-            <div class="status-item">
-                <span>UTF-8</span>
             </div>
         </div>
-    </div>
-    <!-- New File Modal -->
-    <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>
-                        <option value="markdown">Markdown (.md)</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>
-    <!-- Context Menu -->
-    <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="duplicateFile()">
-            <i class="fas fa-copy"></i>
-            <span>نسخ</span>
         </div>
-        <div class="context-menu-divider"></div>
-        <div class="context-menu-item" onclick="deleteFile()" style="color: var(--accent-red);">
-            <i class="fas fa-trash"></i>
-            <span>حذف</span>
         </div>
     </div>
-    <!-- Toast Container -->
-    <div class="toast-container" id="toast-container"></div>
-    <script>
-        // Initialize variables first
-        let editor = null;
-        let currentFile = null;
-        let openTabs = [];
-        let fileSystem = {};
-        let selectedContextItem = null;
-        // File System
-        const defaultFiles = {
-            'index.html': {
-                name: 'index.html',
-                type: 'html',
-                content: `<!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta

 <!DOCTYPE html>
 <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 !important;
+    }
+    .ace_gutter {
+      background: var(--bg-secondary) !important;
+      color: var(--text-muted) !important;
+    }
+    .ace_gutter-active-line {
+      background: var(--bg-tertiary) !important;
+    }
+    .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>
+    let editor = null;
+    let currentFile = null;
+    let openTabs = [];
+    let fileSystem = {};
+    let selectedContextItem = null;
+    const defaultFiles = {
+      'index.html': {
+        name: 'index.html',
+        type: 'html',
+        content: `<!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>تطبيقي الأول</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>مرحباً بالعالم!</h1>
+        <p>هذا تطبيقي الأول باستخدام CodeSpace</p>
+        <button id="clickMe">اضغط هنا!</button>
+        <div id="output"></div>
+    </div>
+    <script src="script.js"><\/script>
+</body>
+</html>