Spaces:

ZarijaS
/

focus-forest

Running

App Files Files Community

ZarijaS commited on Apr 22

Commit

ed30d03

verified ·

1 Parent(s): 2f10404

Add 2 files

Browse files

Files changed (2) hide show

index.html +621 -241
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -44,303 +44,683 @@
             background: linear-gradient(to bottom, #e6f7ff 0%, #ffffff 100%);
         }
         @media (prefers-color-scheme: dark) {
             .season-bg {
                 background: linear-gradient(to bottom, #1a365d 0%, #1a202c 100%);
             }
         }
     </style>
 </head>
 <body class="season-bg min-h-screen font-sans text-gray-800 dark:text-gray-200">
-    <div class="container mx-auto px-4 py-6 max-w-md">
-        <!-- Header -->
-        <header class="flex justify-between items-center mb-6">
-            <div class="flex items-center">
-                <i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
-                <h1 class="text-xl font-bold">Focus Forest</h1>
-            </div>
-            <div class="flex space-x-3">
-                <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
-                    <i class="fas fa-user text-green-500"></i>
-                </button>
-                <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
-                    <i class="fas fa-cog text-green-500"></i>
-                </button>
-            </div>
-        </header>
-        <!-- Stats Overview -->
-        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
-            <div class="flex justify-between items-center mb-4">
-                <h2 class="font-semibold">Today's Focus</h2>
-                <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">Day 7 Streak!</span>
             </div>
-            <div class="grid grid-cols-3 gap-4 text-center">
-                <div>
-                    <div class="text-2xl font-bold text-green-600">3</div>
-                    <div class="text-xs text-gray-500">Trees Grown</div>
-                </div>
                 <div>
-                    <div class="text-2xl font-bold text-blue-600">2h 15m</div>
-                    <div class="text-xs text-gray-500">Focus Time</div>
                 </div>
                 <div>
-                    <div class="text-2xl font-bold text-purple-600">85%</div>
-                    <div class="text-xs text-gray-500">Success Rate</div>
                 </div>
-            </div>
-        </div>
-        <!-- Focus Timer -->
-        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6 text-center relative overflow-hidden">
-            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-400 to-blue-500"></div>
-            <h2 class="font-semibold mb-4">Current Focus Session</h2>
-            <div class="relative w-40 h-40 mx-auto mb-4">
-                <svg class="w-full h-full" viewBox="0 0 100 100">
-                    <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
-                    <circle class="text-green-500 progress-ring-circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"
-                            stroke-dasharray="251.2" stroke-dashoffset="75.36" />
-                </svg>
-                <div class="absolute inset-0 flex items-center justify-center flex-col">
-                    <div class="text-3xl font-bold" id="timer-display">25:00</div>
-                    <div class="text-xs text-gray-500">remaining</div>
                 </div>
-            </div>
-            <div class="flex justify-center space-x-4">
-                <button id="start-btn" class="px-6 py-2 bg-green-500 text-white rounded-full font-medium flex items-center">
-                    <i class="fas fa-play mr-2"></i> Start
-                </button>
-                <button id="cancel-btn" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium">
-                    Cancel
                 </button>
-            </div>
-            <div class="mt-4 text-sm">
-                <div class="inline-block px-3 py-1 bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full">
-                    <i class="fas fa-seedling mr-1"></i> Earn a Maple Tree
                 </div>
-            </div>
-        </div>
-        <!-- Forest Display -->
-        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
-            <div class="flex justify-between items-center mb-3">
-                <h2 class="font-semibold">Your Forest</h2>
-                <div class="flex space-x-2">
-                    <button class="p-1 text-gray-500 hover:text-green-500">
-                        <i class="fas fa-expand"></i>
                     </button>
-                    <button class="p-1 text-gray-500 hover:text-green-500">
-                        <i class="fas fa-filter"></i>
                     </button>
                 </div>
             </div>
-            <div class="grid grid-cols-3 gap-4 min-h-40">
-                <!-- Tree 1 -->
-                <div class="tree-container relative flex flex-col items-center justify-end">
-                    <div class="tree-grow">
-                        <i class="fas fa-tree text-green-600 text-4xl leaf-rustle"></i>
-                    </div>
-                    <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
-                        <div>Maple Tree</div>
-                        <div class="text-gray-500">Today, 10:42 AM</div>
-                    </div>
                 </div>
-                <!-- Tree 2 -->
-                <div class="tree-container relative flex flex-col items-center justify-end">
-                    <div class="tree-grow">
-                        <i class="fas fa-tree text-green-700 text-5xl leaf-rustle" style="animation-delay: 0.3s;"></i>
                     </div>
-                    <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
-                        <div>Oak Tree</div>
-                        <div class="text-gray-500">Yesterday, 3:15 PM</div>
                     </div>
-                </div>
-                <!-- Empty Slot -->
-                <div class="flex flex-col items-center justify-center bg-green-50 dark:bg-gray-700 rounded-lg">
-                    <i class="fas fa-plus text-gray-400"></i>
                 </div>
-                <!-- Tree 3 -->
-                <div class="tree-container relative flex flex-col items-center justify-end">
-                    <div class="tree-grow">
-                        <i class="fas fa-tree text-green-500 text-3xl leaf-rustle" style="animation-delay: 0.6s;"></i>
                     </div>
-                    <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
-                        <div>Pine Tree</div>
-                        <div class="text-gray-500">Yesterday, 9:30 AM</div>
                     </div>
                 </div>
-                <!-- Wilted Tree -->
-                <div class="tree-container relative flex flex-col items-center justify-end opacity-50">
-                    <div class="tree-grow">
-                        <i class="fas fa-tree text-gray-400 text-4xl"></i>
                     </div>
-                    <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
-                        <div>Wilted Maple</div>
-                        <div class="text-gray-500">Failed session</div>
                     </div>
                 </div>
-                <!-- Empty Slot -->
-                <div class="flex flex-col items-center justify-center bg-green-50 dark:bg-gray-700 rounded-lg">
-                    <i class="fas fa-plus text-gray-400"></i>
                 </div>
             </div>
-            <div class="mt-4 text-center">
-                <button class="text-green-500 text-sm font-medium">
-                    View Full Forest <i class="fas fa-chevron-right ml-1"></i>
-                </button>
-            </div>
-        </div>
-        <!-- Rewards Section -->
-        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
-            <h2 class="font-semibold mb-3">Your Rewards</h2>
-            <div class="flex overflow-x-auto pb-2 -mx-2">
-                <div class="flex-none px-2">
-                    <div class="w-32 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900 dark:to-blue-900 rounded-lg p-3">
-                        <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-tag text-green-500 text-xl"></i>
                         </div>
-                        <div class="text-center">
-                            <div class="text-xs font-medium">15% Off</div>
-                            <div class="text-xs text-gray-500">Plant Nursery</div>
                         </div>
                     </div>
                 </div>
-                <div class="flex-none px-2">
-                    <div class="w-32 bg-gradient-to-br from-yellow-100 to-orange-100 dark:from-yellow-900 dark:to-orange-900 rounded-lg p-3">
-                        <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-seedling text-yellow-500 text-xl"></i>
                         </div>
-                        <div class="text-center">
-                            <div class="text-xs font-medium">Free Seed Pack</div>
-                            <div class="text-xs text-gray-500">5 Trees Needed</div>
                         </div>
                     </div>
                 </div>
-                <div class="flex-none px-2">
-                    <div class="w-32 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 rounded-lg p-3 opacity-50">
-                        <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
-                            <i class="fas fa-mug-hot text-purple-500 text-xl"></i>
                         </div>
-                        <div class="text-center">
-                            <div class="text-xs font-medium">Free Coffee</div>
-                            <div class="text-xs text-gray-500">10 Trees Needed</div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- Bottom Navigation -->
-        <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg flex justify-around py-3 px-4 max-w-md mx-auto">
-            <button class="p-2 text-green-500">
-                <i class="fas fa-home text-xl"></i>
-            </button>
-            <button class="p-2 text-gray-500">
-                <i class="fas fa-chart-line text-xl"></i>
-            </button>
-            <button class="p-2 text-gray-500">
-                <i class="fas fa-trophy text-xl"></i>
-            </button>
-            <button class="p-2 text-gray-500">
-                <i class="fas fa-users text-xl"></i>
-            </button>
-        </nav>
-    </div>
-    <script>
-        // Timer functionality
-        let timerInterval;
-        let timeLeft = 25 * 60; // 25 minutes in seconds
-        const timerDisplay = document.getElementById('timer-display');
-        const startBtn = document.getElementById('start-btn');
-        const cancelBtn = document.getElementById('cancel-btn');
-        const progressCircle = document.querySelector('.progress-ring-circle');
-        const circumference = 2 * Math.PI * 40;
-        progressCircle.style.strokeDasharray = circumference;
-        progressCircle.style.strokeDashoffset = circumference - (0.7 * circumference); // Start at 30%
-        function updateTimerDisplay() {
-            const minutes = Math.floor(timeLeft / 60);
-            const seconds = timeLeft % 60;
-            timerDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-            // Update progress ring
-            const progress = timeLeft / (25 * 60);
-            const offset = circumference - (progress * circumference);
-            progressCircle.style.strokeDashoffset = offset;
-        }
-        startBtn.addEventListener('click', () => {
-            startBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
-            startBtn.classList.remove('bg-green-500');
-            startBtn.classList.add('bg-yellow-500');
-            timerInterval = setInterval(() => {
-                timeLeft--;
-                updateTimerDisplay();
-                if (timeLeft <= 0) {
-                    clearInterval(timerInterval);
-                    // Tree grows animation
-                    alert('Great job! A new tree has been added to your forest!');
-                    startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start';
-                    startBtn.classList.remove('bg-yellow-500');
-                    startBtn.classList.add('bg-green-500');
-                    timeLeft = 25 * 60;
-                    updateTimerDisplay();
-                }
-            }, 1000);
-        });
-        cancelBtn.addEventListener('click', () => {
-            clearInterval(timerInterval);
-            startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start';
-            startBtn.classList.remove('bg-yellow-500');
-            startBtn.classList.add('bg-green-500');
-            timeLeft = 25 * 60;
-            updateTimerDisplay();
-        });
-        // Initial display
-        updateTimerDisplay();
-        // Tree hover effects
-        document.querySelectorAll('.tree-container').forEach(container => {
-            container.addEventListener('mouseenter', () => {
-                container.querySelector('.tree-grow').classList.add('transform', 'scale-110');
-            });
-            container.addEventListener('mouseleave', () => {
-                container.querySelector('.tree-grow').classList.remove('transform', 'scale-110');
-            });
-        });
-        // Dark mode toggle (simplified)
-        const darkModeToggle = document.createElement('button');
-        darkModeToggle.className = 'fixed top-4 right-4 p-2 bg-gray-200 dark:bg-gray-700 rounded-full';
-        darkModeToggle.innerHTML = '<i class="fas fa-moon dark:hidden"></i><i class="fas fa-sun hidden dark:inline"></i>';
-        document.body.appendChild(darkModeToggle);
-        darkModeToggle.addEventListener('click', () => {
-            document.documentElement.classList.toggle('dark');
-        });
-    </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ZarijaS/focus-forest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

             background: linear-gradient(to bottom, #e6f7ff 0%, #ffffff 100%);
         }
+        .page {
+            display: none;
+        }
+        .page.active {
+            display: block;
+            animation: fadeIn 0.3s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .badge {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .friend-request-btn {
+            transition: all 0.2s ease;
+        }
+        .friend-request-btn:hover {
+            transform: scale(1.05);
+        }
+        .stat-card {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .stat-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+        .login-card {
+            transform: perspective(1000px) rotateX(0deg);
+            transition: transform 0.5s ease, box-shadow 0.5s ease;
+        }
+        .login-card:hover {
+            transform: perspective(1000px) rotateX(5deg);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
         @media (prefers-color-scheme: dark) {
             .season-bg {
                 background: linear-gradient(to bottom, #1a365d 0%, #1a202c 100%);
             }
+            .badge {
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+            }
+            .stat-card:hover {
+                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+            }
         }
     </style>
 </head>
 <body class="season-bg min-h-screen font-sans text-gray-800 dark:text-gray-200">
+    <!-- Login Page -->
+    <div id="login-page" class="page min-h-screen flex items-center justify-center p-4">
+        <div class="login-card bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 w-full max-w-md">
+            <div class="text-center mb-8">
+                <div class="flex justify-center mb-4">
+                    <i class="fas fa-leaf text-green-500 text-5xl"></i>
+                </div>
+                <h1 class="text-3xl font-bold mb-2">Focus Forest</h1>
+                <p class="text-gray-500 dark:text-gray-400">Grow your focus, one tree at a time</p>
             </div>
+            <form id="login-form" class="space-y-4">
                 <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                    <input type="email" id="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="[email protected]" required>
                 </div>
                 <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
+                    <input type="password" id="password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="••••••••" required>
                 </div>
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <input id="remember-me" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 dark:border-gray-600 rounded">
+                        <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
+                    </div>
+                    <a href="#" class="text-sm text-green-600 hover:text-green-500">Forgot password?</a>
                 </div>
+                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition duration-200">
+                    Sign In
                 </button>
+                <div class="text-center text-sm text-gray-500 dark:text-gray-400">
+                    Don't have an account? <a href="#" id="show-signup" class="text-green-600 hover:text-green-500">Sign up</a>
                 </div>
+                <div class="relative my-6">
+                    <div class="absolute inset-0 flex items-center">
+                        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
+                    </div>
+                    <div class="relative flex justify-center text-sm">
+                        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 gap-3">
+                    <button type="button" class="flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <i class="fab fa-google text-red-500 mr-2"></i>
+                        Google
                     </button>
+                    <button type="button" class="flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <i class="fab fa-apple text-gray-800 dark:text-gray-200 mr-2"></i>
+                        Apple
                     </button>
                 </div>
+            </form>
+        </div>
+    </div>
+    <!-- Signup Page -->
+    <div id="signup-page" class="page min-h-screen flex items-center justify-center p-4">
+        <div class="login-card bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 w-full max-w-md">
+            <div class="text-center mb-8">
+                <div class="flex justify-center mb-4">
+                    <i class="fas fa-seedling text-green-500 text-5xl"></i>
+                </div>
+                <h1 class="text-3xl font-bold mb-2">Join Focus Forest</h1>
+                <p class="text-gray-500 dark:text-gray-400">Start growing your focus today</p>
             </div>
+            <form id="signup-form" class="space-y-4">
+                <div>
+                    <label for="signup-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
+                    <input type="text" id="signup-name" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="John Doe" required>
+                </div>
+                <div>
+                    <label for="signup-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                    <input type="email" id="signup-email" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="[email protected]" required>
+                </div>
+                <div>
+                    <label for="signup-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
+                    <input type="password" id="signup-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="••••••••" required>
                 </div>
+                <div>
+                    <label for="signup-confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
+                    <input type="password" id="signup-confirm-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="••••••••" required>
+                </div>
+                <div class="flex items-center">
+                    <input id="terms" type="checkbox" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 dark:border-gray-600 rounded" required>
+                    <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
+                        I agree to the <a href="#" class="text-green-600 hover:text-green-500">Terms</a> and <a href="#" class="text-green-600 hover:text-green-500">Privacy Policy</a>
+                    </label>
+                </div>
+                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg font-medium transition duration-200">
+                    Create Account
+                </button>
+                <div class="text-center text-sm text-gray-500 dark:text-gray-400">
+                    Already have an account? <a href="#" id="show-login" class="text-green-600 hover:text-green-500">Sign in</a>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- Main App Container (shown after login) -->
+    <div id="app-container" class="page">
+        <div class="container mx-auto px-4 py-6 max-w-md pb-20">
+            <!-- Home Page -->
+            <div id="home-page" class="page active">
+                <!-- Header -->
+                <header class="flex justify-between items-center mb-6">
+                    <div class="flex items-center">
+                        <i class="fas fa-leaf text-green-500 text-2xl mr-2"></i>
+                        <h1 class="text-xl font-bold">Focus Forest</h1>
                     </div>
+                    <div class="flex space-x-3">
+                        <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
+                            <i class="fas fa-user text-green-500"></i>
+                        </button>
+                        <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
+                            <i class="fas fa-cog text-green-500"></i>
+                        </button>
                     </div>
+                </header>
+                <!-- Stats Overview -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="font-semibold">Today's Focus</h2>
+                        <span class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">Day 7 Streak!</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-4 text-center">
+                        <div>
+                            <div class="text-2xl font-bold text-green-600">3</div>
+                            <div class="text-xs text-gray-500">Trees Grown</div>
+                        </div>
+                        <div>
+                            <div class="text-2xl font-bold text-blue-600">2h 15m</div>
+                            <div class="text-xs text-gray-500">Focus Time</div>
+                        </div>
+                        <div>
+                            <div class="text-2xl font-bold text-purple-600">85%</div>
+                            <div class="text-xs text-gray-500">Success Rate</div>
+                        </div>
+                    </div>
                 </div>
+                <!-- Focus Timer -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-6 text-center relative overflow-hidden">
+                    <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-400 to-blue-500"></div>
+                    <h2 class="font-semibold mb-4">Current Focus Session</h2>
+                    <div class="relative w-40 h-40 mx-auto mb-4">
+                        <svg class="w-full h-full" viewBox="0 0 100 100">
+                            <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
+                            <circle class="text-green-500 progress-ring-circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"
+                                    stroke-dasharray="251.2" stroke-dashoffset="75.36" />
+                        </svg>
+                        <div class="absolute inset-0 flex items-center justify-center flex-col">
+                            <div class="text-3xl font-bold" id="timer-display">25:00</div>
+                            <div class="text-xs text-gray-500">remaining</div>
+                        </div>
                     </div>
+                    <div class="flex justify-center space-x-4">
+                        <button id="start-btn" class="px-6 py-2 bg-green-500 text-white rounded-full font-medium flex items-center">
+                            <i class="fas fa-play mr-2"></i> Start
+                        </button>
+                        <button id="cancel-btn" class="px-6 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium">
+                            Cancel
+                        </button>
+                    </div>
+                    <div class="mt-4 text-sm">
+                        <div class="inline-block px-3 py-1 bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full">
+                            <i class="fas fa-seedling mr-1"></i> Earn a Maple Tree
+                        </div>
                     </div>
                 </div>
+                <!-- Forest Display -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <div class="flex justify-between items-center mb-3">
+                        <h2 class="font-semibold">Your Forest</h2>
+                        <div class="flex space-x-2">
+                            <button class="p-1 text-gray-500 hover:text-green-500">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                            <button class="p-1 text-gray-500 hover:text-green-500">
+                                <i class="fas fa-filter"></i>
+                            </button>
+                        </div>
                     </div>
+                    <div class="grid grid-cols-3 gap-4 min-h-40">
+                        <!-- Tree 1 -->
+                        <div class="tree-container relative flex flex-col items-center justify-end">
+                            <div class="tree-grow">
+                                <i class="fas fa-tree text-green-600 text-4xl leaf-rustle"></i>
+                            </div>
+                            <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
+                                <div>Maple Tree</div>
+                                <div class="text-gray-500">Today, 10:42 AM</div>
+                            </div>
+                        </div>
+                        <!-- Tree 2 -->
+                        <div class="tree-container relative flex flex-col items-center justify-end">
+                            <div class="tree-grow">
+                                <i class="fas fa-tree text-green-700 text-5xl leaf-rustle" style="animation-delay: 0.3s;"></i>
+                            </div>
+                            <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
+                                <div>Oak Tree</div>
+                                <div class="text-gray-500">Yesterday, 3:15 PM</div>
+                            </div>
+                        </div>
+                        <!-- Empty Slot -->
+                        <div class="flex flex-col items-center justify-center bg-green-50 dark:bg-gray-700 rounded-lg">
+                            <i class="fas fa-plus text-gray-400"></i>
+                        </div>
+                        <!-- Tree 3 -->
+                        <div class="tree-container relative flex flex-col items-center justify-end">
+                            <div class="tree-grow">
+                                <i class="fas fa-tree text-green-500 text-3xl leaf-rustle" style="animation-delay: 0.6s;"></i>
+                            </div>
+                            <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
+                                <div>Pine Tree</div>
+                                <div class="text-gray-500">Yesterday, 9:30 AM</div>
+                            </div>
+                        </div>
+                        <!-- Wilted Tree -->
+                        <div class="tree-container relative flex flex-col items-center justify-end opacity-50">
+                            <div class="tree-grow">
+                                <i class="fas fa-tree text-gray-400 text-4xl"></i>
+                            </div>
+                            <div class="tree-info absolute bottom-full mb-2 bg-white dark:bg-gray-700 shadow-md rounded px-2 py-1 text-xs whitespace-nowrap">
+                                <div>Wilted Maple</div>
+                                <div class="text-gray-500">Failed session</div>
+                            </div>
+                        </div>
+                        <!-- Empty Slot -->
+                        <div class="flex flex-col items-center justify-center bg-green-50 dark:bg-gray-700 rounded-lg">
+                            <i class="fas fa-plus text-gray-400"></i>
+                        </div>
+                    </div>
+                    <div class="mt-4 text-center">
+                        <button class="text-green-500 text-sm font-medium">
+                            View Full Forest <i class="fas fa-chevron-right ml-1"></i>
+                        </button>
                     </div>
                 </div>
+                <!-- Rewards Section -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <h2 class="font-semibold mb-3">Your Rewards</h2>
+                    <div class="flex overflow-x-auto pb-2 -mx-2">
+                        <div class="flex-none px-2">
+                            <div class="w-32 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900 dark:to-blue-900 rounded-lg p-3">
+                                <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
+                                    <i class="fas fa-tag text-green-500 text-xl"></i>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-xs font-medium">15% Off</div>
+                                    <div class="text-xs text-gray-500">Plant Nursery</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-none px-2">
+                            <div class="w-32 bg-gradient-to-br from-yellow-100 to-orange-100 dark:from-yellow-900 dark:to-orange-900 rounded-lg p-3">
+                                <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
+                                    <i class="fas fa-seedling text-yellow-500 text-xl"></i>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-xs font-medium">Free Seed Pack</div>
+                                    <div class="text-xs text-gray-500">5 Trees Needed</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex-none px-2">
+                            <div class="w-32 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 rounded-lg p-3 opacity-50">
+                                <div class="w-12 h-12 bg-white dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-2">
+                                    <i class="fas fa-mug-hot text-purple-500 text-xl"></i>
+                                </div>
+                                <div class="text-center">
+                                    <div class="text-xs font-medium">Free Coffee</div>
+                                    <div class="text-xs text-gray-500">10 Trees Needed</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <!-- Stats Page -->
+            <div id="stats-page" class="page">
+                <header class="flex justify-between items-center mb-6">
+                    <div class="flex items-center">
+                        <button class="mr-2 text-gray-500 back-button">
+                            <i class="fas fa-arrow-left"></i>
+                        </button>
+                        <h1 class="text-xl font-bold">Your Progress</h1>
+                    </div>
+                    <div class="flex space-x-3">
+                        <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
+                            <i class="fas fa-calendar text-green-500"></i>
+                        </button>
+                    </div>
+                </header>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="font-semibold">Weekly Summary</h2>
+                        <div class="text-xs text-gray-500">Jun 10 - Jun 16</div>
+                    </div>
+                    <div class="grid grid-cols-3 gap-4 mb-4">
+                        <div class="stat-card bg-green-50 dark:bg-gray-700 rounded-lg p-3 text-center">
+                            <div class="text-2xl font-bold text-green-600">12</div>
+                            <div class="text-xs text-gray-500">Sessions</div>
+                        </div>
+                        <div class="stat-card bg-blue-50 dark:bg-gray-700 rounded-lg p-3 text-center">
+                            <div class="text-2xl font-bold text-blue-600">8h 42m</div>
+                            <div class="text-xs text-gray-500">Focus Time</div>
                         </div>
+                        <div class="stat-card bg-purple-50 dark:bg-gray-700 rounded-lg p-3 text-center">
+                            <div class="text-2xl font-bold text-purple-600">92%</div>
+                            <div class="text-xs text-gray-500">Success Rate</div>
                         </div>
                     </div>
+                    <div class="h-40 mb-4">
+                        <canvas id="weeklyChart"></canvas>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-500">
+                        <div>Mon</div>
+                        <div>Tue</div>
+                        <div>Wed</div>
+                        <div>Thu</div>
+                        <div>Fri</div>
+                        <div>Sat</div>
+                        <div>Sun</div>
+                    </div>
                 </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <h2 class="font-semibold mb-4">Achievements</h2>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="flex items-center bg-green-50 dark:bg-gray-700 rounded-lg p-3">
+                            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-medal text-green-500"></i>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium">First Tree</div>
+                                <div class="text-xs text-gray-500">Completed 1 session</div>
+                            </div>
                         </div>
+                        <div class="flex items-center bg-green-50 dark:bg-gray-700 rounded-lg p-3">
+                            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-fire text-orange-500"></i>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium">7-Day Streak</div>
+                                <div class="text-xs text-gray-500">7 days in a row</div>
+                            </div>
+                        </div>
+                        <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-3 opacity-50">
+                            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-forest text-green-500"></i>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium">Forest Master</div>
+                                <div class="text-xs text-gray-500">Grow 50 trees</div>
+                            </div>
+                        </div>
+                        <div class="flex items-center bg-gray-100 dark:bg-gray-700 rounded-lg p-3 opacity-50">
+                            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-clock text-blue-500"></i>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium">Time Master</div>
+                                <div class="text-xs text-gray-500">100 hours focused</div>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
+                    <h2 class="font-semibold mb-4">Focus History</h2>
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-tree text-green-500 text-sm"></i>
+                                </div>
+                                <div>
+                                    <div class="text-sm font-medium">Maple Tree</div>
+                                    <div class="text-xs text-gray-500">Today, 10:42 AM</div>
+                                </div>
+                            </div>
+                            <div class="text-sm font-medium text-green-500">25:00</div>
+                        </div>
+                        <div class="flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-tree text-green-500 text-sm"></i>
+                                </div>
+                                <div>
+                                    <div class="text-sm font-medium">Oak Tree</div>
+                                    <div class="text-xs text-gray-500">Yesterday, 3:15 PM</div>
+                                </div>
+                            </div>
+                            <div class="text-sm font-medium text-green-500">25:00</div>
+                        </div>
+                        <div class="flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-tree text-gray-400 text-sm"></i>
+                                </div>
+                                <div>
+                                    <div class="text-sm font-medium">Wilted Maple</div>
+                                    <div class="text-xs text-gray-500">Yesterday, 9:30 AM</div>
+                                </div>
+                            </div>
+                            <div class="text-sm font-medium text-gray-500">12:45</div>
                         </div>
+                        <div class="flex items-center justify-between p-2">
+                            <div class="flex items-center">
+                                <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-3">
+                                    <i class="fas fa-tree text-green-500 text-sm"></i>
+                                </div>
+                                <div>
+                                    <div class="text-sm font-medium">Pine Tree</div>
+                                    <div class="text-xs text-gray-500">Jun 14, 2:20 PM</div>
+                                </div>
+                            </div>
+                            <div class="text-sm font-medium text-green-500">25:00</div>
                         </div>
                     </div>
+                    <button class="w-full mt-4 text-green-500 text-sm font-medium">
+                        View All History <i class="fas fa-chevron-right ml-1"></i>
+                    </button>
                 </div>
             </div>
+            <!-- Rewards Page -->
+            <div id="rewards-page" class="page">
+                <header class="flex justify-between items-center mb-6">
+                    <div class="flex items-center">
+                        <button class="mr-2 text-gray-500 back-button">
+                            <i class="fas fa-arrow-left"></i>
+                        </button>
+                        <h1 class="text-xl font-bold">Your Rewards</h1>
+                    </div>
+                    <div class="flex space-x-3">
+                        <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
+                            <i class="fas fa-gift text-green-500"></i>
+                        </button>
+                    </div>
+                </header>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="font-semibold">Available Rewards</h2>
+                        <div class="text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded-full">
+                            3 unlocked
+                        </div>
+                    </div>
+                    <div class="space-y-4">
+                        <div class="flex items-center bg-white dark:bg-gray-700 border border-green-200 dark:border-green-800 rounded-lg p-4">
+                            <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-tag text-green-500 text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-medium">15% Off Plant Nursery</div>
+                                <div class="text-xs text-gray-500">Grow 3 trees to unlock</div>
+                            </div>
+                            <button class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium">
+                                Claim
+                            </button>
+                        </div>
+                        <div class="flex items-center bg-white dark:bg-gray-700 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                            <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-seedling text-yellow-500 text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-medium">Free Seed Pack</div>
+                                <div class="text-xs text-gray-500">Grow 5 trees to unlock</div>
+                            </div>
+                            <button class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-medium">
+                                Claim
+                            </button>
+                        </div>
+                        <div class="flex items-center bg-white dark:bg-gray-700 border border-purple-200 dark:border-purple-800 rounded-lg p-4 opacity-50">
+                            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4">
+                                <i class="fas fa-mug-hot text-purple-500 text-xl"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-medium">Free Coffee</div>
+                                <div class="text-xs text-gray-500">Grow 10 trees to unlock</div>
+                            </div>
+                            <button class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-medium" disabled>
+                                Locked
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6">
+                    <h2 class="font-semibold mb-4">Partner Offers</h2>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 rounded-lg p-3">
+                            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center mb-2 mx-auto">
+                                <i class="fas fa-book text-blue-500"></i>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-sm font-medium">Audible</div>
+                                <div class="text-xs text-gray-500">30-day free trial</div>
+                            </div>
+                        </div>
+                        <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 rounded-lg p-3">
+                            <div class="w-10 h-10 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mb-2 mx-auto">
+                                <i class="fas fa-headphones text-green-500"></i>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-sm font-medium">Headspace</div>
+                                <div class="text-xs text-gray-500">2 weeks free</div>
+                            </div>
+                        </div>
+                        <div class="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900 dark:to-red-800 rounded-lg p-3">
+                            <div class="w-10 h-10 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center mb-2 mx-auto">
+                                <i class="fab fa-spotify text-red-500"></i>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-sm font-medium">Spotify</div>
+                                <div class="text-xs text-gray-500">3 months for $1</div>
+                            </div>
+                        </div>
+                        <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900 dark:to-purple-800 rounded-lg p-3">
+                            <div class="w-10 h-10 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center mb-2 mx-auto">
+                                <i class="fas fa-brain text-purple-500"></i>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-sm font-medium">Lumosity</div>
+                                <div class="text-xs text-gray-500">7-day free trial</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4">
+                    <h2 class="font-semibold mb-4">Redeem Code</h2>
+                    <div class="flex">
+                        <input type="text" class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700" placeholder="Enter promo code">
+                        <button class="bg-green-500 text-white px-4 py-2 rounded-r-lg font-medium">
+                            Redeem
+                        </button>
+                    </div>
+                    <div class="mt-3 text-xs text-gray-500">
+                        Have a promo code? Enter it above to unlock special rewards.
+                    </div>
+                </div>
+            </div>
+            <!-- Community Page -->
+            <div id="community-page" class="page">
+                <header class="flex justify-between items-center mb-6">
+                    <div class="flex items-center">
+                        <button class="mr-2 text-gray-500 back-button">
+                            <i class="fas fa-arrow-left"></i>
+                        </button>
+                        <h1 class="text-xl font-bold">Community</h1>
+                    </div>
+                    <div class="flex space-x-3">
+                        <button class="p-2 rounded-full bg-green-50 dark:bg-gray-700">
+                            <i class="fas fa-search text-green-500"></i>
+                        </button>
+                    </div>
+                </header>
+                <div class
 </html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@


1	+ you create homepage, which is great. Now I need every other section from app to be functional. From log in to tracking progress to connect with friends...