GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Weight Picker UI</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;9 position: relative; overflow: hidden;10 background: #F7F8F7;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 120px;16 padding: 0 40px;17 display: flex; align-items: center; justify-content: space-between;18 color: #0B2B29;19 font-weight: 600; font-size: 44px;20 }21 .status-icons { display: flex; align-items: center; gap: 26px; }22 .icon-dot { width: 16px; height: 16px; background:#0B2B29; border-radius:50%; }23 .wifi {24 width: 40px; height: 28px; border: 4px solid #0B2B29; border-top-left-radius: 28px; border-top-right-radius: 28px;25 border-bottom: none; position: relative;26 }27 .battery {28 width: 52px; height: 28px; border: 4px solid #0B2B29; border-radius: 6px; position: relative;29 }30 .battery:after { content:''; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#0B2B29; border-radius:2px; }31 32 /* Base app content */33 .page {34 position: absolute; top: 160px; left: 60px; right: 60px;35 color: #1D3A37;36 }37 .avatar {38 width: 120px; height: 120px; border: 8px solid #1D3A37; border-radius: 50%;39 display:flex; align-items:center; justify-content:center; color:#1D3A37; font-weight:700;40 margin-bottom: 40px;41 }42 .title {43 font-size: 72px; font-weight: 700; margin-bottom: 24px;44 }45 .subtitle {46 font-size: 34px; color: #5E6F6B; line-height: 1.4; max-width: 860px;47 }48 .card {49 margin-top: 40px;50 width: 420px; height: 120px; border: 2px dashed #A8B7B3; border-radius: 18px;51 display:flex; align-items:center; justify-content:center; color:#6D807B; font-size:36px;52 }53 .footer {54 position: absolute; bottom: 120px; left: 60px; right: 60px;55 display: flex; justify-content: space-between; align-items: center;56 }57 .text-btn { color: #0B2B29; font-size: 40px; }58 .cta {59 background:#0B3D35; color:#EAF4F2; padding: 34px 60px; border-radius: 66px; font-size: 42px; font-weight: 600;60 }61 62 /* Overlay mask */63 .dim {64 position: absolute; left:0; top:0; width:100%; height:100%;65 background: rgba(0,0,0,0.35);66 }67 68 /* Dialog */69 .dialog {70 position: absolute; left: 50%; top: 50%;71 transform: translate(-50%, -50%);72 width: 900px; height: 1400px;73 background: #F9FBF9; border-radius: 60px; box-shadow: 0 30px 80px rgba(0,0,0,0.25);74 padding: 60px 60px 40px 60px;75 color: #1B2F2C;76 }77 .dialog h2 {78 margin: 0 0 20px 0; font-size: 64px; font-weight: 700;79 }80 .helper {81 font-size: 34px; color: #6D807B; line-height: 1.5; margin-bottom: 44px;82 }83 84 /* Segmented control */85 .segmented {86 display: flex; gap: 12px; margin-bottom: 64px;87 }88 .segment {89 flex: 1; height: 140px; border-radius: 70px; border: 2px solid #C9D6D2;90 display: flex; align-items: center; justify-content: center;91 font-size: 40px; color: #2E4A46; background: #EDEFEF;92 }93 .segment.selected {94 background: #D6E9E0; color: #163B35; border-color: #BFD5CE; position: relative;95 font-weight: 700;96 }97 .segment .check {98 position: absolute; left: 36px;99 width: 42px; height: 42px;100 }101 .segment .check svg { width: 100%; height: 100%; }102 .segment .check path { fill: none; stroke: #163B35; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }103 104 /* Picker area */105 .picker {106 height: 520px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;107 margin-bottom: 80px;108 }109 .picker .value { font-size: 56px; color: #8FA29D; margin: 18px 0; }110 .picker .value.center {111 font-size: 64px; font-weight: 700; color: #1B2F2C;112 }113 .picker .bar {114 width: 360px; height: 10px; background: #2F4D48; border-radius: 8px; margin: 14px 0;115 }116 .divider {117 width: 100%; height: 2px; background: #DDE5E2; margin-bottom: 40px;118 }119 120 .dialog-footer {121 display: flex; justify-content: space-between; align-items: center;122 padding: 0 20px; margin-top: 10px;123 }124 .flat-btn {125 font-size: 44px; color: #1D3A37;126 }127 .flat-btn.right { color: #1D3A37; font-weight: 700; }128</style>129</head>130<body>131<div id="render-target">132 133 <!-- Status bar -->134 <div class="status-bar">135 <div>10:08</div>136 <div class="status-icons">137 <div class="icon-dot"></div>138 <div class="icon-dot" style="width:18px;height:18px;"></div>139 <div class="icon-dot" style="width:18px;height:18px;"></div>140 <div class="icon-dot"></div>141 <div class="wifi"></div>142 <div class="battery"></div>143 </div>144 </div>145 146 <!-- Base app content -->147 <div class="page">148 <div class="avatar">👤</div>149 <div class="title">Add Fitbit profile info</div>150 <div class="subtitle">151 Your profile info helps personalize some metrics. Choose what to share and set preferences in Privacy settings.152 </div>153 154 <div style="display:flex; gap: 28px; margin-top: 50px;">155 <div class="card">Height</div>156 <div class="card">Sex</div>157 <div class="card">[More Fields]</div>158 </div>159 </div>160 161 <div class="footer">162 <div class="text-btn">Exit</div>163 <div class="cta">Save & continue</div>164 </div>165 166 <!-- Overlay -->167 <div class="dim"></div>168 169 <!-- Dialog -->170 <div class="dialog">171 <h2>Weight</h2>172 <div class="helper">Fitbit uses weight to estimate calories and calculate needs</div>173 174 <div class="segmented">175 <div class="segment selected">176 <div class="check">177 <svg viewBox="0 0 24 24">178 <path d="M4 13 L9 18 L20 6"></path>179 </svg>180 </div>181 KG182 </div>183 <div class="segment">STONE</div>184 <div class="segment">LBS</div>185 </div>186 187 <div class="picker">188 <div class="value">72 kg</div>189 <div class="bar"></div>190 <div class="value center">73 kg</div>191 <div class="bar"></div>192 <div class="value">74 kg</div>193 </div>194 195 <div class="divider"></div>196 197 <div class="dialog-footer">198 <div class="flat-btn">Cancel</div>199 <div class="flat-btn right">OK</div>200 </div>201 </div>202 203</div>204</body>205</html>