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>Info & Settings UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F1F4F6;15 font-family: Arial, Helvetica, sans-serif;16 color: #1f2933;17 }18 19 /* Top status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 120px;26 background: #0B4454;27 color: #ffffff;28 display: flex;29 align-items: center;30 padding: 0 40px;31 box-sizing: border-box;32 font-size: 40px;33 letter-spacing: 0.5px;34 }35 .status-icons {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 28px;40 }41 .dot { width: 14px; height: 14px; background: #ffffff; border-radius: 50%; opacity: 0.7; }42 43 /* App bar */44 .app-bar {45 position: absolute;46 top: 120px;47 left: 0;48 width: 100%;49 height: 170px;50 background: #166D85;51 color: #ffffff;52 display: flex;53 align-items: center;54 box-shadow: 0 2px 0 rgba(0,0,0,0.08);55 }56 .back-btn {57 width: 120px;58 height: 170px;59 display: flex;60 align-items: center;61 justify-content: center;62 }63 .app-title {64 position: absolute;65 width: 100%;66 text-align: center;67 font-size: 58px;68 font-weight: 600;69 letter-spacing: 0.2px;70 }71 72 /* Content area */73 .content {74 position: absolute;75 top: 300px;76 left: 0;77 right: 0;78 bottom: 100px;79 overflow-y: auto;80 padding: 30px 30px 120px 30px;81 box-sizing: border-box;82 }83 84 .card {85 background: #ffffff;86 border-radius: 18px;87 box-shadow: 0 2px 6px rgba(0,0,0,0.08);88 margin-bottom: 28px;89 padding: 40px;90 }91 92 .row {93 display: flex;94 align-items: center;95 justify-content: space-between;96 padding: 18px 0;97 font-size: 42px;98 }99 .row-label { color: #25323b; }100 .secondary {101 color: #8a949c;102 font-size: 34px;103 line-height: 1.45;104 padding-top: 8px;105 }106 107 .section-title {108 color: #165D7A;109 font-weight: 700;110 font-size: 46px;111 padding-bottom: 10px;112 }113 114 .divider {115 height: 2px;116 background: #E6EAEE;117 margin: 6px 0;118 }119 120 /* Toggle switch */121 .toggle {122 width: 156px;123 height: 68px;124 border-radius: 34px;125 background: #D8D8D8;126 position: relative;127 box-shadow: inset 0 1px 0 rgba(0,0,0,0.12);128 }129 .toggle .knob {130 position: absolute;131 top: 8px;132 left: 8px;133 width: 52px;134 height: 52px;135 border-radius: 50%;136 background: #ffffff;137 box-shadow: 0 2px 4px rgba(0,0,0,0.18);138 }139 .toggle.on {140 background: #FFC107;141 }142 .toggle.on .knob {143 left: 96px;144 background: #F4BD12;145 }146 147 /* Dropdown value */148 .dropdown-value {149 display: flex;150 align-items: center;151 gap: 16px;152 color: #4b5963;153 font-size: 42px;154 }155 156 /* Star + Remove ads */157 .ads-row {158 display: flex;159 align-items: center;160 gap: 28px;161 font-size: 46px;162 color: #1976D2;163 font-weight: 600;164 }165 166 /* Segmented controls */167 .segmented {168 border: 2px solid #FFC107;169 border-radius: 12px;170 display: flex;171 overflow: hidden;172 width: 900px;173 }174 .segment {175 flex: 1;176 text-align: center;177 font-size: 40px;178 padding: 28px 0;179 color: #FFC107;180 background: #ffffff;181 border-right: 2px solid #FFC107;182 }183 .segment:last-child { border-right: none; }184 .segment.active {185 background: #FFC107;186 color: #ffffff;187 font-weight: 700;188 }189 190 /* Gesture pill (bottom) */191 .gesture-pill {192 position: absolute;193 bottom: 24px;194 left: 50%;195 transform: translateX(-50%);196 width: 360px;197 height: 18px;198 background: #1a1a1a;199 border-radius: 9px;200 opacity: 0.85;201 }202</style>203</head>204<body>205<div id="render-target">206 <!-- Status bar -->207 <div class="status-bar">208 <div>6:07</div>209 <div class="status-icons">210 <div class="dot"></div>211 <div class="dot"></div>212 <div class="dot"></div>213 <div class="dot"></div>214 <div class="dot"></div>215 <!-- WiFi icon -->216 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">217 <path d="M12 18.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5.7-1.5 1.5-1.5zm-4.5-4.1l1.1 1.1c1.9-1.9 5-1.9 6.9 0l1.1-1.1c-2.6-2.6-6.6-2.6-9.1 0zm-3.7-3.7l1.1 1.1c3.9-3.9 10.2-3.9 14.1 0l1.1-1.1c-4.5-4.5-11.8-4.5-16.3 0z" fill="#fff"/>218 </svg>219 <!-- Battery icon -->220 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">221 <rect x="3" y="6" width="16" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>222 <rect x="5" y="8" width="10" height="8" fill="#fff"></rect>223 <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>224 </svg>225 </div>226 </div>227 228 <!-- App bar -->229 <div class="app-bar">230 <div class="back-btn">231 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">232 <path d="M15.4 5.6L9 12l6.4 6.4-1.4 1.4L6.2 12l7.8-7.8 1.4 1.4z"></path>233 </svg>234 </div>235 <div class="app-title">Info & Settings</div>236 </div>237 238 <!-- Content -->239 <div class="content">240 <!-- Remove ads card -->241 <div class="card">242 <div class="ads-row">243 <svg width="54" height="54" viewBox="0 0 24 24">244 <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18.7 5.8 21l1.2-6.9-5-4.8 6.9-1L12 2z" fill="#FFC107"/>245 </svg>246 <div>Remove ads</div>247 </div>248 </div>249 250 <!-- Notifications card -->251 <div class="card">252 <div class="section-title">Notifications</div>253 254 <div class="row">255 <div class="row-label">Weather alerts</div>256 <div class="toggle on"><div class="knob"></div></div>257 </div>258 259 <div class="row">260 <div class="row-label">Active for</div>261 <div class="dropdown-value">262 <div>Ivrea</div>263 <svg width="36" height="36" viewBox="0 0 24 24" fill="#64707a">264 <path d="M7 10l5 5 5-5H7z"></path>265 </svg>266 </div>267 </div>268 269 <div class="divider"></div>270 271 <div class="row">272 <div class="row-label">Weather updates</div>273 <div class="toggle on"><div class="knob"></div></div>274 </div>275 276 <div class="divider"></div>277 278 <div class="row">279 <div class="row-label">Weather notifications</div>280 <div class="toggle"><div class="knob"></div></div>281 </div>282 <div class="secondary">283 Permanent notification featuring current weather and temperature in your status bar284 </div>285 </div>286 287 <!-- Weather card -->288 <div class="card">289 <div class="section-title">Weather</div>290 291 <div class="row" style="padding-top: 10px; padding-bottom: 24px;">292 <div class="row-label" style="font-size:42px;">Units</div>293 </div>294 295 <div class="segmented">296 <div class="segment">Metric</div>297 <div class="segment">Imperial</div>298 <div class="segment active">Advanced</div>299 </div>300 <div class="secondary" style="padding-top: 16px;">°C, m, kph</div>301 302 <div class="divider" style="margin-top: 30px;"></div>303 304 <div class="row" style="padding-top: 28px;">305 <div class="row-label">Temperature</div>306 </div>307 <div class="segmented" style="width: 540px;">308 <div class="segment active">°C</div>309 <div class="segment">°F</div>310 </div>311 312 <div class="row" style="padding-top: 38px;">313 <div class="row-label">Height and length</div>314 </div>315 <div class="segmented" style="width: 540px;">316 <div class="segment active">m</div>317 <div class="segment">ft</div>318 </div>319 320 <div class="divider" style="margin-top: 36px;"></div>321 <div class="row" style="padding-top: 24px;">322 <div class="row-label">Wind speed</div>323 </div>324 </div>325 </div>326 327 <!-- Bottom gesture pill -->328 <div class="gesture-pill"></div>329</div>330</body>331</html>