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>Settings Screen Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #24323A;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #FFFFFF;21 }22 23 /* Status bar */24 .status-bar {25 height: 96px;26 padding: 0 28px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #263238;31 font-size: 34px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 26px;37 }38 /* Simple tiny icons */39 .dot {40 width: 10px;41 height: 10px;42 background: #263238;43 border-radius: 50%;44 display: inline-block;45 }46 47 /* App bar */48 .app-bar {49 height: 120px;50 display: flex;51 align-items: center;52 gap: 28px;53 padding: 0 28px;54 }55 .title {56 font-size: 58px;57 font-weight: 700;58 color: #1E2A32;59 }60 61 /* List and rows */62 .content {63 padding-top: 8px;64 }65 .row {66 display: flex;67 align-items: center;68 padding: 28px 32px;69 gap: 28px;70 }71 .row.large {72 padding-top: 34px;73 padding-bottom: 34px;74 }75 .divider {76 height: 1px;77 background: #E6E7E8;78 margin-left: 32px;79 margin-right: 32px;80 }81 .img-av {82 width: 108px;83 height: 108px;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 border-radius: 50%;87 color: #757575;88 display: flex;89 align-items: center;90 justify-content: center;91 font-size: 24px;92 }93 .img-square {94 width: 108px;95 height: 108px;96 background: #E0E0E0;97 border: 1px solid #BDBDBD;98 border-radius: 16px;99 color: #757575;100 display: flex;101 align-items: center;102 justify-content: center;103 text-align: center;104 font-size: 22px;105 line-height: 1.1;106 }107 .text-col {108 display: flex;109 flex-direction: column;110 justify-content: center;111 }112 .title-md {113 font-size: 44px;114 font-weight: 700;115 color: #22323A;116 }117 .subtitle {118 font-size: 32px;119 color: #7A8A93;120 margin-top: 8px;121 }122 123 .right-actions {124 margin-left: auto;125 display: flex;126 align-items: center;127 gap: 16px;128 }129 130 .link-row {131 color: #2A8D8A;132 font-size: 44px;133 font-weight: 600;134 }135 .center-shop {136 display: flex;137 align-items: center;138 justify-content: center;139 gap: 18px;140 padding: 36px 0;141 color: #2A8D8A;142 font-size: 44px;143 font-weight: 600;144 }145 146 .section-h {147 padding: 26px 32px 10px 32px;148 color: #6A757B;149 font-weight: 800;150 font-size: 30px;151 letter-spacing: 2px;152 }153 .simple-item {154 padding: 34px 32px;155 font-size: 42px;156 color: #0D1B22;157 }158 159 /* Bottom home indicator */160 .home-indicator {161 position: absolute;162 bottom: 24px;163 left: 50%;164 transform: translateX(-50%);165 width: 420px;166 height: 12px;167 background: #9EA4A9;168 border-radius: 12px;169 opacity: 0.85;170 }171 172 /* SVG icon sizing */173 .icon {174 width: 48px;175 height: 48px;176 color: #2A8D8A;177 }178 .icon-dark {179 width: 54px;180 height: 54px;181 color: #263238;182 }183 .more-vert {184 width: 36px;185 height: 36px;186 color: #4F5B62;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- STATUS BAR -->194 <div class="status-bar">195 <div>12:26</div>196 <div class="status-icons">197 <!-- a couple of tiny glyphs to hint at status icons -->198 <svg class="icon-dark" viewBox="0 0 24 24">199 <path fill="#263238" d="M4 11h6l-3 3 1 1 5-5-5-5-1 1 3 3H4z"/>200 </svg>201 <span class="dot"></span>202 <span class="dot"></span>203 <svg class="icon-dark" viewBox="0 0 24 24" aria-hidden="true">204 <path fill="#263238" d="M12 2C7 2 2.73 4.11 0 7.5L12 22l12-14.5C21.27 4.11 17 2 12 2zM3.5 7.5C6.09 5.01 8.94 3.75 12 3.75s5.91 1.26 8.5 3.75L12 19.25 3.5 7.5z"/>205 </svg>206 <svg class="icon-dark" viewBox="0 0 24 24">207 <path fill="#263238" d="M4 7h16v10H4V7zm2 2v6h12V9H6zm14 8h-2v2H6v-2H4v2c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-2z"/>208 </svg>209 </div>210 </div>211 212 <!-- APP BAR -->213 <div class="app-bar">214 <svg class="icon-dark" viewBox="0 0 24 24" aria-hidden="true">215 <path fill="#263238" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>216 </svg>217 <div class="title">Settings</div>218 </div>219 220 <!-- CONTENT -->221 <div class="content">222 <!-- User -->223 <div class="row large">224 <div class="img-av">[IMG]</div>225 <div class="text-col">226 <div class="title-md">Cerebra R.</div>227 <div class="subtitle">Joined July 26, 2023</div>228 </div>229 </div>230 <div class="divider"></div>231 232 <!-- Premium -->233 <div class="row large">234 <div class="img-square">[IMG: Premium Badge]</div>235 <div class="text-col">236 <div class="title-md">Try Fitbit Premium</div>237 <div class="subtitle">Personalized Guidance and Insights</div>238 </div>239 </div>240 <div class="divider"></div>241 242 <!-- Family account -->243 <div class="row large">244 <div class="img-square">[IMG: Family]</div>245 <div class="text-col">246 <div class="title-md">Create Family Account</div>247 <div class="subtitle">Set up Ace for Kids</div>248 </div>249 </div>250 <div class="divider"></div>251 252 <!-- MobileTrack -->253 <div class="row large">254 <div class="img-square">[IMG: Phone]</div>255 <div class="text-col">256 <div class="title-md">MobileTrack</div>257 </div>258 <div class="right-actions">259 <svg class="more-vert" viewBox="0 0 24 24" aria-hidden="true">260 <path fill="#4F5B62" d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/>261 </svg>262 </div>263 </div>264 <div class="divider"></div>265 266 <!-- Set up device -->267 <div class="row large">268 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">269 <path fill="#2A8D8A" d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/>270 </svg>271 <div class="link-row">Set up a Device</div>272 </div>273 <div class="divider"></div>274 275 <!-- Shop Fitbit center -->276 <div class="center-shop">277 <span>Shop Fitbit</span>278 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">279 <path fill="#2A8D8A" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2zM7.16 6l.84 2h11l-2 7H8.31l-1.2-3H4V10h2l2.6 6H16l1.6-5H8.02l-1-3H2V6h5.16z"/>280 </svg>281 </div>282 283 <!-- Settings header -->284 <div class="section-h">SETTINGS</div>285 286 <!-- Setting items -->287 <div class="simple-item">Activity & Wellness</div>288 <div class="divider"></div>289 290 <div class="simple-item">Account Settings</div>291 <div class="divider"></div>292 293 <div class="simple-item">App Settings</div>294 <div class="divider"></div>295 296 <div class="simple-item">Help & Support</div>297 <div class="divider"></div>298 299 <div class="simple-item">Legal</div>300 <div class="divider"></div>301 </div>302 303 <!-- Home indicator -->304 <div class="home-indicator"></div>305</div>306</body>307</html>