GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>About You - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;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: #EDEDED;29    font-size: 40px;30    letter-spacing: 1px;31  }32  .status-left { display: flex; align-items: center; gap: 20px; }33  .status-right { display: flex; align-items: center; gap: 24px; }34  .icon-wifi, .icon-battery, .icon-airplane {35    width: 46px; height: 46px; opacity: 0.9;36  }37  .icon-battery rect, .icon-battery line { stroke: #EDEDED; }38 39  /* Help icon */40  .help-btn {41    position: absolute;42    top: 150px;43    right: 36px;44    width: 70px; height: 70px;45    border-radius: 50%;46    border: 2px solid #5f6368;47    color: #c9d1d9;48    display: flex; align-items: center; justify-content: center;49    font-weight: bold;50    font-size: 40px;51    opacity: 0.9;52  }53 54  /* Content */55  .content {56    position: absolute;57    top: 210px;58    left: 60px;59    right: 60px;60    text-align: center;61  }62 63  .heart {64    width: 74px; height: 74px;65    margin: 50px auto 24px;66  }67  .title {68    font-size: 74px;69    font-weight: 600;70    margin: 0 0 24px;71  }72  .subtitle {73    max-width: 900px;74    margin: 0 auto;75    font-size: 34px;76    line-height: 1.5;77    color: #B0BEC5;78  }79 80  /* Avatar */81  .avatar {82    width: 160px; height: 160px; border-radius: 50%;83    background: #C2185B;84    color: #FFF;85    display: flex; align-items: center; justify-content: center;86    font-size: 72px; font-weight: 700;87    margin: 54px auto 18px;88  }89  .email {90    color: #A7B0B5;91    font-size: 34px;92    margin-bottom: 46px;93  }94 95  /* Form grid */96  .form-grid {97    width: 960px;98    margin: 10px auto 0;99    display: grid;100    grid-template-columns: 1fr 1fr;101    gap: 36px 40px;102  }103  .field {104    background: #1C1C1C;105    border: 1px solid #2E2E2E;106    border-radius: 16px;107    height: 150px;108    padding: 26px 30px;109    box-sizing: border-box;110    text-align: left;111    position: relative;112  }113  .field-label {114    color: #9CA5AB;115    font-size: 34px;116  }117  .field-value {118    color: #EDEDED;119    font-size: 40px;120    margin-top: 18px;121  }122  .chevron {123    position: absolute;124    right: 24px;125    top: 50%;126    transform: translateY(-50%);127    width: 38px; height: 38px;128    opacity: 0.8;129  }130 131  /* Bottom progress dots */132  .dots {133    position: absolute;134    bottom: 170px;135    left: 0; right: 0;136    display: flex;137    justify-content: center;138    gap: 22px;139  }140  .dot {141    width: 16px; height: 16px; border-radius: 50%;142    background: #424242;143  }144  .dot.active { background: #FFFFFF; }145 146  /* Next button */147  .next-btn {148    position: absolute;149    bottom: 120px;150    right: 60px;151    width: 320px;152    height: 120px;153    background: #8FA8F0;154    color: #0F1835;155    border-radius: 18px;156    display: flex; align-items: center; justify-content: center;157    font-weight: 700;158    font-size: 44px;159  }160 161  /* Gesture bar (visual only) */162  .gesture-bar {163    position: absolute;164    bottom: 20px;165    left: 50%;166    transform: translateX(-50%);167    width: 420px; height: 10px; border-radius: 5px;168    background: #EDEDED;169    opacity: 0.9;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Status Bar -->177  <div class="status-bar">178    <div class="status-left">179      <div>10:04</div>180      <!-- simple airplane icon (just to mimic extra icons on left) -->181      <svg class="icon-airplane" viewBox="0 0 24 24" fill="#EDEDED">182        <path d="M2 13l20-9-7 10 7 2-9 3-3 4-2-7-6-3z"/>183      </svg>184    </div>185    <div class="status-right">186      <svg class="icon-wifi" viewBox="0 0 24 24" fill="#EDEDED">187        <path d="M12 20a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 20zm6.99-6.29a10 10 0 0 0-13.98 0l1.42 1.42a8 8 0 0 1 11.14 0l1.42-1.42zm3.54-3.54a15 15 0 0 0-21.08 0l1.42 1.42a13 13 0 0 1 18.24 0l1.42-1.42z"/>188      </svg>189      <svg class="icon-battery" viewBox="0 0 28 16" fill="none">190        <rect x="1" y="3" width="22" height="10" rx="2" stroke="#EDEDED" stroke-width="2"/>191        <rect x="3" y="5" width="18" height="6" fill="#EDEDED"/>192        <rect x="24" y="6" width="3" height="4" fill="#EDEDED"/>193      </svg>194    </div>195  </div>196 197  <!-- Help button -->198  <div class="help-btn">?</div>199 200  <!-- Main Content -->201  <div class="content">202    <svg class="heart" viewBox="0 0 24 24">203      <path fill="#9FA8DA" d="M12 21s-7.2-4.35-9.4-8.24C.6 9.1 2.22 5.5 5.6 5.5c2 0 3.14 1.08 4.4 2.44C11.26 6.58 12.4 5.5 14.4 5.5c3.38 0 5 3.6 2.99 7.26C19.2 16.65 12 21 12 21z"/>204    </svg>205 206    <div class="title">About you</div>207    <div class="subtitle">208      This information lets Fit estimate calories, distance, and the intensity of your activity. You'll also get coaching that's tailored to you.209    </div>210 211    <div class="avatar">C</div>212    <div class="email">dbwscratch.test.id4@gmail.com</div>213 214    <div class="form-grid">215      <div class="field">216        <div class="field-label">Gender</div>217        <div class="field-value" style="opacity:0.6">Select</div>218        <svg class="chevron" viewBox="0 0 24 24" fill="#9CA5AB">219          <path d="M7 10l5 5 5-5H7z"/>220        </svg>221      </div>222 223      <div class="field">224        <div class="field-label">Birthday</div>225        <div class="field-value">Dec 30, 1992</div>226        <svg class="chevron" viewBox="0 0 24 24" fill="#9CA5AB">227          <path d="M7 10l5 5 5-5H7z"/>228        </svg>229      </div>230 231      <div class="field">232        <div class="field-label">Weight</div>233        <div class="field-value" style="opacity:0.6">Set weight</div>234        <svg class="chevron" viewBox="0 0 24 24" fill="#9CA5AB">235          <path d="M7 10l5 5 5-5H7z"/>236        </svg>237      </div>238 239      <div class="field">240        <div class="field-label">Height</div>241        <div class="field-value" style="opacity:0.6">Set height</div>242        <svg class="chevron" viewBox="0 0 24 24" fill="#9CA5AB">243          <path d="M7 10l5 5 5-5H7z"/>244        </svg>245      </div>246    </div>247  </div>248 249  <!-- Progress dots -->250  <div class="dots">251    <div class="dot active"></div>252    <div class="dot"></div>253  </div>254 255  <!-- Next button -->256  <div class="next-btn">Next</div>257 258  <!-- Gesture bar -->259  <div class="gesture-bar"></div>260</div>261</body>262</html>