GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Add Fitbit profile info</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1080px;11 height: 2400px;12 background: #F2F5F3;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 40px;26 color: #2f2f2f;27 font-size: 42px;28 }29 .status-left {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .status-right {35 display: flex;36 align-items: center;37 gap: 28px;38 }39 .icon {40 width: 46px;41 height: 46px;42 }43 44 /* Content */45 .content {46 position: absolute;47 top: 160px;48 left: 60px;49 right: 60px;50 }51 .avatar {52 width: 120px;53 height: 120px;54 border-radius: 60px;55 border: 10px solid #2E7D68;56 display: flex;57 align-items: center;58 justify-content: center;59 color: #2E7D68;60 font-weight: 700;61 margin-bottom: 40px;62 }63 64 .title {65 font-size: 70px;66 line-height: 84px;67 color: #222;68 font-weight: 700;69 margin-bottom: 36px;70 }71 .subtitle {72 font-size: 38px;73 line-height: 56px;74 color: #4a4a4a;75 margin-bottom: 70px;76 }77 78 /* Form area */79 .section-title {80 font-size: 44px;81 color: #2b2b2b;82 font-weight: 700;83 margin-bottom: 34px;84 }85 .form-row {86 display: flex;87 gap: 40px;88 margin-bottom: 40px;89 }90 .field {91 flex: 1;92 }93 .label {94 font-size: 36px;95 color: #2E7D68;96 margin-bottom: 16px;97 }98 .input {99 height: 170px;100 border: 6px solid #2E7D68;101 border-radius: 22px;102 background: #fff;103 display: flex;104 align-items: center;105 padding: 0 40px;106 font-size: 54px;107 color: #1c1c1c;108 }109 110 .field-full {111 width: 100%;112 }113 .dropdown {114 position: relative;115 }116 .dropdown .chevron {117 position: absolute;118 right: 36px;119 top: 50%;120 transform: translateY(-50%);121 width: 40px;122 height: 40px;123 }124 125 .note {126 font-size: 36px;127 line-height: 56px;128 color: #4d4d4d;129 margin-top: 36px;130 }131 132 /* Bottom controls */133 .bottom-actions {134 position: absolute;135 left: 60px;136 right: 60px;137 bottom: 210px;138 display: flex;139 justify-content: space-between;140 align-items: center;141 }142 .link-exit {143 font-size: 44px;144 color: #2E7D68;145 font-weight: 700;146 }147 .btn-primary {148 background: #236C5C;149 color: #fff;150 font-size: 48px;151 font-weight: 700;152 padding: 38px 64px;153 border-radius: 90px;154 box-shadow: 0 6px 0 rgba(0,0,0,0.08);155 }156 157 /* Gesture bar */158 .gesture {159 position: absolute;160 bottom: 60px;161 left: 50%;162 transform: translateX(-50%);163 width: 500px;164 height: 18px;165 background: #BDBDBD;166 border-radius: 9px;167 }168</style>169</head>170<body>171<div id="render-target">172 173 <!-- Status Bar -->174 <div class="status-bar">175 <div class="status-left">176 <div>10:05</div>177 <!-- simple signal icon -->178 <svg class="icon" viewBox="0 0 24 24">179 <rect x="2" y="16" width="4" height="6" fill="#4a4a4a"></rect>180 <rect x="8" y="12" width="4" height="10" fill="#4a4a4a"></rect>181 <rect x="14" y="8" width="4" height="14" fill="#4a4a4a"></rect>182 <rect x="20" y="4" width="4" height="18" fill="#4a4a4a"></rect>183 </svg>184 <!-- small icons placeholders -->185 <svg class="icon" viewBox="0 0 24 24">186 <circle cx="12" cy="12" r="10" stroke="#4a4a4a" stroke-width="2" fill="none"></circle>187 <circle cx="12" cy="12" r="2" fill="#4a4a4a"></circle>188 </svg>189 <svg class="icon" viewBox="0 0 24 24">190 <rect x="8" y="3" width="8" height="18" rx="2" ry="2" stroke="#4a4a4a" stroke-width="2" fill="none"></rect>191 <rect x="10" y="5" width="4" height="8" fill="#4a4a4a"></rect>192 </svg>193 <svg class="icon" viewBox="0 0 24 24">194 <circle cx="12" cy="12" r="2" fill="#4a4a4a"></circle>195 </svg>196 </div>197 <div class="status-right">198 <!-- wifi -->199 <svg class="icon" viewBox="0 0 24 24">200 <path d="M2 8c5-4 15-4 20 0" stroke="#4a4a4a" stroke-width="2" fill="none"></path>201 <path d="M5 12c3-3 11-3 14 0" stroke="#4a4a4a" stroke-width="2" fill="none"></path>202 <path d="M8 16c2-2 6-2 8 0" stroke="#4a4a4a" stroke-width="2" fill="none"></path>203 <circle cx="12" cy="19" r="2" fill="#4a4a4a"></circle>204 </svg>205 <!-- battery -->206 <svg class="icon" viewBox="0 0 24 24">207 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#4a4a4a" stroke-width="2" fill="none"></rect>208 <rect x="21" y="9" width="2" height="6" fill="#4a4a4a"></rect>209 <rect x="4" y="8" width="12" height="8" fill="#4a4a4a"></rect>210 </svg>211 </div>212 </div>213 214 <!-- Main Content -->215 <div class="content">216 <div class="avatar">👤</div>217 218 <div class="title">Add Fitbit profile info</div>219 220 <div class="subtitle">221 Your profile info helps personalize some metrics, like stride length and speed. To choose who sees this info, go to sharing settings in your Account > Social & Sharing > Privacy.222 </div>223 224 <div class="section-title">Your profile info</div>225 226 <div class="form-row">227 <div class="field">228 <div class="label">Height</div>229 <div class="input">165 cm</div>230 </div>231 <div class="field">232 <div class="label">Weight</div>233 <div class="input">60 kg</div>234 </div>235 </div>236 237 <div class="field field-full dropdown">238 <div class="label">Sex</div>239 <div class="input">Female</div>240 <svg class="chevron" viewBox="0 0 24 24">241 <path d="M6 9l6 6 6-6" stroke="#2E7D68" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>242 </svg>243 </div>244 245 <div class="note">246 Fitbit uses sex to calculate metrics like calories burned, and to provide reference points you can use for comparison247 </div>248 </div>249 250 <!-- Bottom actions -->251 <div class="bottom-actions">252 <div class="link-exit">Exit</div>253 <div class="btn-primary">Save & continue</div>254 </div>255 256 <div class="gesture"></div>257</div>258</body>259</html>