GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>AccuWeather Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #5AB6F6 0%, #278FEF 18%, #1477E9 40%, #0D6BDF 75%, #0A5BD0 100%);12 border-radius: 32px;13 box-shadow: 0 20px 60px rgba(0,0,0,0.2);14 color: #fff;15 }16 .status-bar {17 position: absolute; top: 24px; left: 36px; right: 36px; height: 72px; display: flex; align-items: center; justify-content: space-between; color: #EAF6FF;18 font-weight: 600; font-size: 42px;19 }20 .status-right { display: flex; align-items: center; gap: 28px; }21 .app-bar {22 position: absolute; top: 116px; left: 24px; right: 24px; height: 150px;23 display: flex; align-items: center; justify-content: space-between; padding: 0 12px;24 color: #EAF6FF;25 }26 .left-actions { display: flex; align-items: center; gap: 22px; }27 .brand { display: flex; flex-direction: column; }28 .brand .small { font-size: 36px; color: #CFE8FF; display: flex; align-items: center; gap: 12px; }29 .brand .city { font-size: 62px; font-weight: 700; letter-spacing: 0.3px; }30 .premium-btn {31 background: #FF8E42; color: #fff; padding: 18px 28px; border-radius: 32px; font-weight: 800; font-size: 34px;32 box-shadow: 0 8px 16px rgba(0,0,0,0.2);33 }34 .divider {35 position: absolute; top: 270px; left: 0; right: 0; height: 6px; background: rgba(255,255,255,0.18);36 }37 38 .card {39 margin: 320px 36px 0 36px;40 background: #1175EA;41 border-radius: 28px;42 padding: 32px;43 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);44 }45 .sunmoon { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; color: #EAF6FF; }46 .col { border-left: 1px solid rgba(255,255,255,0.18); padding-left: 28px; }47 .col:first-child { border-left: 0; padding-left: 0; }48 .col .top { display: flex; align-items: center; justify-content: space-between; }49 .label { font-size: 36px; color: #CFE8FF; }50 .minutes { font-size: 34px; color: #D8EEFF; }51 .line { height: 2px; background: rgba(255,255,255,0.18); margin: 22px 0; }52 .row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; }53 .row .k { font-size: 32px; color: #CFE8FF; }54 .row .v { font-size: 54px; font-weight: 800; }55 56 .section { margin: 40px 36px 0 36px; }57 .section h2 { margin: 0; font-size: 64px; letter-spacing: 0.3px; }58 .section .sub { margin-top: 10px; font-size: 30px; letter-spacing: 2px; color: #A9D4FF; text-transform: uppercase; }59 60 .image-placeholder {61 width: 100%; height: 540px; border-radius: 24px; background: #E0E0E0;62 border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;63 color: #757575; font-weight: 600; font-size: 36px; margin-top: 26px;64 }65 66 .recommend { margin: 24px 36px 0 36px; color: #A9D4FF; font-size: 32px; letter-spacing: 1px; text-transform: uppercase; }67 .chips { display: flex; gap: 24px; margin: 18px 36px 0 36px; }68 .chip {69 background: rgba(255,255,255,0.16); border-radius: 40px; padding: 16px 24px; display: flex; align-items: center; gap: 18px;70 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);71 }72 .chip .circle {73 width: 96px; height: 96px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;75 }76 .chip span { font-size: 40px; font-weight: 700; color: #fff; }77 78 .air-card {79 margin: 24px 36px 0 36px; background: #1175EA; border-radius: 28px; padding: 28px; min-height: 320px;80 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); position: relative;81 }82 .air-card .badge { position: absolute; top: 40px; right: 40px; height: 6px; width: 120px; background: #FFC300; border-radius: 3px; }83 .air-card .title { position: absolute; top: 80px; right: 40px; font-size: 60px; font-weight: 800; }84 .dots {85 position: absolute; left: 36px; bottom: 36px; right: 260px; top: 36px; display: grid;86 grid-template-columns: repeat(8, 1fr); grid-auto-rows: 24px; gap: 14px; opacity: 0.35;87 }88 .dots div { width: 18px; height: 18px; border-radius: 50%; background: #fff; }89 90 .nav {91 position: absolute; left: 0; right: 0; bottom: 96px; height: 168px; background: rgba(14, 71, 150, 0.95);92 display: flex; align-items: center; justify-content: space-around; color: #CFE8FF; backdrop-filter: blur(8px);93 border-top: 1px solid rgba(255,255,255,0.12);94 }95 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }96 .nav-item span { font-size: 32px; }97 .nav-item.active span { color: #fff; font-weight: 800; }98 .home-indicator {99 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 360px; height: 14px;100 background: #EBEBEB; border-radius: 8px;101 }102 103 /* Utility */104 .muted { color: #A9D4FF; }105 .chev-down { display: inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #CFE8FF; margin-left: 6px; }106 .pad { padding: 0 12px; }107 /* Simple icons */108 .svg-btn { width: 54px; height: 54px; }109 .status-icon { width: 48px; height: 48px; }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status Bar -->116 <div class="status-bar">117 <div style="display:flex; align-items:center; gap:16px;">118 <span>9:53</span>119 <!-- small sun icon -->120 <svg class="status-icon" viewBox="0 0 24 24">121 <circle cx="12" cy="12" r="5" fill="#FFE27A"></circle>122 <g stroke="#FFE27A" stroke-width="2">123 <line x1="12" y1="1.5" x2="12" y2="5"></line>124 <line x1="12" y1="19" x2="12" y2="22.5"></line>125 <line x1="1.5" y1="12" x2="5" y2="12"></line>126 <line x1="19" y1="12" x2="22.5" y2="12"></line>127 <line x1="4.2" y1="4.2" x2="6.6" y2="6.6"></line>128 <line x1="17.4" y1="17.4" x2="19.8" y2="19.8"></line>129 <line x1="17.4" y1="6.6" x2="19.8" y2="4.2"></line>130 <line x1="4.2" y1="19.8" x2="6.6" y2="17.4"></line>131 </g>132 </svg>133 </div>134 <div class="status-right">135 <!-- wifi -->136 <svg class="status-icon" viewBox="0 0 24 24">137 <path d="M2 8.5c5.5-4.7 14.5-4.7 20 0" fill="none" stroke="#EAF6FF" stroke-width="2" stroke-linecap="round"/>138 <path d="M5 12c4-3.2 10-3.2 14 0" fill="none" stroke="#EAF6FF" stroke-width="2" stroke-linecap="round"/>139 <path d="M8.5 15c2.5-2 6.5-2 9 0" fill="none" stroke="#EAF6FF" stroke-width="2" stroke-linecap="round"/>140 <circle cx="12" cy="18.5" r="1.6" fill="#EAF6FF"/>141 </svg>142 <!-- battery -->143 <svg class="status-icon" viewBox="0 0 32 24">144 <rect x="2" y="4" width="24" height="16" rx="3" ry="3" fill="none" stroke="#EAF6FF" stroke-width="2"/>145 <rect x="4" y="6" width="18" height="12" rx="2" ry="2" fill="#EAF6FF"/>146 <rect x="27" y="9" width="3" height="6" rx="1" ry="1" fill="#EAF6FF"/>147 </svg>148 </div>149 </div>150 151 <!-- App Bar -->152 <div class="app-bar">153 <div class="left-actions">154 <!-- Hamburger -->155 <svg class="svg-btn" viewBox="0 0 24 24">156 <path d="M3 6h18M3 12h18M3 18h18" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>157 </svg>158 <div class="brand">159 <div class="small">160 <!-- simple gear/sun as brand icon -->161 <svg width="34" height="34" viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="4" fill="#EAF6FF"></circle>163 <g stroke="#EAF6FF" stroke-width="2">164 <line x1="12" y1="2" x2="12" y2="6"></line>165 <line x1="12" y1="18" x2="12" y2="22"></line>166 <line x1="2" y1="12" x2="6" y2="12"></line>167 <line x1="18" y1="12" x2="22" y2="12"></line>168 </g>169 </svg>170 <span>AccuWeather</span>171 </div>172 <div class="city">173 Brussels, BE <span class="chev-down"></span>174 </div>175 </div>176 </div>177 <div class="premium-btn">GET PREMIUM+</div>178 </div>179 180 <div class="divider"></div>181 182 <!-- Sun & Moon Card -->183 <div class="card">184 <div class="sunmoon">185 <div class="col">186 <div class="top">187 <div style="display:flex; align-items:center; gap:10px;">188 <!-- Sun icon -->189 <svg width="44" height="44" viewBox="0 0 24 24">190 <circle cx="12" cy="12" r="5" fill="#FFE27A"></circle>191 <g stroke="#FFE27A" stroke-width="2">192 <line x1="12" y1="1.5" x2="12" y2="5"></line>193 <line x1="12" y1="19" x2="12" y2="22.5"></line>194 <line x1="1.5" y1="12" x2="5" y2="12"></line>195 <line x1="19" y1="12" x2="22.5" y2="12"></line>196 </g>197 </svg>198 <span class="label">Sun</span>199 </div>200 <div class="minutes">59 mins</div>201 </div>202 <div class="line"></div>203 <div class="row">204 <div class="k">Rise</div>205 <div class="v">7:34 AM</div>206 </div>207 <div class="row">208 <div class="k">Set</div>209 <div class="v">7:33 PM</div>210 </div>211 </div>212 <div class="col">213 <div class="top">214 <div style="display:flex; align-items:center; gap:10px;">215 <!-- Moon icon -->216 <svg width="44" height="44" viewBox="0 0 24 24">217 <path d="M15.5 2.5a8.5 8.5 0 1 0 6 15.5 9 9 0 1 1-6-15.5z" fill="#D9E8FF"></path>218 </svg>219 <span class="label">Moon</span>220 </div>221 <div class="minutes">33 mins</div>222 </div>223 <div class="line"></div>224 <div class="row">225 <div class="k">Rise</div>226 <div class="v">6:49 PM</div>227 </div>228 <div class="row">229 <div class="k">Set</div>230 <div class="v">4:22 AM</div>231 </div>232 </div>233 </div>234 </div>235 236 <!-- Radar & Maps -->237 <div class="section">238 <h2>Radar & Maps</h2>239 <div class="sub">Track weather and its impacts</div>240 <div class="image-placeholder">[IMG: Weather Radar Map of Brussels]</div>241 </div>242 243 <div class="recommend">Recommended Maps</div>244 <div class="chips">245 <div class="chip">246 <div class="circle">IMG</div>247 <span>Clouds</span>248 </div>249 <div class="chip">250 <div class="circle">IMG</div>251 <span>Temperature</span>252 </div>253 </div>254 255 <!-- Air Quality -->256 <div class="section" style="margin-top: 40px;">257 <h2>Air Quality</h2>258 <div class="sub">Check local pollutants</div>259 </div>260 <div class="air-card">261 <div class="badge"></div>262 <div class="title">Poor</div>263 <div class="dots">264 <!-- simple dot grid -->265 <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>266 <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>267 <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>268 <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>269 </div>270 </div>271 272 <!-- Bottom Navigation -->273 <div class="nav">274 <div class="nav-item active">275 <svg width="54" height="54" viewBox="0 0 24 24">276 <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>277 <rect x="6" y="6" width="6" height="6" fill="#FFFFFF"/>278 </svg>279 <span>Today</span>280 </div>281 <div class="nav-item">282 <svg width="54" height="54" viewBox="0 0 24 24">283 <circle cx="12" cy="12" r="8" fill="none" stroke="#CFE8FF" stroke-width="2"/>284 <path d="M12 6v6l4 2" stroke="#CFE8FF" stroke-width="2" stroke-linecap="round" fill="none"/>285 </svg>286 <span>Hourly</span>287 </div>288 <div class="nav-item">289 <svg width="54" height="54" viewBox="0 0 24 24">290 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#CFE8FF" stroke-width="2"/>291 <line x1="3" y1="9" x2="21" y2="9" stroke="#CFE8FF" stroke-width="2"/>292 <rect x="6" y="12" width="4" height="4" fill="#CFE8FF"/>293 </svg>294 <span>Daily</span>295 </div>296 <div class="nav-item">297 <svg width="54" height="54" viewBox="0 0 24 24">298 <circle cx="12" cy="12" r="9" fill="none" stroke="#CFE8FF" stroke-width="2"/>299 <path d="M12 5a7 7 0 1 0 7 7" fill="none" stroke="#CFE8FF" stroke-width="2"/>300 </svg>301 <span>Radar & Maps</span>302 </div>303 </div>304 305 <div class="home-indicator"></div>306</div>307</body>308</html>