Spaces:

XXXMARK
/

anycoder-dabeebd8

Running

App Files Files Community

XXXMARK commited on Dec 10, 2025

Commit

81f7d3f

verified ·

1 Parent(s): 614dd38

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +532 -18

index.html CHANGED Viewed

@@ -1,19 +1,533 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Terminal with Line Numbers</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6c5ce7;
+            --secondary-color: #a29bfe;
+            --background-color: #1e1e1e;
+            --text-color: #e8e8e8;
+            --line-number-color: #666;
+            --highlight-color: rgba(108, 92, 231, 0.2);
+            --border-color: #333;
+            --active-tab-color: #2d2d2d;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Courier New', monospace;
+        }
+        body {
+            background-color: #121212;
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        header {
+            background-color: var(--background-color);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--primary-color);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .logo i {
+            color: var(--secondary-color);
+        }
+        .header-right {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .built-with {
+            font-size: 0.8rem;
+            color: var(--line-number-color);
+            text-decoration: none;
+        }
+        .built-with:hover {
+            color: var(--secondary-color);
+        }
+        .theme-toggle {
+            background: none;
+            border: none;
+            color: var(--text-color);
+            cursor: pointer;
+            font-size: 1.2rem;
+        }
+        .container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+        }
+        .sidebar {
+            width: 250px;
+            background-color: var(--background-color);
+            border-right: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+        }
+        .file-explorer {
+            padding: 1rem;
+            flex: 1;
+            overflow-y: auto;
+        }
+        .file-explorer-title {
+            font-size: 0.9rem;
+            color: var(--line-number-color);
+            margin-bottom: 0.5rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .file-item {
+            padding: 0.5rem;
+            border-radius: 4px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .file-item:hover {
+            background-color: var(--active-tab-color);
+        }
+        .file-item.active {
+            background-color: var(--highlight-color);
+        }
+        .file-item i {
+            color: var(--secondary-color);
+            width: 1rem;
+        }
+        .editor-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .editor-tabs {
+            display: flex;
+            background-color: var(--background-color);
+            border-bottom: 1px solid var(--border-color);
+            padding-left: 1rem;
+        }
+        .tab {
+            padding: 0.75rem 1.5rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            border-right: 1px solid var(--border-color);
+        }
+        .tab:hover {
+            background-color: var(--active-tab-color);
+        }
+        .tab.active {
+            background-color: var(--active-tab-color);
+            border-bottom: 2px solid var(--primary-color);
+        }
+        .tab-close {
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        .tab:hover .tab-close {
+            opacity: 1;
+        }
+        .tab-close:hover {
+            color: #ff5555;
+        }
+        .editor {
+            flex: 1;
+            display: flex;
+            overflow: hidden;
+        }
+        .line-numbers {
+            width: 4rem;
+            background-color: #1e1e1e;
+            color: var(--line-number-color);
+            text-align: right;
+            padding: 0.5rem 1rem;
+            font-size: 0.9rem;
+            user-select: none;
+            border-right: 1px solid var(--border-color);
+            overflow-y: auto;
+            scrollbar-width: thin;
+        }
+        .line-numbers::-webkit-scrollbar {
+            width: 6px;
+        }
+        .line-numbers::-webkit-scrollbar-thumb {
+            background-color: var(--border-color);
+            border-radius: 3px;
+        }
+        .code-area {
+            flex: 1;
+            padding: 0.5rem 1rem;
+            overflow-y: auto;
+            font-size: 0.9rem;
+            line-height: 1.5;
+            tab-size: 4;
+            scrollbar-width: thin;
+        }
+        .code-area::-webkit-scrollbar {
+            width: 8px;
+        }
+        .code-area::-webkit-scrollbar-thumb {
+            background-color: var(--border-color);
+            border-radius: 4px;
+        }
+        .code-area:focus {
+            outline: none;
+        }
+        .line {
+            display: block;
+            white-space: pre;
+        }
+        .line-highlight {
+            background-color: var(--highlight-color);
+        }
+        .status-bar {
+            background-color: var(--background-color);
+            padding: 0.5rem 1rem;
+            font-size: 0.8rem;
+            color: var(--line-number-color);
+            border-top: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+        }
+        @media (max-width: 768px) {
+            .sidebar {
+                width: 60px;
+            }
+            .file-explorer-title {
+                display: none;
+            }
+            .file-item span {
+                display: none;
+            }
+            .line-numbers {
+                width: 3rem;
+                padding: 0.5rem 0.5rem;
+            }
+            header {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="#" class="logo">
+            <i class="fas fa-code"></i>
+            <span>CodeTerminal</span>
+        </a>
+        <div class="header-right">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>
+            <button class="theme-toggle" id="themeToggle">
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+    </header>
+    <div class="container">
+        <div class="sidebar">
+            <div class="file-explorer">
+                <div class="file-explorer-title">Explorer</div>
+                <div class="file-item active" data-file="index.html">
+                    <i class="fas fa-file-code"></i>
+                    <span>index.html</span>
+                </div>
+                <div class="file-item" data-file="style.css">
+                    <i class="fas fa-file-code"></i>
+                    <span>style.css</span>
+                </div>
+                <div class="file-item" data-file="script.js">
+                    <i class="fas fa-file-code"></i>
+                    <span>script.js</span>
+                </div>
+                <div class="file-explorer-title">Folders</div>
+                <div class="file-item">
+                    <i class="fas fa-folder"></i>
+                    <span>src</span>
+                </div>
+                <div class="file-item">
+                    <i class="fas fa-folder"></i>
+                    <span>components</span>
+                </div>
+            </div>
+        </div>
+        <div class="editor-container">
+            <div class="editor-tabs">
+                <div class="tab active" data-file="index.html">
+                    <i class="fas fa-file-code"></i>
+                    <span>index.html</span>
+                    <i class="fas fa-times tab-close"></i>
+                </div>
+            </div>
+            <div class="editor">
+                <div class="line-numbers" id="lineNumbers"></div>
+                <div class="code-area" id="codeArea" contenteditable="true" spellcheck="false">
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Hello World!</h1>
+    <p>This is a sample HTML file.</p>
+</body>
 </html>
+                </div>
+            </div>
+            <div class="status-bar">
+                <span>Line: 1, Column: 1</span>
+                <span>UTF-8 | LF | HTML</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const codeArea = document.getElementById('codeArea');
+            const lineNumbers = document.getElementById('lineNumbers');
+            const themeToggle = document.getElementById('themeToggle');
+            const fileItems = document.querySelectorAll('.file-item');
+            const tabsContainer = document.querySelector('.editor-tabs');
+            // Initialize line numbers
+            updateLineNumbers();
+            // Sync scrolling between code area and line numbers
+            codeArea.addEventListener('scroll', function() {
+                lineNumbers.scrollTop = codeArea.scrollTop;
+            });
+            // Update line numbers when content changes
+            codeArea.addEventListener('input', function() {
+                updateLineNumbers();
+                updateStatusBar();
+            });
+            // Update line numbers when window is resized
+            window.addEventListener('resize', updateLineNumbers);
+            // Handle keyboard events
+            codeArea.addEventListener('keydown', function(e) {
+                // Handle Tab key
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                    const start = codeArea.selectionStart;
+                    const end = codeArea.selectionEnd;
+                    // Insert tab character
+                    codeArea.value = codeArea.value.substring(0, start) + '\t' + codeArea.value.substring(end);
+                    codeArea.selectionStart = codeArea.selectionEnd = start + 1;
+                }
+                // Update status bar on any key press
+                setTimeout(updateStatusBar, 0);
+            });
+            // File navigation
+            fileItems.forEach(item => {
+                item.addEventListener('click', function() {
+                    fileItems.forEach(i => i.classList.remove('active'));
+                    this.classList.add('active');
+                    // Check if tab already exists
+                    const fileName = this.dataset.file;
+                    const existingTab = document.querySelector(`.tab[data-file="${fileName}"]`);
+                    if (!existingTab) {
+                        // Create new tab
+                        const newTab = document.createElement('div');
+                        newTab.className = 'tab active';
+                        newTab.dataset.file = fileName;
+                        newTab.innerHTML = `
+                            <i class="fas fa-file-code"></i>
+                            <span>${fileName}</span>
+                            <i class="fas fa-times tab-close"></i>
+                        `;
+                        // Add close event listener
+                        newTab.querySelector('.tab-close').addEventListener('click', function(e) {
+                            e.stopPropagation();
+                            closeTab(newTab);
+                        });
+                        // Add click event listener
+                        newTab.addEventListener('click', function() {
+                            activateTab(this);
+                        });
+                        tabsContainer.appendChild(newTab);
+                        // Deactivate other tabs
+                        document.querySelectorAll('.tab').forEach(tab => {
+                            if (tab !== newTab) {
+                                tab.classList.remove('active');
+                            }
+                        });
+                    } else {
+                        activateTab(existingTab);
+                    }
+                });
+            });
+            // Tab close functionality
+            function closeTab(tab) {
+                if (document.querySelectorAll('.tab').length <= 1) {
+                    // Don't allow closing the last tab
+                    return;
+                }
+                tab.remove();
+                // Activate the first remaining tab
+                const remainingTabs = document.querySelectorAll('.tab');
+                if (remainingTabs.length > 0) {
+                    activateTab(remainingTabs[0]);
+                }
+            }
+            // Activate tab
+            function activateTab(tab) {
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+            }
+            // Theme toggle
+            themeToggle.addEventListener('click', function() {
+                document.body.classList.toggle('light-theme');
+                const icon = this.querySelector('i');
+                if (document.body.classList.contains('light-theme')) {
+                    icon.className = 'fas fa-sun';
+                } else {
+                    icon.className = 'fas fa-moon';
+                }
+            });
+            // Update line numbers
+            function updateLineNumbers() {
+                const lines = codeArea.value.split('\n');
+                const lineCount = lines.length;
+                let lineNumbersHTML = '';
+                for (let i = 1; i <= lineCount; i++) {
+                    lineNumbersHTML += `<div>${i}</div>`;
+                }
+                lineNumbers.innerHTML = lineNumbersHTML;
+                // Highlight current line
+                highlightCurrentLine();
+            }
+            // Highlight current line
+            function highlightCurrentLine() {
+                const lines = codeArea.value.split('\n');
+                let lineNumber = 0;
+                let charCount = 0;
+                // Find which line the cursor is on
+                for (let i = 0; i < lines.length; i++) {
+                    charCount += lines[i].length + 1; // +1 for newline character
+                    if (charCount > codeArea.selectionStart) {
+                        lineNumber = i;
+                        break;
+                    }
+                }
+                // Remove previous highlights
+                document.querySelectorAll('.line-highlight').forEach(el => {
+                    el.classList.remove('line-highlight');
+                });
+                // Add highlight to current line
+                if (lineNumbers.children[lineNumber]) {
+                    lineNumbers.children[lineNumber].classList.add('line-highlight');
+                }
+            }
+            // Update status bar
+            function updateStatusBar() {
+                const statusBar = document.querySelector('.status-bar');
+                const lines = codeArea.value.split('\n');
+                let lineNumber = 1;
+                let columnNumber = 1;
+                let charCount = 0;
+                // Find line and column numbers
+                for (let i = 0; i < lines.length; i++) {
+                    charCount += lines[i].length + 1; // +1 for newline character
+                    if (charCount > codeArea.selectionStart) {
+                        lineNumber = i + 1;
+                        columnNumber = codeArea.selectionStart - (charCount - lines[i].length - 1) + 1;
+                        break;
+                    }
+                }
+                statusBar.children[0].textContent = `Line: ${lineNumber}, Column: ${columnNumber}`;
+            }
+            // Initialize status bar
+            updateStatusBar();
+        });
+    </script>
+</body>
+</html>