Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AnyCoder Git Clone Interface</title> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;600;800" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-color: #09090b; | |
| --card-bg: #1c1c1e; | |
| --accent: #6366f1; | |
| --accent-glow: rgba(99, 102, 241, 0.4); | |
| --text-main: #ffffff; | |
| --text-muted: #a1a1aa; | |
| --terminal-bg: #000000; | |
| --terminal-green: #22c55e; | |
| --terminal-yellow: #f59e0b; | |
| --border: #2f2f32; | |
| --font-ui: 'Inter', sans-serif; | |
| --font-code: 'Fira Code', monospace; | |
| } | |
| * { | |
| box-sizing: box-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| font-family: var(--font-ui); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| background-image: | |
| radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), | |
| radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), | |
| radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%); | |
| } | |
| /* Header Styling */ | |
| header { | |
| padding: 20px 40px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border); | |
| background: rgba(9, 9, 11, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-weight: 800; | |
| font-size: 1.2rem; | |
| letter-spacing: -0.5px; | |
| } | |
| .brand i { | |
| color: var(--accent); | |
| } | |
| .anycoder-link { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 8px 16px; | |
| border-radius: 6px; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border); | |
| } | |
| .anycoder-link:hover { | |
| background: var(--accent); | |
| color: white; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 15px var(--accent-glow); | |
| } | |
| /* Main Layout */ | |
| main { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| padding: 40px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| @media (max-width: 900px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| padding: 20px; | |
| } | |
| } | |
| /* Input Section */ | |
| .control-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .input-group { | |
| background: var(--card-bg); | |
| padding: 24px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.2); | |
| } | |
| .input-label { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| .url-input-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .url-input { | |
| width: 100%; | |
| background: #000; | |
| border: 1px solid var(--border); | |
| color: var(--terminal-green); | |
| padding: 15px 20px; | |
| padding-left: 40px; | |
| font-family: var(--font-code); | |
| font-size: 1rem; | |
| border-radius: 8px; | |
| outline: none; | |
| transition: border 0.3s; | |
| } | |
| .url-input:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 10px var(--accent-glow); | |
| } | |
| .prompt-icon { | |
| position: absolute; | |
| left: 15px; | |
| color: var(--accent); | |
| font-weight: bold; | |
| } | |
| .action-btn { | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 12px 24px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| width: 100%; | |
| margin-top: 15px; | |
| } | |
| .action-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px var(--accent-glow); | |
| } | |
| .action-btn:active { | |
| transform: translateY(0); | |
| } | |
| .options-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .option-card { | |
| background: rgba(255,255,255, 0.03); | |
| padding: 15px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .option-card:hover { | |
| background: rgba(255,255,255, 0.08); | |
| } | |
| .option-card.selected { | |
| border-color: var(--accent); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .checkbox-fake { | |
| width: 18px; | |
| height: 18px; | |
| border: 2px solid var(--text-muted); | |
| border-radius: 4px; | |
| position: relative; | |
| } | |
| .option-card.selected .checkbox-fake { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| } | |
| .option-card.selected .checkbox-fake::after { | |
| content: '✓'; | |
| color: white; | |
| font-size: 12px; | |
| position: absolute; | |
| center: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Terminal Output Section */ | |
| .terminal-window { | |
| background: #0d0d0d; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| height: 500px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| position: relative; | |
| } | |
| .terminal-header { | |
| background: #1a1a1a; | |
| padding: 10px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .terminal-tabs { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .tab { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .tab.red { background: #ef4444; } | |
| .tab.yellow { background: #f59e0b; } | |
| .tab.green { background: #22c55e; } | |
| .terminal-title { | |
| font-family: var(--font-code); | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .terminal-body { | |
| padding: 20px; | |
| font-family: var(--font-code); | |
| font-size: 0.9rem; | |
| color: var(--text-main); | |
| overflow-y: auto; | |
| flex: 1; | |
| line-height: 1.6; | |
| } | |
| .log-line { | |
| opacity: 0; | |
| animation: fadeIn 0.3s forwards; | |
| } | |
| .log-success { color: var(--terminal-green); } | |
| .log-info { color: var(--text-muted); } | |
| .log-warning { color: var(--terminal-yellow); } | |
| @keyframes fadeIn { | |
| to { opacity: 1; } | |
| } | |
| /* File Tree Visualization (Hidden initially) */ | |
| .file-tree { | |
| margin-top: 20px; | |
| border-top: 1px solid var(--border); | |
| padding-top: 20px; | |
| display: none; /* Toggled via JS */ | |
| } | |
| .file-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px 0; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .file-item i { margin-right: 8px; width: 16px; text-align: center; } | |
| .file-item.folder { color: var(--text-main); font-weight: 600; } | |
| .indent-1 { margin-left: 16px; } | |
| .indent-2 { margin-left: 32px; } | |
| /* Progress Bar */ | |
| .progress-container { | |
| margin-top: 15px; | |
| background: #333; | |
| height: 6px; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| display: none; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| width: 0%; | |
| background: var(--accent); | |
| transition: width 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand"> | |
| <i class="fa-brands fa-git-alt"></i> | |
| <span>AnyCoder Clone</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link"> | |
| Built with anycoder <i class="fa-solid fa-external-link-alt" style="margin-left: 5px;"></i> | |
| </a> | |
| </header> | |
| <main> | |
| <!-- Left Panel: Controls --> | |
| <div class="control-panel"> | |
| <div class="input-group"> | |
| <label class="input-label">Repository URL</label> | |
| <div class="url-input-wrapper"> | |
| <span class="prompt-icon">$</span> | |
| <input type="text" class="url-input" id="repoUrl" value="https://huggingface.co/spaces/sky-meilin/anycoder-e9eabbf7" placeholder="git@github.com:user/repo.git"> | |
| </div> | |
| <button class="action-btn" onclick="startClone()"> | |
| <i class="fa-solid fa-download"></i> Clone Repository | |
| </button> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Clone Options</label> | |
| <div class="options-grid"> | |
| <div class="option-card" onclick="toggleOption(this)"> | |
| <div class="checkbox-fake"></div> | |
| <span>Recursive</span> | |
| </div> | |
| <div class="option-card" onclick="toggleOption(this)"> | |
| <div class="checkbox-fake"></div> | |
| <span>Shallow (depth=1)</span> | |
| </div> | |
| <div class="option-card" onclick="toggleOption(this)"> | |
| <div class="checkbox-fake"></div> | |
| <span>Verbose</span> | |
| </div> | |
| <div class="option-card" onclick="toggleOption(this)"> | |
| <div class="checkbox-fake"></div> | |
| <span>Single Branch</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel: Terminal & Output --> | |
| <div class="terminal-window"> | |
| <div class="terminal-header"> | |
| <div class="terminal-tabs"> | |
| <div class="tab red"></div> | |
| <div class="tab yellow"></div> | |
| <div class="tab green"></div> | |
| </div> | |
| <div class="terminal-title">bash — git clone</div> | |
| <i class="fa-solid fa-expand" style="color: var(--text-muted); cursor: pointer;"></i> | |
| </div> | |
| <div class="terminal-body" id="terminalOutput"> | |
| <div class="log-line log-info">Ready to clone...</div> | |
| <div class="log-line log-info">Waiting for input...</div> | |
| </div> | |
| <div class="progress-container" id="progressContainer"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| </div> | |
| <div class="file-tree" id="fileTree"> | |
| <!-- Dynamic Content --> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // UI Logic | |
| function toggleOption(element) { | |
| element.classList.toggle('selected'); | |
| } | |
| function startClone() { | |
| const url = document.getElementById('repoUrl').value; | |
| const terminal = document.getElementById('terminalOutput'); | |
| const progressContainer = document.getElementById('progressContainer'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const fileTree = document.getElementById('fileTree'); | |
| // Reset UI | |
| terminal.innerHTML = ''; | |
| fileTree.style.display = 'none'; | |
| fileTree.innerHTML = ''; | |
| progressContainer.style.display = 'block'; | |
| progressBar.style.width = '0%'; | |
| // Simulation Sequence | |
| const steps = [ | |
| { text: `Cloning into '${url.split('/').pop()}'...`, type: 'info', delay: 500 }, | |
| { text: 'remote: Enumerating objects: 142, done.', type: 'info', delay: 1000 }, | |
| { text: 'remote: Counting objects: 100% (142/142), done.', type: 'success', delay: 1500 }, | |
| { text: 'remote: Compressing objects: 100% (89/89), done.', type: 'success', delay: 2000 }, | |
| { text: 'remote: Total 142 (delta 12), reused 130 (delta 8)', type: 'info', delay: 2500 }, | |
| { text: 'Receiving objects: 100% (142/142), 4.25 MiB | 2.50 Mi/s, done.', type: 'success', delay: 3500 }, | |
| { text: 'Resolving deltas: 100% (45/45), done.', type: 'success', delay: 4000 }, | |
| { text: 'Checking connectivity... done.', type: 'info', delay: 4500 }, | |
| { text: 'Done.', type: 'success', delay: 5000 } | |
| ]; | |
| let totalTime = 0; | |
| steps.forEach((step, index) => { | |
| setTimeout(() => { | |
| const line = document.createElement('div'); | |
| line.className = `log-line log-${step.type}`; | |
| line.innerText = step.text; | |
| terminal.appendChild(line); | |
| // Update Progress Bar | |
| const percent = ((index + 1) / steps.length) * 100; | |
| progressBar.style.width = `${percent}%`; | |
| if (index === steps.length - 1) { | |
| setTimeout(() => { | |
| showFileTree(); | |
| progressContainer.style.display = 'none'; | |
| }, 500); | |
| } | |
| }, step.delay); | |
| totalTime = step.delay; | |
| }); | |
| } | |
| function showFileTree() { | |
| const fileTree = document.getElementById('fileTree'); | |
| fileTree.style.display = 'block'; | |
| const files = [ | |
| { name: 'README.md', icon: 'fa-file-code', type: 'file' }, | |
| { name: 'app.py', icon: 'fa-file-code', type: 'file' }, | |
| { name: 'requirements.txt', icon: 'fa-file', type: 'file' }, | |
| { name: 'assets', icon: 'fa-folder', type: 'folder', children: [ | |
| { name: 'logo.png', icon: 'fa-file-image', type: 'file' }, | |
| { name: 'style.css', icon: 'fa-file-code', type: 'file' } | |
| ]}, | |
| { name: 'utils', icon: 'fa-folder', type: 'folder', children: [ | |
| { name: 'helpers.js', icon: 'fa-file-code', type: 'file' } | |
| ]} | |
| ]; | |
| let html = ''; | |
| files.forEach(item => { | |
| if(item.type === 'folder') { | |
| html += `<div class="file-item folder"><i class="fa-solid ${item.icon}"></i> ${item.name}</div>`; | |
| if(item.children) { | |
| item.children.forEach(child => { | |
| html += `<div class="file-item indent-1"><i class="fa-solid ${child.icon}"></i> ${child.name}</div>`; | |
| }); | |
| } | |
| } else { | |
| html += `<div class="file-item"><i class="fa-solid ${item.icon}"></i> ${item.name}</div>`; | |
| } | |
| }); | |
| fileTree.innerHTML = html; | |
| } | |
| </script> | |
| </body> | |
| </html> |