Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KnowYourMess - Stress Level Indicator</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=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .stress-meter { | |
| height: 20px; | |
| background: linear-gradient(to right, | |
| #4ade80 0%, | |
| #4ade80 20%, | |
| #facc15 20%, | |
| #facc15 40%, | |
| #f97316 40%, | |
| #f97316 60%, | |
| #ef4444 60%, | |
| #ef4444 80%, | |
| #991b1b 80%, | |
| #991b1b 100%); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); | |
| } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-brain text-2xl"></i> | |
| <span class="font-semibold text-xl">KnowYourMess</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="hover:text-gray-200">Home</a> | |
| <a href="#" class="hover:text-gray-200">About</a> | |
| <a href="#" class="hover:text-gray-200">Resources</a> | |
| <a href="#" class="hover:text-gray-200">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="py-16 px-4"> | |
| <div class="container mx-auto flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Understand Your <span class="text-indigo-600">Stress</span> Levels</h1> | |
| <p class="text-lg mb-8 text-gray-600">KnowYourMess helps you identify and manage your stress through simple, interactive assessments and personalized recommendations.</p> | |
| <button onclick="startAssessment()" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition duration-300 flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Start Assessment | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> | |
| <div class="absolute inset-0 bg-indigo-100 rounded-full opacity-20 floating"></div> | |
| <div class="absolute inset-4 bg-indigo-200 rounded-full opacity-30 floating" style="animation-delay: 0.5s;"></div> | |
| <div class="absolute inset-8 bg-indigo-300 rounded-full opacity-40 floating" style="animation-delay: 1s;"></div> | |
| <img src="https://cdn-icons-png.flaticon.com/512/4052/4052981.png" alt="Stress illustration" class="relative z-10 w-full h-full object-contain"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Assessment Section (Hidden by default) --> | |
| <section id="assessmentSection" class="hidden py-12 px-4 bg-white rounded-lg shadow-xl mx-4 md:mx-auto max-w-4xl"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-gray-800">Stress Level Assessment</h2> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Your stress level</span> | |
| <span id="stressValue" class="text-sm font-medium">0%</span> | |
| </div> | |
| <div class="stress-meter rounded-full overflow-hidden mb-2"> | |
| <div id="stressIndicator" class="h-full bg-white rounded-full w-0 transition-all duration-500" style="width: 0%;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Low</span> | |
| <span>Moderate</span> | |
| <span>High</span> | |
| <span>Very High</span> | |
| <span>Critical</span> | |
| </div> | |
| </div> | |
| <div id="questionContainer" class="space-y-8"> | |
| <!-- Questions will be inserted here by JavaScript --> | |
| </div> | |
| <div class="mt-10 flex justify-center"> | |
| <button id="submitBtn" onclick="calculateStress()" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition duration-300 hidden"> | |
| Get Results | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section (Hidden by default) --> | |
| <section id="resultsSection" class="hidden py-12 px-4 bg-white rounded-lg shadow-xl mx-4 md:mx-auto max-w-4xl"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Your Stress Results</h2> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Your stress level</span> | |
| <span id="finalStressValue" class="text-sm font-medium">0%</span> | |
| </div> | |
| <div class="stress-meter rounded-full overflow-hidden mb-2"> | |
| <div id="finalStressIndicator" class="h-full bg-white rounded-full transition-all duration-1000" style="width: 0%;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Low</span> | |
| <span>Moderate</span> | |
| <span>High</span> | |
| <span>Very High</span> | |
| <span>Critical</span> | |
| </div> | |
| </div> | |
| <div id="stressLevelText" class="text-xl font-semibold mb-6"></div> | |
| <div id="recommendations" class="text-left bg-gray-50 p-6 rounded-lg mb-8"> | |
| <!-- Recommendations will be inserted here by JavaScript --> | |
| </div> | |
| <button onclick="resetAssessment()" class="bg-gray-200 text-gray-800 px-8 py-3 rounded-full font-semibold hover:bg-gray-300 transition duration-300"> | |
| <i class="fas fa-redo mr-2"></i> Take Again | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 px-4 bg-white"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg text-white rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-clipboard-list text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3">Answer Questions</h3> | |
| <p class="text-gray-600 text-center">Complete our simple questionnaire about your recent feelings and experiences.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg text-white rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3">Get Analysis</h3> | |
| <p class="text-gray-600 text-center">Our algorithm calculates your stress level based on your responses.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg text-white rounded-full flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-heart text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3">Receive Tips</h3> | |
| <p class="text-gray-600 text-center">Get personalized recommendations to help manage and reduce your stress.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 px-4 gradient-bg text-white"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12">What People Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-indigo-600 mr-4"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Sarah J.</h4> | |
| <div class="flex text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p>"This tool helped me realize I was more stressed than I thought. The recommendations were spot on!"</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-indigo-600 mr-4"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Michael T.</h4> | |
| <div class="flex text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p>"Simple and effective. I use it weekly to check in with myself and adjust my routines accordingly."</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-white flex items-center justify-center text-indigo-600 mr-4"> | |
| <i class="fas fa-user text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Priya K.</h4> | |
| <div class="flex text-yellow-300"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p>"The visualization of my stress level was eye-opening. The coping strategies really helped me during exams."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 px-4 bg-white"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Ready to Understand Your Stress?</h2> | |
| <p class="text-lg mb-8 text-gray-600 max-w-2xl mx-auto">Take control of your mental wellbeing today with our simple, effective stress assessment tool.</p> | |
| <button onclick="startAssessment()" class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition duration-300"> | |
| <i class="fas fa-play mr-2"></i> Start Assessment Now | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-brain text-2xl text-indigo-400"></i> | |
| <span class="font-semibold text-xl">KnowYourMess</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">Helping you understand and manage stress since 2023.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 KnowYourMess. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Contact Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Questions for the assessment | |
| const questions = [ | |
| { | |
| question: "How often have you felt nervous or stressed in the past week?", | |
| options: [ | |
| { text: "Never", value: 0 }, | |
| { text: "Rarely", value: 1 }, | |
| { text: "Sometimes", value: 2 }, | |
| { text: "Often", value: 3 }, | |
| { text: "Constantly", value: 4 } | |
| ] | |
| }, | |
| { | |
| question: "How would you rate your sleep quality recently?", | |
| options: [ | |
| { text: "Excellent", value: 0 }, | |
| { text: "Good", value: 1 }, | |
| { text: "Average", value: 2 }, | |
| { text: "Poor", value: 3 }, | |
| { text: "Terrible", value: 4 } | |
| ] | |
| }, | |
| { | |
| question: "How often have you felt overwhelmed by your responsibilities?", | |
| options: [ | |
| { text: "Never", value: 0 }, | |
| { text: "Rarely", value: 1 }, | |
| { text: "Sometimes", value: 2 }, | |
| { text: "Often", value: 3 }, | |
| { text: "Always", value: 4 } | |
| ] | |
| }, | |
| { | |
| question: "How easily do you get irritated or annoyed these days?", | |
| options: [ | |
| { text: "Not at all", value: 0 }, | |
| { text: "Slightly", value: 1 }, | |
| { text: "Moderately", value: 2 }, | |
| { text: "Very", value: 3 }, | |
| { text: "Extremely", value: 4 } | |
| ] | |
| }, | |
| { | |
| question: "How often have you experienced physical symptoms of stress (headaches, muscle tension, etc.)?", | |
| options: [ | |
| { text: "Never", value: 0 }, | |
| { text: "Rarely", value: 1 }, | |
| { text: "Sometimes", value: 2 }, | |
| { text: "Often", value: 3 }, | |
| { text: "Daily", value: 4 } | |
| ] | |
| } | |
| ]; | |
| let currentQuestion = 0; | |
| let totalScore = 0; | |
| const maxPossibleScore = questions.length * 4; // 4 is the highest value per question | |
| // Start the assessment | |
| function startAssessment() { | |
| document.getElementById('assessmentSection').classList.remove('hidden'); | |
| document.querySelector('html').scrollTo({ | |
| top: document.getElementById('assessmentSection').offsetTop - 20, | |
| behavior: 'smooth' | |
| }); | |
| showQuestion(); | |
| } | |
| // Show current question | |
| function showQuestion() { | |
| const questionContainer = document.getElementById('questionContainer'); | |
| questionContainer.innerHTML = ''; | |
| const questionDiv = document.createElement('div'); | |
| questionDiv.className = 'bg-gray-50 p-6 rounded-lg'; | |
| const questionText = document.createElement('h3'); | |
| questionText.className = 'text-xl font-semibold mb-4'; | |
| questionText.textContent = `Question ${currentQuestion + 1}/${questions.length}: ${questions[currentQuestion].question}`; | |
| questionDiv.appendChild(questionText); | |
| const optionsDiv = document.createElement('div'); | |
| optionsDiv.className = 'space-y-3'; | |
| questions[currentQuestion].options.forEach((option, index) => { | |
| const optionDiv = document.createElement('div'); | |
| optionDiv.className = 'flex items-center'; | |
| const input = document.createElement('input'); | |
| input.type = 'radio'; | |
| input.name = 'stressOption'; | |
| input.value = option.value; | |
| input.id = `option${index}`; | |
| input.className = 'h-4 w-4 text-indigo-600 focus:ring-indigo-500'; | |
| input.onclick = () => optionSelected(option.value); | |
| const label = document.createElement('label'); | |
| label.htmlFor = `option${index}`; | |
| label.className = 'ml-3 block text-gray-700'; | |
| label.textContent = option.text; | |
| optionDiv.appendChild(input); | |
| optionDiv.appendChild(label); | |
| optionsDiv.appendChild(optionDiv); | |
| }); | |
| questionDiv.appendChild(optionsDiv); | |
| questionContainer.appendChild(questionDiv); | |
| // Show/hide submit button based on whether it's the last question | |
| if (currentQuestion === questions.length - 1) { | |
| document.getElementById('submitBtn').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('submitBtn').classList.add('hidden'); | |
| } | |
| } | |
| // When an option is selected | |
| function optionSelected(value) { | |
| totalScore += parseInt(value); | |
| currentQuestion++; | |
| // Update stress meter during assessment | |
| const currentPercentage = (totalScore / ((currentQuestion) * 4)) * 100; | |
| document.getElementById('stressIndicator').style.width = `${currentPercentage}%`; | |
| document.getElementById('stressValue').textContent = `${Math.round(currentPercentage)}%`; | |
| if (currentQuestion < questions.length) { | |
| setTimeout(showQuestion, 500); | |
| } | |
| } | |
| // Calculate final stress level | |
| function calculateStress() { | |
| const stressPercentage = (totalScore / maxPossibleScore) * 100; | |
| // Show results section | |
| document.getElementById('assessmentSection').classList.add('hidden'); | |
| document.getElementById('resultsSection').classList.remove('hidden'); | |
| // Animate the final stress meter | |
| setTimeout(() => { | |
| document.getElementById('finalStressIndicator').style.width = `${stressPercentage}%`; | |
| document.getElementById('finalStressValue').textContent = `${Math.round(stressPercentage)}%`; | |
| }, 100); | |
| // Set stress level text | |
| const stressLevelText = document.getElementById('stressLevelText'); | |
| if (stressPercentage < 25) { | |
| stressLevelText.textContent = "Your stress level is Low"; | |
| stressLevelText.className = "text-xl font-semibold mb-6 text-green-500"; | |
| } else if (stressPercentage < 50) { | |
| stressLevelText.textContent = "Your stress level is Moderate"; | |
| stressLevelText.className = "text-xl font-semibold mb-6 text-yellow-500"; | |
| } else if (stressPercentage < 75) { | |
| stressLevelText.textContent = "Your stress level is High"; | |
| stressLevelText.className = "text-xl font-semibold mb-6 text-orange-500"; | |
| } else if (stressPercentage < 90) { | |
| stressLevelText.textContent = "Your stress level is Very High"; | |
| stressLevelText.className = "text-xl font-semibold mb-6 text-red-500"; | |
| } else { | |
| stressLevelText.textContent = "Your stress level is Critical"; | |
| stressLevelText.className = "text-xl font-semibold mb-6 text-red-700"; | |
| } | |
| // Set recommendations based on stress level | |
| const recommendations = document.getElementById('recommendations'); | |
| if (stressPercentage < 25) { | |
| recommendations.innerHTML = ` | |
| <h3 class="text-lg font-semibold mb-3 text-green-600">Recommendations:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Continue your healthy habits that are keeping your stress low</li> | |
| <li>Practice mindfulness to maintain your current state</li> | |
| <li>Consider helping others manage their stress</li> | |
| </ul> | |
| `; | |
| } else if (stressPercentage < 50) { | |
| recommendations.innerHTML = ` | |
| <h3 class="text-lg font-semibold mb-3 text-yellow-600">Recommendations:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Practice deep breathing exercises for 5 minutes daily</li> | |
| <li>Take regular breaks during work or study sessions</li> | |
| <li>Engage in physical activity for at least 30 minutes most days</li> | |
| <li>Consider keeping a gratitude journal</li> | |
| </ul> | |
| `; | |
| } else if (stressPercentage < 75) { | |
| recommendations.innerHTML = ` | |
| <h3 class="text-lg font-semibold mb-3 text-orange-600">Recommendations:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Prioritize sleep and aim for 7-9 hours per night</li> | |
| <li>Practice progressive muscle relaxation techniques</li> | |
| <li>Limit caffeine and alcohol intake</li> | |
| <li>Schedule "worry time" to contain anxious thoughts</li> | |
| <li>Consider talking to a friend or professional about your stress</li> | |
| </ul> | |
| `; | |
| } else if (stressPercentage < 90) { | |
| recommendations.innerHTML = ` | |
| <h3 class="text-lg font-semibold mb-3 text-red-600">Recommendations:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Seek professional help from a therapist or counselor</li> | |
| <li>Practice daily meditation or mindfulness exercises</li> | |
| <li>Identify and reduce major stressors in your life where possible</li> | |
| <li>Establish a consistent sleep routine</li> | |
| <li>Engage in regular physical activity</li> | |
| <li>Consider stress management workshops or programs</li> | |
| </ul> | |
| `; | |
| } else { | |
| recommendations.innerHTML = ` | |
| <h3 class="text-lg font-semibold mb-3 text-red-700">Recommendations:</h3> | |
| <p class="mb-3">Your stress levels are critically high. It's important to seek professional help immediately.</p> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Contact a mental health professional as soon as possible</li> | |
| <li>Reach out to trusted friends or family members for support</li> | |
| <li>Consider contacting a crisis hotline if needed</li> | |
| <li>Remove yourself from highly stressful situations when possible</li> | |
| <li>Practice emergency stress relief techniques like box breathing</li> | |
| </ul> | |
| <p class="mt-4 font-medium">National Crisis Hotline (US): 1-800-273-8255</p> | |
| `; | |
| } | |
| // Scroll to results | |
| setTimeout(() => { | |
| document.querySelector('html').scrollTo({ | |
| top: document.getElementById('resultsSection').offsetTop - 20, | |
| behavior: 'smooth' | |
| }); | |
| }, 300); | |
| } | |
| // Reset the assessment | |
| function resetAssessment() { | |
| currentQuestion = 0; | |
| totalScore = 0; | |
| document.getElementById('resultsSection').classList.add('hidden'); | |
| document.getElementById('stressIndicator').style.width = '0%'; | |
| document.getElementById('stressValue').textContent = '0%'; | |
| startAssessment(); | |
| } | |
| </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=Chipan/knowyourmessv1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |