GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tell us who you are</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 140px;22    background: #c2380f;23    color: #fff;24  }25  .status-inner {26    position: absolute;27    top: 28px;28    left: 36px;29    right: 36px;30    display: flex;31    justify-content: space-between;32    align-items: center;33    font-size: 42px;34    font-weight: 600;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 30px;40  }41  .status-icons svg { display: block; }42 43  /* Content */44  .content {45    position: absolute;46    top: 160px;47    left: 48px;48    right: 48px;49    bottom: 140px;50    overflow: hidden;51  }52  h1 {53    margin: 28px 0 40px 0;54    font-size: 92px;55    line-height: 1.1;56    color: #212121;57    font-weight: 800;58  }59 60  .form {61    padding-right: 8px;62  }63 64  .field {65    position: relative;66    border: 2px solid #cfcfcf;67    border-radius: 22px;68    padding: 44px 120px 38px 34px;69    margin: 26px 0 36px 0;70  }71  .field.focused {72    border-color: #1e1e1e;73    border-width: 4px;74    padding: 42px 120px 36px 32px; /* compensate thicker border */75  }76  .field .label {77    position: absolute;78    top: -18px;79    left: 22px;80    background: #ffffff;81    padding: 0 14px;82    color: #8a8a8a;83    font-size: 28px;84  }85  .field .value {86    font-size: 44px;87    color: #222;88    margin: 8px 0 0 0;89  }90  .info-icon {91    position: absolute;92    right: 20px;93    top: 50%;94    transform: translateY(-50%);95    width: 84px;96    height: 84px;97    border: 2px solid #bdbdbd;98    border-radius: 50%;99    color: #6d6d6d;100    font-size: 44px;101    display: flex;102    align-items: center;103    justify-content: center;104  }105 106  .helper {107    margin: 8px 12px 36px 12px;108    font-size: 36px;109    line-height: 1.45;110    color: #4e4e4e;111  }112 113  .cta {114    margin: 20px 12px 0 12px;115    background: #f25a00;116    color: #fff;117    height: 128px;118    border-radius: 16px;119    display: flex;120    align-items: center;121    justify-content: center;122    font-weight: 700;123    font-size: 44px;124  }125 126  /* Bottom gesture bar */127  .os-bottom {128    position: absolute;129    left: 0; right: 0; bottom: 0;130    height: 120px;131    background: #000;132  }133  .home-indicator {134    position: absolute;135    left: 50%;136    bottom: 40px;137    transform: translateX(-50%);138    width: 330px;139    height: 14px;140    background: #d0d0d0;141    border-radius: 10px;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <!-- Status Bar -->149  <div class="status-bar">150    <div class="status-inner">151      <div>8:29</div>152      <div class="status-icons">153        <!-- WiFi icon -->154        <svg width="56" height="40" viewBox="0 0 24 14" fill="none">155          <path d="M12 13l2-2-2-2-2 2 2 2z" fill="#fff" opacity="0.95"/>156          <path d="M4 6c4.4-4 11.6-4 16 0" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.6"/>157          <path d="M7 9c3-2.7 7-2.7 10 0" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.8"/>158        </svg>159        <!-- Battery icon -->160        <svg width="56" height="32" viewBox="0 0 28 14" fill="none">161          <rect x="1" y="2" width="22" height="10" rx="2" stroke="#fff" stroke-width="2"/>162          <rect x="3" y="4" width="18" height="6" fill="#fff"/>163          <rect x="23.5" y="5" width="3" height="4" rx="1" fill="#fff"/>164        </svg>165      </div>166    </div>167  </div>168 169  <!-- Content -->170  <div class="content">171    <h1>Tell us who you are</h1>172 173    <div class="form">174      <div class="field">175        <div class="label">First Name</div>176        <div class="value">ABC</div>177      </div>178 179      <div class="field">180        <div class="label">Last Name</div>181        <div class="value">XYZ</div>182        <div class="info-icon">?</div>183      </div>184 185      <div class="field">186        <div class="label">Birthdate</div>187        <div class="value">03/01/1999</div>188        <div class="info-icon">?</div>189      </div>190 191      <div class="field focused">192        <div class="label">Gender</div>193        <div class="value">Man</div>194        <div class="info-icon">?</div>195      </div>196 197      <div class="helper">198        Your profile is public by default. Change your visibility any time in Privacy Controls.199      </div>200 201      <div class="cta">Continue</div>202    </div>203  </div>204 205  <!-- Bottom gesture area -->206  <div class="os-bottom">207    <div class="home-indicator"></div>208  </div>209</div>210</body>211</html>