Update templates/index.html

templates/index.html

@@ -323,11 +323,69 @@
             opacity: 0;
             transform: translateY(20px);
             transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0.8);
+            width: 90%;
+            max-width: 500px;
+            background: rgba(255, 255, 255, 0.98);
+            backdrop-filter: blur(20px);
+            border-radius: 24px;
+            padding: 40px;
+            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
+            z-index: 2000;
+            pointer-events: none;
         }
 
         .result.show {
             opacity: 1;
-            transform: translateY(0);
+            transform: translate(-50%, -50%) scale(1);
+            pointer-events: auto;
+        }
+
+        .result-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(5px);
+            z-index: 1999;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.5s ease;
+        }
+
+        .result-overlay.show {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .result-close-btn {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: #f7fafc;
+            border: none;
+            color: #718096;
+            font-size: 28px;
+            cursor: pointer;
+            width: 35px;
+            height: 35px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            font-weight: 300;
+        }
+
+        .result-close-btn:hover {
+            background: #e2e8f0;
+            color: #2d3748;
+            transform: rotate(90deg);
         }
 
         .result-card {
@@ -370,19 +428,126 @@
         }
 
         .result-value {
-            font-size: 32px;
+            font-size: 48px;
             font-weight: 700;
             background: linear-gradient(135deg, #667eea, #764ba2);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
-            margin-bottom: 8px;
+            margin-bottom: 20px;
         }
 
         .result-description {
             color: #718096;
+            font-size: 15px;
+            line-height: 1.6;
+            margin-bottom: 20px;
+        }
+
+        /* Health Meter */
+        .health-meter-container {
+            margin: 25px 0;
+            padding: 20px;
+            background: #f7fafc;
+            border-radius: 12px;
+        }
+
+        .meter-label {
+            font-size: 14px;
+            color: #4a5568;
+            font-weight: 600;
+            margin-bottom: 12px;
+            text-align: left;
+        }
+
+        .meter-wrapper {
+            position: relative;
+            width: 100%;
+            height: 30px;
+            background: #e2e8f0;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .meter-fill {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, #e53e3e, #ed8936, #ecc94b, #48bb78, #38b2ac);
+            border-radius: 15px;
+            transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .meter-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+
+        .meter-percentage {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             font-size: 14px;
-            line-height: 1.5;
+            font-weight: 700;
+            color: #2d3748;
+            text-shadow: 0 1px 2px rgba(255,255,255,0.8);
+        }
+
+        /* Improvement Tips */
+        .improvement-tips {
+            margin-top: 25px;
+            padding: 20px;
+            background: linear-gradient(135deg, #f0f4ff, #e6f2ff);
+            border-radius: 12px;
+            border-left: 4px solid #667eea;
+            text-align: left;
+        }
+
+        .tips-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 16px;
+            font-weight: 700;
+            color: #2d3748;
+            margin-bottom: 12px;
+        }
+
+        .tips-content {
+            color: #4a5568;
+            font-size: 14px;
+            line-height: 1.7;
+        }
+
+        .tips-content ul {
+            list-style: none;
+            padding: 0;
+            margin-top: 10px;
+        }
+
+        .tips-content li {
+            padding: 8px 0 8px 25px;
+            position: relative;
+        }
+
+        .tips-content li::before {
+            content: '💡';
+            position: absolute;
+            left: 0;
         }
 
         .wellness-indicator {
@@ -745,23 +910,48 @@
             </form>
 
             <div class="result" id="resultSection">
+                <button class="result-close-btn" onclick="closeResultWindow()">×</button>
                 <div class="result-card">
                     <div class="result-content">
                         <div class="result-label">Mental Health Index</div>
-                        <div class="result-value" id="resultValue">0.0</div>
+                        <div class="result-value" id="resultValue">0.0%</div>
                         <div class="result-description" id="resultDescription">
                             Your personalized health score based on digital habits
                         </div>
+                        
+                        <!-- Health Meter -->
+                        <div class="health-meter-container">
+                            <div class="meter-label">Health Score Visualization</div>
+                            <div class="meter-wrapper">
+                                <div class="meter-fill" id="meterFill"></div>
+                                <div class="meter-percentage" id="meterPercentage">0%</div>
+                            </div>
+                        </div>
+
                         <div class="wellness-indicator">
                             <div class="indicator-dot poor" data-range="0-25"></div>
                             <div class="indicator-dot fair" data-range="25-50"></div>
                             <div class="indicator-dot good" data-range="50-75"></div>
                             <div class="indicator-dot excellent" data-range="75-100"></div>
                         </div>
+
+                        <!-- Improvement Tips -->
+                        <div class="improvement-tips">
+                            <div class="tips-header">
+                                <span>🎯</span>
+                                <span>How to Improve Your Mental Health</span>
+                            </div>
+                            <div class="tips-content" id="tipsContent">
+                                <!-- Tips will be dynamically inserted here -->
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
 
+            <!-- Result Overlay -->
+            <div class="result-overlay" id="resultOverlay" onclick="closeResultWindow()"></div>
+
             <!-- Copyright -->
             <div class="copyright">
                 © 2025 Jobanpreet Singh. All rights reserved.
@@ -864,6 +1054,12 @@
     </div>
 
     <script>
+        // Close Result Window
+        function closeResultWindow() {
+            document.getElementById('resultSection').classList.remove('show');
+            document.getElementById('resultOverlay').classList.remove('show');
+        }
+
         // Page Navigation
         function showPage(pageName) {
             // Hide all pages
@@ -928,6 +1124,41 @@
             return "Consider significant lifestyle adjustments for better mental health.";
         }
 
+        function getImprovementTips(screenTime, sleepHours, workScreen, score) {
+            let tips = [];
+            
+            if (sleepHours < 7) {
+                tips.push("Increase your sleep duration to 7-9 hours for optimal mental recovery");
+                tips.push("Establish a consistent bedtime routine to improve sleep quality");
+            } else if (sleepHours > 9) {
+                tips.push("Consider reducing sleep duration to 7-9 hours for better energy levels");
+            }
+            
+            if (screenTime > 8) {
+                tips.push("Reduce daily screen time by taking regular breaks (20-20-20 rule: every 20 minutes, look at something 20 feet away for 20 seconds)");
+                tips.push("Set screen time limits and use apps to track your usage");
+            }
+            
+            const workScreenRatio = workScreen / screenTime;
+            if (workScreenRatio > 0.7) {
+                tips.push("Balance work screen time with recreational activities away from screens");
+                tips.push("Take regular breaks during work hours to reduce digital fatigue");
+            }
+            
+            if (score < 80) {
+                tips.push("Practice mindfulness or meditation for 10-15 minutes daily");
+                tips.push("Engage in physical exercise for at least 30 minutes per day");
+                tips.push("Spend time outdoors and in nature to reduce stress");
+            }
+            
+            if (tips.length === 0) {
+                tips.push("Continue maintaining your excellent habits!");
+                tips.push("Consider helping others improve their mental health awareness");
+            }
+            
+            return tips;
+        }
+
         function updateWellnessIndicator(score) {
             const dots = document.querySelectorAll('.indicator-dot');
             dots.forEach(dot => dot.classList.remove('active'));
@@ -944,7 +1175,7 @@
                 if (!startTimestamp) startTimestamp = timestamp;
                 const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                 const value = progress * (end - start) + start;
-                element.textContent = value.toFixed(1);
+                element.textContent = value.toFixed(1) + '%';
                 if (progress < 1) {
                     window.requestAnimationFrame(step);
                 }
@@ -952,6 +1183,24 @@
             window.requestAnimationFrame(step);
         }
 
+        function animateMeter(percentage) {
+            const meterFill = document.getElementById('meterFill');
+            const meterPercentage = document.getElementById('meterPercentage');
+            
+            setTimeout(() => {
+                meterFill.style.width = percentage + '%';
+                
+                let count = 0;
+                const interval = setInterval(() => {
+                    count++;
+                    meterPercentage.textContent = Math.min(count, percentage).toFixed(0) + '%';
+                    if (count >= percentage) {
+                        clearInterval(interval);
+                    }
+                }, 20);
+            }, 300);
+        }
+
         form.addEventListener('submit', async function(e) {
             e.preventDefault();
             
@@ -974,14 +1223,30 @@
             
             const wellnessScore = calculateWellnessIndex(screenTime, sleepHours, workScreen);
             const description = getWellnessDescription(wellnessScore);
+            const tips = getImprovementTips(screenTime, sleepHours, workScreen, wellnessScore);
             
             // Show results with animation
+            document.getElementById('resultOverlay').classList.add('show');
             resultSection.classList.add('show');
             resultDescription.textContent = description;
             
+            // Display improvement tips
+            const tipsContent = document.getElementById('tipsContent');
+            const tipsList = document.createElement('ul');
+            tips.forEach(tip => {
+                const li = document.createElement('li');
+                li.textContent = tip;
+                tipsList.appendChild(li);
+            });
+            tipsContent.innerHTML = '';
+            tipsContent.appendChild(tipsList);
+            
             // Animate the score counter
             animateValue(resultValue, 0, wellnessScore, 1000);
             
+            // Animate the meter
+            animateMeter(wellnessScore);
+            
             // Update wellness indicator
             setTimeout(() => updateWellnessIndicator(wellnessScore), 500);