GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Info & Settings - Mock</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: #F3F6F8;14 }15 16 /* Top system status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 background: #0B3E55;24 color: #fff;25 font-size: 38px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 34px;30 box-sizing: border-box;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .dot, .wifi, .ring, .battery {38 width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.9);39 }40 .battery {41 width: 38px; height: 56px; border-radius: 6px;42 }43 44 /* App bar */45 .app-bar {46 position: absolute;47 top: 100px;48 left: 0;49 width: 1080px;50 height: 150px;51 background: #197A91;52 color: #fff;53 display: flex;54 align-items: center;55 padding: 0 28px;56 box-sizing: border-box;57 box-shadow: 0 2px 0 rgba(0,0,0,0.1);58 }59 .back-btn {60 width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;61 }62 .title {63 flex: 1;64 text-align: center;65 margin-right: 80px; /* balance the back button space */66 font-size: 58px;67 font-weight: 700;68 letter-spacing: 0.5px;69 }70 .back-btn svg { fill: #E6F4F7; }71 72 /* Content area */73 .content {74 position: absolute;75 top: 250px; /* 100 + 150 */76 left: 0;77 right: 0;78 bottom: 0;79 overflow: hidden; /* static mock */80 padding: 26px;81 box-sizing: border-box;82 }83 84 .card {85 background: #fff;86 border-radius: 18px;87 box-shadow: 0 1px 0 rgba(0,0,0,0.06);88 margin-bottom: 28px;89 padding: 28px;90 }91 92 .row {93 display: flex;94 align-items: center;95 justify-content: space-between;96 padding: 32px 16px;97 border-top: 1px solid #EAEFF2;98 }99 .row:first-child { border-top: none; }100 .label {101 font-size: 42px;102 color: #1F2A33;103 }104 .subtext {105 margin-top: 16px;106 font-size: 34px;107 line-height: 1.35;108 color: #7A8A95;109 max-width: 860px;110 }111 112 .section-title {113 color: #0D6A88;114 font-size: 44px;115 font-weight: 800;116 margin: 6px 0 10px 4px;117 }118 119 /* Star row for Remove ads */120 .star {121 width: 60px; height: 60px; margin-right: 22px; position: relative;122 }123 .star:before {124 content: "★";125 position: absolute; inset: 0;126 color: #FFC107; font-size: 60px; line-height: 60px; text-align: center;127 }128 .inline {129 display: flex; align-items: center;130 }131 .big-link {132 font-size: 50px; color: #1F2A33; font-weight: 700;133 }134 135 /* Toggle switch */136 .switch {137 position: relative;138 width: 120px;139 height: 64px;140 }141 .switch input { display: none; }142 .slider {143 position: absolute;144 cursor: pointer;145 inset: 0;146 background: #D3D6DA;147 border-radius: 40px;148 transition: background 0.2s;149 }150 .slider:before {151 content: "";152 position: absolute;153 height: 56px; width: 56px;154 left: 4px; top: 4px;155 background: #fff;156 border-radius: 50%;157 box-shadow: 0 1px 2px rgba(0,0,0,0.25);158 transition: transform 0.2s;159 }160 .switch input:checked + .slider {161 background: #FFC107;162 }163 .switch input:checked + .slider:before {164 transform: translateX(56px);165 }166 167 /* Units selector */168 .segmented {169 display: flex;170 border: 2px solid #F1C84E;171 border-radius: 16px;172 overflow: hidden;173 margin-top: 18px;174 }175 .segmented .seg {176 flex: 1;177 text-align: center;178 padding: 28px 0;179 font-size: 42px;180 color: #0D6A88;181 background: #fff;182 }183 .segmented .seg.active {184 background: #FFC107;185 color: #1F2A33;186 font-weight: 700;187 }188 .unit-note {189 color: #7A8A95;190 font-size: 36px;191 margin-top: 18px;192 }193 194 /* Wind arrows list */195 .wind-item {196 display: flex;197 align-items: center;198 gap: 28px;199 color: #7F8B93;200 font-size: 38px;201 margin: 12px 0 0 24px;202 }203 .arrow {204 width: 32px; height: 32px; border-left: 10px solid #8BA0AA; border-bottom: 10px solid #8BA0AA; transform: rotate(-45deg);205 }206 .arrow.medium { transform: rotate(-45deg) scale(1.2); }207 .arrow.large { transform: rotate(-45deg) scale(1.45); }208 209 .footer-space { height: 100px; }210 211</style>212</head>213<body>214<div id="render-target">215 216 <!-- Status bar -->217 <div class="status-bar">218 <div>8:43</div>219 <div class="status-right">220 <div class="dot"></div>221 <div class="wifi"></div>222 <div class="ring"></div>223 <div class="battery"></div>224 </div>225 </div>226 227 <!-- App bar -->228 <div class="app-bar">229 <div class="back-btn">230 <svg width="56" height="56" viewBox="0 0 24 24">231 <path d="M15.5 3.9 7.4 12l8.1 8.1-2.1 2.1L3.2 12 13.4 1.8l2.1 2.1z"/>232 </svg>233 </div>234 <div class="title">Info & Settings</div>235 </div>236 237 <!-- Content -->238 <div class="content">239 240 <!-- Remove ads card -->241 <div class="card">242 <div class="inline">243 <div class="star"></div>244 <div class="big-link">Remove ads</div>245 </div>246 </div>247 248 <!-- Notifications card -->249 <div class="card">250 <div class="section-title">Notifications</div>251 252 <div class="row">253 <div class="label">Weather alerts</div>254 <label class="switch">255 <input type="checkbox">256 <span class="slider"></span>257 </label>258 </div>259 260 <div class="row">261 <div class="label">Weather updates</div>262 <label class="switch">263 <input type="checkbox" checked>264 <span class="slider"></span>265 </label>266 </div>267 268 <div class="row" style="align-items:flex-start;">269 <div>270 <div class="label">Weather notifications</div>271 <div class="subtext">Permanent notification featuring current weather and temperature in your status bar</div>272 </div>273 <label class="switch" style="margin-top: 6px;">274 <input type="checkbox">275 <span class="slider"></span>276 </label>277 </div>278 </div>279 280 <!-- Weather card -->281 <div class="card">282 <div class="section-title">Weather</div>283 284 <div class="row" style="flex-direction:column; align-items:flex-start;">285 <div class="label" style="margin-bottom: 16px;">Units</div>286 <div class="segmented" style="width: 100%;">287 <div class="seg">Metric</div>288 <div class="seg active">Imperial</div>289 <div class="seg">Advanced</div>290 </div>291 <div class="unit-note">°F, ft, mph</div>292 </div>293 294 <div class="row">295 <div class="label">'Feels like' temperature</div>296 <label class="switch">297 <input type="checkbox" checked>298 <span class="slider"></span>299 </label>300 </div>301 302 <div class="row" style="flex-direction:column; align-items:flex-start;">303 <div style="width:100%; display:flex; align-items:center; justify-content:space-between;">304 <div class="label">Show wind arrows</div>305 <label class="switch">306 <input type="checkbox" checked>307 <span class="slider"></span>308 </label>309 </div>310 311 <div class="wind-item">312 <div class="arrow"></div>313 <div>up to 4 mph</div>314 </div>315 <div class="wind-item">316 <div class="arrow medium"></div>317 <div>up to 8 mph</div>318 </div>319 <div class="wind-item">320 <div class="arrow large"></div>321 <div>over 8 mph</div>322 </div>323 </div>324 </div>325 326 <!-- Footer section title -->327 <div class="card" style="padding: 24px;">328 <div class="section-title" style="margin: 10px 0 4px 4px;">More</div>329 </div>330 331 <div class="footer-space"></div>332 </div>333</div>334</body>335</html>