|
|
<!DOCTYPE html> |
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 class="pt-20 pb-10"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
document.getElementById('mobile-menu').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('emergency-btn').addEventListener('click', function() { |
|
|
document.getElementById('emergency-modal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-emergency-modal').addEventListener('click', function() { |
|
|
document.getElementById('emergency-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.emergency-option').forEach(option => { |
|
|
option.addEventListener('click', function() { |
|
|
|
|
|
alert('Redirecting to ' + this.textContent.trim() + ' resource...'); |
|
|
document.getElementById('emergency-modal').classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('check-in-btn').addEventListener('click', function() { |
|
|
|
|
|
const streakElement = document.getElementById('streak-count'); |
|
|
let streak = parseInt(streakElement.textContent); |
|
|
streakElement.textContent = streak + 1; |
|
|
|
|
|
|
|
|
const toast = document.getElementById('checkin-toast'); |
|
|
toast.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
if (streak + 1 === 7) { |
|
|
setTimeout(() => { |
|
|
const badgeToast = document.getElementById('badge-toast'); |
|
|
badgeToast.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
badgeToast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
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'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('journal-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const date = document.getElementById('entry-date').value; |
|
|
const triggerLevel = document.getElementById('trigger-level').value; |
|
|
const content = document.getElementById('journal-content').value; |
|
|
|
|
|
|
|
|
const entry = document.createElement('div'); |
|
|
entry.className = 'bg-gray-800/50 rounded-lg p-4 border-l-4 border-blue-500 fade-in'; |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
entry.className = `bg-gray-800/50 rounded-lg p-4 border-l-4 ${borderColor} fade-in`; |
|
|
|
|
|
|
|
|
const triggerTypes = []; |
|
|
document.querySelectorAll('#journal-form input[type="checkbox"]:checked').forEach(checkbox => { |
|
|
triggerTypes.push(checkbox.value); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
|
|
`; |
|
|
|
|
|
|
|
|
document.getElementById('journal-entries').prepend(entry); |
|
|
|
|
|
|
|
|
this.reset(); |
|
|
|
|
|
|
|
|
alert('Journal entry saved successfully!'); |
|
|
}); |
|
|
|
|
|
|
|
|
function formatDate(dateString) { |
|
|
const options = { year: 'numeric', month: 'short', day: 'numeric' }; |
|
|
return new Date(dateString).toLocaleDateString(undefined, options); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('chatbot-btn').addEventListener('click', function() { |
|
|
document.getElementById('chatbot-modal').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('close-chatbot-modal').addEventListener('click', function() { |
|
|
document.getElementById('chatbot-modal').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('send-chatbot-message').addEventListener('click', function() { |
|
|
const input = document.getElementById('chatbot-input'); |
|
|
const message = input.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
|
|
|
addChatbotMessage('user', message); |
|
|
input.value = ''; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('chatbot-input').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
document.getElementById('send-chatbot-message').click(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
const progress = 0.75; |
|
|
const offset = circumference - progress * circumference; |
|
|
circle.style.strokeDashoffset = offset; |
|
|
|
|
|
|
|
|
document.getElementById('progress-percent').textContent = `${Math.round(progress * 100)}%`; |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
initProgressRing(); |
|
|
|
|
|
|
|
|
const today = new Date().toISOString().split('T')[0]; |
|
|
document.getElementById('entry-date').value = today; |
|
|
|
|
|
|
|
|
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> |
