GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Weather UI - Noida</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 color: #ffffff;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #e9f1f5;20 }21 22 /* Top weather area */23 .top-gradient {24 width: 100%;25 height: 1180px;26 background: linear-gradient(180deg, #355e78 0%, #3b6b86 50%, #3a6a85 100%);27 }28 29 /* Status bar */30 .status-bar {31 height: 100px;32 background: #173e55;33 display: flex;34 align-items: center;35 justify-content: space-between;36 padding: 0 40px;37 font-size: 40px;38 letter-spacing: 0.5px;39 }40 .status-left {41 display: flex;42 align-items: center;43 gap: 20px;44 }45 .status-right {46 display: flex;47 align-items: center;48 gap: 28px;49 opacity: 0.95;50 }51 .status-icon svg {52 width: 40px;53 height: 40px;54 fill: none;55 stroke: #ffffff;56 stroke-width: 2.5;57 }58 59 /* App bar */60 .app-bar {61 height: 150px;62 background: #2f5f78;63 display: flex;64 align-items: center;65 justify-content: space-between;66 padding: 0 40px;67 }68 .app-title {69 font-size: 64px;70 font-weight: 600;71 letter-spacing: 0.5px;72 }73 .icon-btn {74 width: 80px;75 height: 80px;76 display: grid;77 place-items: center;78 border-radius: 12px;79 }80 .icon-btn svg {81 width: 60px;82 height: 60px;83 fill: none;84 stroke: #ffffff;85 stroke-width: 6;86 }87 .hamburger svg { stroke-width: 8; }88 89 /* Forecast strip */90 .forecast-strip {91 padding: 30px 30px 20px 30px;92 display: flex;93 gap: 42px;94 align-items: flex-start;95 }96 .forecast-item {97 width: 200px;98 text-align: center;99 color: #fff;100 }101 .temp {102 font-size: 64px;103 font-weight: 700;104 margin-bottom: 12px;105 }106 .sun-icon, .moon-icon {107 margin: 0 auto 12px auto;108 width: 64px;109 height: 64px;110 }111 .sub-row {112 display: flex;113 justify-content: center;114 align-items: center;115 gap: 14px;116 color: #eaf6ff;117 font-size: 34px;118 margin-top: 6px;119 }120 .aqi-badge {121 background: #e6b9bf;122 color: #ffffff;123 display: inline-block;124 padding: 16px 28px;125 border-radius: 16px;126 font-size: 38px;127 margin-top: 18px;128 }129 .caret {130 width: 0;131 height: 0;132 border-left: 18px solid transparent;133 border-right: 18px solid transparent;134 border-top: 18px solid #dfe8ef;135 opacity: 0.9;136 margin: 18px auto 0 auto;137 }138 139 /* Details section */140 .details {141 padding: 22px 36px 30px 36px;142 color: #eaf6ff;143 }144 .time-line {145 display: flex;146 align-items: center;147 gap: 18px;148 font-size: 38px;149 }150 .time-line .line {151 flex: 1;152 height: 2px;153 background: #d7e3ea;154 opacity: 0.6;155 }156 .stats {157 display: grid;158 grid-template-columns: 1fr 1fr;159 gap: 26px 30px;160 margin-top: 28px;161 }162 .stat {163 display: flex;164 align-items: flex-start;165 gap: 22px;166 font-size: 36px;167 color: #ffffff;168 }169 .stat .circle {170 width: 66px;171 height: 66px;172 border-radius: 50%;173 border: 2px solid rgba(255,255,255,0.7);174 display: grid;175 place-items: center;176 }177 .circle svg {178 width: 38px;179 height: 38px;180 stroke: #ffffff;181 stroke-width: 2.5;182 fill: none;183 }184 185 /* Ad area */186 .ad-area {187 background: #e9f1f5;188 padding: 36px 60px 24px 60px;189 color: #2c3e50;190 }191 .ad-top-label {192 display: flex;193 justify-content: space-between;194 align-items: center;195 color: #8aa0ac;196 font-size: 34px;197 margin-bottom: 12px;198 }199 .ad-pill {200 background: #244e69;201 color: #ffffff;202 font-size: 34px;203 padding: 8px 20px;204 border-radius: 12px;205 }206 .ad-card {207 background: #ffffff;208 border-radius: 12px;209 box-shadow: 0 6px 18px rgba(0,0,0,0.12);210 padding: 24px;211 }212 .img-ph {213 width: 936px;214 height: 480px;215 background: #E0E0E0;216 border: 1px solid #BDBDBD;217 display: flex;218 justify-content: center;219 align-items: center;220 color: #757575;221 font-size: 38px;222 margin: 0 auto 22px auto;223 }224 .ad-meta {225 display: flex;226 align-items: center;227 justify-content: space-between;228 margin: 6px 16px 18px 16px;229 }230 .stars {231 color: #f1b51d;232 font-size: 40px;233 letter-spacing: 4px;234 }235 .brand {236 font-size: 44px;237 color: #2b4c63;238 font-weight: 600;239 }240 .brand-logo {241 width: 78px;242 height: 78px;243 background: #2b6fda;244 color: #ffffff;245 border-radius: 16px;246 display: grid;247 place-items: center;248 font-size: 48px;249 font-weight: 700;250 }251 .ad-btn {252 width: 936px;253 height: 96px;254 margin: 0 auto;255 background: #e4b23c;256 border-radius: 10px;257 color: #ffffff;258 font-size: 42px;259 display: grid;260 place-items: center;261 font-weight: 700;262 letter-spacing: 1px;263 }264 265 /* WeatherRadar card */266 .radar-card {267 width: 960px;268 margin: 34px auto;269 border-radius: 14px;270 box-shadow: 0 6px 18px rgba(0,0,0,0.12);271 overflow: hidden;272 }273 .radar-header {274 background: #2f5f78;275 color: #ffffff;276 height: 110px;277 display: flex;278 align-items: center;279 justify-content: space-between;280 padding: 0 24px 0 26px;281 }282 .radar-title {283 display: flex;284 align-items: center;285 gap: 20px;286 font-size: 44px;287 font-weight: 600;288 }289 .radar-title .round {290 width: 70px;291 height: 70px;292 border-radius: 50%;293 border: 2px solid rgba(255,255,255,0.7);294 display: grid;295 place-items: center;296 }297 .radar-header svg {298 width: 56px;299 height: 56px;300 stroke: #ffffff;301 stroke-width: 6;302 fill: none;303 }304 .radar-image {305 width: 100%;306 height: 640px;307 background: #E0E0E0;308 border-top: 1px solid #BDBDBD;309 border-bottom: 1px solid #BDBDBD;310 display: flex;311 justify-content: center;312 align-items: center;313 color: #757575;314 font-size: 40px;315 }316 317 /* Bottom navigation pill */318 .nav-pill {319 position: absolute;320 bottom: 28px;321 left: 50%;322 transform: translateX(-50%);323 width: 300px;324 height: 14px;325 background: rgba(0,0,0,0.28);326 border-radius: 8px;327 }328 329 /* Small utility icons */330 .small-icon svg { width: 34px; height: 34px; }331 .droplet svg { width: 30px; height: 30px; }332 .wind svg { width: 32px; height: 32px; }333</style>334</head>335<body>336<div id="render-target">337 <div class="top-gradient">338 <!-- Status bar -->339 <div class="status-bar">340 <div class="status-left">341 <div>3:58</div>342 <div style="font-size:36px;opacity:0.9;">32°</div>343 <span class="status-icon">344 <svg viewBox="0 0 24 24">345 <circle cx="12" cy="12" r="8"></circle>346 <path d="M12 4a8 8 0 0 0 6 6M4 12a8 8 0 0 0 6 6" />347 </svg>348 </span>349 </div>350 <div class="status-right">351 <span class="status-icon">352 <svg viewBox="0 0 24 24">353 <path d="M6 14a6 6 0 0 1 12 0" />354 <path d="M16 14c1.7 0 3-1.3 3-3a3 3 0 0 0-3-3 3.5 3.5 0 0 0-6 .8" />355 </svg>356 </span>357 <span class="status-icon">358 <svg viewBox="0 0 24 24">359 <path d="M2 18c6-6 14-6 20 0" />360 <path d="M6 18c4-4 8-4 12 0" />361 <path d="M10 18c2-2 4-2 6 0" />362 </svg>363 </span>364 <span class="status-icon">365 <svg viewBox="0 0 24 24">366 <rect x="3" y="7" width="16" height="10" rx="2" />367 <rect x="20" y="10" width="2" height="4" />368 </svg>369 </span>370 </div>371 </div>372 373 <!-- App bar -->374 <div class="app-bar">375 <div class="icon-btn hamburger">376 <svg viewBox="0 0 24 24">377 <path d="M3 6h18M3 12h18M3 18h18" />378 </svg>379 </div>380 <div class="app-title">Noida</div>381 <div class="icon-btn">382 <svg viewBox="0 0 24 24">383 <path d="M14 4l6 6-6 6" />384 <path d="M20 10H8a6 6 0 0 0-6 6" />385 </svg>386 </div>387 </div>388 389 <!-- Forecast strip -->390 <div class="forecast-strip">391 <!-- Item 1 -->392 <div class="forecast-item">393 <div class="temp">98°</div>394 <svg class="sun-icon" viewBox="0 0 24 24">395 <circle cx="12" cy="12" r="4" fill="#ffd34d"></circle>396 <g stroke="#ffd34d" stroke-width="2">397 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" />398 </g>399 </svg>400 <div class="sub-row">401 <span class="droplet">402 <svg viewBox="0 0 24 24">403 <path d="M12 3s5 6 5 9a5 5 0 0 1-10 0c0-3 5-9 5-9z" />404 </svg>405 </span>406 <span>20%</span>407 <span class="wind">408 <svg viewBox="0 0 24 24">409 <path d="M4 12h12" />410 <path d="M14 12l3-2v4z" />411 </svg>412 </span>413 </div>414 <div class="aqi-badge">120</div>415 <div class="caret"></div>416 </div>417 <!-- Item 2 -->418 <div class="forecast-item">419 <div class="temp">95°</div>420 <svg class="sun-icon" viewBox="0 0 24 24">421 <circle cx="12" cy="12" r="4" fill="#ffd34d"></circle>422 <g stroke="#ffd34d" stroke-width="2">423 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" />424 </g>425 </svg>426 <div class="sub-row">427 <span class="droplet">428 <svg viewBox="0 0 24 24"><path d="M12 3s5 6 5 9a5 5 0 0 1-10 0c0-3 5-9 5-9z" /></svg>429 </span>430 <span>30%</span>431 <span class="wind">432 <svg viewBox="0 0 24 24"><path d="M4 12h12" /><path d="M14 12l3-2v4z" /></svg>433 </span>434 </div>435 <div class="aqi-badge">120</div>436 <div class="caret"></div>437 </div>438 <!-- Item 3 -->439 <div class="forecast-item">440 <div class="temp">92°</div>441 <svg class="sun-icon" viewBox="0 0 24 24">442 <circle cx="12" cy="12" r="4" fill="#ffd34d"></circle>443 <g stroke="#ffd34d" stroke-width="2">444 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" />445 </g>446 </svg>447 <div class="sub-row">448 <span class="droplet">449 <svg viewBox="0 0 24 24"><path d="M12 3s5 6 5 9a5 5 0 0 1-10 0c0-3 5-9 5-9z" /></svg>450 </span>451 <span>20%</span>452 <span class="wind">453 <svg viewBox="0 0 24 24"><path d="M4 12h12" /><path d="M14 12l3-2v4z" /></svg>454 </span>455 </div>456 <div class="aqi-badge">120</div>457 <div class="caret"></div>458 </div>459 <!-- Item 4 -->460 <div class="forecast-item">461 <div class="temp">88°</div>462 <svg class="moon-icon" viewBox="0 0 24 24">463 <path d="M15 3a9 9 0 1 0 6 15 7 7 0 1 1-6-15z" fill="#ffd34d" />464 </svg>465 <div class="sub-row">466 <span class="droplet">467 <svg viewBox="0 0 24 24"><path d="M12 3s5 6 5 9a5 5 0 0 1-10 0c0-3 5-9 5-9z" /></svg>468 </span>469 <span>20%</span>470 <span class="wind">471 <svg viewBox="0 0 24 24"><path d="M4 12h12" /><path d="M14 12l3-2v4z" /></svg>472 </span>473 </div>474 <div class="aqi-badge">120</div>475 <div class="caret"></div>476 </div>477 <!-- Item 5