GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Sign up UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0A0A0A;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 34px;27    letter-spacing: 0.5px;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .status-icon svg { display: block; }35 36  /* App bar */37  .app-bar {38    height: 140px;39    padding: 0 44px;40    display: flex;41    align-items: center;42    justify-content: space-between;43    border-bottom: 1px solid rgba(255,255,255,0.06);44  }45  .app-title {46    font-size: 72px;47    font-weight: 700;48    color: #FFFFFF;49  }50  .gear-btn {51    width: 72px;52    height: 72px;53  }54 55  /* Content */56  .content {57    padding: 40px 64px 0 64px;58    text-align: center;59  }60  .hero-img {61    width: 640px;62    height: 460px;63    margin: 40px auto 60px auto;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #757575;70    border-radius: 20px;71  }72 73  .intro-text {74    font-size: 44px;75    line-height: 1.45;76    color: #FFFFFF;77    margin: 0 auto 60px auto;78    max-width: 920px;79  }80 81  /* Buttons */82  .btn-group { width: 952px; margin: 0 auto; }83  .btn {84    height: 130px;85    border-radius: 80px;86    display: flex;87    align-items: center;88    padding: 0 40px;89    font-size: 40px;90    font-weight: 600;91    letter-spacing: 0.2px;92    margin-bottom: 30px;93    box-shadow: 0 2px 0 rgba(0,0,0,0.15);94  }95  .btn .icon {96    width: 86px;97    height: 86px;98    border-radius: 43px;99    display: flex;100    align-items: center;101    justify-content: center;102    margin-right: 32px;103    flex: 0 0 86px;104  }105  .btn-google { background: #FFFFFF; color: #222; }106  .btn-google .icon { background: #F5F5F5; }107 108  .btn-facebook { background: #3B63AE; color: #FFFFFF; }109  .btn-facebook .icon { background: rgba(255,255,255,0.18); }110 111  .btn-email { background: #368F69; color: #FFFFFF; }112  .btn-email .icon { background: rgba(255,255,255,0.18); }113 114  /* Terms */115  .terms {116    margin: 28px auto 40px auto;117    max-width: 960px;118    color: #A0A0A0;119    font-size: 30px;120    line-height: 1.6;121  }122  .terms a {123    color: #EDEDED;124    text-decoration: underline;125  }126 127  /* Login prompt */128  .have-account {129    font-size: 42px;130    margin-top: 10px;131    color: #FFFFFF;132  }133  .login-link {134    font-size: 40px;135    font-weight: 700;136    color: #FF8A57;137    margin-top: 18px;138    letter-spacing: 1px;139  }140 141  /* Bottom nav */142  .tabbar {143    position: absolute;144    left: 0;145    bottom: 0;146    width: 100%;147    height: 190px;148    background: #2A2A2A;149    display: flex;150    align-items: center;151    justify-content: space-around;152    border-top: 1px solid rgba(255,255,255,0.08);153  }154  .tab-item {155    width: 180px;156    height: 150px;157    display: flex;158    flex-direction: column;159    align-items: center;160    justify-content: center;161    color: #CFCFCF;162    font-size: 30px;163    gap: 16px;164  }165  .tab-item svg { display: block; }166  .tab-item.active { color: #FF8A57; }167 168  /* Home indicator */169  .home-indicator {170    position: absolute;171    bottom: 200px;172    left: 50%;173    transform: translateX(-50%);174    width: 300px;175    height: 12px;176    background: #FFFFFF;177    opacity: 0.9;178    border-radius: 6px;179  }180</style>181</head>182<body>183<div id="render-target">184 185  <!-- Status bar -->186  <div class="status-bar">187    <div class="status-left">3:43</div>188    <div class="status-right">189      <div class="status-icon">190        <!-- WiFi -->191        <svg width="46" height="34" viewBox="0 0 46 34" fill="none">192          <path d="M2 10c10-8 32-8 42 0" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>193          <path d="M8 16c7-6 23-6 30 0" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>194          <circle cx="23" cy="25" r="4" fill="#FFFFFF"/>195        </svg>196      </div>197      <div class="status-icon">198        <!-- Battery -->199        <svg width="60" height="32" viewBox="0 0 60 32" fill="none">200          <rect x="2" y="6" width="48" height="20" rx="4" stroke="#FFFFFF" stroke-width="3"/>201          <rect x="6" y="9" width="40" height="14" rx="2" fill="#FFFFFF"/>202          <rect x="52" y="11" width="6" height="10" rx="2" fill="#FFFFFF"/>203        </svg>204      </div>205    </div>206  </div>207 208  <!-- App bar -->209  <div class="app-bar">210    <div class="app-title">Sign up</div>211    <div class="gear-btn">212      <!-- Gear icon -->213      <svg width="72" height="72" viewBox="0 0 72 72" fill="none">214        <circle cx="36" cy="36" r="10" stroke="#FFFFFF" stroke-width="4"/>215        <path d="M36 8v10M36 54v10M8 36h10M54 36h10M14 14l7 7M51 51l7 7M14 58l7-7M58 14l-7 7" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>216      </svg>217    </div>218  </div>219 220  <!-- Content -->221  <div class="content">222    <div class="hero-img">[IMG: Sign up illustration]</div>223 224    <p class="intro-text">225      To discover all our tastebud tickling recipes and features, please sign up.226    </p>227 228    <div class="btn-group">229      <!-- Google -->230      <div class="btn btn-google">231        <div class="icon">232          <!-- Simple Google "G" -->233          <svg width="54" height="54" viewBox="0 0 54 54">234            <circle cx="27" cy="27" r="26" fill="#FFFFFF"/>235            <path d="M28 41c-8 0-14-6-14-14s6-14 14-14c3 0 6 1 8 3l-4 4c-1-1-2-2-4-2-5 0-8 3-8 9s3 9 8 9c4 0 7-3 8-6h-8v-5h14c1 9-6 17-14 17z" fill="#4285F4"/>236          </svg>237        </div>238        <div>Sign up with Google</div>239      </div>240 241      <!-- Facebook -->242      <div class="btn btn-facebook">243        <div class="icon">244          <svg width="54" height="54" viewBox="0 0 54 54">245            <circle cx="27" cy="27" r="26" fill="#294B87"/>246            <path d="M30 16h6v6h-6v4h5l-1 6h-4v12h-6V32h-4v-6h4v-5c0-3 2-5 6-5z" fill="#FFFFFF"/>247          </svg>248        </div>249        <div>Sign up with Facebook</div>250      </div>251 252      <!-- Email -->253      <div class="btn btn-email">254        <div class="icon">255          <svg width="54" height="54" viewBox="0 0 54 54" fill="none">256            <rect x="6" y="12" width="42" height="30" rx="5" stroke="#FFFFFF" stroke-width="4"/>257            <path d="M8 16l18 12 18-12" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"/>258          </svg>259        </div>260        <div>Sign up with email</div>261      </div>262    </div>263 264    <div class="terms">265      By signing up I accept the <a href="#">terms of use</a> and the <a href="#">data privacy policy</a>.266    </div>267 268    <div class="have-account">Already have an account?</div>269    <div class="login-link">LOG IN HERE</div>270  </div>271 272  <!-- Home indicator -->273  <div class="home-indicator"></div>274 275  <!-- Bottom tab bar -->276  <div class="tabbar">277    <div class="tab-item">278      <svg width="54" height="54" viewBox="0 0 54 54" fill="none">279        <path d="M9 27l18-14 18 14v16H33V31H21v12H9V27z" stroke="#CFCFCF" stroke-width="3" fill="none"/>280      </svg>281      <div>Home</div>282    </div>283    <div class="tab-item">284      <svg width="54" height="54" viewBox="0 0 54 54" fill="none">285        <circle cx="24" cy="24" r="16" stroke="#CFCFCF" stroke-width="3"/>286        <path d="M40 40l10 10" stroke="#CFCFCF" stroke-width="4" stroke-linecap="round"/>287      </svg>288      <div>Search</div>289    </div>290    <div class="tab-item">291      <svg width="54" height="54" viewBox="0 0 54 54" fill="none">292        <circle cx="27" cy="27" r="24" stroke="#CFCFCF" stroke-width="3"/>293        <path d="M27 14v26M14 27h26" stroke="#CFCFCF" stroke-width="4" stroke-linecap="round"/>294      </svg>295      <div>Create</div>296    </div>297    <div class="tab-item">298      <svg width="54" height="54" viewBox="0 0 54 54" fill="none">299        <rect x="12" y="8" width="30" height="38" rx="4" stroke="#CFCFCF" stroke-width="3"/>300        <rect x="18" y="12" width="18" height="4" fill="#CFCFCF"/>301        <path d="M18 22h18M18 29h18M18 36h18" stroke="#CFCFCF" stroke-width="3" stroke-linecap="round"/>302      </svg>303      <div>Shopping List</div>304    </div>305    <div class="tab-item active">306      <svg width="54" height="54" viewBox="0 0 54 54" fill="none">307        <circle cx="27" cy="20" r="10" stroke="#FF8A57" stroke-width="3"/>308        <path d="M10 46c4-10 30-10 34 0" stroke="#FF8A57" stroke-width="3" stroke-linecap="round"/>309      </svg>310      <div>Profile</div>311    </div>312  </div>313 314</div>315</body>316</html>