GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Height Modal Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f3f6f4;13 font-family: Arial, Helvetica, sans-serif;14 color: #143c35;15 }16 17 /* Status bar */18 .status {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 padding: 0 36px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #0e2f2a;30 font-weight: 600;31 }32 .status .icons {33 display: flex;34 gap: 18px;35 align-items: center;36 }37 .pill {38 width: 22px; height: 22px; border-radius: 50%;39 border: 2px solid #1c4b42;40 }41 .signal {42 width: 28px; height: 18px; border: 2px solid #1c4b42; border-top: none;43 position: relative;44 }45 .signal:before, .signal:after {46 content: "";47 position: absolute; bottom: 0; width: 4px; background:#1c4b42;48 }49 .signal:before { left: 6px; height: 8px; }50 .signal:after { left: 14px; height: 14px; }51 52 /* Underlying screen content */53 .content {54 position: absolute;55 top: 160px;56 left: 64px;57 right: 64px;58 color: #193f38;59 }60 .avatar {61 width: 120px; height: 120px; border-radius: 60px;62 border: 6px solid #0e4a40; background: transparent;63 display: flex; align-items: center; justify-content: center;64 color: #0e4a40; font-weight: bold; font-size: 42px;65 }66 .title {67 margin-top: 60px;68 font-size: 78px;69 font-weight: 700;70 letter-spacing: -1px;71 }72 .subtext {73 margin-top: 32px;74 font-size: 36px;75 line-height: 1.5;76 color: #47675f;77 width: 920px;78 }79 .field {80 margin-top: 40px;81 width: 460px;82 height: 120px;83 border: 2px solid #9fb5ad;84 border-radius: 18px;85 display: flex;86 align-items: center;87 padding: 0 28px;88 color: #173d36;89 background: #f7fbfa;90 font-size: 40px;91 }92 .footer {93 position: absolute;94 bottom: 120px;95 left: 64px;96 right: 64px;97 display: flex;98 align-items: center;99 justify-content: space-between;100 }101 .exit {102 font-size: 40px;103 color: #173d36;104 }105 .cta {106 background: #0f4f44;107 color: #e8f4ef;108 padding: 30px 46px;109 border-radius: 60px;110 font-size: 40px;111 font-weight: 600;112 }113 114 /* Scrim and dialog */115 .scrim {116 position: absolute;117 inset: 0;118 background: rgba(0,0,0,0.55);119 }120 .dialog {121 position: absolute;122 left: 90px;123 top: 420px;124 width: 900px;125 height: 1380px;126 background: #f7fbf8;127 border-radius: 70px;128 box-shadow: 0 20px 60px rgba(0,0,0,0.25);129 padding: 60px 70px;130 box-sizing: border-box;131 color: #163f37;132 }133 .dialog h1 {134 margin: 0 0 18px 0;135 font-size: 70px;136 font-weight: 700;137 }138 .dialog .help {139 font-size: 38px;140 line-height: 1.4;141 color: #5a756d;142 width: 820px;143 }144 145 /* Segmented control */146 .segment {147 margin-top: 46px;148 width: 660px;149 height: 130px;150 border-radius: 70px;151 background: #dfeae6;152 display: flex;153 overflow: hidden;154 border: 2px solid #c6d6d0;155 }156 .seg {157 flex: 1;158 display: flex; align-items: center; justify-content: center;159 font-size: 42px; font-weight: 600;160 color: #2f4f47;161 }162 .seg.selected {163 background: #cfe3d9;164 color: #1d3f37;165 }166 .seg .check {167 margin-right: 16px;168 width: 26px; height: 26px;169 border-radius: 50%;170 background: #2b5b50;171 color: #ffffff;172 display: inline-flex; align-items: center; justify-content: center;173 font-size: 18px;174 }175 176 /* Number picker simulation */177 .picker {178 position: relative;179 width: 100%;180 height: 600px;181 margin-top: 80px;182 display: flex;183 align-items: center;184 justify-content: center;185 color: #6b817a;186 }187 .picker .nums {188 text-align: center;189 line-height: 1.8;190 }191 .picker .nums .above,192 .picker .nums .below {193 font-size: 54px;194 color: #b1bfb9;195 }196 .picker .nums .current {197 font-size: 72px;198 font-weight: 700;199 color: #1a3f37;200 margin: 16px 0;201 }202 .picker .line {203 position: absolute;204 width: 520px; height: 4px; background: #6f8a82;205 left: 50%; transform: translateX(-50%);206 opacity: 0.6;207 }208 .picker .line.top { top: 230px; }209 .picker .line.bot { top: 370px; }210 211 .dialog .actions {212 position: absolute;213 bottom: 70px;214 left: 70px;215 right: 70px;216 display: flex;217 justify-content: space-between;218 font-size: 44px;219 font-weight: 600;220 color: #1d5a4f;221 }222 .actions .ok {223 color: #0a6f60;224 }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status">232 <div style="font-size:44px;">10:04</div>233 <div class="icons">234 <div class="signal"></div>235 <div class="pill"></div>236 <div class="pill" style="border-color:#1c4b42; width:22px;height:22px;"></div>237 </div>238 </div>239 240 <!-- Underlying screen -->241 <div class="content">242 <div class="avatar">👤</div>243 <div class="title">Add Fitbit profile info</div>244 <div class="subtext">245 Your profile info helps personalize some metrics. You can update these later in settings.246 </div>247 248 <div class="field">Height</div>249 <div class="field" style="width: 540px;">Sex</div>250 </div>251 252 <div class="footer">253 <div class="exit">Exit</div>254 <div class="cta">Save & continue</div>255 </div>256 257 <!-- Modal scrim -->258 <div class="scrim"></div>259 260 <!-- Center dialog -->261 <div class="dialog">262 <h1>Height</h1>263 <div class="help">Fitbit uses height to estimate calories and stride length</div>264 265 <div class="segment">266 <div class="seg selected"><span class="check">✓</span>CM</div>267 <div class="seg">FEET</div>268 </div>269 270 <div class="picker">271 <div class="line top"></div>272 <div class="line bot"></div>273 <div class="nums">274 <div class="above">167 cm</div>275 <div class="current">168 cm</div>276 <div class="below">169 cm</div>277 </div>278 </div>279 280 <div class="actions">281 <div>Cancel</div>282 <div class="ok">OK</div>283 </div>284 </div>285 286</div>287</body>288</html>