Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AnyCoder Interface - Advanced Code Generation Platform</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #667eea; | |
| --secondary-color: #764ba2; | |
| --dark-bg: #0f0f23; | |
| --card-bg: #1a1a2e; | |
| --text-primary: #ffffff; | |
| --text-secondary: #a0a0b8; | |
| --accent: #f7b731; | |
| --border-color: #2a2a4e; | |
| --success: #00d2d3; | |
| --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: var(--dark-bg); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Animated background */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(247, 183, 49, 0.05) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Header */ | |
| header { | |
| background: rgba(26, 26, 46, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| animation: slideDown 0.5s ease-out; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .header-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--gradient); | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .brand { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| padding: 0.5rem 0; | |
| } | |
| .nav-link:hover { | |
| color: var(--text-primary); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--gradient); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .built-with { | |
| color: var(--accent); | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid var(--accent); | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .built-with:hover { | |
| background: var(--accent); | |
| color: var(--dark-bg); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(247, 183, 49, 0.3); | |
| } | |
| /* Main content */ | |
| main { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1400px; | |
| margin: 2rem auto; | |
| padding: 0 2rem; | |
| } | |
| /* Hero section */ | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| animation: fadeInUp 0.6s ease-out; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* Controls section */ | |
| .controls { | |
| background: var(--card-bg); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| border: 1px solid var(--border-color); | |
| animation: fadeInUp 0.7s ease-out; | |
| } | |
| .control-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .control-btn { | |
| padding: 0.75rem 1.5rem; | |
| background: var(--gradient); | |
| border: none; | |
| border-radius: 10px; | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .control-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .control-btn:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| .control-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); | |
| } | |
| .control-btn.active { | |
| background: var(--success); | |
| } | |
| /* Iframe container */ | |
| .iframe-container { | |
| background: var(--card-bg); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| animation: fadeInUp 0.8s ease-out; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .iframe-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .iframe-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| background: var(--success); | |
| border-radius: 50%; | |
| animation: blink 2s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .iframe-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .action-btn { | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-color); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .action-btn:hover { | |
| background: var(--gradient); | |
| color: white; | |
| border-color: transparent; | |
| transform: scale(1.1); | |
| } | |
| .iframe-wrapper { | |
| position: relative; | |
| width: 100%; | |
| background: #000; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 450px; | |
| border: none; | |
| display: block; | |
| transition: opacity 0.3s ease; | |
| } | |
| .loading-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(15, 15, 35, 0.95); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .loading-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .loader { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid var(--border-color); | |
| border-top-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Stats section */ | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| animation: fadeInUp 0.9s ease-out; | |
| } | |
| .stat-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary-color); | |
| box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2); | |
| } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| margin-top: 0.5rem; | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 768px) { | |
| .header-container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .control-buttons { | |
| justify-content: stretch; | |
| } | |
| .control-btn { | |
| flex: 1; | |
| min-width: 120px; | |
| } | |
| iframe { | |
| height: 350px; | |
| } | |
| .nav-links { | |
| flex-direction: column; | |
| width: 100%; | |
| gap: 1rem; | |
| } | |
| } | |
| /* Footer */ | |
| footer { | |
| margin-top: 4rem; | |
| padding: 2rem 0; | |
| border-top: 1px solid var(--border-color); | |
| text-align: center; | |
| color: var(--text-secondary); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-container"> | |
| <div class="logo-section"> | |
| <div class="logo">AC</div> | |
| <div class="brand">AnyCoder Platform</div> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#" class="nav-link">Features</a> | |
| <a href="#" class="nav-link">Documentation</a> | |
| <a href="#" class="nav-link">Examples</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <h1>Advanced Code Generation Interface</h1> | |
| <p>Experience the power of AI-driven code generation with our cutting-edge AnyCoder platform. Transform your ideas into functional code instantly.</p> | |
| </section> | |
| <section class="controls"> | |
| <div class="control-buttons"> | |
| <button class="control-btn active" onclick="toggleFullscreen()"> | |
| <span id="fullscreenText">Fullscreen Mode</span> | |
| </button> | |
| <button class="control-btn" onclick="refreshIframe()"> | |
| Refresh Interface | |
| </button> | |
| <button class="control-btn" onclick="toggleDarkMode()"> | |
| Toggle Theme | |
| </button> | |
| <button class="control-btn" onclick="shareInterface()"> | |
| Share | |
| </button> | |
| </div> | |
| </section> | |
| <section class="iframe-container"> | |
| <div class="iframe-header"> | |
| <div class="iframe-title"> | |
| <div class="status-indicator"></div> | |
| <span>AnyCoder Live Interface</span> | |
| </div> | |
| <div class="iframe-actions"> | |
| <button class="action-btn" onclick="minimizeIframe()" title="Minimize">−</button> | |
| <button class="action-btn" onclick="refreshIframe()" title="Refresh">↻</button> | |
| <button class="action-btn" onclick="toggleFullscreen()" title="Fullscreen">⛶</button> | |
| </div> | |
| </div> | |
| <div class="iframe-wrapper" id="iframeWrapper"> | |
| <iframe | |
| src="https://lee6x-anycoder-c8c47c6d.static.hf.space" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| id="mainIframe" | |
| onload="hideLoading()" | |
| ></iframe> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loader"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="stats"> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="requestCount">0</div> | |
| <div class="stat-label">Code Requests</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="linesGenerated">0</div> | |
| <div class="stat-label">Lines Generated</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="timeSaved">0m</div> | |
| <div class="stat-label">Time Saved</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="activeUsers">1</div> | |
| <div class="stat-label">Active Users</div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>© 2024 AnyCoder Platform. Powered by advanced AI technology.</p> | |
| </footer> | |
| <script> | |
| let isFullscreen = false; | |
| let requestCounter = 0; | |
| let linesCounter = 0; | |
| let timeCounter = 0; | |
| // Initialize counters | |
| function initializeCounters() { | |
| setInterval(() => { | |
| requestCounter += Math.floor(Math.random() * 3); | |
| document.getElementById('requestCount').textContent = requestCounter; | |
| linesCounter += Math.floor(Math.random() * 50); | |
| document.getElementById('linesGenerated').textContent = linesCounter; | |
| timeCounter += Math.floor(Math.random() * 5); | |
| document.getElementById('timeSaved').textContent = timeCounter + 'm'; | |
| }, 5000); | |
| } | |
| // Toggle fullscreen mode | |
| function toggleFullscreen() { | |
| const iframeWrapper = document.getElementById('iframeWrapper'); | |
| const btn = event.target.closest('.control-btn'); | |
| const text = document.getElementById('fullscreenText'); | |
| if (!isFullscreen) { | |
| if (iframeWrapper.requestFullscreen) { | |
| iframeWrapper.requestFullscreen(); | |
| } else if (iframeWrapper.webkitRequestFullscreen) { | |
| iframeWrapper.webkitRequestFullscreen(); | |
| } else if (iframeWrapper.msRequestFullscreen) { | |
| iframeWrapper.msRequestFullscreen(); | |
| } | |
| text.textContent = 'Exit Fullscreen'; | |
| btn.classList.add('active'); | |
| isFullscreen = true; | |
| } else { | |
| if (document.exitFullscreen) { | |
| document.exitFullscreen(); | |
| } else if (document.webkitExitFullscreen) { | |
| document.webkitExitFullscreen(); | |
| } else if (document.msExitFullscreen) { | |
| document.msExitFullscreen(); | |
| } | |
| text.textContent = 'Fullscreen Mode'; | |
| btn.classList.remove('active'); | |
| isFullscreen = false; | |
| } | |
| } | |
| // Refresh iframe | |
| function refreshIframe() { | |
| const iframe = document.getElementById('mainIframe'); | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| loadingOverlay.classList.add('active'); | |
| iframe.style.opacity = '0.5'; | |
| setTimeout(() => { | |
| iframe.src = iframe.src; | |
| }, 500); | |
| } | |
| // Hide loading overlay | |
| function hideLoading() { | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| const iframe = document.getElementById('mainIframe'); | |
| setTimeout(() => { | |
| loadingOverlay.classList.remove('active'); | |
| iframe.style.opacity = '1'; | |
| }, 1000); | |
| } | |
| // Toggle dark mode (though it's already dark, we can make it lighter) | |
| function toggleDarkMode() { | |
| const btn = event.target.closest('.control-btn'); | |
| document.body.classList.toggle('light-mode'); | |
| btn.classList.toggle('active'); | |
| if (document.body.classList.contains('light-mode')) { | |
| document.documentElement.style.setProperty('--dark-bg', '#f0f0f0'); | |
| document.documentElement.style.setProperty('--card-bg', '#ffffff'); | |
| document.documentElement.style.setProperty('--text-primary', '#1a1a2e'); | |
| document.documentElement.style.setProperty('--text-secondary', '#666666'); | |
| } else { | |
| document.documentElement.style.setProperty('--dark-bg', '#0f0f23'); | |
| document.documentElement.style.setProperty('--card-bg', '#1a1a2e'); | |
| document.documentElement.style.setProperty('--text-primary', '#ffffff'); | |
| document.documentElement.style.setProperty('--text-secondary', '#a0a0b8'); | |
| } | |
| } | |
| // Share interface | |
| function shareInterface() { | |
| if (navigator.share) { | |
| navigator.share({ | |
| title: 'AnyCoder Platform', | |
| text: 'Check out this amazing AI code generation platform!', | |
| url: window.location.href | |
| }); | |
| } else { | |
| // Fallback: copy to clipboard | |
| navigator.clipboard.writeText(window.location.href); | |
| showNotification('Link copied to clipboard!'); | |
| } | |
| } | |
| // Show notification | |
| function showNotification(message) { | |
| const notification = document.createElement('div'); | |
| notification.style.cssText = ` | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--gradient); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| z-index: 10000; | |
| animation: slideInRight 0.3s ease-out; | |
| `; | |
| notification.textContent = message; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.style.animation = 'slideOutRight 0.3s ease-out'; | |
| setTimeout(() => notification.remove(), 300); | |
| }, 3000); | |
| } | |
| // Minimize iframe (placeholder function) | |
| function minimizeIframe() { | |
| const iframe = document.getElementById('mainIframe'); | |
| if (iframe.style.height === '100px') { | |
| iframe.style.height = '450px'; | |
| } else { | |
| iframe.style.height = '100px'; | |
| } | |
| } | |
| // Add slide animations | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes slideInRight { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideOutRight { | |
| from { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| to { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| // Initialize on load | |
| window.addEventListener('load', () => { | |
| initializeCounters(); | |
| showLoadingOverlay(); | |
| }); | |
| // Show initial loading | |
| function showLoadingOverlay() { | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| loadingOverlay.classList.add('active'); | |
| } | |
| // Listen for fullscreen changes | |
| document.addEventListener('fullscreenchange', () => { | |
| if (!document.fullscreenElement) { | |
| isFullscreen = false; | |
| document.getElementById('fullscreenText').textContent = 'Fullscreen Mode'; | |
| document.querySelector('.control-btn').classList.remove('active'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |