GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Fitbit Height Picker Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f0f2f2;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 display: flex;23 align-items: center;24 padding: 0 36px;25 color: #0a1f19;26 }27 .status-time {28 font-weight: 600;29 font-size: 46px;30 letter-spacing: 0.5px;31 }32 .status-icons {33 margin-left: auto;34 display: flex;35 gap: 24px;36 align-items: center;37 }38 .icon-wrap svg { display: block; }39 40 /* Page content behind dialog */41 .page-content {42 position: absolute;43 top: 180px;44 left: 60px;45 right: 60px;46 color: #19332c;47 }48 .avatar {49 width: 110px;50 height: 110px;51 border-radius: 55px;52 border: 3px solid #2b5a50;53 display: inline-flex;54 align-items: center;55 justify-content: center;56 color: #2b5a50;57 margin-bottom: 40px;58 }59 .title {60 font-size: 72px;61 font-weight: 700;62 margin: 20px 0 20px 0;63 }64 .subtitle {65 font-size: 36px;66 color: #4f6a63;67 max-width: 880px;68 line-height: 1.35;69 }70 71 /* Bottom actions on page */72 .bottom-actions {73 position: absolute;74 bottom: 140px;75 left: 60px;76 right: 60px;77 display: flex;78 align-items: center;79 justify-content: space-between;80 }81 .exit {82 font-size: 42px;83 color: #0c3a30;84 }85 .primary-btn {86 background: #0f3d35;87 color: #ffffff;88 padding: 34px 56px;89 font-size: 42px;90 border-radius: 60px;91 box-shadow: 0 6px 18px rgba(15,61,53,0.35);92 }93 94 /* Scrim over page */95 .scrim {96 position: absolute;97 inset: 0;98 background: rgba(0, 0, 0, 0.35);99 z-index: 2;100 }101 102 /* Modal dialog */103 .modal {104 position: absolute;105 left: 90px;106 top: 360px;107 width: 900px;108 background: #ffffff;109 border-radius: 80px;110 box-shadow: 0 40px 80px rgba(0,0,0,0.45);111 padding: 72px 72px 60px 72px;112 z-index: 3;113 }114 .modal h2 {115 margin: 0;116 font-size: 70px;117 color: #122c25;118 letter-spacing: 0.3px;119 }120 .modal .helper {121 margin-top: 24px;122 font-size: 36px;123 color: #5e6f6a;124 line-height: 1.4;125 }126 127 .toggle {128 margin-top: 36px;129 width: 520px;130 display: flex;131 border-radius: 60px;132 overflow: hidden;133 border: 1px solid #d1d9d5;134 background: #e8eeea;135 }136 .toggle .opt {137 flex: 1;138 text-align: center;139 padding: 26px 20px;140 font-size: 40px;141 color: #38594f;142 }143 .toggle .active {144 background: #cfe0d8;145 color: #163e33;146 position: relative;147 font-weight: 600;148 }149 .opt .check {150 position: absolute;151 left: 28px;152 top: 50%;153 transform: translateY(-50%);154 }155 156 /* Picker section */157 .picker {158 margin-top: 60px;159 text-align: center;160 padding: 40px 0 10px;161 }162 .picker .dim {163 font-size: 44px;164 color: #9aa8a3;165 margin: 26px 0;166 }167 .picker .current {168 font-size: 56px;169 color: #203a33;170 font-weight: 600;171 margin: 16px 0;172 }173 .line {174 width: 260px;175 height: 6px;176 background: #727d78;177 margin: 18px auto;178 border-radius: 3px;179 }180 181 .divider {182 margin-top: 68px;183 height: 3px;184 background: #e6eaea;185 width: 100%;186 }187 188 .modal-actions {189 margin-top: 24px;190 display: flex;191 justify-content: flex-end;192 gap: 60px;193 }194 .modal-actions .text-btn {195 font-size: 44px;196 color: #1b4c40;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status bar -->204 <div class="status-bar">205 <div class="status-time">10:04</div>206 <div class="status-icons">207 <div class="icon-wrap">208 <!-- simple activity icon -->209 <svg width="40" height="40" viewBox="0 0 24 24">210 <path d="M3 12h4l3-8 4 16 3-8h4" fill="none" stroke="#0f3d35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 </div>213 <div class="icon-wrap">214 <!-- keyhole icon -->215 <svg width="32" height="40" viewBox="0 0 24 24">216 <path d="M12 4a6 6 0 0 0-6 6c0 2.2 1.2 4.1 3 5.1V20l3-2 3 2v-4.9c1.8-1 3-2.9 3-5.1a6 6 0 0 0-6-6z" fill="#0f3d35"/>217 </svg>218 </div>219 <div class="icon-wrap">220 <!-- dot icon -->221 <svg width="20" height="20" viewBox="0 0 24 24">222 <circle cx="12" cy="12" r="4" fill="#0f3d35"/>223 </svg>224 </div>225 <div class="icon-wrap">226 <!-- wifi -->227 <svg width="40" height="40" viewBox="0 0 24 24">228 <path d="M2 9c5-5 15-5 20 0M5 12c3.5-3.5 10.5-3.5 14 0M8 15c2-2 6-2 8 0" fill="none" stroke="#0f3d35" stroke-width="2" stroke-linecap="round"/>229 <circle cx="12" cy="18" r="1.7" fill="#0f3d35"/>230 </svg>231 </div>232 <div class="icon-wrap">233 <!-- battery -->234 <svg width="48" height="40" viewBox="0 0 28 16">235 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#0f3d35" stroke-width="2"/>236 <rect x="3" y="4" width="16" height="8" fill="#0f3d35"/>237 <rect x="23" y="6" width="4" height="4" fill="#0f3d35"/>238 </svg>239 </div>240 </div>241 </div>242 243 <!-- Page content (blurred behind modal) -->244 <div class="page-content">245 <div class="avatar">👤</div>246 <div class="title">Add Fitbit profile info</div>247 <div class="subtitle">248 Your profile info helps personalize some metrics. Choose your height and settings below.249 </div>250 </div>251 252 <div class="bottom-actions">253 <div class="exit">Exit</div>254 <div class="primary-btn">Save & continue</div>255 </div>256 257 <!-- Scrim overlay -->258 <div class="scrim"></div>259 260 <!-- Modal dialog -->261 <div class="modal">262 <h2>Height</h2>263 <div class="helper">Fitbit uses height to estimate calories and stride length</div>264 265 <div class="toggle">266 <div class="opt active">267 <svg class="check" width="28" height="28" viewBox="0 0 24 24">268 <path d="M4 12l5 5 11-11" fill="none" stroke="#0f3d35" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>269 </svg>270 CM271 </div>272 <div class="opt">FEET</div>273 </div>274 275 <div class="picker">276 <div class="dim">164 cm</div>277 <div class="line"></div>278 <div class="current">165 cm</div>279 <div class="line"></div>280 <div class="dim">166 cm</div>281 </div>282 283 <div class="divider"></div>284 285 <div class="modal-actions">286 <div class="text-btn">Cancel</div>287 <div class="text-btn">OK</div>288 </div>289 </div>290 291</div>292</body>293</html>