GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Profile - Weight Modal</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#f5f7f6; /* app background */10 border-radius:0;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:110px;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 40px; color:#0a302a; font-weight:600; font-size:42px;18 }19 .status-icons{ display:flex; align-items:center; gap:28px; color:#0a302a; }20 .icon-dot { width:10px; height:10px; background:#0a302a; border-radius:50%; display:inline-block; }21 .wifi {22 width:44px; height:30px; position:relative; display:inline-block;23 }24 .wifi:before, .wifi:after {25 content:""; position:absolute; left:0; right:0; border:3px solid #0a302a; border-radius:20px;26 }27 .wifi:before { top:2px; height:10px; opacity:0.9; }28 .wifi:after { top:14px; height:6px; opacity:0.7; }29 .battery {30 width:58px; height:28px; border:3px solid #0a302a; border-radius:6px; position:relative; display:inline-block;31 }32 .battery:after {33 content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#0a302a; border-radius:2px;34 }35 .battery .level { position:absolute; left:3px; top:3px; height:20px; width:36px; background:#0a302a; border-radius:3px; }36 37 /* Page content behind modal */38 .page {39 position:absolute; top:140px; left:60px; right:60px; bottom:0;40 color:#163d35;41 }42 .avatar {43 width:110px; height:110px; border:8px solid #1f5a4d; border-radius:55px; margin-bottom:30px;44 }45 .title {46 font-size:72px; font-weight:700; margin:10px 0 20px;47 }48 .subtitle {49 font-size:36px; color:#4f6e66; line-height:1.4; max-width:880px;50 }51 .form-row { margin-top:40px; display:flex; gap:34px; flex-wrap:wrap; }52 .input-box {53 width:430px; height:110px; border:3px solid #1f5a4d; border-radius:22px;54 display:flex; align-items:center; padding:0 28px; font-size:40px; color:#1f5a4d; background:#eef6f4;55 }56 .long-box { width:600px; }57 .bottom-actions {58 position:absolute; bottom:160px; left:60px; right:60px; display:flex; align-items:center; justify-content:space-between;59 }60 .exit { font-size:44px; color:#1f5a4d; }61 .primary-btn {62 background:#103c33; color:#d9efe8; font-size:44px; padding:28px 44px; border-radius:60px;63 box-shadow:0 6px 14px rgba(0,0,0,0.18);64 }65 66 /* Dim overlay */67 .overlay {68 position:absolute; left:0; top:0; width:100%; height:100%;69 background:rgba(0,0,0,0.35);70 }71 72 /* Modal */73 .modal {74 position:absolute; left:50%; top:390px; transform:translateX(-50%);75 width:860px; background:#ffffff; border-radius:56px;76 box-shadow:0 30px 80px rgba(0,0,0,0.25);77 padding:60px 60px 40px;78 color:#163d35;79 }80 .modal h2 { margin:0; font-size:64px; font-weight:700; }81 .modal .desc { font-size:36px; color:#587871; margin-top:24px; line-height:1.35; }82 .segmented {83 margin-top:46px; border-radius:40px; border:3px solid #c6d5d1; overflow:hidden; display:flex;84 }85 .segmented .item {86 flex:1; padding:34px 20px; text-align:center; font-size:40px; font-weight:600; color:#3c5e55; background:#e9eeed;87 border-right:3px solid #c6d5d1;88 }89 .segmented .item:last-child { border-right:none; }90 .segmented .active {91 background:#d7ebe4; color:#163d35;92 display:flex; align-items:center; justify-content:center; gap:16px;93 }94 .check {95 width:36px; height:36px; display:inline-block;96 }97 .check svg { width:100%; height:100%; }98 .picker {99 margin:50px auto 20px; width:420px; text-align:center;100 }101 .picker .prev, .picker .next {102 font-size:46px; color:#a8b7b2; margin:22px 0;103 }104 .picker .current {105 font-size:62px; font-weight:700; color:#163d35; position:relative; padding-bottom:28px;106 }107 .picker .current:after {108 content:""; display:block; height:8px; width:280px; background:#163d35; margin:22px auto 0; border-radius:6px;109 }110 .divider { height:4px; background:#e9eeed; margin:40px 0 10px; }111 .modal-actions {112 display:flex; justify-content:space-between; align-items:center; padding:20px 10px 0;113 }114 .btn-text { font-size:44px; color:#1f5a4d; }115</style>116</head>117<body>118<div id="render-target">119 120 <!-- Status bar -->121 <div class="status-bar">122 <div>10:07</div>123 <div class="status-icons">124 <span>✓</span>125 <span>Calm</span>126 <span class="icon-dot"></span>127 <div class="wifi"></div>128 <div class="battery"><div class="level"></div></div>129 </div>130 </div>131 132 <!-- Page content behind modal -->133 <div class="page">134 <div class="avatar"></div>135 <div class="title">Add Fitbit profile info</div>136 <div class="subtitle">137 Your profile info helps personalize some metrics and recommendations. You can138 choose what is shared in your profile and settings. Privacy controls apply.139 </div>140 141 <div class="form-row">142 <div class="input-box">Height — 168 cm</div>143 <div class="input-box long-box">Sex — Prefer not to say ▼</div>144 </div>145 146 <div class="bottom-actions">147 <div class="exit">Exit</div>148 <div class="primary-btn">Save & continue</div>149 </div>150 </div>151 152 <!-- Dim background -->153 <div class="overlay"></div>154 155 <!-- Weight Modal -->156 <div class="modal">157 <h2>Weight</h2>158 <div class="desc">Fitbit uses weight to estimate calories and calculate needs</div>159 160 <div class="segmented">161 <div class="item active">162 <span class="check">163 <svg viewBox="0 0 24 24">164 <path d="M20 6L9 17l-5-5" fill="none" stroke="#163d35" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>165 </svg>166 </span>167 KG168 </div>169 <div class="item">STONE</div>170 <div class="item">LBS</div>171 </div>172 173 <div class="picker">174 <div class="prev">67 kg</div>175 <div class="current">68 kg</div>176 <div class="next">69 kg</div>177 </div>178 179 <div class="divider"></div>180 181 <div class="modal-actions">182 <div class="btn-text">Cancel</div>183 <div class="btn-text">OK</div>184 </div>185 </div>186 187</div>188</body>189</html>