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">6<title>Weather App UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #eef3f6;15 border-radius: 22px;16 box-shadow: 0 6px 24px rgba(0,0,0,0.15);17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 left: 0; top: 0;23 width: 100%; height: 110px;24 background: #163d53;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 font-weight: 500;31 letter-spacing: 0.2px;32 }33 .status-left { display: flex; align-items: center; gap: 20px; }34 .status-icons { margin-left: 28px; display: flex; gap: 24px; align-items: center; opacity: 0.9; }35 .status-icon-circle { width: 12px; height: 12px; border-radius: 50%; background: #fff; display: inline-block; }36 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }37 .status-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; opacity: 0.8; }38 .status-signal {39 width: 26px; height: 22px;40 border: 2px solid #fff; border-radius: 4px; position: relative;41 }42 .status-signal::after {43 content: ""; position: absolute; right: 3px; bottom: 3px;44 width: 14px; height: 12px; background: #fff; border-radius: 2px;45 }46 .battery {47 width: 26px; height: 14px; border: 2px solid #fff; border-radius: 3px; position: relative;48 }49 .battery::after {50 content: ""; position: absolute; right: -6px; top: 3px; width: 4px; height: 8px; background: #fff; border-radius: 1px;51 }52 53 /* App bar */54 .app-bar {55 position: absolute;56 left: 0; top: 110px;57 width: 100%; height: 120px;58 background: #2e6381;59 color: #e7f1f7;60 display: flex;61 align-items: center;62 padding: 0 28px;63 box-sizing: border-box;64 }65 .app-title {66 flex: 1; text-align: center; font-size: 46px; font-weight: 500; letter-spacing: 0.3px;67 }68 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }69 .icon-btn svg { fill: none; stroke: #e7f1f7; stroke-width: 8; }70 71 /* Content area */72 .content {73 position: absolute;74 left: 0; top: 230px;75 width: 100%;76 padding: 24px;77 box-sizing: border-box;78 }79 80 .card {81 background: #fff;82 border-radius: 14px;83 box-shadow: 0 4px 10px rgba(0,0,0,0.08);84 overflow: hidden;85 }86 87 /* Radar card */88 .radar-card { width: 1032px; margin: 0 auto; }89 .radar-image {90 height: 540px;91 background: #E0E0E0;92 border: 1px solid #BDBDBD;93 display: flex; align-items: center; justify-content: center;94 color: #757575; font-size: 30px; letter-spacing: 0.3px;95 position: relative;96 }97 .chip-row {98 position: absolute; left: 24px; bottom: 24px; display: flex; gap: 20px;99 }100 .chip {101 background: #46718b; color: #eaf3f7; padding: 18px 26px; border-radius: 12px; font-size: 34px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);102 }103 .chip.primary { background: #2b5570; font-weight: 600; }104 .play-btn {105 position: absolute; right: 24px; bottom: 24px;106 width: 80px; height: 66px; background: #2b5570; border-radius: 10px;107 display: flex; align-items: center; justify-content: center;108 }109 .play-btn svg { fill: #eaf3f7; }110 111 /* Ad block */112 .ad-label {113 width: 1032px; margin: 20px auto 8px; color: #8e9aa3; text-align: right; font-size: 34px;114 }115 .ad-block {116 width: 1032px; height: 660px; margin: 0 auto 34px;117 background: #edf2f5; border: 2px dashed #c6d0d6; border-radius: 10px;118 display: flex; align-items: center; justify-content: center; color: #8898a3;119 position: relative;120 }121 .ad-img-placeholder {122 width: 180px; height: 140px; border: 1px solid #BDBDBD; background: #E0E0E0;123 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 8px;124 }125 126 /* Forecast card */127 .forecast-card { width: 1032px; margin: 0 auto; }128 .forecast-header {129 background: #2e6381; color: #eaf3f7; height: 110px; display: flex; align-items: center; padding: 0 26px; box-sizing: border-box;130 border-bottom: 6px solid #d3a45a;131 }132 .forecast-header h2 { margin: 0 0 0 14px; font-size: 42px; font-weight: 500; }133 .forecast-body { padding: 24px 10px 20px; }134 .forecast-grid {135 display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;136 text-align: center;137 }138 .period-title { color: #7a8188; font-size: 36px; margin-bottom: 10px; }139 .temp { font-size: 66px; font-weight: 600; margin: 4px 0 16px; }140 .temp.green { color: #2fb657; }141 .temp.orange { color: #f29a3a; }142 .weather-icon { width: 110px; height: 70px; margin: 0 auto 12px; }143 .meta-row { display: flex; align-items: center; justify-content: center; gap: 12px; color: #7a8188; font-size: 34px; }144 .droplet svg, .wind svg { width: 34px; height: 34px; }145 .droplet svg path, .wind svg path { fill: #7a8188; }146 147 .tabs {148 display: flex; align-items: stretch; border-top: 1px solid #dfe6ea; margin-top: 10px;149 }150 .tab {151 flex: 1; padding: 22px; font-size: 34px; color: #6f7a83; text-align: center; background: #f6f8fa; border-right: 1px solid #e3eaee;152 }153 .tab:last-child { border-right: none; }154 .tab.active { background: #2e6381; color: #eaf3f7; font-weight: 600; }155 .tab small { display: block; font-size: 28px; opacity: 0.85; margin-top: 6px; }156 157 /* menu dots in header */158 .menu-dots {159 margin-left: auto; display: flex; gap: 12px; align-items: center;160 }161 .dot { width: 10px; height: 10px; border-radius: 50%; background: #eaf3f7; opacity: 0.9; }162 163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status bar -->169 <div class="status-bar">170 <div class="status-left">171 <div style="font-size:38px;">10:40</div>172 <div class="status-icons">173 <span class="status-icon-circle"></span>174 <span class="status-icon-circle" style="opacity:0.8;"></span>175 <span class="status-icon-circle" style="opacity:0.7;"></span>176 </div>177 </div>178 <div class="status-right">179 <div class="status-dot"></div>180 <div class="status-signal"></div>181 <div class="battery"></div>182 </div>183 </div>184 185 <!-- App bar -->186 <div class="app-bar">187 <div class="icon-btn" aria-label="Menu">188 <svg width="56" height="56" viewBox="0 0 56 56">189 <path d="M6 12h44M6 28h44M6 44h44"></path>190 </svg>191 </div>192 <div class="app-title">Ystradgynlais</div>193 <div class="icon-btn" aria-label="Search">194 <svg width="56" height="56" viewBox="0 0 56 56">195 <circle cx="24" cy="24" r="16"></circle>196 <path d="M36 36l14 14"></path>197 </svg>198 </div>199 </div>200 201 <!-- Content -->202 <div class="content">203 <!-- Radar card -->204 <div class="card radar-card">205 <div class="radar-image">206 [IMG: Weather Radar Map - South Wales]207 <div class="chip-row">208 <div class="chip primary">now</div>209 <div class="chip">today</div>210 <div class="chip">tomorrow</div>211 </div>212 <div class="play-btn">213 <svg width="34" height="34" viewBox="0 0 34 34"><polygon points="8,6 28,17 8,28"></polygon></svg>214 </div>215 </div>216 </div>217 218 <!-- Ad block -->219 <div class="ad-label">Ad</div>220 <div class="ad-block">221 <div class="ad-img-placeholder">[IMG: Ad Placeholder]</div>222 </div>223 224 <!-- Forecast card -->225 <div class="card forecast-card">226 <div class="forecast-header">227 <svg class="weather-icon" viewBox="0 0 100 60">228 <circle cx="76" cy="22" r="16" fill="#ffd158"></circle>229 <ellipse cx="38" cy="38" rx="28" ry="16" fill="#ffffff"></ellipse>230 <ellipse cx="58" cy="42" rx="30" ry="18" fill="#e6eef3"></ellipse>231 </svg>232 <h2>Forecast</h2>233 <div class="menu-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>234 </div>235 <div class="forecast-body">236 <div class="forecast-grid">237 <!-- Evening -->238 <div>239 <div class="period-title">Evening</div>240 <div class="temp green">58°</div>241 <svg class="weather-icon" viewBox="0 0 110 70">242 <circle cx="28" cy="36" r="14" fill="#ffd158"></circle>243 <ellipse cx="56" cy="42" rx="38" ry="20" fill="#e6eef3"></ellipse>244 <ellipse cx="48" cy="36" rx="28" ry="16" fill="#cfd8de"></ellipse>245 </svg>246 <div class="meta-row">247 <span class="droplet">248 <svg viewBox="0 0 24 24"><path d="M12 3C12 3 6 11 6 15a6 6 0 0 0 12 0c0-4-6-12-6-12z"></path></svg>249 </span>250 <span>50%</span>251 </div>252 </div>253 <!-- Night -->254 <div>255 <div class="period-title">Night</div>256 <div class="temp green">54°</div>257 <svg class="weather-icon" viewBox="0 0 110 70">258 <circle cx="30" cy="38" r="14" fill="#ffd158"></circle>259 <ellipse cx="62" cy="44" rx="38" ry="20" fill="#e6eef3"></ellipse>260 <ellipse cx="52" cy="38" rx="28" ry="16" fill="#cfd8de"></ellipse>261 </svg>262 <div class="meta-row">263 <span class="droplet">264 <svg viewBox="0 0 24 24"><path d="M12 3C12 3 6 11 6 15a6 6 0 0 0 12 0c0-4-6-12-6-12z"></path></svg>265 </span>266 <span>20%</span>267 </div>268 </div>269 <!-- Morning -->270 <div>271 <div class="period-title">Morning</div>272 <div class="temp orange">61°</div>273 <svg class="weather-icon" viewBox="0 0 110 70">274 <ellipse cx="48" cy="46" rx="40" ry="22" fill="#e6eef3"></ellipse>275 <ellipse cx="40" cy="38" rx="30" ry="16" fill="#cfd8de"></ellipse>276 <rect x="64" y="24" width="8" height="24" fill="#da4d4d" rx="2"></rect>277 <circle cx="84" cy="28" r="10" fill="#9bc7f3"></circle>278 </svg>279 <div class="meta-row">280 <span class="droplet">281 <svg viewBox="0 0 24 24"><path d="M12 3C12 3 6 11 6 15a6 6 0 0 0 12 0c0-4-6-12-6-12z"></path></svg>282 </span>283 <span>70%</span>284 </div>285 </div>286 <!-- Afternoon -->287 <div>288 <div class="period-title">Afternoon</div>289 <div class="temp orange">65°</div>290 <svg class="weather-icon" viewBox="0 0 110 70">291 <ellipse cx="52" cy="50" rx="40" ry="22" fill="#e6eef3"></ellipse>292 <ellipse cx="44" cy="42" rx="30" ry="16" fill="#cfd8de"></ellipse>293 <circle cx="92" cy="28" r="12" fill="#ffd158"></circle>294 <rect x="66" y="24" width="8" height="24" fill="#da4d4d" rx="2"></rect>295 </svg>296 <div class="meta-row">297 <span class="droplet">298 <svg viewBox="0 0 24 24"><path d="M12 3C12 3 6 11 6 15a6 6 0 0 0 12 0c0-4-6-12-6-12z"></path></svg>299 </span>300 <span>70%</span>301 </div>302 </div>303 </div>304 305 <div class="tabs">306 <div class="tab active">today<small>09/26</small></div>307 <div class="tab">tomorrow<small>09/27</small></div>308 <div class="tab">Thursday<small>09/28</small></div>309 <div class="tab">Friday<small>09/29</small></div>310 <div class="tab">Saturday<small>09/30</small></div>311 </div>312 </div>313 </div>314 </div>315 316</div>317</body>318</html>