GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Profile Info - Weight Picker</title>5<style>6 body { margin:0; padding:0; background:transparent; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#F5F6F4;11 font-family: Arial, Helvetica, sans-serif;12 color:#1d2e27;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; width:100%; height:110px;18 padding:0 40px;19 display:flex; align-items:center; justify-content:space-between;20 color:#0f1f19; font-weight:600;21 }22 .sb-left { display:flex; align-items:center; gap:26px; font-size:44px; }23 .sb-right { display:flex; align-items:center; gap:24px; }24 .icon-battery, .icon-wifi {25 width:48px; height:48px;26 }27 .icon-battery svg, .icon-wifi svg { width:100%; height:100%; fill:#0f1f19; }28 29 /* Page content under modal (dimmed by overlay) */30 .page {31 position:absolute; top:140px; left:0; right:0;32 padding:60px 72px;33 }34 .avatar {35 width:120px; height:120px; border-radius:60px;36 border:8px solid #0f4a3f; display:flex; align-items:center; justify-content:center;37 color:#0f4a3f; font-weight:bold;38 }39 .title {40 margin-top:32px; font-size:72px; font-weight:700;41 letter-spacing:0.5px;42 }43 .subtitle {44 margin-top:24px; font-size:34px; line-height:1.4; color:#51635c;45 max-width:850px;46 }47 .field-row { display:flex; gap:36px; margin-top:48px; }48 .field {49 width:420px; height:120px; border:2px solid #cdd7d2; border-radius:22px;50 display:flex; align-items:center; justify-content:flex-start; padding:0 24px;51 color:#204a40; background:#ffffff;52 }53 .footer {54 position:absolute; left:0; right:0; bottom:80px;55 padding:0 72px; display:flex; align-items:center; justify-content:space-between;56 }57 .exit { font-size:42px; color:#0f4a3f; }58 .cta {59 background:#0c3f34; color:#eaf3ef; font-size:44px; border:none; border-radius:56px;60 padding:28px 48px;61 }62 63 /* Overlay + Dialog */64 .overlay {65 position:absolute; top:0; left:0; width:100%; height:100%;66 background:rgba(0,0,0,0.45);67 }68 .dialog {69 position:absolute; left:100px; top:420px; width:880px;70 background:#F9FBF9; border-radius:60px; box-shadow:0 30px 60px rgba(0,0,0,0.25);71 padding:64px 56px;72 }73 .dialog h2 {74 margin:0; font-size:60px; font-weight:700; color:#1d2e27;75 }76 .dialog .helper {77 margin-top:18px; font-size:34px; color:#556760; line-height:1.4;78 max-width:740px;79 }80 81 .segmented {82 margin-top:42px; height:160px;83 display:flex; border:2px solid #cbd9d2; border-radius:80px; overflow:hidden;84 background:#eef3f0;85 }86 .segment {87 flex:1; display:flex; align-items:center; justify-content:center; gap:16px;88 font-size:42px; color:#435a53; background:#ecefee;89 }90 .segment + .segment { border-left:2px solid #d9e3de; }91 .segment.active {92 background:#d7e9e0; color:#173d34; font-weight:700;93 }94 .check {95 width:42px; height:42px; border-radius:21px; border:3px solid #173d34;96 display:flex; align-items:center; justify-content:center;97 }98 .check svg { width:28px; height:28px; fill:#173d34; }99 100 .wheel {101 position:relative;102 margin-top:80px; padding:60px 0; text-align:center;103 }104 .wheel .line {105 width:300px; height:6px; background:#66756f; margin:26px auto; border-radius:3px;106 }107 .value { font-size:54px; color:#a0aaa6; margin:26px 0; }108 .value.active { font-size:64px; color:#1d2e27; font-weight:700; }109 .divider {110 margin-top:80px; height:2px; background:#e0e6e2;111 }112 113 .dialog-actions {114 margin-top:40px; display:flex; justify-content:flex-end; gap:40px;115 }116 .dialog-actions .btn {117 background:none; border:none; font-size:44px; color:#1a5a4d; padding:16px 6px;118 }119</style>120</head>121<body>122<div id="render-target">123 124 <!-- Status Bar -->125 <div class="status-bar">126 <div class="sb-left">127 <div>10:08</div>128 <!-- simple small dots to mimic extra icons -->129 <div style="width:18px;height:18px;background:#0f1f19;border-radius:9px;"></div>130 <div style="width:18px;height:18px;border:3px solid #0f1f19;border-radius:9px;"></div>131 </div>132 <div class="sb-right">133 <div class="icon-wifi">134 <svg viewBox="0 0 24 24">135 <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2s-1.6-.7-1.6-1.6S11.1 18 12 18zm-6.7-5.1c3.7-3.2 9.6-3.2 13.3 0l-2 2c-2.9-2.2-6.4-2.2-9.3 0l-2-2zm-3.4-3.5c6-5.2 15.2-5.2 21.2 0l-2.3 2.3c-4.9-4-11.7-4-16.6 0L1.9 9.4z"/>136 </svg>137 </div>138 <div class="icon-battery">139 <svg viewBox="0 0 24 24">140 <path d="M16 6h2v2h2v8h-2v2h-2V6z" opacity="0.3"/>141 <path d="M2 7c0-1.1.9-2 2-2h11c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V7zm3 1h9v8H5V8z"/>142 </svg>143 </div>144 </div>145 </div>146 147 <!-- Underlying page -->148 <div class="page">149 <div class="avatar">👤</div>150 <div class="title">Add Fitbit profile info</div>151 <div class="subtitle">152 Your profile info helps personalize some metrics. You can change these later in settings and privacy.153 </div>154 155 <div class="field-row">156 <div class="field">Height: 180 cm</div>157 <div class="field">Sex: Female</div>158 </div>159 160 <div class="footer">161 <div class="exit">Exit</div>162 <button class="cta">Save & continue</button>163 </div>164 </div>165 166 <!-- Overlay + Dialog -->167 <div class="overlay">168 <div class="dialog">169 <h2>Weight</h2>170 <div class="helper">171 Fitbit uses weight to estimate calories and calculate needs172 </div>173 174 <div class="segmented">175 <div class="segment active">176 <div class="check">177 <svg viewBox="0 0 24 24">178 <path d="M9 16.5l-4-4 1.5-1.5L9 13.5l8.5-8.5 1.5 1.5z"/>179 </svg>180 </div>181 <div>KG</div>182 </div>183 <div class="segment">STONE</div>184 <div class="segment">LBS</div>185 </div>186 187 <div class="wheel">188 <div class="value">73 kg</div>189 <div class="line"></div>190 <div class="value active">74 kg</div>191 <div class="line"></div>192 <div class="value">75 kg</div>193 </div>194 195 <div class="divider"></div>196 197 <div class="dialog-actions">198 <button class="btn">Cancel</button>199 <button class="btn">OK</button>200 </div>201 </div>202 </div>203 204</div>205</body>206</html>