GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Weight Picker Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Status bar */13 .status-bar{14 position:absolute; top:0; left:0; right:0; height:96px;15 padding:0 36px; display:flex; align-items:center; justify-content:space-between;16 color:#0a0a0a; font-weight:600; font-size:40px;17 }18 .status-icons { display:flex; align-items:center; gap:26px; }19 .icon-dot{ width:10px; height:10px; background:#0a0a0a; border-radius:50%; display:inline-block; }20 .icon-wifi, .icon-battery{21 width:54px; height:30px; display:inline-block; position:relative;22 }23 .icon-wifi:before{24 content:''; position:absolute; left:0; right:0; top:6px; margin:auto;25 width:44px; height:18px; border:4px solid #0a0a0a; border-top-left-radius:30px; border-top-right-radius:30px; border-bottom:none;26 }27 .icon-battery{28 border:4px solid #0a0a0a; border-radius:6px;29 }30 .icon-battery:after{31 content:''; position:absolute; right:-10px; top:6px; width:8px; height:14px; background:#0a0a0a; border-radius:2px;32 }33 .battery-fill{ position:absolute; left:4px; top:4px; bottom:4px; width:28px; background:#0a0a0a; }34 35 /* Underlying page */36 .page {37 position:absolute; top:120px; left:60px; right:60px;38 color:#173a32;39 }40 .avatar{41 width:92px; height:92px; border:6px solid #134a40; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#134a40; font-weight:700;42 }43 .title{44 margin-top:36px; font-size:88px; line-height:1.1; font-weight:700; color:#112e27;45 }46 .subtitle{47 margin-top:28px; width:880px; font-size:40px; color:#355a51; line-height:1.4;48 }49 .field{50 margin-top:40px; width:420px; height:110px; border:2px solid #1f5b4f; border-radius:20px;51 display:flex; align-items:center; padding:0 28px; color:#1f5b4f; font-size:48px; font-weight:700;52 background:#ffffff;53 }54 .fields-row{ display:flex; gap:30px; margin-top:34px; }55 .page-footer{56 position:absolute; bottom:170px; left:60px; right:60px; display:flex; align-items:center; justify-content:space-between;57 }58 .exit{ font-size:46px; color:#123a33; }59 .cta{60 background:#0f4e40; color:#e9fff5; border-radius:70px; padding:34px 44px; font-size:48px; font-weight:700;61 box-shadow: inset 0 0 0 0 #fff;62 }63 64 /* Overlay */65 .scrim{66 position:absolute; inset:0; background:rgba(0,0,0,0.45);67 }68 69 /* Modal */70 .modal{71 position:absolute; left:90px; top:420px; width:900px; height:1400px;72 background:#f5fbf7; border-radius:60px; box-shadow:0 30px 60px rgba(0,0,0,0.25);73 padding:70px 60px;74 color:#12352e;75 }76 .modal h2{ margin:0 0 18px 0; font-size:72px; font-weight:800; }77 .muted{ color:#55756b; font-size:42px; line-height:1.4; width:760px; }78 79 .segment{80 margin-top:48px; display:flex; border:2px solid #cfd8d3; border-radius:80px; overflow:hidden;81 }82 .seg-item{83 flex:1; text-align:center; padding:28px 0; font-size:46px; color:#274c43; background:#eef2f0;84 }85 .seg-item + .seg-item{ border-left:2px solid #cfd8d3; }86 .seg-item.selected{87 background:#cfe3d8; font-weight:700;88 }89 .seg-item.selected .check{ margin-right:12px; color:#123e33; }90 .seg-item .check{ font-weight:800; }91 92 .wheel{93 position:relative; margin:110px auto 0; width:520px; height:540px;94 display:flex; align-items:center; justify-content:center; color:#2f4c44;95 }96 .wheel .num{97 position:absolute; left:0; right:0; text-align:center; font-size:64px; color:#b8c4bf;98 }99 .wheel .num.n1{ top:40px; }100 .wheel .num.n2{ bottom:40px; }101 .wheel .current{102 position:absolute; left:0; right:0; text-align:center; font-size:74px; color:#122f28; font-weight:700;103 }104 .wheel .line{105 position:absolute; left:80px; right:80px; height:6px; background:#6a7c75; border-radius:6px;106 }107 .wheel .line.top{ top:170px; }108 .wheel .line.bottom{ bottom:170px; }109 110 .modal hr{111 border:none; border-top:2px solid #d9e3de; margin:100px 0 26px;112 }113 .modal-actions{114 display:flex; justify-content:flex-end; gap:140px; padding-right:40px; margin-top:10px;115 }116 .btn{ font-size:48px; color:#154b41; }117 .btn.primary{ color:#0c5a4a; font-weight:700; }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div>10:06</div>126 <div class="status-icons">127 <span class="icon-wifi"></span>128 <span class="icon-dot"></span>129 <span class="icon-dot"></span>130 <span class="icon-dot"></span>131 <span class="icon-battery"><span class="battery-fill"></span></span>132 </div>133 </div>134 135 <!-- Underlying page content -->136 <div class="page">137 <div class="avatar">👤</div>138 <div class="title">Add Fitbit profile info</div>139 <div class="subtitle">140 Your profile info helps personalize some metrics. You can change this info anytime in settings.141 </div>142 143 <div class="fields-row">144 <div class="field">Height</div>145 <div class="field">Sex</div>146 </div>147 </div>148 149 <!-- Bottom actions on page -->150 <div class="page-footer">151 <div class="exit">Exit</div>152 <div class="cta">Save & continue</div>153 </div>154 155 <!-- Overlay -->156 <div class="scrim"></div>157 158 <!-- Modal -->159 <div class="modal">160 <h2>Weight</h2>161 <div class="muted">Fitbit uses weight to estimate calories and calculate needs</div>162 163 <div class="segment">164 <div class="seg-item selected"><span class="check">✓</span>KG</div>165 <div class="seg-item">STONE</div>166 <div class="seg-item">LBS</div>167 </div>168 169 <div class="wheel">170 <div class="line top"></div>171 <div class="line bottom"></div>172 <div class="num n1">59 kg</div>173 <div class="current">60</div>174 <div class="num n2">61 kg</div>175 </div>176 177 <hr>178 179 <div class="modal-actions">180 <div class="btn">Cancel</div>181 <div class="btn primary">OK</div>182 </div>183 </div>184 185</div>186</body>187</html>