GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Info & Settings UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #eef2f4;14 font-family: "Segoe UI", Arial, sans-serif;15 color: #222;16 }17 18 /* Status bar */19 .statusbar {20 height: 110px;21 background: #0d4e5c;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 36px;26 box-sizing: border-box;27 font-size: 38px;28 }29 .status-left {30 display: flex;31 align-items: center;32 gap: 22px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 14px;38 }39 .ghost-dot {40 width: 18px; height: 18px; background: #fff; border-radius: 50%;41 opacity: 0.9;42 }43 .status-right {44 margin-left: auto;45 display: flex; align-items: center; gap: 24px;46 }47 .wifi-icon, .battery-icon {48 width: 36px; height: 24px;49 }50 51 /* App bar */52 .appbar {53 height: 180px;54 background: #156f86;55 border-bottom: 6px solid #d8e4ea;56 color: #fff;57 display: flex;58 align-items: center;59 box-sizing: border-box;60 padding: 0 24px;61 position: relative;62 }63 .back-btn {64 width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;65 }66 .app-title {67 position: absolute;68 left: 0; right: 0;69 text-align: center;70 font-size: 64px;71 font-weight: 600;72 letter-spacing: 0.5px;73 }74 75 /* Content */76 .content {77 padding: 24px 24px 0 24px;78 box-sizing: border-box;79 }80 .card {81 background: #fff;82 border: 1px solid #dcdcdc;83 border-radius: 14px;84 box-shadow: 0 2px 0 rgba(0,0,0,0.05);85 margin: 18px 0;86 padding: 30px;87 }88 .card-title {89 color: #156f86;90 font-size: 48px;91 font-weight: 700;92 margin-bottom: 24px;93 }94 95 /* Remove ads row */96 .row {97 display: flex;98 align-items: center;99 justify-content: space-between;100 gap: 24px;101 padding: 22px 0;102 font-size: 42px;103 }104 .row-left {105 display: flex; align-items: center; gap: 26px;106 }107 .star-icon {108 width: 54px; height: 54px;109 }110 111 .divider {112 height: 1px;113 background: #e5e5e5;114 margin: 14px 0;115 }116 117 /* Toggles */118 .toggle {119 width: 150px; height: 78px;120 border-radius: 39px;121 position: relative;122 background: #dcdcdc;123 }124 .toggle.on { background: #ffc107; }125 .knob {126 position: absolute; top: 6px; left: 6px;127 width: 66px; height: 66px; border-radius: 50%;128 background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,0.2);129 transition: left 0.2s;130 }131 .toggle.on .knob { left: 78px; }132 .toggle.off { background: #e0e0e0; }133 .knob.off { background: #cfcfcf; }134 135 .subtext {136 color: #8e8e8e;137 font-size: 34px;138 line-height: 1.35;139 padding-top: 8px;140 }141 142 /* Dropdown */143 .dropdown {144 display: flex; align-items: center; gap: 18px;145 font-size: 42px;146 color: #333;147 }148 .dropdown-value {149 font-weight: 600;150 }151 .chev-down {152 width: 28px; height: 28px;153 }154 155 /* Segmented controls */156 .segment {157 display: flex;158 border: 2px solid #ffc107;159 border-radius: 12px;160 overflow: hidden;161 width: 930px;162 height: 110px;163 }164 .seg {165 flex: 1;166 display: flex; align-items: center; justify-content: center;167 font-size: 42px;168 color: #f0b200;169 background: #fff;170 border-right: 1px solid #ffd55a;171 }172 .seg:last-child { border-right: none; }173 .seg.active {174 background: #ffc107;175 color: #fff;176 font-weight: 700;177 }178 .hint {179 color: #9d9d9d;180 font-size: 36px;181 padding-top: 16px;182 }183 184 .label {185 font-size: 42px;186 color: #333;187 padding: 18px 0 12px;188 }189 190 /* Bottom gesture bar */191 .gesture {192 position: absolute;193 bottom: 32px; left: 50%;194 transform: translateX(-50%);195 width: 360px; height: 16px; background: #000; border-radius: 10px; opacity: 0.8;196 }197</style>198</head>199<body>200<div id="render-target">201 202 <!-- Status bar -->203 <div class="statusbar">204 <div class="status-left">205 <div>6:07</div>206 <div class="status-icons">207 <div class="ghost-dot"></div>208 <div class="ghost-dot"></div>209 <div class="ghost-dot"></div>210 <div class="ghost-dot"></div>211 <div class="ghost-dot"></div>212 <div class="ghost-dot" style="opacity:0.6;"></div>213 </div>214 </div>215 <div class="status-right">216 <!-- simple wifi icon -->217 <svg class="wifi-icon" viewBox="0 0 24 24" fill="none">218 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>219 <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>220 <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>221 <circle cx="12" cy="18" r="2" fill="#fff"/>222 </svg>223 <!-- simple battery icon -->224 <svg class="battery-icon" viewBox="0 0 36 24" fill="none">225 <rect x="1" y="4" width="28" height="16" rx="3" stroke="#fff" stroke-width="2"/>226 <rect x="30" y="8" width="4" height="8" rx="1" fill="#fff"/>227 <rect x="3" y="6" width="22" height="12" rx="2" fill="#fff"/>228 </svg>229 </div>230 </div>231 232 <!-- App bar -->233 <div class="appbar">234 <div class="back-btn">235 <svg viewBox="0 0 24 24" width="56" height="56">236 <path d="M15 6l-6 6 6 6" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>237 </svg>238 </div>239 <div class="app-title">Info & Settings</div>240 </div>241 242 <!-- Content -->243 <div class="content">244 245 <!-- Remove ads card -->246 <div class="card">247 <div class="row">248 <div class="row-left">249 <svg class="star-icon" viewBox="0 0 24 24">250 <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" fill="#FFC107"/>251 </svg>252 <div style="color:#156f86; font-weight:700;">Remove ads</div>253 </div>254 </div>255 </div>256 257 <!-- Notifications card -->258 <div class="card">259 <div class="card-title">Notifications</div>260 261 <div class="row">262 <div>Weather alerts</div>263 <div class="toggle on">264 <div class="knob"></div>265 </div>266 </div>267 268 <div class="row">269 <div class="dropdown">270 <span>Active for</span>271 <span class="dropdown-value">Ivrea</span>272 </div>273 <svg class="chev-down" viewBox="0 0 24 24">274 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>275 </svg>276 </div>277 278 <div class="divider"></div>279 280 <div class="row">281 <div>Weather updates</div>282 <div class="toggle on">283 <div class="knob"></div>284 </div>285 </div>286 287 <div class="divider"></div>288 289 <div class="row">290 <div>Weather notifications</div>291 <div class="toggle off">292 <div class="knob off"></div>293 </div>294 </div>295 296 <div class="subtext">Permanent notification featuring current weather and temperature in your status bar</div>297 </div>298 299 <!-- Weather card -->300 <div class="card">301 <div class="card-title">Weather</div>302 303 <div class="label">Units</div>304 <div class="segment">305 <div class="seg">Metric</div>306 <div class="seg">Imperial</div>307 <div class="seg active">Advanced</div>308 </div>309 <div class="hint">°C, m, kph</div>310 311 <div class="divider" style="margin-top:22px;"></div>312 313 <div class="label">Temperature</div>314 <div class="segment" style="width: 640px;">315 <div class="seg active">°C</div>316 <div class="seg">°F</div>317 </div>318 319 <div class="label">Height and length</div>320 <div class="segment" style="width: 640px;">321 <div class="seg active">m</div>322 <div class="seg">ft</div>323 </div>324 325 <div class="label">Wind speed</div>326 <div class="segment" style="width: 640px;">327 <div class="seg active">kph</div>328 <div class="seg">mph</div>329 </div>330 </div>331 </div>332 333 <!-- Bottom gesture bar -->334 <div class="gesture"></div>335</div>336</body>337</html>