GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Almost there - Form</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: #0b0b0b;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 34px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #d7d7d7;29    font-size: 38px;30    letter-spacing: 1px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37  .icon-dot {38    width: 10px; height: 10px; background: #d7d7d7; border-radius: 50%;39  }40 41  /* Header */42  .header {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 140px;48    display: flex;49    align-items: center;50    gap: 24px;51    padding: 0 34px;52    box-sizing: border-box;53  }54  .close-btn {55    width: 92px; height: 92px; border-radius: 46px;56    border: 1px solid #3a3a3a; display: flex; align-items: center; justify-content: center;57  }58  .close-btn svg { width: 40px; height: 40px; }59  .header-title {60    font-size: 64px;61    font-weight: 800;62    letter-spacing: .2px;63  }64 65  /* Card container */66  .card {67    position: absolute;68    top: 280px;69    left: 20px;70    width: 1040px;71    height: 980px;72    border: 1px solid #23262b;73    border-radius: 18px;74    box-sizing: border-box;75    padding: 36px;76    background: #0f1115;77  }78  .card h2 {79    margin: 8px 0 30px;80    font-size: 48px;81    font-weight: 700;82    color: #dcdcdc;83  }84 85  .field {86    width: 100%;87    height: 128px;88    border: 1px solid #2b2f36;89    border-radius: 16px;90    background: #111318;91    display: flex;92    align-items: center;93    padding: 0 28px;94    box-sizing: border-box;95    color: #eaeaea;96    font-size: 40px;97  }98  .field + .field { margin-top: 28px; }99  .field.placeholder { color: #8c929c; }100  .field .right-arrow {101    margin-left: auto;102    opacity: .8;103  }104  .flag-box {105    width: 76px; height: 52px; border: 1px solid #3a3f47; border-radius: 6px; margin-right: 20px;106    position: relative; overflow: hidden; background: #e0e0e0;107    display: flex; align-items: center; justify-content: center; color: #555; font-size: 26px;108  }109  .cc {110    margin-right: 16px;111    color: #dcdcdc;112  }113  .link-row {114    display: flex;115    justify-content: flex-end;116    margin-top: 22px;117  }118  .link-row a {119    color: #7aa3ff;120    text-decoration: none;121    font-size: 38px;122  }123 124  .btn {125    width: 100%;126    height: 128px;127    border-radius: 16px;128    border: none;129    margin-top: 32px;130    background: linear-gradient(#2977cf, #1853a8);131    color: #fff;132    font-size: 48px;133    font-weight: 700;134    letter-spacing: .3px;135  }136 137  /* Gesture bar */138  .gesture {139    position: absolute;140    bottom: 34px;141    left: 50%;142    transform: translateX(-50%);143    width: 300px;144    height: 10px;145    background: #e6e6e6;146    border-radius: 6px;147    opacity: .85;148  }149</style>150</head>151<body>152<div id="render-target">153  <!-- Status Bar -->154  <div class="status-bar">155    <div>5:43</div>156    <div class="status-right">157      <div class="icon-dot"></div>158      <span>42°</span>159      <div class="icon-dot"></div>160      <div class="icon-dot"></div>161      <div class="icon-dot"></div>162    </div>163  </div>164 165  <!-- Header -->166  <div class="header">167    <div class="close-btn">168      <svg viewBox="0 0 24 24" fill="#ffffff">169        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>170      </svg>171    </div>172    <div class="header-title">Almost there!</div>173  </div>174 175  <!-- Form Card -->176  <div class="card">177    <h2>Provide your contact info</h2>178 179    <!-- Country dropdown -->180    <div class="field placeholder">181      United States182      <svg class="right-arrow" width="36" height="36" viewBox="0 0 24 24" fill="#9aa0aa">183        <path d="M7 10l5 5 5-5z"></path>184      </svg>185    </div>186 187    <!-- Street address -->188    <div class="field placeholder">Enter your street address</div>189 190    <!-- Mobile number -->191    <div class="field">192      <div class="flag-box">US</div>193      <div class="cc">+1</div>194      <div class="placeholder" style="color:#8c929c;">Mobile number</div>195    </div>196 197    <div class="link-row">198      <a href="#">I only have a landline</a>199    </div>200 201    <button class="btn">Continue</button>202  </div>203 204  <div class="gesture"></div>205</div>206</body>207</html>