GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Fitbit Profile Info - Mock</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: "Roboto", Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #F3F5F4;18 color: #1f2d2a;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 120px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 40px;32 color: #1f2d2a;33 font-weight: 600;34 font-size: 40px;35 }36 .status-left {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .status-right {42 display: flex;43 align-items: center;44 gap: 28px;45 }46 .icon {47 width: 40px;48 height: 40px;49 }50 51 /* Content */52 .content {53 position: absolute;54 top: 160px;55 left: 60px;56 right: 60px;57 padding-bottom: 200px;58 }59 60 .avatar-wrap {61 width: 130px;62 height: 130px;63 border-radius: 65px;64 border: 10px solid #2E7C71;65 display: flex;66 align-items: center;67 justify-content: center;68 margin-bottom: 40px;69 }70 .avatar-wrap svg {71 width: 80px;72 height: 80px;73 }74 75 h1 {76 font-size: 72px;77 line-height: 86px;78 margin: 10px 0 30px 0;79 font-weight: 700;80 letter-spacing: -0.5px;81 }82 83 .desc {84 font-size: 38px;85 line-height: 56px;86 color: #51605C;87 margin-bottom: 40px;88 }89 90 .section-title {91 font-size: 44px;92 font-weight: 700;93 margin: 40px 0 30px;94 }95 96 /* Form controls */97 .form-row {98 display: flex;99 gap: 36px;100 margin-bottom: 34px;101 }102 .field {103 flex: 1;104 }105 .label {106 font-size: 34px;107 color: #3c4a46;108 margin-bottom: 16px;109 }110 .input-box {111 height: 160px;112 border: 3px solid #BFC9C6;113 border-radius: 20px;114 background: #FFFFFF;115 display: flex;116 align-items: center;117 padding: 0 36px;118 font-size: 54px;119 color: #1f2d2a;120 box-sizing: border-box;121 }122 123 .select-full {124 width: 960px;125 }126 .dropdown {127 position: relative;128 width: 960px;129 }130 .dropdown .input-box {131 justify-content: space-between;132 }133 .caret {134 width: 36px;135 height: 36px;136 }137 138 .helper {139 font-size: 34px;140 color: #51605C;141 margin-top: 26px;142 max-width: 960px;143 line-height: 50px;144 }145 146 /* Bottom actions */147 .bottom-actions {148 position: absolute;149 bottom: 190px;150 left: 60px;151 right: 60px;152 display: flex;153 justify-content: space-between;154 align-items: center;155 }156 .exit {157 font-size: 42px;158 color: #236E61;159 cursor: default;160 }161 .cta {162 background: #236E61;163 color: #FFFFFF;164 font-size: 46px;165 padding: 34px 46px;166 border-radius: 60px;167 box-shadow: 0 6px 0 rgba(0,0,0,0.08);168 }169 170 /* Gesture bar */171 .gesture {172 position: absolute;173 bottom: 72px;174 left: 50%;175 transform: translateX(-50%);176 width: 460px;177 height: 12px;178 background: #9AA4A1;179 border-radius: 8px;180 }181</style>182</head>183<body>184<div id="render-target">185 <!-- Status bar -->186 <div class="status-bar">187 <div class="status-left">188 <div>10:10</div>189 <!-- a couple minimalist status glyphs -->190 <svg class="icon" viewBox="0 0 24 24">191 <path d="M3 18h18M6 14h12M9 10h6M11 6h2" stroke="#465653" stroke-width="2" fill="none" stroke-linecap="round"/>192 </svg>193 <svg class="icon" viewBox="0 0 24 24">194 <circle cx="12" cy="12" r="9" stroke="#465653" stroke-width="2" fill="none"/>195 <circle cx="12" cy="12" r="2" fill="#465653"/>196 </svg>197 </div>198 <div class="status-right">199 <!-- Wi-Fi -->200 <svg class="icon" viewBox="0 0 24 24">201 <path d="M2 9c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 18l2 2-2 2-2-2 2-2z" stroke="#465653" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 <!-- Battery -->204 <svg class="icon" viewBox="0 0 28 24">205 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#465653" stroke-width="2" fill="none"/>206 <rect x="4.5" y="8.5" width="12.5" height="7" fill="#465653"/>207 <rect x="22.5" y="9" width="3" height="6" rx="1" fill="#465653"/>208 </svg>209 </div>210 </div>211 212 <!-- Content -->213 <div class="content">214 <div class="avatar-wrap">215 <!-- Simple outlined avatar icon -->216 <svg viewBox="0 0 64 64">217 <circle cx="32" cy="24" r="12" stroke="#2E7C71" stroke-width="6" fill="none"/>218 <path d="M12 52c4-10 36-10 40 0" stroke="#2E7C71" stroke-width="6" fill="none" stroke-linecap="round"/>219 </svg>220 </div>221 222 <h1>Add Fitbit profile info</h1>223 224 <div class="desc">225 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.226 </div>227 228 <div class="section-title">Your profile info</div>229 230 <div class="form-row">231 <div class="field">232 <div class="label">Height</div>233 <div class="input-box">165 cm</div>234 </div>235 <div class="field">236 <div class="label">Weight</div>237 <div class="input-box">74 kg</div>238 </div>239 </div>240 241 <div class="label">Sex</div>242 <div class="dropdown">243 <div class="input-box">244 <span>Male</span>245 <svg class="caret" viewBox="0 0 24 24">246 <path d="M6 9l6 6 6-6" stroke="#2E7C71" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 </div>250 251 <div class="helper">252 Fitbit uses sex to calculate metrics like calories burned, and to provide reference points you can use for comparison253 </div>254 </div>255 256 <!-- Bottom actions -->257 <div class="bottom-actions">258 <div class="exit">Exit</div>259 <div class="cta">Save & continue</div>260 </div>261 262 <!-- Gesture bar -->263 <div class="gesture"></div>264</div>265</body>266</html>