1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 <title>ScreenSmart | Screen Time Awareness</title> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 <body> 10 11 <!-- NAVBAR --> 12 <nav class="navbar"> 13 <div class="nav-container"> 14 <div class="brand"> 15 <img src="images/logo.png" alt="ScreenSmart Logo" class="logo-img"> 16 <h1 class="logo">ScreenSmart</h1> 17 </div> 18 </div> 19 </nav> 20 21 <div class="container"> 22 23 <!-- HERO SECTION --> 24 <section class="hero"> 25 <div class="hero-text"> 26 <h2>Understanding Screen Time in Daily Life</h2> 27 <p> 28 Digital devices such as smartphones, computers, televisions, and gaming systems 29 have become an essential part of modern life. They support communication, 30 learning, and entertainment across all age groups. 31 </p> 32 <p> 33 However, prolonged and unregulated screen usage may contribute to eye strain, 34 disrupted sleep patterns, reduced concentration, and decreased physical activity. 35 These effects can vary depending on age and the type of device used. 36 </p> 37 <p> 38 By understanding appropriate screen time limits, individuals can make more 39 informed decisions and develop healthier, more balanced digital habits. 40 </p> 41 </div> 42 43 <div class="hero-image"> 44 <img src="images/screentime.jpg" alt="Screen time awareness"> 45 </div> 46 </section> 47 <br> 48 <!-- PROGRAM EXPLANATION (CENTERED) --> 49 <section class="info center"> 50 <h2>What Is the Screen Time Check?</h2> 51 <p> 52 The Screen Time Check is an awareness-based tool designed to help users 53 understand how much daily screen time is considered healthy. 54 By selecting an age group and the main device used, this program provides 55 clear recommendations and simple explanations to encourage healthier 56 digital habits. 57 </p> 58 </section> 59 60 <!-- CHECK FORM --> 61 <section class="card"> 62 <h2>Check Your Screen Time</h2> 63 64 <div class="form-group"> 65 <label for="age">Select Age Group</label> 66 <select id="age"> 67 <option value="">Choose Age</option> 68 <option value="kids">3–5 years</option> 69 <option value="children">6–12 years</option> 70 <option value="teen">13–17 years</option> 71 <option value="youngAdult">18–24 years</option> 72 <option value="adult">25+ years</option> 73 </select> 74 </div> 75 76 <div class="form-group"> 77 <label for="device">Main Device Used</label> 78 <select id="device"> 79 <option value="">Choose Device</option> 80 <option value="smartphone">Smartphone</option> 81 <option value="tablet">Tablet</option> 82 <option value="laptop">Laptop</option> 83 <option value="desktop">Desktop</option> 84 <option value="tv">TV / Gaming Console</option> 85 </select> 86 </div> 87 88 <button onclick="calculateScreenTime()">Check Recommendation</button> 89 </section> 90 91 <!-- RESULT --> 92 <section id="result" class="card hidden"> 93 <h2>Your Result</h2> 94 <p class="time" id="timeResult"></p> 95 <p class="explanation" id="explanation"></p> 96 97 <div class="impact"> 98 <div class="impact-card">👁 Eye Health</div> 99 <div class="impact-card">🧠 Focus</div> 100 <div class="impact-card">😴 Sleep Quality</div> 101 <div class="impact-card">🏃 Physical Activity</div> 102 </div> 103 </section> 104 105 <footer> 106 <p>ScreenSmart © 2026 — Build healthy digital habits</p> 107 </footer> 108 109 </div> 110 111 <script src="script.js"></script> 112 </body> 113 </html>
1 * { 2 box-sizing: border-box; 3 font-family: 'Inter', system-ui, sans-serif; 4 } 5 6 body { 7 margin: 0; 8 background: linear-gradient( 9 to bottom, 10 #020617 0%, 11 #0f172a 40%, 12 #1e293b 70%, 13 #334155 100% 14 ); 15 color: #e5e7eb; 16 } 17 18 /* NAVBAR */ 19 .navbar { 20 background: #020617; 21 border-bottom: 1px solid #1e293b; 22 position: sticky; 23 top: 0; 24 z-index: 100; 25 } 26 27 .nav-container { 28 max-width: 1100px; 29 margin: auto; 30 padding: 14px 20px; 31 } 32 33 .brand { 34 display: flex; 35 align-items: center; 36 gap: 10px; 37 } 38 39 .logo-img { 40 width: 34px; 41 height: 34px; 42 object-fit: contain; 43 } 44 45 .logo { 46 color: #38bdf8; 47 font-size: 1.5rem; 48 margin: 0; 49 } 50 51 /* CONTAINER */ 52 .container { 53 max-width: 1100px; 54 margin: auto; 55 padding: 32px 20px; 56 } 57 58 /* HERO */ 59 .hero { 60 display: grid; 61 grid-template-columns: 1.2fr 1fr; 62 gap: 40px; 63 align-items: center; 64 margin-bottom: 60px; 65 } 66 67 .hero-text h2 { 68 font-size: 2.2rem; 69 color: #38bdf8; 70 margin-bottom: 16px; 71 } 72 73 .hero-text p { 74 color: #cbd5f5; 75 line-height: 1.7; 76 margin-bottom: 12px; 77 } 78 79 .hero-image img { 80 width: 100%; 81 max-height: 420px; 82 object-fit: cover; 83 border-radius: 18px; 84 box-shadow: 0 20px 50px rgba(0,0,0,0.5); 85 } 86 87 /* INFO SECTION */ 88 .info { 89 max-width: 920px; 90 margin-bottom: 60px; 91 } 92 93 .info.center { 94 margin-left: auto; 95 margin-right: auto; 96 text-align: center; 97 } 98 99 .info h2 { 100 color: #38bdf8; 101 margin-bottom: 14px; 102 } 103 104 .info p { 105 color: #cbd5f5; 106 line-height: 1.7; 107 } 108 109 /* CARD */ 110 .card { 111 background: #020617; 112 border: 1px solid #1e293b; 113 border-radius: 18px; 114 padding: 28px; 115 margin-bottom: 40px; 116 box-shadow: 0 15px 40px rgba(0,0,0,0.4); 117 } 118 119 .card h2 { 120 color: #38bdf8; 121 margin-bottom: 20px; 122 } 123 124 /* FORM */ 125 .form-group { 126 margin-bottom: 16px; 127 } 128 129 label { 130 display: block; 131 margin-bottom: 6px; 132 color: #cbd5f5; 133 } 134 135 select { 136 width: 100%; 137 padding: 14px; 138 border-radius: 12px; 139 border: 1px solid #334155; 140 background: #020617; 141 color: #e5e7eb; 142 font-size: 1rem; 143 } 144 145 /* BUTTON */ 146 button { 147 width: 100%; 148 padding: 16px; 149 background: #38bdf8; 150 color: #020617; 151 border: none; 152 border-radius: 14px; 153 font-size: 1rem; 154 font-weight: 600; 155 cursor: pointer; 156 transition: 0.3s; 157 } 158 159 button:hover { 160 background: #0ea5e9; 161 } 162 163 /* RESULT */ 164 .hidden { 165 display: none; 166 } 167 168 .time { 169 font-size: 2rem; 170 font-weight: bold; 171 color: #22c55e; 172 margin: 10px 0; 173 text-align: center; 174 } 175 176 .explanation { 177 color: #cbd5f5; 178 margin-bottom: 20px; 179 text-align: center; 180 } 181 182 /* IMPACT */ 183 .impact { 184 display: grid; 185 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 186 gap: 14px; 187 } 188 189 .impact-card { 190 background: #020617; 191 border: 1px solid #334155; 192 padding: 16px; 193 border-radius: 14px; 194 text-align: center; 195 font-size: 0.95rem; 196 } 197 198 /* FOOTER */ 199 footer { 200 text-align: center; 201 margin-top: 40px; 202 color: #64748b; 203 font-size: 0.85rem; 204 } 205 206 /* ========================= */ 207 /* RESPONSIVE BREAKPOINTS */ 208 /* ========================= */ 209 210 /* TABLET */ 211 @media (max-width: 1024px) { 212 .hero { 213 gap: 28px; 214 } 215 216 .hero-text h2 { 217 font-size: 2rem; 218 } 219 } 220 221 /* MOBILE */ 222 @media (max-width: 768px) { 223 .hero { 224 grid-template-columns: 1fr; 225 text-align: center; 226 } 227 228 .hero-image img { 229 max-height: 300px; 230 } 231 232 .container { 233 padding: 24px 16px; 234 } 235 236 .logo { 237 font-size: 1.4rem; 238 } 239 240 .card { 241 padding: 22px; 242 } 243 } 244 245 /* SMALL MOBILE */ 246 @media (max-width: 480px) { 247 .logo { 248 font-size: 1.25rem; 249 } 250 251 .hero-text h2 { 252 font-size: 1.7rem; 253 } 254 255 .time { 256 font-size: 1.7rem; 257 } 258 259 button { 260 padding: 14px; 261 font-size: 0.95rem; 262 } 263 }
1 document.getElementById("demo").innerHTML = "Hello JavaScript";