GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Info & Settings Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #f2f6f8;13 border-radius: 0;14 }15 16 /* Top app bar */17 .appbar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 200px;23 background: #0b5d74;24 color: #fff;25 }26 .status-bar {27 height: 90px;28 padding: 0 32px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 38px;34 opacity: 0.95;35 }36 .status-left span { margin-right: 22px; }37 .status-right { display: flex; gap: 26px; align-items: center; }38 .dot { width: 12px; height: 12px; background: #cfe6ea; border-radius: 50%; display: inline-block; }39 .appbar-title {40 height: 110px;41 display: flex;42 align-items: center;43 padding: 0 32px;44 position: relative;45 }46 .back-btn {47 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;48 margin-right: 18px;49 }50 .title-text {51 font-size: 64px; font-weight: 600; letter-spacing: 0.5px;52 }53 .appbar svg { fill: #ffffff; }54 55 /* Content area */56 .content {57 position: absolute;58 top: 200px;59 left: 0;60 right: 0;61 bottom: 0;62 padding: 24px;63 overflow: hidden;64 }65 .card {66 background: #ffffff;67 border-radius: 18px;68 box-shadow: 0 2px 0 rgba(0,0,0,0.06);69 width: 1032px;70 margin: 0 auto 24px auto;71 padding: 28px 32px;72 }73 .section-title {74 font-size: 48px;75 color: #0b5d74;76 font-weight: 700;77 margin-bottom: 28px;78 }79 .row {80 display: flex;81 align-items: center;82 justify-content: space-between;83 padding: 26px 0;84 border-top: 1px solid #e7edf0;85 }86 .row:first-of-type { border-top: none; }87 .label {88 font-size: 44px;89 color: #222;90 }91 .sub {92 font-size: 36px;93 color: #7a7a7a;94 line-height: 1.3;95 margin-top: 8px;96 }97 .right-inline {98 display: flex;99 align-items: center;100 gap: 18px;101 }102 103 /* Switch */104 .switch {105 position: relative;106 width: 116px;107 height: 48px;108 }109 .switch .track {110 position: absolute; inset: 0;111 border-radius: 24px;112 background: #d5d5d5;113 }114 .switch .knob {115 position: absolute; top: 4px; left: 6px;116 width: 40px; height: 40px; border-radius: 20px;117 background: #bdbdbd;118 }119 .switch.on .track { background: #ffd34d; }120 .switch.on .knob { left: 70px; background: #f5a623; }121 122 /* Dropdown arrow */123 .chev {124 width: 36px; height: 36px;125 }126 .chev path { fill: #7c8b92; }127 128 /* Segmented control */129 .segmented {130 display: flex;131 border: 2px solid #e6e6e6;132 border-radius: 16px;133 overflow: hidden;134 width: 988px;135 }136 .segbtn {137 flex: 1;138 text-align: center;139 padding: 24px 0;140 font-size: 42px;141 color: #333;142 background: #ffffff;143 }144 .segbtn.active {145 background: #ffd34d;146 font-weight: 700;147 }148 .units-line {149 font-size: 38px;150 color: #777;151 margin-top: 18px;152 }153 154 /* Small icon star */155 .star {156 width: 64px; height: 64px; margin-right: 24px;157 }158 .remove-ads {159 display: flex; align-items: center; font-size: 52px; color: #0b5d74; font-weight: 700;160 }161 162 /* Bullet arrows list */163 .bullet {164 display: flex; align-items: center; gap: 22px; font-size: 38px; color: #7c7c7c; padding: 16px 0;165 }166 .v-arrow {167 width: 24px; height: 24px; border-left: 10px solid transparent; border-right: 10px solid transparent;168 border-top: 16px solid #a3a3a3;169 }170 171 /* Bottom gesture bar */172 .gesture-bar {173 position: absolute;174 bottom: 32px; left: 50%;175 transform: translateX(-50%);176 width: 360px; height: 16px; background: #1c1c1c; border-radius: 8px;177 opacity: 0.9;178 }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Top bar -->185 <div class="appbar">186 <div class="status-bar">187 <div class="status-left">188 <span>8:45</span>189 <span class="dot"></span>190 <span class="dot"></span>191 <span class="dot"></span>192 </div>193 <div class="status-right">194 <!-- simple placeholder shapes for wifi/signal/battery -->195 <svg width="38" height="38"><circle cx="19" cy="19" r="16" fill="#cfe6ea"/></svg>196 <svg width="38" height="38"><rect x="4" y="8" width="30" height="22" rx="6" fill="#cfe6ea"/></svg>197 <svg width="38" height="38"><rect x="8" y="6" width="22" height="26" rx="4" fill="#cfe6ea"/></svg>198 </div>199 </div>200 <div class="appbar-title">201 <div class="back-btn">202 <svg width="56" height="56" viewBox="0 0 24 24">203 <path d="M15 19L8 12l7-7" />204 </svg>205 </div>206 <div class="title-text">Info & Settings</div>207 </div>208 </div>209 210 <!-- Content -->211 <div class="content">212 213 <!-- Remove ads card -->214 <div class="card">215 <div class="remove-ads">216 <svg class="star" viewBox="0 0 24 24">217 <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-1z" fill="#ffd34d"/>218 </svg>219 <div>Remove ads</div>220 </div>221 </div>222 223 <!-- Notifications card -->224 <div class="card">225 <div class="section-title">Notifications</div>226 227 <div class="row">228 <div class="label">Weather alerts</div>229 <div class="switch on">230 <div class="track"></div>231 <div class="knob"></div>232 </div>233 </div>234 235 <div class="row">236 <div class="label">Active for</div>237 <div class="right-inline">238 <div class="label" style="font-size:44px; color:#333; font-weight:600;">Ystradgynlais</div>239 <svg class="chev" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></svg>240 </div>241 </div>242 243 <div class="row">244 <div class="label">Weather updates</div>245 <div class="switch on">246 <div class="track"></div>247 <div class="knob"></div>248 </div>249 </div>250 251 <div class="row" style="flex-direction: column; align-items: flex-start;">252 <div style="width:100%; display:flex; align-items:center; justify-content:space-between;">253 <div class="label">Weather notifications</div>254 <div class="switch">255 <div class="track"></div>256 <div class="knob"></div>257 </div>258 </div>259 <div class="sub">Permanent notification featuring current weather and temperature in your status bar</div>260 </div>261 </div>262 263 <!-- Weather card -->264 <div class="card">265 <div class="section-title">Weather</div>266 267 <div class="row" style="flex-direction: column; align-items: flex-start;">268 <div class="label" style="margin-bottom:22px;">Units</div>269 <div class="segmented">270 <div class="segbtn">Metric</div>271 <div class="segbtn active">Imperial</div>272 <div class="segbtn">Advanced</div>273 </div>274 <div class="units-line">°F, ft, mph</div>275 </div>276 277 <div class="row">278 <div class="label">'Feels like' temperature</div>279 <div class="switch on">280 <div class="track"></div>281 <div class="knob"></div>282 </div>283 </div>284 285 <div class="row" style="flex-direction: column; align-items: flex-start;">286 <div style="width:100%; display:flex; align-items:center; justify-content:space-between;">287 <div class="label">Show wind arrows</div>288 <div class="switch on">289 <div class="track"></div>290 <div class="knob"></div>291 </div>292 </div>293 <div class="bullet"><div class="v-arrow"></div> <div>up to 4 mph</div></div>294 <div class="bullet"><div class="v-arrow"></div> <div>up to 8 mph</div></div>295 <div class="bullet"><div class="v-arrow"></div> <div>over 8 mph</div></div>296 </div>297 </div>298 </div>299 300 <div class="gesture-bar"></div>301</div>302</body>303</html>