GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Info & Settings - Weather App</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #eef2f5;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #183C55;24 color: #e6f0f6;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 38px;31 }32 .status-left { display: flex; align-items: center; gap: 18px; }33 .status-right { display: flex; align-items: center; gap: 26px; }34 .status-icon svg { display: block; }35 36 /* Header / toolbar */37 .toolbar {38 position: absolute;39 top: 120px;40 left: 0;41 width: 1080px;42 height: 180px;43 background: #2D6282;44 color: #ffffff;45 display: flex;46 align-items: center;47 box-sizing: border-box;48 padding: 0 36px;49 }50 .back-btn {51 width: 72px;52 height: 72px;53 margin-right: 24px;54 }55 .toolbar-title {56 font-size: 64px;57 font-weight: 500;58 letter-spacing: 0.5px;59 }60 .toolbar-divider {61 position: absolute;62 top: 300px;63 left: 0;64 width: 1080px;65 height: 12px;66 background: #e1e7eb;67 }68 69 /* Content */70 .content {71 position: absolute;72 top: 312px;73 left: 0;74 width: 100%;75 padding: 24px 28px 160px 28px;76 box-sizing: border-box;77 }78 .card {79 background: #ffffff;80 border-radius: 16px;81 box-shadow: 0 2px 6px rgba(0,0,0,0.08);82 margin: 20px 12px;83 padding: 36px 40px;84 box-sizing: border-box;85 color: #222;86 }87 .card-title {88 font-size: 46px;89 color: #2E5E80;90 font-weight: 600;91 margin-bottom: 24px;92 }93 .row {94 display: flex;95 align-items: center;96 justify-content: space-between;97 padding: 24px 0;98 font-size: 40px;99 }100 .row .label { color: #333; }101 .row .sub { color: #5c6a75; }102 .divider {103 height: 2px;104 background: #e8edf1;105 margin: 6px 0;106 }107 108 /* Toggle switch */109 .toggle {110 width: 132px;111 height: 72px;112 border-radius: 36px;113 background: #d9d9d9;114 position: relative;115 }116 .toggle .knob {117 width: 64px;118 height: 64px;119 background: #f5f5f5;120 border-radius: 50%;121 position: absolute;122 top: 4px;123 left: 4px;124 transition: left 0.2s;125 box-shadow: 0 1px 3px rgba(0,0,0,0.3);126 }127 .toggle.on { background: #F0C246; }128 .toggle.on .knob { left: 64px; background: #fff3d6; }129 .toggle.off { background: #d0d0d0; }130 .toggle.off .knob { left: 4px; background: #f1f1f1; }131 132 /* Select / dropdown */133 .select {134 display: flex;135 align-items: center;136 gap: 12px;137 font-size: 40px;138 }139 .select .value { color: #333; font-weight: 500; }140 .select .arrow svg { display: block; }141 142 /* Remove ads row */143 .remove-ads {144 display: flex;145 align-items: center;146 gap: 20px;147 font-size: 44px;148 color: #28566f;149 }150 .remove-ads .label { color: #1b2f3d; font-weight: 500; }151 152 /* Segmented control */153 .segmented {154 display: flex;155 border: 3px solid #F0C246;156 border-radius: 12px;157 overflow: hidden;158 width: 92%;159 margin-top: 8px;160 }161 .segment {162 flex: 1;163 text-align: center;164 padding: 22px 0;165 font-size: 40px;166 color: #1f3b4e;167 background: #ffffff;168 }169 .segment.active {170 background: #F0C246;171 color: #ffffff;172 font-weight: 600;173 }174 .helper {175 font-size: 34px;176 color: #8b949b;177 margin-top: 16px;178 }179 180 /* Wind arrows list */181 .wind-list {182 margin-top: 14px;183 margin-left: 24px;184 }185 .wind-item {186 display: flex;187 align-items: center;188 gap: 20px;189 font-size: 36px;190 color: #8b949b;191 padding: 12px 0;192 }193 194 /* Bottom gesture bar */195 .gesture-bar {196 position: absolute;197 bottom: 28px;198 left: 50%;199 transform: translateX(-50%);200 width: 320px;201 height: 12px;202 background: #000;203 border-radius: 6px;204 opacity: 0.9;205 }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status bar -->212 <div class="status-bar">213 <div class="status-left">214 <div>3:56</div>215 <div class="status-icon" title="Temp">216 <svg width="42" height="42" viewBox="0 0 24 24">217 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe4f0" stroke-width="2"></circle>218 <circle cx="12" cy="12" r="5" fill="#cfe4f0"></circle>219 </svg>220 </div>221 <div class="status-icon" title="Globe">222 <svg width="42" height="42" viewBox="0 0 24 24">223 <circle cx="12" cy="12" r="9" fill="none" stroke="#cfe4f0" stroke-width="2"></circle>224 <path d="M4 12h16M12 4v16" stroke="#cfe4f0" stroke-width="2"></path>225 </svg>226 </div>227 <div class="status-icon" title="Download">228 <svg width="42" height="42" viewBox="0 0 24 24">229 <path d="M12 5v9M8 10l4 4 4-4" stroke="#cfe4f0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>230 <path d="M5 19h14" stroke="#cfe4f0" stroke-width="2"></path>231 </svg>232 </div>233 <div class="status-icon" title="Cloud">234 <svg width="42" height="42" viewBox="0 0 24 24">235 <path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 0 0 0 10z" fill="#cfe4f0"></path>236 </svg>237 </div>238 </div>239 <div class="status-right">240 <div class="status-icon" title="WiFi">241 <svg width="42" height="42" viewBox="0 0 24 24">242 <path d="M3 9c4-4 14-4 18 0M6 12c3-3 9-3 12 0M9 15c2-2 4-2 6 0" stroke="#cfe4f0" stroke-width="2" fill="none" stroke-linecap="round"></path>243 <circle cx="12" cy="18" r="1.8" fill="#cfe4f0"></circle>244 </svg>245 </div>246 <div class="status-icon" title="Battery">247 <svg width="48" height="42" viewBox="0 0 28 18">248 <rect x="2" y="2" width="22" height="14" rx="2" ry="2" fill="none" stroke="#cfe4f0" stroke-width="2"></rect>249 <rect x="24" y="6" width="3" height="6" fill="#cfe4f0"></rect>250 <rect x="4" y="4" width="14" height="10" fill="#cfe4f0"></rect>251 </svg>252 </div>253 </div>254 </div>255 256 <!-- Toolbar -->257 <div class="toolbar">258 <div class="back-btn">259 <svg width="72" height="72" viewBox="0 0 48 48">260 <path d="M30 10 L16 24 L30 38" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>261 </svg>262 </div>263 <div class="toolbar-title">Info & Settings</div>264 </div>265 <div class="toolbar-divider"></div>266 267 <!-- Content cards -->268 <div class="content">269 270 <!-- Remove ads card -->271 <div class="card">272 <div class="remove-ads">273 <svg width="56" height="56" viewBox="0 0 48 48">274 <path d="M24 4 L29 18 L44 18 L31 26 L36 40 L24 31 L12 40 L17 26 L4 18 L19 18 Z" fill="#F0C246"></path>275 </svg>276 <div class="label">Remove ads</div>277 </div>278 </div>279 280 <!-- Notifications card -->281 <div class="card">282 <div class="card-title">Notifications</div>283 284 <div class="row">285 <div class="label">Weather alerts</div>286 <div class="toggle on"><div class="knob"></div></div>287 </div>288 <div class="row">289 <div class="label">Active for</div>290 <div class="select">291 <div class="value">Noida</div>292 <div class="arrow">293 <svg width="40" height="40" viewBox="0 0 24 24">294 <path d="M6 9l6 6 6-6" stroke="#6b7983" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>295 </svg>296 </div>297 </div>298 </div>299 <div class="divider"></div>300 301 <div class="row">302 <div class="label">Weather updates</div>303 <div class="toggle on"><div class="knob"></div></div>304 </div>305 <div class="divider"></div>306 307 <div class="row">308 <div class="label">Weather notifications</div>309 <div class="toggle off"><div class="knob"></div></div>310 </div>311 <div class="helper">Permanent notification featuring current weather and temperature in your status bar</div>312 </div>313 314 <!-- Weather card -->315 <div class="card">316 <div class="card-title">Weather</div>317 318 <div class="row" style="padding-top:10px;">319 <div class="label">Units</div>320 </div>321 322 <div class="segmented">323 <div class="segment">Metric</div>324 <div class="segment active">Imperial</div>325 <div class="segment">Advanced</div>326 </div>327 <div class="helper">°F, ft, mph</div>328 329 <div class="divider" style="margin-top:26px;"></div>330 331 <div class="row">332 <div class="label">'Feels like' temperature</div>333 <div class="toggle on"><div class="knob"></div></div>334 </div>335 336 <div class="divider"></div>337 338 <div class="row">339 <div class="label">Show wind arrows</div>340 <div class="toggle on"><div class="knob"></div></div>341 </div>342 343 <div class="wind-list">344 <div class="wind-item">345 <svg width="34" height="34" viewBox="0 0 24 24">346 <path d="M12 16l-5-6h10z" fill="#b0b7bd"></path>347 </svg>348 <div>up to 4 mph</div>349 </div>350 <div class="wind-item">351 <svg width="34" height="34" viewBox="0 0 24 24">352 <path d="M12 16l-5-6h10z" fill="#9fa7ae"></path>353 </svg>354 <div>up to 8 mph</div>355 </div>356 <div class="wind-item">357 <svg width="34" height="34" viewBox="0 0 24 24">358 <path d="M12 16l-5-6h10z" fill="#8a9299"></path>359 </svg>360 <div>over 8 mph</div>361 </div>362 </div>363 </div>364 365 </div>366 367 <!-- Gesture bar -->368 <div class="gesture-bar"></div>369 370</div>371</body>372</html>