GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Form UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15    color: #222;16  }17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 160px;24    background: #B33018;25    color: #FFF;26  }27  .status-bar .time {28    position: absolute;29    left: 40px;30    top: 48px;31    font-size: 46px;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-icons {36    position: absolute;37    right: 40px;38    top: 40px;39    display: flex;40    gap: 26px;41    align-items: center;42  }43  /* Page content */44  .content {45    position: absolute;46    top: 160px;47    left: 60px;48    right: 60px;49  }50  .title {51    font-size: 84px;52    font-weight: 700;53    color: #333;54    line-height: 1.05;55    margin: 56px 0 40px 0;56  }57 58  .field {59    position: relative;60    border: 2px solid #CFCFCF;61    border-radius: 22px;62    padding: 26px 32px;63    margin: 34px 0;64    height: 164px;65    box-sizing: border-box;66    background: #FFF;67  }68  .field.focused {69    border-color: #1F1F1F;70    border-width: 3px;71  }72  .field-label {73    position: absolute;74    top: -22px;75    left: 24px;76    font-size: 34px;77    color: #888;78    background: #FFF;79    padding: 0 10px;80  }81  .field-value {82    font-size: 56px;83    color: #111;84    margin-top: 26px;85  }86  .hint-icon {87    position: absolute;88    right: 26px;89    top: 46px;90    width: 72px;91    height: 72px;92  }93 94  .helper-text {95    font-size: 36px;96    color: #666;97    line-height: 1.45;98    margin-top: 24px;99    width: 960px;100  }101 102  /* Keyboard placeholder */103  .keyboard-placeholder {104    position: absolute;105    left: 0;106    bottom: 0;107    width: 1080px;108    height: 980px;109    background: #E0E0E0;110    border-top: 1px solid #BDBDBD;111    display: flex;112    align-items: center;113    justify-content: center;114    color: #757575;115    font-size: 40px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <div class="status-bar">123    <div class="time">8:19</div>124    <div class="status-icons">125      <!-- WiFi icon -->126      <svg width="56" height="56" viewBox="0 0 24 24">127        <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>128        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>129        <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>130        <circle cx="12" cy="19" r="2" fill="#fff"/>131      </svg>132      <!-- Battery icon -->133      <svg width="60" height="56" viewBox="0 0 28 18">134        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>135        <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"/>136        <rect x="3" y="5" width="18" height="8" rx="1" fill="#fff"/>137      </svg>138    </div>139  </div>140 141  <div class="content">142    <div class="title">Tell us who you are</div>143 144    <div class="field">145      <div class="field-label">First Name</div>146      <div class="field-value">ABC</div>147    </div>148 149    <div class="field focused">150      <div class="field-label">Last Name</div>151      <div class="field-value">Re</div>152    </div>153 154    <div class="field">155      <div class="field-label">Birthdate</div>156      <svg class="hint-icon" viewBox="0 0 24 24">157        <circle cx="12" cy="12" r="10" stroke="#999" stroke-width="2" fill="none"/>158        <text x="12" y="16" text-anchor="middle" font-size="14" fill="#999" font-family="Arial">?</text>159      </svg>160    </div>161 162    <div class="field">163      <div class="field-label">Gender</div>164      <svg class="hint-icon" viewBox="0 0 24 24">165        <circle cx="12" cy="12" r="10" stroke="#999" stroke-width="2" fill="none"/>166        <text x="12" y="16" text-anchor="middle" font-size="14" fill="#999" font-family="Arial">?</text>167      </svg>168    </div>169 170    <div class="helper-text">171      Your profile is public by default. Change your visibility any time in Privacy Controls.172    </div>173  </div>174 175  <div class="keyboard-placeholder">[IMG: On-screen Keyboard]</div>176 177</div>178</body>179</html>