Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Arcane Intuition Forge - Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'mauve': { | |
| 50: '#f8f6f9', | |
| 100: '#f1ecf3', | |
| 200: '#e3d9e7', | |
| 300: '#d5c6db', | |
| 400: '#c7b3cf', | |
| 500: '#b9a0c3', | |
| 600: '#94709c', | |
| 700: '#6f5075', | |
| 800: '#4a304e', | |
| 900: '#251027', | |
| }, | |
| 'sage': { | |
| 50: '#f7f9f7', | |
| 100: '#eff3ef', | |
| 200: '#dfe7df', | |
| 300: '#cfdbcf', | |
| 400: '#bfcfbf', | |
| 500: '#afc3af', | |
| 600: '#8c9c8c', | |
| 700: '#697569', | |
| 800: '#464e46', | |
| 900: '#232723', | |
| } | |
| }, | |
| fontFamily: { | |
| 'geist': ['Geist', 'system-ui', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); | |
| body { font-family: 'Inter', system-ui, sans-serif; } | |
| .art-nouveau-border { | |
| background: linear-gradient(145deg, #f8f6f9 0%, #f1ecf3 100%); | |
| border: 1px solid #e3d9e7; | |
| box-shadow: | |
| 0 4px 20px -2px rgba(181, 160, 195, 0.15), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.4); | |
| } | |
| .mode-card { | |
| background: linear-gradient(135deg, #f8f6f9 0%, #f1ecf3 100%); | |
| border: 1px solid #e3d9e7; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .mode-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(181, 160, 195, 0.1), transparent); | |
| transition: left 0.6s; | |
| } | |
| .mode-card:hover::before { | |
| left: 100%; | |
| } | |
| .mode-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: | |
| 0 8px 30px -4px rgba(181, 160, 195, 0.25), | |
| 0 2px 8px -1px rgba(181, 160, 195, 0.15); | |
| border-color: #c7b3cf; | |
| } | |
| .filigree-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e3d9e7' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| .gold-accent { | |
| background: linear-gradient(135deg, #d4af37 0%, #f9e076 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-mauve-50 min-h-screen filigree-pattern"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="art-nouveau-border border-b border-mauve-200/50 backdrop-blur-sm bg-mauve-50/80 sticky top-0 z-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-sage-300 to-mauve-400 flex items-center justify-center"> | |
| <i data-feather="eye" class="text-mauve-700 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-semibold text-mauve-800">Arcane Intuition Forge</h1> | |
| <p class="text-sm text-mauve-600">A sparring partner for your intuition</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-mauve-100 transition-colors"> | |
| <i data-feather="book-open" class="text-mauve-600 w-5 h-5"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-mauve-100 transition-colors"> | |
| <i data-feather="settings" class="text-mauve-600 w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 py-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <!-- Welcome Section --> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold text-mauve-800 mb-4">Welcome, Seeker</h2> | |
| <p class="text-lg text-mauve-600 max-w-2xl mx-auto"> | |
| Choose your path of practice. Each mode offers unique challenges to hone your intuitive artistry. | |
| </p> | |
| </div> | |
| <!-- Practice Modes Grid --> | |
| <div class="grid md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Case Files Card --> | |
| <div class="mode-card rounded-2xl p-8 cursor-pointer group"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-mauve-200 to-sage-200 flex items-center justify-center group-hover:scale-110 transition-transform"> | |
| <i data-feather="file-text" class="text-mauve-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-mauve-800 mb-2">Case Files</h3> | |
| <p class="text-mauve-600 mb-4">Deep-dive practice with narrative scenarios</p> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-medium bg-mauve-100 text-mauve-700"> | |
| Deep Analysis | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Oracle's Outcome Card --> | |
| <div class="mode-card rounded-2xl p-8 cursor-pointer group"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-amber-200 to-orange-200 flex items-center justify-center group-hover:scale-110 transition-transform"> | |
| <i data-feather="trending-up" class="text-amber-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-mauve-800 mb-2">Oracle's Outcome</h3> | |
| <p class="text-mauve-600 mb-4">Predictive practice with path choices</p> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700"> | |
| Predictive | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Reading Replay Card --> | |
| <div class="mode-card rounded-2xl p-8 cursor-pointer group"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-purple-200 to-pink-200 flex items-center justify-center group-hover:scale-110 transition-transform"> | |
| <i data-feather="refresh-cw" class="text-purple-700 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-mauve-800 mb-2">Reading Replay</h3> | |
| <p class="text-mauve-600 mb-4">Nuance practice with delayed insights</p> | |
| <span class="inline-block px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-700"> | |
| Temporal | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Master Journal --> | |
| <div class="art-nouveau-border rounded-2xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-mauve-800">Master Journal</h3> | |
| <i data-feather="book" class="text-mauve-600"></i> | |
| </div> | |
| <p class="text-mauve-600 mb-4">Review your saved readings and track your progress</p> | |
| <button class="w-full py-3 px-4 bg-mauve-100 hover:bg-mauve-200 text-mauve-700 rounded-lg transition-colors font-medium"> | |
| Open Journal | |
| </button> | |
| </div> | |
| <!-- New Practice --> | |
| <div class="art-nouveau-border rounded-2xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-mauve-800">Start New Practice</h3> | |
| <i data-feather="plus-circle" class="text-mauve-600"></i> | |
| </div> | |
| <p class="text-mauve-600 mb-4">Generate a custom scenario based on your chosen theme</p> | |
| <button class="w-full py-3 px-4 bg-gradient-to-r from-mauve-400 to-sage-400 hover:from-mauve-500 hover:to-sage-500 text-white rounded-lg transition-all font-medium shadow-lg hover:shadow-xl"> | |
| Create New Case | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="art-nouveau-border border-t border-mauve-200/50 mt-auto bg-mauve-50/80 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-mauve-600 text-sm">© 2024 Arcane Intuition Forge. Craft your intuition.</p> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <a href="#" class="text-mauve-500 hover:text-mauve-700 transition-colors"> | |
| <i data-feather="help-circle" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-mauve-500 hover:text-mauve-700 transition-colors"> | |
| <i data-feather="mail" class="w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xb9a0c3, | |
| backgroundColor: 0xf8f6f9, | |
| points: 8.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Add interactive animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const modeCards = document.querySelectorAll('.mode-card'); | |
| modeCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.style.transform = 'scale(0.95)'; | |
| setTimeout(() => { | |
| this.style.transform = ''; | |
| }, 150); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |