Download index.html from Digiator/reclaim: direct link, hf CLI and curl.
- Browser
- Download file 62.9 kB
-
https://huggingface.co/spaces/Digiator/reclaim/resolve/main/index.html
- Command line
-
hf download hf://spaces/Digiator/reclaim/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Digiator/reclaim/resolve/main/index.html
62.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reclaim - Porn Recovery & Wellness</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Manrope', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #e5e5e5; | |
| } | |
| .streak-glow { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .emergency-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .badge-earned { | |
| animation: bounce 0.5s; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-900 border-b border-gray-800 fixed w-full z-10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-blue-500 font-bold text-xl">RECLAIM</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#dashboard" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> | |
| <a href="#journal" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Journal</a> | |
| <a href="#education" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Education</a> | |
| <a href="#community" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Community</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button id="user-menu" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none"> | |
| <span class="sr-only">Open user menu</span> | |
| <div class="h-8 w-8 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <span class="text-white font-medium">U</span> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#dashboard" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a> | |
| <a href="#journal" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Journal</a> | |
| <a href="#education" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Education</a> | |
| <a href="#community" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Community</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <span class="text-white font-medium">U</span> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-white">User</div> | |
| <div class="text-sm font-medium text-gray-400">user@example.com</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 px-2 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-10"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-white">Welcome Back, Warrior</h1> | |
| <p class="text-gray-400 mt-2">Every day is a victory. Keep going.</p> | |
| </div> | |
| <!-- Stats and Streak --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Current Streak --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Current Streak</p> | |
| <h2 class="text-4xl font-bold text-white mt-2" id="streak-count">7</h2> | |
| <p class="text-gray-400 text-sm mt-1">days</p> | |
| </div> | |
| <div class="h-16 w-16 rounded-full bg-blue-900/50 flex items-center justify-center streak-glow"> | |
| <i class="fas fa-fire text-2xl text-blue-500"></i> | |
| </div> | |
| </div> | |
| <button id="check-in-btn" class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out"> | |
| Check In Today | |
| </button> | |
| </div> | |
| <!-- Progress Ring --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 flex flex-col items-center"> | |
| <div class="relative w-32 h-32 mb-4"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-800" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="text-blue-500 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" id="progress-ring" /> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-2xl font-bold text-white" id="progress-percent">75%</span> | |
| </div> | |
| </div> | |
| <h3 class="text-lg font-medium text-white">Monthly Progress</h3> | |
| <p class="text-gray-400 text-sm mt-1">23/30 days clean</p> | |
| </div> | |
| <!-- Emergency Button --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 flex flex-col items-center justify-center"> | |
| <button id="emergency-btn" class="emergency-pulse bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-full font-bold text-lg flex items-center transition duration-150 ease-in-out"> | |
| <i class="fas fa-first-aid mr-2"></i> Emergency | |
| </button> | |
| <p class="text-gray-400 text-sm mt-4 text-center">Feeling triggered? Click for immediate help.</p> | |
| </div> | |
| </div> | |
| <!-- Badges and Achievements --> | |
| <div class="mb-8"> | |
| <h2 class="text-xl font-bold text-white mb-4">Your Achievements</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center"> | |
| <div class="h-16 w-16 rounded-full bg-yellow-500/20 flex items-center justify-center mb-2"> | |
| <i class="fas fa-trophy text-2xl text-yellow-500"></i> | |
| </div> | |
| <p class="text-white text-sm font-medium text-center">First Week</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center"> | |
| <div class="h-16 w-16 rounded-full bg-blue-500/20 flex items-center justify-center mb-2"> | |
| <i class="fas fa-medal text-2xl text-blue-500"></i> | |
| </div> | |
| <p class="text-white text-sm font-medium text-center">30 Days</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center"> | |
| <div class="h-16 w-16 rounded-full bg-purple-500/20 flex items-center justify-center mb-2"> | |
| <i class="fas fa-star text-2xl text-purple-500"></i> | |
| </div> | |
| <p class="text-white text-sm font-medium text-center">90 Days</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center"> | |
| <div class="h-16 w-16 rounded-full bg-green-500/20 flex items-center justify-center mb-2"> | |
| <i class="fas fa-check-double text-2xl text-green-500"></i> | |
| </div> | |
| <p class="text-white text-sm font-medium text-center">Consistency</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center"> | |
| <div class="h-16 w-16 rounded-full bg-gray-500/20 flex items-center justify-center mb-2"> | |
| <i class="fas fa-lock text-2xl text-gray-400"></i> | |
| </div> | |
| <p class="text-gray-400 text-sm font-medium text-center">6 Months</p> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-800 flex flex-col items-center"> | |
| <div class="h-16 w-16 rounded-full bg-gray-500/20 flex items-center justify-center mb-2"> | |
| <i class="fas fa-lock text-2xl text-gray-400"></i> | |
| </div> | |
| <p class="text-gray-400 text-sm font-medium text-center">1 Year</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Daily Motivation --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-blue-800/50 mb-8"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center"> | |
| <i class="fas fa-quote-left text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Today's Motivation</h3> | |
| <p class="mt-2 text-gray-300" id="motivation-quote"> | |
| "Discipline is choosing between what you want now and what you want most." | |
| </p> | |
| <p class="mt-2 text-gray-400 text-sm">- Abraham Lincoln</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Journal Section --> | |
| <section id="journal" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-t border-gray-800"> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-white">Triggers & Urges Journal</h1> | |
| <p class="text-gray-400 mt-2">Track your patterns and understand your triggers.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <h2 class="text-xl font-bold text-white mb-4">New Entry</h2> | |
| <form id="journal-form"> | |
| <div class="mb-4"> | |
| <label for="entry-date" class="block text-sm font-medium text-gray-300 mb-1">Date</label> | |
| <input type="date" id="entry-date" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="trigger-level" class="block text-sm font-medium text-gray-300 mb-1">Trigger Level</label> | |
| <select id="trigger-level" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"> | |
| <option value="1">Mild - Slight urge, easily managed</option> | |
| <option value="2">Moderate - Strong urge, required effort</option> | |
| <option value="3">Severe - Intense urge, barely resisted</option> | |
| <option value="4">Overcome - Gave in to the urge</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="trigger-type" class="block text-sm font-medium text-gray-300 mb-1">Trigger Type (select all that apply)</label> | |
| <div class="grid grid-cols-2 gap-2 mt-2"> | |
| <div class="flex items-center"> | |
| <input id="boredom" type="checkbox" value="boredom" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"> | |
| <label for="boredom" class="ml-2 text-sm font-medium text-gray-300">Boredom</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="stress" type="checkbox" value="stress" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"> | |
| <label for="stress" class="ml-2 text-sm font-medium text-gray-300">Stress</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="loneliness" type="checkbox" value="loneliness" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"> | |
| <label for="loneliness" class="ml-2 text-sm font-medium text-gray-300">Loneliness</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="habit" type="checkbox" value="habit" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"> | |
| <label for="habit" class="ml-2 text-sm font-medium text-gray-300">Habit/Routine</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="social-media" type="checkbox" value="social-media" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"> | |
| <label for="social-media" class="ml-2 text-sm font-medium text-gray-300">Social Media</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="other" type="checkbox" value="other" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"> | |
| <label for="other" class="ml-2 text-sm font-medium text-gray-300">Other</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="journal-content" class="block text-sm font-medium text-gray-300 mb-1">Reflection</label> | |
| <textarea id="journal-content" rows="5" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="How did you feel? What happened before the urge? How did you cope?"></textarea> | |
| </div> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out"> | |
| Save Entry | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <h2 class="text-xl font-bold text-white mb-4">Recent Entries</h2> | |
| <div class="space-y-4" id="journal-entries"> | |
| <!-- Journal entries will be added here dynamically --> | |
| <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-white">Moderate Trigger</h3> | |
| <p class="text-xs text-gray-400 mt-1">Yesterday, 8:30 PM</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-100">Stress</span> | |
| </div> | |
| <p class="text-gray-300 text-sm mt-2">Felt stressed after work and had strong urges. Went for a run instead and felt much better.</p> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-green-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-white">Mild Trigger</h3> | |
| <p class="text-xs text-gray-400 mt-1">2 days ago, 10:15 AM</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900 text-green-100">Boredom</span> | |
| </div> | |
| <p class="text-gray-300 text-sm mt-2">Weekend morning with nothing to do. Called a friend to hang out instead.</p> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-yellow-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-white">Severe Trigger</h3> | |
| <p class="text-xs text-gray-400 mt-1">4 days ago, 11:45 PM</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-900 text-yellow-100">Loneliness</span> | |
| </div> | |
| <p class="text-gray-300 text-sm mt-2">Late night alone, almost gave in. Used emergency breathing technique and went to sleep.</p> | |
| </div> | |
| </div> | |
| <button id="view-all-entries" class="mt-4 text-blue-500 hover:text-blue-400 text-sm font-medium"> | |
| View All Entries <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 mt-6"> | |
| <h2 class="text-xl font-bold text-white mb-4">Trigger Patterns</h2> | |
| <div class="h-64 flex items-center justify-center"> | |
| <p class="text-gray-400 text-center">Chart will appear here when you have more data.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Education Section --> | |
| <section id="education" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-t border-gray-800"> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-white">Education & Resources</h1> | |
| <p class="text-gray-400 mt-2">Knowledge is power. Understand the science behind recovery.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Article 1 --> | |
| <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-blue-500 transition duration-150 ease-in-out"> | |
| <div class="h-40 bg-gradient-to-r from-blue-900 to-blue-800 flex items-center justify-center"> | |
| <i class="fas fa-brain text-5xl text-blue-300 opacity-70"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>Article</span> | |
| <span class="mx-2">•</span> | |
| <span>8 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">The Neuroscience of Addiction</h3> | |
| <p class="text-gray-400 mb-4">Understanding how pornography affects your brain's reward system and how to rewire it.</p> | |
| <button class="text-blue-500 hover:text-blue-400 font-medium flex items-center"> | |
| Read Article <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-green-500 transition duration-150 ease-in-out"> | |
| <div class="h-40 bg-gradient-to-r from-green-900 to-green-800 flex items-center justify-center"> | |
| <i class="fas fa-heartbeat text-5xl text-green-300 opacity-70"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>Article</span> | |
| <span class="mx-2">•</span> | |
| <span>6 min read</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Benefits of a 90-Day Reboot</h3> | |
| <p class="text-gray-400 mb-4">Discover the physical, mental and emotional benefits you can expect from a 3-month reset.</p> | |
| <button class="text-green-500 hover:text-green-400 font-medium flex items-center"> | |
| Read Article <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Video --> | |
| <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-800 hover:border-purple-500 transition duration-150 ease-in-out"> | |
| <div class="h-40 bg-gradient-to-r from-purple-900 to-purple-800 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-5xl text-purple-300 opacity-70"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>Video</span> | |
| <span class="mx-2">•</span> | |
| <span>12 min</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Coping With Urges</h3> | |
| <p class="text-gray-400 mb-4">Practical techniques to ride out urges when they feel overwhelming.</p> | |
| <button class="text-purple-500 hover:text-purple-400 font-medium flex items-center"> | |
| Watch Video <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Tools --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <h2 class="text-xl font-bold text-white mb-4">Recovery Tools</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center"> | |
| <i class="fas fa-dumbbell text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Exercise Routines</h3> | |
| <p class="mt-1 text-gray-400 text-sm">Physical activity helps redirect energy and boost mood.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center"> | |
| <i class="fas fa-spa text-green-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Meditation Guides</h3> | |
| <p class="mt-1 text-gray-400 text-sm">Mindfulness practices to increase self-awareness.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center"> | |
| <i class="fas fa-book text-purple-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Reading List</h3> | |
| <p class="mt-1 text-gray-400 text-sm">Books on personal development and recovery.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accountability --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <h2 class="text-xl font-bold text-white mb-4">Accountability Partner</h2> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-16 w-16 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-user-shield text-2xl text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Connect with a Mentor</h3> | |
| <p class="mt-1 text-gray-400 text-sm">Pair anonymously with someone further along in recovery.</p> | |
| <button class="mt-3 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium text-sm transition duration-150 ease-in-out"> | |
| Find a Partner | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section id="community" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-t border-gray-800"> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-white">Community Support</h1> | |
| <p class="text-gray-400 mt-2">You're not alone. Connect with others on the same journey.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-bold text-white">Recent Discussions</h2> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium text-sm transition duration-150 ease-in-out"> | |
| New Post | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Discussion 1 --> | |
| <div class="bg-gray-800/50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-blue-900/50 flex items-center justify-center"> | |
| <span class="text-white font-medium">A</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-white">AnonymousUser42</h3> | |
| <span class="text-xs text-gray-400">2h ago</span> | |
| </div> | |
| <h4 class="text-base font-medium text-white mt-1">How do you deal with weekends?</h4> | |
| <p class="text-gray-300 text-sm mt-1">Weekends are my biggest challenge with too much free time. Any suggestions for staying on track?</p> | |
| <div class="mt-3 flex items-center text-sm text-gray-400"> | |
| <span class="flex items-center mr-4"> | |
| <i class="far fa-comment mr-1"></i> 8 | |
| </span> | |
| <span class="flex items-center"> | |
| <i class="far fa-heart mr-1"></i> 12 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Discussion 2 --> | |
| <div class="bg-gray-800/50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-green-900/50 flex items-center justify-center"> | |
| <span class="text-white font-medium">W</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-white">Warrior87</h3> | |
| <span class="text-xs text-gray-400">5h ago</span> | |
| </div> | |
| <h4 class="text-base font-medium text-white mt-1">90 days clean today!</h4> | |
| <p class="text-gray-300 text-sm mt-1">Just wanted to share this milestone. If I can do it, you can too. Keep fighting the good fight!</p> | |
| <div class="mt-3 flex items-center text-sm text-gray-400"> | |
| <span class="flex items-center mr-4"> | |
| <i class="far fa-comment mr-1"></i> 15 | |
| </span> | |
| <span class="flex items-center"> | |
| <i class="far fa-heart mr-1"></i> 32 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Discussion 3 --> | |
| <div class="bg-gray-800/50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="h-10 w-10 rounded-full bg-purple-900/50 flex items-center justify-center"> | |
| <span class="text-white font-medium">S</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-white">StrongerEveryDay</h3> | |
| <span class="text-xs text-gray-400">1d ago</span> | |
| </div> | |
| <h4 class="text-base font-medium text-white mt-1">Best apps for blocking content?</h4> | |
| <p class="text-gray-300 text-sm mt-1">Looking for recommendations for the most effective content blockers across devices.</p> | |
| <div class="mt-3 flex items-center text-sm text-gray-400"> | |
| <span class="flex items-center mr-4"> | |
| <i class="far fa-comment mr-1"></i> 22 | |
| </span> | |
| <span class="flex items-center"> | |
| <i class="far fa-heart mr-1"></i> 18 | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out"> | |
| View All Discussions | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800"> | |
| <h2 class="text-xl font-bold text-white mb-4">Current Challenges</h2> | |
| <div class="space-y-4"> | |
| <!-- Challenge 1 --> | |
| <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500"> | |
| <h3 class="text-lg font-medium text-white">7-Day Cold Shower Challenge</h3> | |
| <p class="text-gray-400 text-sm mt-1">Build discipline by taking cold showers every morning.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center justify-between text-sm text-gray-300"> | |
| <span>125 participants</span> | |
| <button class="text-blue-500 hover:text-blue-400 font-medium"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Challenge 2 --> | |
| <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-green-500"> | |
| <h3 class="text-lg font-medium text-white">30-Day Exercise Streak</h3> | |
| <p class="text-gray-400 text-sm mt-1">Commit to at least 20 minutes of exercise daily.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center justify-between text-sm text-gray-300"> | |
| <span>89 participants</span> | |
| <button class="text-green-500 hover:text-green-400 font-medium"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Challenge 3 --> | |
| <div class="bg-gray-800/50 rounded-lg p-4 border-l-4 border-purple-500"> | |
| <h3 class="text-lg font-medium text-white">Screen-Free Evenings</h3> | |
| <p class="text-gray-400 text-sm mt-1">No screens after 8pm for one week.</p> | |
| <div class="mt-3"> | |
| <div class="flex items-center justify-between text-sm text-gray-300"> | |
| <span>64 participants</span> | |
| <button class="text-purple-500 hover:text-purple-400 font-medium"> | |
| Join | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Chatbot --> | |
| <div class="bg-gray-900 rounded-lg p-6 border border-gray-800 mt-6"> | |
| <h2 class="text-xl font-bold text-white mb-4">Recovery Assistant</h2> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-16 w-16 rounded-full bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-robot text-2xl text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Need Immediate Help?</h3> | |
| <p class="mt-1 text-gray-400 text-sm">Chat with our AI assistant for support and encouragement.</p> | |
| <button id="chatbot-btn" class="mt-3 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md font-medium text-sm transition duration-150 ease-in-out"> | |
| Start Chat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">RECLAIM</h3> | |
| <p class="text-gray-400 text-sm">A platform dedicated to helping individuals overcome pornography addiction and reclaim control of their lives.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-white mb-4">Get Help</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Crisis Hotline</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Therapist Directory</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Support Groups</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>© 2023 Reclaim. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Emergency Modal --> | |
| <div id="emergency-modal" class="hidden fixed inset-0 overflow-y-auto z-50"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-900 opacity-90"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-900 sm:mx-0 sm:h-10 sm:w-10"> | |
| <i class="fas fa-exclamation text-red-400"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> | |
| <h3 class="text-lg leading-6 font-medium text-white" id="modal-title"> | |
| Emergency Assistance | |
| </h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-300"> | |
| You're stronger than this urge. Choose a healthy distraction: | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-col"> | |
| <div class="grid grid-cols-1 gap-3"> | |
| <button class="emergency-option bg-blue-900/50 hover:bg-blue-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start"> | |
| <i class="fas fa-running text-blue-400 mr-3"></i> 5-Minute Exercise Routine | |
| </button> | |
| <button class="emergency-option bg-green-900/50 hover:bg-green-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start"> | |
| <i class="fas fa-wind text-green-400 mr-3"></i> Breathing Technique | |
| </button> | |
| <button class="emergency-option bg-purple-900/50 hover:bg-purple-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start"> | |
| <i class="fas fa-headphones text-purple-400 mr-3"></i> Guided Meditation | |
| </button> | |
| <button class="emergency-option bg-red-900/50 hover:bg-red-800 text-white py-3 px-4 rounded-md font-medium flex items-center justify-start"> | |
| <i class="fas fa-phone-alt text-red-400 mr-3"></i> Call a Friend | |
| </button> | |
| </div> | |
| <button id="close-emergency-modal" class="mt-4 w-full bg-gray-600 hover:bg-gray-500 text-white py-2 px-4 rounded-md font-medium transition duration-150 ease-in-out"> | |
| I'm Feeling Better | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chatbot Modal --> | |
| <div id="chatbot-modal" class="hidden fixed bottom-4 right-4 z-50"> | |
| <div class="bg-gray-800 rounded-lg shadow-xl w-80 border border-gray-700 overflow-hidden"> | |
| <div class="bg-gray-900 px-4 py-3 border-b border-gray-700 flex items-center justify-between"> | |
| <h3 class="text-white font-medium">Recovery Assistant</h3> | |
| <button id="close-chatbot-modal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="h-64 p-4 overflow-y-auto" id="chatbot-messages"> | |
| <div class="flex mb-4"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-900/50 flex items-center justify-center"> | |
| <i class="fas fa-robot text-blue-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="bg-gray-700 rounded-lg p-3 text-white text-sm"> | |
| Hi there! I'm here to help you through any challenges you're facing. What's on your mind? | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 border-t border-gray-700"> | |
| <div class="flex"> | |
| <input type="text" id="chatbot-input" class="flex-1 bg-gray-700 border border-gray-600 rounded-l-md px-3 py-2 text-white text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Type your message..."> | |
| <button id="send-chatbot-message" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-r-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Check-in Confirmation Toast --> | |
| <div id="checkin-toast" class="hidden fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50"> | |
| <div class="bg-green-800/90 text-white px-6 py-3 rounded-md shadow-lg flex items-center"> | |
| <i class="fas fa-check-circle text-green-300 mr-2"></i> | |
| <span>Daily check-in recorded! Keep up the good work.</span> | |
| </div> | |
| </div> | |
| <!-- Badge Earned Toast --> | |
| <div id="badge-toast" class="hidden fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50"> | |
| <div class="bg-blue-800/90 text-white px-6 py-3 rounded-md shadow-lg flex items-center"> | |
| <i class="fas fa-trophy text-yellow-300 mr-2"></i> | |
| <span>New badge earned: <strong>7-Day Streak</strong>!</span> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // Emergency button | |
| document.getElementById('emergency-btn').addEventListener('click', function() { | |
| document.getElementById('emergency-modal').classList.remove('hidden'); | |
| }); | |
| // Close emergency modal | |
| document.getElementById('close-emergency-modal').addEventListener('click', function() { | |
| document.getElementById('emergency-modal').classList.add('hidden'); | |
| }); | |
| // Emergency options | |
| document.querySelectorAll('.emergency-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| // In a real app, this would redirect to the specific resource | |
| alert('Redirecting to ' + this.textContent.trim() + ' resource...'); | |
| document.getElementById('emergency-modal').classList.add('hidden'); | |
| }); | |
| }); | |
| // Check-in button | |
| document.getElementById('check-in-btn').addEventListener('click', function() { | |
| // Increment streak | |
| const streakElement = document.getElementById('streak-count'); | |
| let streak = parseInt(streakElement.textContent); | |
| streakElement.textContent = streak + 1; | |
| // Show toast | |
| const toast = document.getElementById('checkin-toast'); | |
| toast.classList.remove('hidden'); | |
| setTimeout(() => { | |
| toast.classList.add('hidden'); | |
| }, 3000); | |
| // If streak is 7, show badge toast | |
| if (streak + 1 === 7) { | |
| setTimeout(() => { | |
| const badgeToast = document.getElementById('badge-toast'); | |
| badgeToast.classList.remove('hidden'); | |
| setTimeout(() => { | |
| badgeToast.classList.add('hidden'); | |
| }, 3000); | |
| }, 1000); | |
| } | |
| // Disable button for today | |
| this.disabled = true; | |
| this.classList.remove('bg-blue-600', 'hover:bg-blue-700'); | |
| this.classList.add('bg-gray-600', 'cursor-not-allowed'); | |
| this.textContent = 'Checked In Today'; | |
| }); | |
| // Journal form submission | |
| document.getElementById('journal-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get form values | |
| const date = document.getElementById('entry-date').value; | |
| const triggerLevel = document.getElementById('trigger-level').value; | |
| const content = document.getElementById('journal-content').value; | |
| // Create new entry element | |
| const entry = document.createElement('div'); | |
| entry.className = 'bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500 fade-in'; | |
| // Determine trigger level text and color | |
| let triggerText, borderColor; | |
| switch(triggerLevel) { | |
| case '1': | |
| triggerText = 'Mild Trigger'; | |
| borderColor = 'border-green-500'; | |
| break; | |
| case '2': | |
| triggerText = 'Moderate Trigger'; | |
| borderColor = 'border-blue-500'; | |
| break; | |
| case '3': | |
| triggerText = 'Severe Trigger'; | |
| borderColor = 'border-yellow-500'; | |
| break; | |
| case '4': | |
| triggerText = 'Overcome'; | |
| borderColor = 'border-red-500'; | |
| break; | |
| } | |
| // Update entry class with correct border color | |
| entry.className = `bg-gray-800/50 rounded-lg p-4 border-l-4 ${borderColor} fade-in`; | |
| // Get checked trigger types | |
| const triggerTypes = []; | |
| document.querySelectorAll('#journal-form input[type="checkbox"]:checked').forEach(checkbox => { | |
| triggerTypes.push(checkbox.value); | |
| }); | |
| // Create entry HTML | |
| entry.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-white">${triggerText}</h3> | |
| <p class="text-xs text-gray-400 mt-1">${formatDate(date)}, Just now</p> | |
| </div> | |
| ${triggerTypes.length > 0 ? | |
| `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-900 text-blue-100"> | |
| ${triggerTypes[0].charAt(0).toUpperCase() + triggerTypes[0].slice(1)} | |
| </span>` : ''} | |
| </div> | |
| <p class="text-gray-300 text-sm mt-2">${content}</p> | |
| `; | |
| // Prepend to journal entries | |
| document.getElementById('journal-entries').prepend(entry); | |
| // Reset form | |
| this.reset(); | |
| // Show success message | |
| alert('Journal entry saved successfully!'); | |
| }); | |
| // Format date for display | |
| function formatDate(dateString) { | |
| const options = { year: 'numeric', month: 'short', day: 'numeric' }; | |
| return new Date(dateString).toLocaleDateString(undefined, options); | |
| } | |
| // Chatbot toggle | |
| document.getElementById('chatbot-btn').addEventListener('click', function() { | |
| document.getElementById('chatbot-modal').classList.toggle('hidden'); | |
| }); | |
| // Close chatbot modal | |
| document.getElementById('close-chatbot-modal').addEventListener('click', function() { | |
| document.getElementById('chatbot-modal').classList.add('hidden'); | |
| }); | |
| // Send chatbot message | |
| document.getElementById('send-chatbot-message').addEventListener('click', function() { | |
| const input = document.getElementById('chatbot-input'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| // Add user message | |
| addChatbotMessage('user', message); | |
| input.value = ''; | |
| // Simulate bot response after a delay | |
| setTimeout(() => { | |
| const responses = [ | |
| "I understand how challenging this can be. Remember, urges are temporary and will pass.", | |
| "You're not alone in this struggle. Many have walked this path before you and succeeded.", | |
| "Have you tried any of the emergency techniques we discussed? They can be very helpful in moments like this.", | |
| "What's one small step you can take right now to redirect your energy?", | |
| "Progress isn't linear. Every moment is a new opportunity to make a healthy choice.", | |
| "I'm proud of you for reaching out. That shows real strength and commitment to your recovery." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addChatbotMessage('bot', randomResponse); | |
| }, 1000); | |
| } | |
| }); | |
| // Also allow sending message with Enter key | |
| document.getElementById('chatbot-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.getElementById('send-chatbot-message').click(); | |
| } | |
| }); | |
| // Add message to chatbot | |
| function addChatbotMessage(sender, message) { | |
| const messagesContainer = document.getElementById('chatbot-messages'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex mb-4 fade-in'; | |
| if (sender === 'user') { | |
| messageDiv.innerHTML = ` | |
| <div class="ml-auto max-w-xs"> | |
| <div class="bg-blue-600 rounded-lg p-3 text-white text-sm"> | |
| ${message} | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| messageDiv.innerHTML = ` | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-900/50 flex items-center justify-center"> | |
| <i class="fas fa-robot text-blue-400"></i> | |
| </div> | |
| <div class="ml-3 max-w-xs"> | |
| <div class="bg-gray-700 rounded-lg p-3 text-white text-sm"> | |
| ${message} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| messagesContainer.appendChild(messageDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Initialize progress ring | |
| function initProgressRing() { | |
| const circle = document.getElementById('progress-ring'); | |
| const radius = circle.r.baseVal.value; | |
| const circumference = 2 * Math.PI * radius; | |
| circle.style.strokeDasharray = circumference; | |
| circle.style.strokeDashoffset = circumference; | |
| // Set progress (75% in this case) | |
| const progress = 0.75; | |
| const offset = circumference - progress * circumference; | |
| circle.style.strokeDashoffset = offset; | |
| // Update percentage text | |
| document.getElementById('progress-percent').textContent = `${Math.round(progress * 100)}%`; | |
| } | |
| // Initialize on load | |
| window.addEventListener('load', function() { | |
| initProgressRing(); | |
| // Set today's date as default in journal | |
| const today = new Date().toISOString().split('T')[0]; | |
| document.getElementById('entry-date').value = today; | |
| // Set random motivation quote | |
| const quotes = [ | |
| { | |
| text: "Discipline is choosing between what you want now and what you want most.", | |
| author: "Abraham Lincoln" | |
| }, | |
| { | |
| text: "You are always one decision away from a totally different life.", | |
| author: "Anonymous" | |
| }, | |
| { | |
| text: "The secret of change is to focus all your energy not on fighting the old, but on building the new.", | |
| author: "Socrates" | |
| }, | |
| { | |
| text: "Every next level of your life will demand a different version of you.", | |
| author: "Anonymous" | |
| }, | |
| { | |
| text: "The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.", | |
| author: "Steve Jobs" | |
| } | |
| ]; | |
| const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; | |
| document.getElementById('motivation-quote').textContent = `"${randomQuote.text}"`; | |
| document.querySelector('#dashboard [id="motivation-quote"] + p').textContent = `- ${randomQuote.author}`; | |
| }); | |
| </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=Digiator/reclaim" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |