Spaces:
Running
Running
analyze fix upgrade, prioritize mvp top 3 e2e tested n functional simple but valuable human struggle time minimizers
3e519ec verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlowState OS 🌊 | Minimize Struggle</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌊</text></svg>"> | |
| <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> | |
| <!-- Custom Config for Tailwind to handle undefined colors --> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', // Indigo | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| 950: '#1e1b4b', | |
| }, | |
| secondary: { | |
| 50: '#ecfdf5', | |
| 100: '#d1fae5', | |
| 200: '#a7f3d0', | |
| 300: '#6ee7b7', | |
| 400: '#34d399', | |
| 500: '#10b981', // Emerald | |
| 600: '#059669', | |
| 700: '#047857', | |
| 800: '#065f46', | |
| 900: '#064e3b', | |
| 950: '#022c22', | |
| }, | |
| darkbg: '#0f172a', | |
| cardbg: '#1e293b' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-darkbg text-slate-200 font-sans antialiased min-h-screen flex flex-col transition-colors duration-300"> | |
| <!-- Web Component: Navigation --> | |
| <app-navbar></app-navbar> | |
| <!-- Main Content Area --> | |
| <main class="flex-grow container mx-auto px-4 py-8 relative"> | |
| <!-- Hero / Dashboard Intro --> | |
| <section id="home" class="view-section text-center py-20 fade-in"> | |
| <div class="mb-6 inline-block p-4 rounded-full bg-primary-500/10 border border-primary-500/30"> | |
| <i data-feather="zap" class="text-primary-400 w-10 h-10"></i> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary-400 to-secondary-400"> | |
| FlowState OS | |
| </h1> | |
| <p class="text-xl text-slate-400 max-w-2xl mx-auto mb-10"> | |
| Stop struggling. Start flowing. Three essential tools to reclaim your time, focus, and decisions. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-12"> | |
| <a href="#focus" class="group block p-6 rounded-2xl bg-cardbg border border-slate-700 hover:border-primary-500 transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <i data-feather="clock" class="text-primary-400 w-8 h-8"></i> | |
| <span class="text-xs font-bold text-primary-300 uppercase tracking-wider bg-primary-500/10 px-2 py-1 rounded">MVP #1</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2 group-hover:text-primary-300">Focus Timer</h3> | |
| <p class="text-sm text-slate-400">Beat procrastination with distraction-free sprints.</p> | |
| </a> | |
| <a href="#tasks" class="group block p-6 rounded-2xl bg-cardbg border border-slate-700 hover:border-secondary-500 transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <i data-feather="check-square" class="text-secondary-400 w-8 h-8"></i> | |
| <span class="text-xs font-bold text-secondary-300 uppercase tracking-wider bg-secondary-500/10 px-2 py-1 rounded">MVP #2</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2 group-hover:text-secondary-300">Task Clear</h3> | |
| <p class="text-sm text-slate-400">Rapid capture. Zero clutter. Get things done.</p> | |
| </a> | |
| <a href="#decide" class="group block p-6 rounded-2xl bg-cardbg border border-slate-700 hover:border-pink-500 transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <i data-feather="help-circle" class="text-pink-400 w-8 h-8"></i> | |
| <span class="text-xs font-bold text-pink-300 uppercase tracking-wider bg-pink-500/10 px-2 py-1 rounded">MVP #3</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2 group-hover:text-pink-300">Decido</h3> | |
| <p class="text-sm text-slate-400">Eliminate analysis paralysis instantly.</p> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Tool 1: Focus Timer --> | |
| <section id="focus" class="view-section hidden max-w-2xl mx-auto fade-in"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-primary-400">Focus Timer</h2> | |
| <tool-focus></tool-focus> | |
| </section> | |
| <!-- Tool 2: Task Clear --> | |
| <section id="tasks" class="view-section hidden max-w-3xl mx-auto fade-in"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-secondary-400">Task Clear</h2> | |
| <tool-tasks></tool-tasks> | |
| </section> | |
| <!-- Tool 3: Decido --> | |
| <section id="decide" class="view-section hidden max-w-2xl mx-auto fade-in"> | |
| <h2 class="text-3xl font-bold mb-6 text-center text-pink-400">Decido</h2> | |
| <tool-decider></tool-decider> | |
| </section> | |
| </main> | |
| <app-footer></app-footer> | |
| <!-- Components Logic --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/focus.js"></script> | |
| <script src="components/tasks.js"></script> | |
| <script src="components/decider.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Main Logic --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |