GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Weather & Radar - Noida</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#0b4e62;11 color:#fff;12 }13 14 /* Header / app bar */15 .app-bar{16 position:absolute;left:0;top:0;width:1080px;height:180px;background:#0b4e62;17 box-shadow:0 2px 0 rgba(255,255,255,0.08) inset;18 }19 .status-row{20 height:70px;display:flex;align-items:center;gap:16px;padding:0 32px;color:#e8f7fb;font-size:38px;21 opacity:0.9;22 }23 .status-icons svg{width:40px;height:40px;vertical-align:middle;fill:#e8f7fb;opacity:0.9}24 .nav-row{25 height:110px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;26 }27 .brand{font-weight:700;font-size:56px;letter-spacing:1px}28 .icon-btn{width:84px;height:84px;border-radius:12px;display:flex;align-items:center;justify-content:center}29 .icon-btn svg{width:56px;height:56px;fill:#fff}30 31 /* Main sky section */32 .sky{33 position:absolute;left:0;top:180px;width:1080px;height:920px;34 background:linear-gradient(180deg,#2f88aa 0%, #5aa6c5 40%, #77b8d2 80%);35 }36 .location{position:absolute;left:32px;top:210px;font-size:40px;opacity:0.95}37 .city{position:absolute;left:32px;top:270px;font-size:74px;font-weight:700}38 .temp{position:absolute;left:32px;top:360px;font-size:160px;font-weight:700}39 .feels{position:absolute;left:32px;top:540px;font-size:48px;opacity:0.9}40 .right-now{position:absolute;right:32px;top:230px;font-size:36px;opacity:0.85;text-align:right}41 .aqi-chip{42 position:absolute;right:32px;top:300px;background:#f2c8c9;color:#5b2b2b;43 padding:16px 26px;border-radius:20px;font-size:48px;font-weight:700;44 }45 .aqi-text{position:absolute;right:32px;top:380px;font-size:44px;opacity:0.95}46 .video-card{47 position:absolute;right:32px;top:460px;background:#ffffff;border-radius:26px;color:#14475a;48 display:flex;align-items:center;gap:26px;padding:26px 32px;box-shadow:0 10px 20px rgba(0,0,0,0.15);49 }50 .play{51 width:120px;height:120px;border-radius:60px;background:#0b4e62;display:flex;align-items:center;justify-content:center;52 }53 .play svg{fill:#fff;width:60px;height:60px}54 55 /* Sunrise row */56 .sun-times{57 position:absolute;left:32px;top:710px;width:1016px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.25);58 display:flex;align-items:center;justify-content:flex-end;gap:24px;font-size:38px;opacity:0.95;59 }60 .sun-times .sun-icon svg{width:42px;height:42px;fill:#fff}61 62 /* Hourly forecast strip */63 .hourly{64 position:absolute;left:0;top:800px;width:1080px;padding:24px 24px 0 24px;65 }66 .time-tabs{67 display:flex;gap:20px;margin-bottom:18px;padding-left:8px;68 }69 .time-pill{70 background:#8fb6ca;color:#0b2730;border-radius:20px;padding:12px 28px;font-size:40px;font-weight:700;opacity:0.9;71 }72 .cards{73 display:flex;gap:20px;74 }75 .card{76 width:240px;border-radius:24px;background:rgba(255,255,255,0.10);77 padding:26px;color:#fff;backdrop-filter: blur(2px);78 }79 .card .hour{font-size:42px;margin-bottom:18px;text-align:center}80 .weather-icon{display:flex;justify-content:center;margin:18px 0}81 .weather-icon svg{width:72px;height:72px;fill:#ffd34f}82 .moon svg{fill:#ffd34f}83 .temp-val{font-size:64px;font-weight:700;text-align:center;margin:8px 0}84 .humid{font-size:36px;text-align:center;margin:6px 0;opacity:0.9}85 .aqi-pill{86 margin:14px auto 0 auto;width:120px;text-align:center;background:#f2c8c9;color:#5b2b2b;border-radius:18px;87 font-size:40px;font-weight:700;padding:8px 0;88 }89 90 /* Divider & detailed conditions */91 .divider-note{92 position:absolute;left:32px;top:1200px;width:1016px;border-top:1px solid rgba(255,255,255,0.25);93 padding-top:26px;font-size:40px;opacity:0.95;94 }95 96 .details{97 position:absolute;left:32px;top:1290px;width:1016px;display:grid;grid-template-columns:1fr 1fr;grid-row-gap:26px;grid-column-gap:26px;98 font-size:40px;99 }100 .detail{101 display:flex;align-items:center;gap:18px;background:rgba(255,255,255,0.10);padding:22px;border-radius:20px;102 }103 .detail svg{width:52px;height:52px;fill:#fff;opacity:0.95}104 105 /* Bottom ad placeholder */106 .ad{107 position:absolute;left:0;bottom:0;width:1080px;height:330px;background:#e0e0e0;border-top:1px solid #bdbdbd;108 color:#555;display:flex;align-items:center;justify-content:center;font-size:46px;109 }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Header -->116 <div class="app-bar">117 <div class="status-row">118 <span>3:57</span>119 <span>32°</span>120 <span class="status-icons">121 <!-- globe -->122 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18" stroke="#0b4e62" stroke-width="0"/></svg>123 </span>124 <span class="status-icons">125 <!-- download icon -->126 <svg viewBox="0 0 24 24"><path d="M12 4v9l4-4 2 2-7 7-7-7 2-2 4 4V4z"/></svg>127 </span>128 <span class="status-icons">129 <!-- cloud -->130 <svg viewBox="0 0 24 24"><path d="M7 15a5 5 0 0 1 5-5 5 5 0 0 1 4 2 4 4 0 1 1 0 8H8a4 4 0 0 1-1-5z"/></svg>131 </span>132 <div style="margin-left:auto;display:flex;align-items:center;gap:18px;">133 <!-- wifi -->134 <svg viewBox="0 0 24 24"><path d="M2 8a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm5 7 3-3-3-3-3 3 3 3z"/></svg>135 <!-- battery -->136 <svg viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2"/><rect x="20" y="10" width="2" height="4"/></svg>137 </div>138 </div>139 <div class="nav-row">140 <div class="icon-btn" aria-label="menu">141 <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3zm0 6h18v2H3zm0 6h18v2H3z"/></svg>142 </div>143 <div class="brand">weather&radar</div>144 <div class="icon-btn" aria-label="search">145 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></svg>146 </div>147 </div>148 </div>149 150 <!-- Sky / hero -->151 <div class="sky">152 <div class="location">Uttar Pradesh, India</div>153 <div class="city">Noida</div>154 <div class="temp">99°</div>155 <div class="feels">feels like 108°</div>156 157 <div class="right-now">right now</div>158 <div class="aqi-chip">AQI 110</div>159 <div class="aqi-text">Moderately polluted</div>160 161 <div class="video-card">162 <div style="font-size:46px;line-height:1.2;">163 <div><strong>90 Min. Weather:</strong></div>164 <div>sunny</div>165 </div>166 <div class="play">167 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>168 </div>169 </div>170 171 <div class="sun-times">172 <span class="sun-icon">173 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4 4l3 3M17 17l3 3M4 20l3-3M17 7l3-3"/></svg>174 </span>175 <span>↑ 5:22 AM</span>176 <span>↓ 7:21 PM</span>177 </div>178 179 <div class="hourly">180 <div class="time-tabs">181 <div class="time-pill">4:00 PM</div>182 </div>183 <div class="cards">184 <!-- 4 PM -->185 <div class="card">186 <div class="hour">4:00 PM</div>187 <div class="weather-icon">188 <!-- sun -->189 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4 4l3 3M17 17l3 3M4 20l3-3M17 7l3-3"/></svg>190 </div>191 <div class="temp-val">98°</div>192 <div class="humid">💧 20%</div>193 <div class="aqi-pill">120</div>194 </div>195 <!-- 5 PM -->196 <div class="card">197 <div class="hour">5:00 PM</div>198 <div class="weather-icon">199 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4 4l3 3M17 17l3 3M4 20l3-3M17 7l3-3"/></svg>200 </div>201 <div class="temp-val">95°</div>202 <div class="humid">💧 30%</div>203 <div class="aqi-pill">120</div>204 </div>205 <!-- 6 PM -->206 <div class="card">207 <div class="hour">6:00 PM</div>208 <div class="weather-icon">209 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4 4l3 3M17 17l3 3M4 20l3-3M17 7l3-3"/></svg>210 </div>211 <div class="temp-val">92°</div>212 <div class="humid">💧 20%</div>213 <div class="aqi-pill">120</div>214 </div>215 <!-- 7 PM -->216 <div class="card">217 <div class="hour">7:00 PM</div>218 <div class="weather-icon moon">219 <!-- crescent moon -->220 <svg viewBox="0 0 24 24"><path d="M15 2a9 9 0 1 0 7 14A8 8 0 1 1 15 2z"/></svg>221 </div>222 <div class="temp-val">88°</div>223 <div class="humid">💧 20%</div>224 <div class="aqi-pill">120</div>225 </div>226 </div>227 </div>228 229 <div class="divider-note">4:00 PM — sunny</div>230 231 <div class="details">232 <div class="detail">233 <!-- pressure -->234 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 5v7l5 3" stroke="#fff" stroke-width="2" fill="none"/></svg>235 <div>pressure: 29.44 inHg</div>236 </div>237 <div class="detail">238 <!-- feels like thermometer -->239 <svg viewBox="0 0 24 24"><path d="M14 14V5a4 4 0 0 0-8 0v9a6 6 0 1 0 8 0z"/></svg>240 <div>feels like: 108°</div>241 </div>242 <div class="detail">243 <!-- humidity -->244 <svg viewBox="0 0 24 24"><path d="M12 2s7 7 7 12a7 7 0 1 1-14 0c0-5 7-12 7-12z"/></svg>245 <div>humidity: 55%<br>dew point: 76°</div>246 </div>247 <div class="detail">248 <!-- wind -->249 <svg viewBox="0 0 24 24"><path d="M3 9h12a3 3 0 1 0-3-3"/><path d="M3 15h16a3 3 0 1 1-3 3"/></svg>250 <div>light wind from E (9 mph)</div>251 </div>252 <div class="detail" style="grid-column:1 / span 2;">253 <!-- AQI -->254 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M6 10h12M6 14h8"/></svg>255 <div>AQI 120 Moderately polluted</div>256 </div>257 </div>258 </div>259 260 <!-- Bottom ad -->261 <div class="ad">[IMG: Ad placeholder]</div>262 263</div>264</body>265</html>