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 Height Modal</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: #f3f5f4;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 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #0c2b25;29 font-weight: 600;30 }31 .status-left { font-size: 42px; letter-spacing: 1px; }32 .status-right { display: flex; gap: 20px; align-items: center; }33 .icon {34 width: 40px; height: 40px;35 }36 .battery {37 width: 55px; height: 28px; border: 3px solid #1a1a1a; border-radius: 6px; position: relative;38 }39 .battery:after {40 content: "";41 position: absolute; right: -10px; top: 6px;42 width: 8px; height: 14px; background: #1a1a1a; border-radius: 2px;43 }44 .battery .level { width: 70%; height: 100%; background: #1a1a1a; }45 46 /* Main background content */47 .page-content {48 position: absolute;49 top: 140px;50 left: 60px;51 right: 60px;52 color: #142c26;53 }54 .avatar-circle {55 width: 120px; height: 120px; border-radius: 60px;56 border: 6px solid #1e4c41;57 display: flex; align-items: center; justify-content: center;58 color: #1e4c41; font-weight: 700; margin-bottom: 30px;59 }60 .title {61 font-size: 72px; font-weight: 700; margin: 10px 0 20px;62 }63 .subtitle {64 font-size: 36px; color: #4b5c57; line-height: 52px; max-width: 900px;65 }66 .field {67 margin-top: 60px;68 width: 480px; height: 110px;69 border: 2px solid #cfd8d6; border-radius: 22px;70 display: flex; align-items: center; padding: 0 24px;71 color: #2b3b36; background: #ffffff;72 }73 .field + .field { margin-top: 30px; }74 .bottom-actions {75 position: absolute;76 bottom: 120px;77 left: 60px;78 right: 60px;79 display: flex; justify-content: space-between; align-items: center;80 }81 .exit-link {82 font-size: 42px; color: #234f44;83 }84 .primary-btn {85 background: #103a33;86 color: #eaf5f2;87 padding: 36px 48px;88 border-radius: 60px;89 font-size: 42px; font-weight: 700;90 width: 520px; text-align: center;91 }92 93 /* Overlay & Modal */94 .overlay {95 position: absolute;96 inset: 0;97 background: rgba(0,0,0,0.45);98 }99 .modal {100 position: absolute;101 left: 90px;102 top: 420px;103 width: 900px;104 height: 1360px;105 background: #f8fbf9;106 border-radius: 70px;107 box-shadow: 0 20px 80px rgba(0,0,0,0.25);108 padding: 70px 60px;109 box-sizing: border-box;110 color: #132a25;111 }112 .modal h1 {113 margin: 0;114 font-size: 72px;115 font-weight: 700;116 }117 .modal p.desc {118 margin-top: 40px;119 font-size: 38px;120 color: #536660;121 line-height: 56px;122 max-width: 720px;123 }124 125 .segmented {126 margin-top: 60px;127 display: flex;128 width: 720px;129 height: 140px;130 border-radius: 70px;131 overflow: hidden;132 border: 2px solid #cfd7d3;133 }134 .segment {135 flex: 1;136 display: flex; align-items: center; justify-content: center;137 font-size: 42px; font-weight: 700;138 color: #334b44;139 background: #e9ecea;140 }141 .segment.active {142 background: #cfe3d6;143 color: #1f3c33;144 position: relative;145 }146 .segment.active:before {147 content: "✓";148 position: absolute;149 left: 36px;150 font-size: 44px;151 font-weight: 700;152 color: #1f3c33;153 }154 155 .spinner {156 margin-top: 100px;157 width: 100%;158 text-align: center;159 }160 .spinner .value {161 font-size: 54px;162 color: #8ea19a;163 margin: 34px 0;164 }165 .spinner .value.center {166 font-size: 64px;167 color: #132a25;168 font-weight: 700;169 }170 .spinner .rule {171 width: 260px; height: 0;172 border-top: 6px solid #7d8e88;173 margin: 10px auto;174 }175 176 .divider {177 margin-top: 120px;178 height: 2px;179 background: #dee5e2;180 width: 100%;181 }182 183 .modal-actions {184 margin-top: 40px;185 display: flex; justify-content: space-between; align-items: center;186 font-size: 44px; color: #2a3f38;187 }188 .modal-actions .cancel { color: #2c5b50; }189 .modal-actions .ok { color: #2c5b50; font-weight: 700; }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status bar -->196 <div class="status-bar">197 <div class="status-left">10:04</div>198 <div class="status-right">199 <!-- Simple running icon substitute -->200 <svg class="icon" viewBox="0 0 24 24">201 <circle cx="12" cy="12" r="9" fill="#1a1a1a"></circle>202 </svg>203 <!-- Wi-Fi icon -->204 <svg class="icon" viewBox="0 0 24 24">205 <path d="M2 9c10-8 20 0 20 0M5 12c7-6 14 0 14 0M8 15c4-3 8 0 8 0M12 19l2-2-2-2-2 2 2 2z" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>206 </svg>207 <!-- Battery -->208 <div class="battery"><div class="level"></div></div>209 </div>210 </div>211 212 <!-- Underlying page content (dimmed by overlay) -->213 <div class="page-content">214 <div class="avatar-circle">👤</div>215 <div class="title">Add Fitbit profile info</div>216 <div class="subtitle">217 Your profile info helps personalize some metrics. You can change these218 settings any time in Privacy & preferences.219 </div>220 221 <div class="field">Height</div>222 <div class="field">Sex</div>223 </div>224 225 <div class="bottom-actions">226 <div class="exit-link">Exit</div>227 <div class="primary-btn">Save & continue</div>228 </div>229 230 <!-- Overlay and modal -->231 <div class="overlay"></div>232 233 <div class="modal">234 <h1>Height</h1>235 <p class="desc">Fitbit uses height to estimate calories and stride length</p>236 237 <div class="segmented">238 <div class="segment active">CM</div>239 <div class="segment">FEET</div>240 </div>241 242 <div class="spinner">243 <div class="value">166 cm</div>244 <div class="rule"></div>245 <div class="value center">167 cm</div>246 <div class="rule"></div>247 <div class="value">168 cm</div>248 </div>249 250 <div class="divider"></div>251 252 <div class="modal-actions">253 <div class="cancel">Cancel</div>254 <div class="ok">OK</div>255 </div>256 </div>257 258</div>259</body>260</html>