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>Fitbit Weight Picker</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f4f7f5;14 color: #10201b;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #0e1f1a;29 font-weight: 600;30 font-size: 44px;31 }32 .status-right {33 display: flex;34 gap: 26px;35 align-items: center;36 }37 .icon { width: 42px; height: 42px; }38 39 /* Underlying page */40 .page-content {41 position: absolute;42 top: 160px;43 left: 64px;44 right: 64px;45 }46 .avatar {47 width: 120px;48 height: 120px;49 border-radius: 100px;50 border: 8px solid #0e3c33;51 margin-bottom: 40px;52 }53 .page-title {54 font-size: 96px;55 font-weight: 700;56 letter-spacing: -1px;57 margin: 24px 0 24px 0;58 }59 .page-sub {60 font-size: 40px;61 color: #5e6f68;62 max-width: 900px;63 line-height: 1.4;64 }65 .fake-field {66 margin-top: 60px;67 width: 420px;68 height: 110px;69 border: 2px solid #cbd7d2;70 border-radius: 18px;71 display: flex;72 align-items: center;73 padding: 0 24px;74 color: #29433c;75 background: #ffffff;76 box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;77 }78 79 .bottom-actions {80 position: absolute;81 bottom: 160px;82 left: 64px;83 right: 64px;84 display: flex;85 justify-content: space-between;86 align-items: center;87 }88 .exit-link {89 color: #093a32;90 font-size: 48px;91 }92 .cta {93 background: #0b3d35;94 color: #e7fff7;95 height: 120px;96 padding: 0 46px;97 border-radius: 60px;98 display: inline-flex;99 align-items: center;100 font-size: 44px;101 font-weight: 600;102 box-shadow: 0 8px 20px rgba(0,0,0,0.2);103 }104 105 /* Overlay + Modal */106 .overlay {107 position: absolute;108 inset: 0;109 background: rgba(0,0,0,0.5);110 z-index: 5;111 }112 .modal {113 position: absolute;114 left: 90px;115 top: 420px;116 width: 900px;117 height: 1320px;118 background: #ffffff;119 border-radius: 64px;120 box-shadow: 0 30px 60px rgba(0,0,0,0.35);121 padding: 56px;122 }123 .modal-title {124 font-size: 72px;125 font-weight: 700;126 margin-bottom: 18px;127 }128 .modal-desc {129 font-size: 40px;130 color: #6a7a74;131 line-height: 1.35;132 margin-right: 40px;133 }134 135 .segmented {136 margin-top: 46px;137 width: 820px;138 height: 130px;139 border-radius: 70px;140 border: 2px solid #cfdad6;141 display: flex;142 overflow: hidden;143 }144 .seg {145 flex: 1;146 display: flex;147 align-items: center;148 justify-content: center;149 font-size: 44px;150 color: #223b34;151 background: #eef2f0;152 }153 .seg:nth-child(2), .seg:nth-child(3) { background: #f2f4f3; color: #2f3f3a; }154 .seg.selected {155 background: #d9ebe3;156 color: #113a31;157 font-weight: 700;158 }159 .seg .check {160 width: 36px;161 height: 36px;162 margin-right: 14px;163 }164 165 .picker {166 position: relative;167 width: 100%;168 height: 560px;169 margin-top: 70px;170 }171 .picker-num {172 position: absolute;173 left: 0;174 right: 0;175 text-align: center;176 color: #a4b0ab;177 }178 .picker-65 { top: 60px; font-size: 56px; opacity: 0.5; }179 .picker-66 { top: 210px; font-size: 68px; color: #1c302a; font-weight: 700; }180 .picker-67 { top: 380px; font-size: 56px; opacity: 0.5; }181 .picker .divider {182 position: absolute;183 left: 300px;184 width: 280px;185 height: 6px;186 background: #a7b4af;187 }188 .divider.top { top: 190px; }189 .divider.bottom { top: 330px; }190 191 .modal-footer {192 position: absolute;193 bottom: 40px;194 left: 56px;195 right: 56px;196 display: flex;197 justify-content: flex-end;198 gap: 60px;199 align-items: center;200 }201 .btn {202 font-size: 48px;203 color: #0e3a32;204 }205 .btn.ok {206 font-weight: 700;207 }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Status bar -->214 <div class="status-bar">215 <div>10:07</div>216 <div class="status-right">217 <!-- Simple inline icons -->218 <svg class="icon" viewBox="0 0 24 24"><path fill="#0e1f1a" d="M12 2C6 2 2 6 2 12h3c0-3.8 3.2-7 7-7s7 3.2 7 7h3c0-6-4-10-10-10z"/></svg>219 <svg class="icon" viewBox="0 0 24 24"><path fill="#0e1f1a" d="M2 12l6-6 6 6-6 6-6-6z"/></svg>220 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="7" width="14" height="10" rx="2" fill="#0e1f1a"/><rect x="18" y="9" width="3" height="6" rx="1" fill="#0e1f1a"/></svg>221 </div>222 </div>223 224 <!-- Underlying page content -->225 <div class="page-content">226 <div class="avatar"></div>227 <div class="page-title">Add Fitbit profile info</div>228 <div class="page-sub">Your profile info helps personalize some metrics. Choose units and enter details to set up your profile.</div>229 230 <div class="fake-field">Height</div>231 <div class="fake-field" style="width: 520px; margin-top: 34px;">Sex</div>232 </div>233 234 <div class="bottom-actions">235 <div class="exit-link">Exit</div>236 <div class="cta">Save & continue</div>237 </div>238 239 <!-- Overlay and Modal -->240 <div class="overlay"></div>241 <div class="modal">242 <div class="modal-title">Weight</div>243 <div class="modal-desc">Fitbit uses weight to estimate calories and calculate needs</div>244 245 <div class="segmented">246 <div class="seg selected">247 <svg class="check" viewBox="0 0 24 24">248 <path fill="#0b3d35" d="M9 16.2l-3.5-3.5-1.5 1.5L9 19 20 8l-1.5-1.5z"/>249 </svg>250 KG251 </div>252 <div class="seg">STONE</div>253 <div class="seg">LBS</div>254 </div>255 256 <div class="picker">257 <div class="picker-num picker-65">65 kg</div>258 <div class="divider top"></div>259 <div class="picker-num picker-66">66 kg</div>260 <div class="divider bottom"></div>261 <div class="picker-num picker-67">67 kg</div>262 </div>263 264 <div class="modal-footer">265 <div class="btn">Cancel</div>266 <div class="btn ok">OK</div>267 </div>268 </div>269 270</div>271</body>272</html>