Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Check-In | Mental Health Self-Care</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4A90A4 0%, #7FB069 100%); | |
| } | |
| .emoji-rating { | |
| transition: all 0.3s ease; | |
| } | |
| .emoji-rating:hover { | |
| transform: scale(1.1); | |
| } | |
| .emoji-rating.selected { | |
| transform: scale(1.2); | |
| filter: drop-shadow(0 0 8px rgba(74, 144, 164, 0.5)); | |
| } | |
| .form-section { | |
| transition: all 0.5s ease; | |
| } | |
| .form-section.hidden { | |
| opacity: 0; | |
| height: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#F7F3E9] text-[#2D3436]"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="heart" class="text-[#4A90A4] h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-[#2D3436]">Mental-Health-Self-Care</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="index.html" class="text-gray-500 hover:text-[#4A90A4] px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="daily-practices.html" class="text-gray-500 hover:text-[#4A90A4] px-3 py-2 text-sm font-medium">Daily Practices</a> | |
| <a href="#" class="text-[#4A90A4] px-3 py-2 text-sm font-medium">Check-In</a> | |
| <a href="#" class="bg-[#4A90A4] text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-[#3a798a]">Get Started</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-[#4A90A4]" aria-controls="mobile-menu" aria-expanded="false"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">How Are You Feeling Today?</h1> | |
| <p class="text-xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">Take a quick moment to check in with yourself. We'll suggest personalized resources based on your responses.</p> | |
| </div> | |
| </div> | |
| <!-- Check-In Form --> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-8"> | |
| <!-- Progress Indicator --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-[#4A90A4]">Step 1 of 3</span> | |
| <span class="text-sm font-medium">20%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-[#4A90A4] h-2.5 rounded-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| <!-- Form Sections --> | |
| <form id="checkinForm"> | |
| <!-- Mood Section --> | |
| <div class="form-section" id="mood-section"> | |
| <h2 class="text-2xl font-bold mb-6">How would you rate your current mood?</h2> | |
| <div class="grid grid-cols-5 gap-4 mb-8"> | |
| <label class="emoji-rating cursor-pointer text-center"> | |
| <input type="radio" name="mood" value="1" class="hidden"> | |
| <div class="text-5xl mb-2">😭</div> | |
| <span class="text-sm">Very Low</span> | |
| </label> | |
| <label class="emoji-rating cursor-pointer text-center"> | |
| <input type="radio" name="mood" value="2" class="hidden"> | |
| <div class="text-5xl mb-2">😞</div> | |
| <span class="text-sm">Low</span> | |
| </label> | |
| <label class="emoji-rating cursor-pointer text-center"> | |
| <input type="radio" name="mood" value="3" class="hidden"> | |
| <div class="text-5xl mb-2">😐</div> | |
| <span class="text-sm">Neutral</span> | |
| </label> | |
| <label class="emoji-rating cursor-pointer text-center"> | |
| <input type="radio" name="mood" value="4" class="hidden"> | |
| <div class="text-5xl mb-2">🙂</div> | |
| <span class="text-sm">Good</span> | |
| </label> | |
| <label class="emoji-rating cursor-pointer text-center"> | |
| <input type="radio" name="mood" value="5" class="hidden"> | |
| <div class="text-5xl mb-2">😊</div> | |
| <span class="text-sm">Great</span> | |
| </label> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button type="button" class="next-section bg-[#4A90A4] text-white px-6 py-2 rounded-md font-medium hover:bg-[#3a798a]">Next</button> | |
| </div> | |
| </div> | |
| <!-- Emotions Section --> | |
| <div class="form-section hidden" id="emotions-section"> | |
| <h2 class="text-2xl font-bold mb-6">Which emotions are you feeling most strongly right now?</h2> | |
| <p class="text-gray-600 mb-6">Select all that apply</p> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="stressed" class="rounded text-[#4A90A4]"> | |
| <span>Stressed</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="anxious" class="rounded text-[#4A90A4]"> | |
| <span>Anxious</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="overwhelmed" class="rounded text-[#4A90A4]"> | |
| <span>Overwhelmed</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="tired" class="rounded text-[#4A90A4]"> | |
| <span>Tired</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="calm" class="rounded text-[#4A90A4]"> | |
| <span>Calm</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="happy" class="rounded text-[#4A90A4]"> | |
| <span>Happy</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="focused" class="rounded text-[#4A90A4]"> | |
| <span>Focused</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="lonely" class="rounded text-[#4A90A4]"> | |
| <span>Lonely</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" name="emotions" value="other" class="rounded text-[#4A90A4]"> | |
| <span>Other</span> | |
| </label> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button type="button" class="prev-section text-[#4A90A4] px-4 py-2 rounded-md font-medium hover:bg-gray-100">Back</button> | |
| <button type="button" class="next-section bg-[#4A90A4] text-white px-6 py-2 rounded-md font-medium hover:bg-[#3a798a]">Next</button> | |
| </div> | |
| </div> | |
| <!-- Time Section --> | |
| <div class="form-section hidden" id="time-section"> | |
| <h2 class="text-2xl font-bold mb-6">How much time do you have right now?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <label class="border-2 border-gray-200 rounded-lg p-4 hover:border-[#4A90A4] cursor-pointer"> | |
| <input type="radio" name="time" value="2-5" class="hidden"> | |
| <div class="text-center"> | |
| <div class="text-3xl mb-2">⏱️</div> | |
| <h3 class="font-bold mb-1">2-5 minutes</h3> | |
| <p class="text-sm text-gray-600">Quick reset</p> | |
| </div> | |
| </label> | |
| <label class="border-2 border-gray-200 rounded-lg p-4 hover:border-[#4A90A4] cursor-pointer"> | |
| <input type="radio" name="time" value="5-10" class="hidden"> | |
| <div class="text-center"> | |
| <div class="text-3xl mb-2">⏳</div> | |
| <h3 class="font-bold mb-1">5-10 minutes</h3> | |
| <p class="text-sm text-gray-600">Short break</p> | |
| </div> | |
| </label> | |
| <label class="border-2 border-gray-200 rounded-lg p-4 hover:border-[#4A90A4] cursor-pointer"> | |
| <input type="radio" name="time" value="10+" class="hidden"> | |
| <div class="text-center"> | |
| <div class="text-3xl mb-2">⌛</div> | |
| <h3 class="font-bold mb-1">10+ minutes</h3> | |
| <p class="text-sm text-gray-600">Extended practice</p> | |
| </div> | |
| </label> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button type="button" class="prev-section text-[#4A90A4] px-4 py-2 rounded-md font-medium hover:bg-gray-100">Back</button> | |
| <button type="submit" class="bg-[#4A90A4] text-white px-6 py-2 rounded-md font-medium hover:bg-[#3a798a]">Get Recommendations</button> | |
| </div> | |
| </div> | |
| </form> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden"> | |
| <div class="text-center py-8"> | |
| <div class="text-6xl mb-4">✨</div> | |
| <h2 class="text-2xl font-bold mb-4">Here Are Your Personalized Recommendations</h2> | |
| <p class="text-gray-600 mb-8">Based on your responses, we think these resources might help right now.</p> | |
| <div class="grid grid-cols-1 gap-6 mb-8"> | |
| <div class="bg-[#F7F3E9] rounded-lg p-6 text-left"> | |
| <h3 class="text-xl font-bold mb-2 flex items-center"> | |
| <i data-feather="wind" class="text-[#4A90A4] mr-2"></i> 4-7-8 Breathing Exercise | |
| </h3> | |
| <p class="text-gray-600 mb-4">A simple technique to quickly calm your nervous system.</p> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <i data-feather="clock" class="mr-1 h-4 w-4"></i> | |
| <span>2 minutes</span> | |
| </div> | |
| <a href="#" class="text-[#4A90A4] font-medium">Try Now →</a> | |
| </div> | |
| <div class="bg-[#F7F3E9] rounded-lg p-6 text-left"> | |
| <h3 class="text-xl font-bold mb-2 flex items-center"> | |
| <i data-feather="edit-3" class="text-[#4A90A4] mr-2"></i> Quick Journal Prompt | |
| </h3> | |
| <p class="text-gray-600 mb-4">"What's one small thing I can do right now to feel slightly better?"</p> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <i data-feather="clock" class="mr-1 h-4 w-4"></i> | |
| <span>3-5 minutes</span> | |
| </div> | |
| <a href="#" class="text-[#4A90A4] font-medium">Start Writing →</a> | |
| </div> | |
| </div> | |
| <button id="restart-checkin" class="bg-[#F4A261] text-white px-6 py-2 rounded-md font-medium hover:bg-[#e6914f]">Start New Check-In</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Crisis Resources --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="bg-[#FFEEEE] border-l-4 border-[#F4A261] p-6 rounded-r-lg"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="alert-triangle" class="text-[#F4A261] h-6 w-6"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-bold text-[#2D3436]">Need Immediate Help?</h3> | |
| <div class="mt-2 text-gray-700"> | |
| <p>If you're in crisis or experiencing thoughts of self-harm, please reach out to these resources:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li><strong>National Suicide Prevention Lifeline:</strong> 988 (US)</li> | |
| <li><strong>Crisis Text Line:</strong> Text HOME to 741741 (US)</li> | |
| <li><strong>Your Campus Counseling Center:</strong> Check your university website</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-[#2D3436] text-white pt-12 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Mental-Health-Self-Care</h3> | |
| <p class="text-gray-300">Supporting student wellness one day at a time.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-300 hover:text-white">Home</a></li> | |
| <li><a href="daily-practices.html" class="text-gray-300 hover:text-white">Daily Practices</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Check-In Tool</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Crisis Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white">National Suicide Prevention Lifeline</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Crisis Text Line</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white">Campus Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="instagram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-white"><i data-feather="facebook"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8"> | |
| <p class="text-gray-400 text-sm text-center">© 2023 Mental-Health-Self-Care. All resources are provided for educational purposes only.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Form navigation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const formSections = document.querySelectorAll('.form-section'); | |
| const nextButtons = document.querySelectorAll('.next-section'); | |
| const prevButtons = document.querySelectorAll('.prev-section'); | |
| const form = document.getElementById('checkinForm'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const restartButton = document.getElementById('restart-checkin'); | |
| const emojiRatings = document.querySelectorAll('.emoji-rating'); | |
| // Emoji rating selection | |
| emojiRatings.forEach(rating => { | |
| rating.addEventListener('click', function() { | |
| // Remove selected class from all | |
| emojiRatings.forEach(r => r.classList.remove('selected')); | |
| // Add to clicked | |
| this.classList.add('selected'); | |
| // Check the radio input | |
| this.querySelector('input').checked = true; | |
| }); | |
| }); | |
| // Next button functionality | |
| nextButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const currentSection = this.closest('.form-section'); | |
| const nextSectionId = currentSection.nextElementSibling.id; | |
| // Hide current section | |
| currentSection.classList.add('hidden'); | |
| // Show next section | |
| document.getElementById(nextSectionId).classList.remove('hidden'); | |
| // Update progress bar | |
| updateProgressBar(nextSectionId); | |
| }); | |
| }); | |
| // Previous button functionality | |
| prevButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const currentSection = this.closest('.form-section'); | |
| const prevSectionId = currentSection.previousElementSibling.id; | |
| // Hide current section | |
| currentSection.classList.add('hidden'); | |
| // Show previous section | |
| document.getElementById(prevSectionId).classList.remove('hidden'); | |
| // Update progress bar | |
| updateProgressBar(prevSectionId); | |
| }); | |
| }); | |
| // Form submission | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Hide all form sections | |
| formSections.forEach(section => section.classList.add('hidden')); | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| // Update progress to 100% | |
| document.querySelector('.text-sm.font-medium.text-[#4A90A4]').textContent = 'Complete'; | |
| document.querySelector('.bg-[#4A90A4]').style.width = '100%'; | |
| }); | |
| // Restart check-in | |
| restartButton.addEventListener('click', function() { | |
| // Hide results | |
| resultsSection.classList.add('hidden'); | |
| // Reset form | |
| form.reset(); | |
| emojiRatings.forEach(r => r.classList.remove('selected')); | |
| // Show first section | |
| document.getElementById('mood-section').classList.remove('hidden'); | |
| // Reset progress | |
| document.querySelector('.text-sm.font-medium.text-[#4A90A4]').textContent = 'Step 1 of 3'; | |
| document.querySelector('.bg-[#4A90A4]').style.width = '20%'; | |
| }); | |
| // Update progress bar based on current section | |
| function updateProgressBar(sectionId) { | |
| const progressText = document.querySelector('.text-sm.font-medium.text-[#4A90A4]'); | |
| const progressBar = document.querySelector('.bg-[#4A90A4]'); | |
| if (sectionId === 'mood-section') { | |
| progressText.textContent = 'Step 1 of 3'; | |
| progressBar.style.width = '20%'; | |
| } else if (sectionId === 'emotions-section') { | |
| progressText.textContent = 'Step 2 of 3'; | |
| progressBar.style.width = '60%'; | |
| } else if (sectionId === 'time-section') { | |
| progressText.textContent = 'Step 3 of 3'; | |
| progressBar.style.width = '90%'; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |