GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Form Screen</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  .topbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 170px;24    background: #BF2F0A;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31  }32  .status-left, .status-right {33    display: flex;34    align-items: center;35    gap: 16px;36    font-weight: 600;37    font-size: 40px;38  }39  .status-icon svg { display: block; }40 41  /* Content area */42  .content {43    position: absolute;44    top: 170px;45    left: 0;46    right: 0;47    bottom: 0;48    padding: 48px 64px 160px;49    box-sizing: border-box;50    overflow: hidden;51  }52 53  .title {54    font-size: 84px;55    font-weight: 700;56    color: #222;57    line-height: 1.1;58    margin: 24px 0 48px;59  }60 61  .field {62    position: relative;63    border: 2px solid #CFCFCF;64    border-radius: 18px;65    height: 160px;66    margin-bottom: 40px;67    box-sizing: border-box;68    padding: 36px 120px 24px 28px;69    background: #fff;70  }71  .field.active { border-color: #222; box-shadow: inset 0 0 0 1px #222; }72  .field-label {73    position: absolute;74    top: -20px;75    left: 28px;76    font-size: 34px;77    color: #8A8A8A;78    background: #fff;79    padding: 0 10px;80  }81  .field-value {82    font-size: 48px;83    color: #222;84    letter-spacing: 0.2px;85  }86  .placeholder { color: #9E9E9E; }87 88  .help-icon {89    position: absolute;90    right: 24px;91    top: 50%;92    transform: translateY(-50%);93    width: 74px;94    height: 74px;95    border-radius: 50%;96    border: 2px solid #BDBDBD;97    color: #6E6E6E;98    display: flex;99    justify-content: center;100    align-items: center;101    font-size: 42px;102    font-weight: 600;103    background: #fff;104  }105 106  .info {107    font-size: 40px;108    line-height: 1.45;109    color: #4A4A4A;110    margin: 12px 0 60px;111  }112 113  .btn {114    width: calc(100% - 40px);115    margin: 0 20px;116    height: 150px;117    background: #F2571A;118    border-radius: 16px;119    color: #fff;120    font-size: 52px;121    font-weight: 700;122    display: flex;123    align-items: center;124    justify-content: center;125    box-shadow: 0 4px 0 rgba(0,0,0,0.08);126  }127 128  /* Optional bottom gesture bar (simulating device) */129  .gesture-bar {130    position: absolute;131    bottom: 24px;132    left: 50%;133    transform: translateX(-50%);134    width: 280px;135    height: 12px;136    background: #D0D0D0;137    border-radius: 12px;138  }139</style>140</head>141<body>142<div id="render-target">143  <div class="topbar">144    <div class="status-left">145      <div>8:28</div>146      <div class="status-icon">147        <!-- simple phone icon -->148        <svg width="36" height="36" viewBox="0 0 24 24" fill="none">149          <rect x="6" y="3" width="12" height="18" rx="2" stroke="#ffffff" stroke-width="2"/>150          <rect x="10" y="17" width="4" height="2" fill="#ffffff"/>151        </svg>152      </div>153    </div>154    <div class="status-right">155      <!-- WiFi icon -->156      <div class="status-icon">157        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">158          <path d="M2 9c5-5 15-5 20 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>159          <path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>160          <path d="M8 15c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>161          <circle cx="12" cy="18" r="1.5" fill="#ffffff"/>162        </svg>163      </div>164      <!-- Battery icon -->165      <div class="status-icon">166        <svg width="48" height="40" viewBox="0 0 28 18" fill="none">167          <rect x="1" y="3" width="22" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>168          <rect x="24" y="6" width="3" height="6" rx="1" fill="#ffffff"/>169          <rect x="3" y="5" width="16" height="8" rx="1" fill="#ffffff"/>170        </svg>171      </div>172    </div>173  </div>174 175  <div class="content">176    <div class="title">Tell us who you are</div>177 178    <div class="field">179      <div class="field-label">First Name</div>180      <div class="field-value">ABC</div>181    </div>182 183    <div class="field">184      <div class="field-label">Last Name</div>185      <div class="field-value">XYZ</div>186    </div>187 188    <div class="field active">189      <div class="field-label">Birthdate</div>190      <div class="field-value">03/01/1999</div>191      <div class="help-icon">?</div>192    </div>193 194    <div class="field">195      <div class="field-label">Gender</div>196      <div class="field-value placeholder">Gender</div>197      <div class="help-icon">?</div>198    </div>199 200    <div class="info">201      Your profile is public by default. Change your visibility any time in Privacy Controls.202    </div>203 204    <div class="btn">Continue</div>205  </div>206 207  <div class="gesture-bar"></div>208</div>209</body>210</html>