Spaces:
Sleeping
Sleeping
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}AutoApp Builder{% endblock %}</title> | |
| <!-- TailwindCSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| 950: '#020617', | |
| } | |
| }, | |
| animation: { | |
| 'gradient': 'gradient 6s ease infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'fade-in': 'fadeIn 0.5s ease forwards', | |
| 'slide-up': 'slideUp 0.5s ease forwards', | |
| }, | |
| keyframes: { | |
| gradient: { | |
| '0%, 100%': { backgroundPosition: '0% 50%' }, | |
| '50%': { backgroundPosition: '100% 50%' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| fadeIn: { | |
| from: { opacity: '0' }, | |
| to: { opacity: '1' }, | |
| }, | |
| slideUp: { | |
| from: { opacity: '0', transform: 'translateY(20px)' }, | |
| to: { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Prism.js for code highlighting --> | |
| <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-docker.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-yaml.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markdown.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script> | |
| <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet"> | |
| <style> | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-track { background: #0f172a; } | |
| ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #475569; } | |
| /* Glassmorphism */ | |
| .glass { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(56, 189, 248, 0.1); | |
| } | |
| .glass-light { | |
| background: rgba(30, 41, 59, 0.5); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(56, 189, 248, 0.08); | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #38bdf8, #818cf8, #c084fc); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Animated gradient background */ | |
| .animated-gradient { | |
| background: linear-gradient(-45deg, #0f172a, #1e1b4b, #172554, #0f172a); | |
| background-size: 400% 400%; | |
| animation: gradient 6s ease infinite; | |
| } | |
| /* Glow effects */ | |
| .glow-blue { box-shadow: 0 0 20px rgba(56, 189, 248, 0.15); } | |
| .glow-purple { box-shadow: 0 0 20px rgba(139, 92, 246, 0.15); } | |
| /* Code preview overrides */ | |
| pre[class*="language-"] { | |
| background: #0d1117 ; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| margin: 0; | |
| } | |
| code[class*="language-"] { | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| } | |
| /* Loading spinner */ | |
| .spinner { | |
| border: 3px solid rgba(56, 189, 248, 0.2); | |
| border-top: 3px solid #38bdf8; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* File tree styling */ | |
| .file-tree-item { transition: all 0.15s ease; } | |
| .file-tree-item:hover { background: rgba(56, 189, 248, 0.08); } | |
| .file-tree-item.active { background: rgba(56, 189, 248, 0.15); border-left: 2px solid #38bdf8; } | |
| /* Textarea styling */ | |
| textarea:focus { outline: none; } | |
| /* Smooth transitions */ | |
| .transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } | |
| </style> | |
| {% block extra_head %}{% endblock %} | |
| </head> | |
| <body class="bg-dark-950 text-dark-200 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="glass sticky top-0 z-50 px-6 py-3"> | |
| <div class="max-w-7xl mx-auto flex items-center justify-between"> | |
| <a href="/" class="flex items-center gap-3 group"> | |
| <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm group-hover:scale-110 transition-transform"> | |
| AB | |
| </div> | |
| <span class="text-lg font-bold gradient-text">AutoApp Builder</span> | |
| </a> | |
| <div class="flex items-center gap-4"> | |
| <a href="/" class="text-dark-400 hover:text-cyan-400 transition-colors text-sm font-medium">New Project</a> | |
| <a href="https://huggingface.co/spaces" target="_blank" class="text-dark-400 hover:text-cyan-400 transition-colors text-sm font-medium">HF Spaces</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main> | |
| {% block content %}{% endblock %} | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-dark-800 mt-16 py-8 px-6"> | |
| <div class="max-w-7xl mx-auto text-center text-dark-500 text-sm"> | |
| <p>AutoApp Builder — Generate complete HF Space repos from natural language.</p> | |
| <p class="mt-1">Powered by Hugging Face Inference API</p> | |
| </div> | |
| </footer> | |
| <script src="/static/app.js"></script> | |
| {% block extra_scripts %}{% endblock %} | |
| </body> | |
| </html> | |