GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Weather Screen Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --dark:#214d92;10 --mid:#3e6fbb;11 --light:#5b83cb;12 --card: rgba(255,255,255,0.09);13 --border: rgba(255,255,255,0.18);14 --muted: rgba(255,255,255,0.75);15 }16 body{ margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }17 #render-target{18 width:1080px; height:2400px; position:relative; overflow:hidden;19 color:#fff;20 background: linear-gradient(180deg, var(--dark) 0%, #2a5aa5 12%, var(--mid) 32%, var(--light) 100%);21 }22 /* Status bar */23 .status{24 position:absolute; top:0; left:0; right:0; height:88px;25 padding:18px 30px; display:flex; align-items:center; justify-content:space-between;26 font-size:36px; letter-spacing:0.5px; opacity:.95;27 }28 .status .icons{ display:flex; align-items:center; gap:22px; }29 .icon-dot{ width:10px; height:10px; border-radius:50%; background:#ffffff; opacity:.9; display:inline-block; }30 /* App bar */31 .appbar{32 position:absolute; top:88px; left:0; right:0; height:210px;33 background: var(--dark);34 display:flex; align-items:center; padding:0 36px; gap:28px;35 box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;36 }37 .hamburger{38 width:80px; height:80px; display:flex; align-items:center; justify-content:center; cursor:default;39 }40 .hamburger span{41 display:block; width:48px; height:6px; background:#fff; border-radius:4px; margin:6px 0;42 opacity:.9;43 }44 .app-title{ flex:1; }45 .app-title .brand{ font-size:34px; opacity:.9; display:flex; align-items:center; gap:10px; }46 .app-title .loc{ font-size:52px; font-weight:700; margin-top:6px; }47 .premium{48 background:#fff; color:#d34a22; font-weight:800; font-size:32px; padding:20px 28px; border-radius:40px;49 box-shadow:0 2px 0 rgba(0,0,0,0.2) inset; white-space:nowrap;50 }51 /* Decorative dial */52 .dial-wrap{53 position:absolute; top:250px; left:-120px; width:1320px; height:620px; pointer-events:none;54 background: radial-gradient(ellipse closest-side at 50% 0%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.03) 65%, rgba(255,255,255,0) 70%);55 border-bottom-left-radius:660px; border-bottom-right-radius:660px;56 }57 .ticks{58 position:absolute; top:-40px; left:60px; right:60px; height:260px;59 background: repeating-conic-gradient(from 180deg, rgba(255,255,255,0.2) 0deg, rgba(255,255,255,0.2) 2deg, rgba(255,255,255,0) 6deg);60 filter: blur(1px); opacity:.35; border-bottom-left-radius:650px; border-bottom-right-radius:650px;61 }62 /* Legend row */63 .legend{64 position:absolute; top:540px; left:40px; right:40px;65 display:flex; align-items:center; gap:36px; font-size:30px; color:var(--muted);66 }67 .legend-group{ display:flex; align-items:center; gap:16px; }68 .dot{ width:18px; height:18px; border-radius:50%; display:inline-block; border:2px solid rgba(255,255,255,0.2); }69 /* Forecast card */70 .card{ background:var(--card); border-radius:28px; padding:28px; border:1px solid var(--border); }71 .forecast{72 position:absolute; top:610px; left:36px; right:36px;73 }74 .forecast .cols{ display:flex; }75 .forecast .col{76 flex:1; padding:24px; border-right:1px solid var(--border);77 }78 .forecast .col:last-child{ border-right:none; }79 .col .label{ text-transform:uppercase; font-size:30px; color:var(--muted); letter-spacing:1px; }80 .temp{ display:flex; align-items:center; gap:18px; margin-top:18px; }81 .temp .num{ font-size:86px; font-weight:800; }82 .sub{ font-size:30px; color:var(--muted); margin-top:8px; }83 .wx-ico{ width:64px; height:64px; }84 /* Section header */85 .section{86 position:absolute; top:980px; left:36px; right:36px;87 }88 .section h2{ font-size:64px; margin:0 0 6px 0; }89 .section .subhead{ font-size:30px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }90 /* Details list */91 .details{92 position:absolute; top:1100px; left:36px; right:36px;93 }94 .row{ display:flex; align-items:center; justify-content:space-between; padding:36px 10px; font-size:40px; }95 .row + .row{ border-top:1px solid var(--border); }96 .row .val{ font-weight:700; }97 .muted{ color:var(--muted); }98 /* See more pill */99 .see-more{100 position:absolute; top:1710px; left:80px; right:80px; height:120px;101 background:rgba(255,255,255,0.08); border:1px solid var(--border);102 border-radius:24px; display:flex; justify-content:center; align-items:center; color:#fff; font-size:40px;103 }104 /* Bottom navigation */105 .tabbar{106 position:absolute; left:0; right:0; bottom:110px; height:190px;107 background: rgba(32,77,146,0.9);108 border-top:1px solid rgba(255,255,255,0.15);109 display:flex; align-items:center; justify-content:space-around;110 }111 .tab{ width:25%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#cfe0ff; }112 .tab .tlabel{ font-size:32px; }113 .tab.active{ color:#fff; font-weight:700; }114 .tab svg{ width:58px; height:58px; }115 /* Gesture bar */116 .gesture{117 position:absolute; left:360px; right:360px; bottom:40px; height:16px; background:#ffffff; border-radius:12px; opacity:.9;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status bar -->125 <div class="status">126 <div>10:40</div>127 <div class="icons">128 <span class="icon-dot"></span>129 <span class="icon-dot"></span>130 <span class="icon-dot"></span>131 <span class="icon-dot"></span>132 </div>133 </div>134 135 <!-- App bar -->136 <div class="appbar">137 <div class="hamburger" aria-label="menu">138 <span></span><span></span><span></span>139 </div>140 <div class="app-title">141 <div class="brand">142 <!-- simple sun gear icon -->143 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">144 <circle cx="12" cy="12" r="4" fill="#fff"/>145 <g stroke="#fff" stroke-width="2">146 <line x1="12" y1="1" x2="12" y2="4"/>147 <line x1="12" y1="20" x2="12" y2="23"/>148 <line x1="1" y1="12" x2="4" y2="12"/>149 <line x1="20" y1="12" x2="23" y2="12"/>150 <line x1="4.2" y1="4.2" x2="6.6" y2="6.6"/>151 <line x1="17.4" y1="17.4" x2="19.8" y2="19.8"/>152 <line x1="4.2" y1="19.8" x2="6.6" y2="17.4"/>153 <line x1="17.4" y1="6.6" x2="19.8" y2="4.2"/>154 </g>155 </svg>156 <span>AccuWeather</span>157 </div>158 <div class="loc">Ystradgynlais, GB</div>159 </div>160 <div class="premium">GET PREMIUM+</div>161 </div>162 163 <!-- Decorative dial with faint ticks -->164 <div class="dial-wrap">165 <div class="ticks"></div>166 </div>167 168 <!-- Legend row -->169 <div class="legend">170 <div class="legend-group">171 <span class="muted">Rain</span>172 <span class="dot" style="background:#88c441"></span>173 <span class="dot" style="background:#c9d541"></span>174 <span class="dot" style="background:#ffb000"></span>175 <span class="dot" style="background:#ff7b22"></span>176 <span class="dot" style="background:#ff3b30"></span>177 </div>178 <div class="legend-group">179 <span class="muted">Snow</span>180 <span class="dot" style="background:#c7d8fa"></span>181 <span class="dot" style="background:#9fbaf8"></span>182 <span class="dot" style="background:#6e94f1"></span>183 <span class="dot" style="background:#2f62e6"></span>184 </div>185 <div class="legend-group">186 <span class="muted">Ice</span>187 <span class="dot" style="background:#f0a6c9"></span>188 <span class="dot" style="background:#e884b6"></span>189 <span class="dot" style="background:#d35d9e"></span>190 </div>191 <div class="legend-group">192 <span class="muted">Mix</span>193 <span class="dot" style="background:#c57ade"></span>194 <span class="dot" style="background:#a768dd"></span>195 <span class="dot" style="background:#8d55d1"></span>196 </div>197 </div>198 199 <!-- Forecast card -->200 <div class="forecast card">201 <div class="cols">202 <div class="col">203 <div class="label">Afternoon</div>204 <div class="temp">205 <svg class="wx-ico" viewBox="0 0 24 24" fill="none">206 <path d="M6 15a5 5 0 1 1 8.7-4.1A4 4 0 1 1 18 15H6z" fill="#fff" opacity=".9"/>207 <circle cx="6" cy="7" r="2" fill="#ffd46b"/>208 </svg>209 <div class="num">62°</div>210 </div>211 <div class="sub">RealFeel 58°</div>212 </div>213 <div class="col">214 <div class="label">Tonight</div>215 <div class="temp">216 <svg class="wx-ico" viewBox="0 0 24 24" fill="none">217 <path d="M6 15a5 5 0 1 1 8.7-4.1A4 4 0 1 1 18 15H6z" fill="#fff" opacity=".9"/>218 <line x1="9" y1="18" x2="7" y2="22" stroke="#9fd0ff" stroke-width="2"/>219 <line x1="14" y1="18" x2="12" y2="22" stroke="#9fd0ff" stroke-width="2"/>220 </svg>221 <div class="num">51°</div>222 </div>223 <div class="sub">RealFeel 46°</div>224 </div>225 <div class="col">226 <div class="label">Wed</div>227 <div class="temp">228 <svg class="wx-ico" viewBox="0 0 24 24" fill="none">229 <path d="M6 15a5 5 0 1 1 8.7-4.1A4 4 0 1 1 18 15H6z" fill="#fff" opacity=".9"/>230 <line x1="9" y1="18" x2="7" y2="22" stroke="#9fd0ff" stroke-width="2"/>231 <line x1="14" y1="18" x2="12" y2="22" stroke="#9fd0ff" stroke-width="2"/>232 </svg>233 <div class="num">63°</div>234 </div>235 <div class="sub">RealFeel 55°</div>236 </div>237 </div>238 </div>239 240 <!-- Today's Details -->241 <div class="section">242 <h2>Today's Details</h2>243 <div class="subhead">Current Conditions</div>244 </div>245 246 <!-- Details card -->247 <div class="details card">248 <div class="row">249 <div>Temperature</div>250 <div class="val">60°</div>251 </div>252 <div class="row">253 <div>RealFeel</div>254 <div class="val">54°</div>255 </div>256 <div class="row">257 <div>RealFeel Shade</div>258 <div class="val">54°</div>259 </div>260 <div class="row">261 <div>Wind</div>262 <div class="val">WSW 19 mph</div>263 </div>264 <div class="row">265 <div>Max Wind Gusts</div>266 <div class="val">32 mph</div>267 </div>268 <div class="row">269 <div>Humidity</div>270 <div class="val">79%</div>271 </div>272 <div class="row">273 <div>Indoor Humidity</div>274 <div class="val">60% (Ideal Humidity)</div>275 </div>276 </div>277 278 <div class="see-more">See More →</div>279 280 <!-- Bottom navigation -->281 <div class="tabbar">282 <div class="tab active">283 <svg viewBox="0 0 24 24" fill="none">284 <rect x="4" y="5" width="8" height="8" rx="1.5" fill="#ffffff"/>285 <rect x="14" y="5" width="6" height="3" rx="1.5" fill="#cfe0ff" opacity=".6"/>286 <rect x="14" y="10" width="6" height="3" rx="1.5" fill="#cfe0ff" opacity=".6"/>287 </svg>288 <div class="tlabel">Today</div>289 </div>290 <div class="tab">291 <svg viewBox="0 0 24 24" fill="none">292 <circle cx="12" cy="12" r="8" stroke="#cfe0ff" stroke-width="2"/>293 <line x1="12" y1="12" x2="12" y2="7" stroke="#cfe0ff" stroke-width="2"/>294 <line x1="12" y1="12" x2="16" y2="12" stroke="#cfe0ff" stroke-width="2"/>295 </svg>296 <div class="tlabel">Hourly</div>297 </div>298 <div class="tab">299 <svg viewBox="0 0 24 24" fill="none">300 <rect x="4" y="5" width="16" height="14" rx="2" stroke="#cfe0ff" stroke-width="2"/>301 <line x1="4" y1="9" x2="20" y2="9" stroke="#cfe0ff" stroke-width="2"/>302 <rect x="7" y="12" width="4" height="4" fill="#cfe0ff"/>303 </svg>304 <div class="tlabel">Daily</div>305 </div>306 <div class="tab">307 <svg viewBox="0 0 24 24" fill="none">308 <circle cx="12" cy="12" r="8" stroke="#cfe0ff" stroke-width="2"/>309 <path d="M12 4a8 8 0 0 1 8 8" stroke="#cfe0ff" stroke-width="2"/>310 <path d="M12 12l5 5" stroke="#cfe0ff" stroke-width="2"/>311 </svg>312 <div class="tlabel">Radar & Maps</div>313 </div>314 </div>315 316 <!-- Gesture bar -->317 <div class="gesture"></div>318</div>319</body>320</html>