GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Weight Picker Modal - Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: 'Inter', Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #F5F7F6;13 color: #0d2b24;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 padding: 0 40px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #0b2a26;29 }30 .status-left { font-weight: 600; font-size: 40px; letter-spacing: 1px; }31 .status-right { display: flex; gap: 28px; align-items: center; }32 .dot { width: 12px; height: 12px; background:#0b2a26; border-radius: 50%; opacity: .85; }33 .battery {34 width: 44px; height: 24px;35 border: 3px solid #0b2a26; border-radius: 4px; position: relative;36 }37 .battery:after {38 content: ""; position: absolute; right: -10px; top: 6px;39 width: 6px; height: 12px; background:#0b2a26; border-radius: 2px;40 }41 .battery .level { position:absolute; left:2px; top:2px; bottom:2px; right:8px; background:#0b2a26; }42 43 /* Underlying page content (faint, behind modal) */44 .page {45 position: absolute;46 left: 0; top: 110px; right: 0; bottom: 0;47 padding: 80px 60px;48 box-sizing: border-box;49 }50 .profile-icon {51 width: 130px; height: 130px; border-radius: 65px;52 border: 8px solid #0f5a4a;53 display:flex; align-items:center; justify-content:center;54 color:#0f5a4a; font-size: 64px; font-weight: 700;55 margin-bottom: 40px;56 }57 .title {58 font-size: 84px; font-weight: 700; line-height: 1.15; color:#0b2a26;59 margin-bottom: 24px;60 }61 .subtitle {62 font-size: 36px; color:#3f5a56; max-width: 880px; line-height: 1.45;63 }64 .faint { opacity: 0.35; }65 66 .save-cta {67 position: absolute;68 bottom: 80px; right: 60px;69 background: #0d3f34; color: #d8efe9;70 border-radius: 66px;71 padding: 34px 44px;72 font-size: 42px; font-weight: 700;73 }74 75 /* Backdrop */76 .backdrop {77 position: absolute;78 inset: 0;79 background: rgba(0,0,0,0.45);80 }81 82 /* Modal */83 .modal {84 position: absolute;85 left: 50%;86 top: 50%;87 width: 900px;88 height: 1280px;89 transform: translate(-50%, -50%);90 background: #f8fbf9;91 border-radius: 64px;92 box-shadow: 0 30px 80px rgba(0,0,0,0.35);93 padding: 64px 56px;94 box-sizing: border-box;95 }96 .modal h1 {97 margin: 0;98 font-size: 72px;99 color: #0b2a26;100 font-weight: 700;101 }102 .modal .desc {103 margin-top: 22px;104 font-size: 38px;105 color: #476560;106 line-height: 1.4;107 max-width: 760px;108 }109 110 /* Segmented control */111 .segmented {112 margin-top: 56px;113 display: flex;114 border: 2px solid #cfd8d5;115 border-radius: 80px;116 overflow: hidden;117 width: 820px;118 height: 140px;119 }120 .segment {121 flex: 1;122 display: flex; align-items: center; justify-content: center;123 font-size: 42px; font-weight: 600;124 background: #eef3f1;125 color: #1a3f37;126 }127 .segment + .segment { border-left: 2px solid #cfd8d5; }128 .segment.inactive { background: #f9fbfa; color: #324944; }129 .segment svg { margin-right: 16px; }130 .check {131 width: 32px; height: 32px;132 }133 134 /* Spinner picker */135 .picker {136 margin: 80px auto 0;137 width: 620px;138 height: 420px;139 position: relative;140 display: flex; flex-direction: column; align-items: center; justify-content: center;141 }142 .picker .line {143 position: absolute; left: 60px; right: 60px; height: 4px; background: #2e463f;144 }145 .picker .line.top { top: 140px; opacity: .55; }146 .picker .line.bottom { bottom: 140px; opacity: .55; }147 .picker .item {148 font-size: 56px; color: #9db2ad; line-height: 1.9;149 }150 .picker .item.center {151 color: #0b2a26;152 font-size: 72px;153 font-weight: 700;154 line-height: 1.3;155 }156 157 /* Divider near bottom (subtle like screenshot) */158 .modal .divider {159 margin: 70px auto 0;160 width: 760px; height: 3px; background: #e4ece9;161 }162 163 /* Actions */164 .actions {165 position: absolute;166 bottom: 40px;167 left: 56px;168 right: 56px;169 display: flex;170 justify-content: space-between;171 align-items: center;172 }173 .btn {174 font-size: 48px; font-weight: 600;175 padding: 22px 28px; border-radius: 12px;176 color: #1e4c43;177 }178 .btn.primary { color: #0b2a26; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status bar -->185 <div class="status-bar">186 <div class="status-left">10:07</div>187 <div class="status-right">188 <div class="dot"></div>189 <div class="dot"></div>190 <div class="dot" style="width:18px;height:18px;border-radius:4px;"></div>191 <div class="battery"><div class="level"></div></div>192 </div>193 </div>194 195 <!-- Underlying page content (dimmed by backdrop) -->196 <div class="page">197 <div class="profile-icon">👤</div>198 <div class="title">Add Fitbit profile info</div>199 <div class="subtitle">200 Your profile info helps personalize some metrics and recommendations. You can change this at201 any time in settings.202 </div>203 <div class="save-cta faint">Save & continue</div>204 </div>205 206 <!-- Backdrop -->207 <div class="backdrop"></div>208 209 <!-- Modal -->210 <div class="modal">211 <h1>Weight</h1>212 <div class="desc">Fitbit uses weight to estimate calories and calculate needs</div>213 214 <div class="segmented">215 <div class="segment">216 <!-- check icon -->217 <svg class="check" viewBox="0 0 24 24">218 <path fill="#1a3f37" d="M20 6l-11 11-5-5 2-2 3 3 9-9z"/>219 </svg>220 KG221 </div>222 <div class="segment inactive">STONE</div>223 <div class="segment inactive">LBS</div>224 </div>225 226 <div class="picker">227 <div class="line top"></div>228 <div class="item">62 kg</div>229 <div class="item center">63 kg</div>230 <div class="item">64 kg</div>231 <div class="line bottom"></div>232 </div>233 234 <div class="divider"></div>235 236 <div class="actions">237 <div class="btn">Cancel</div>238 <div class="btn primary">OK</div>239 </div>240 </div>241 242</div>243</body>244</html>