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>Amazon - Sign in</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Top gradient header */16  .header {17    width: 100%;18    height: 180px;19    background: linear-gradient(90deg, #77d4cf 0%, #9fe6c7 100%);20    padding: 24px 32px 16px 32px;21    box-sizing: border-box;22  }23  .status-bar {24    display: flex; align-items: center; justify-content: space-between;25    color: #1b1b1b; font-size: 30px; opacity: 0.9;26  }27  .status-left { display: flex; align-items: center; gap: 16px; }28  .status-right { display: flex; align-items: center; gap: 18px; }29  .status-dot {30    width: 10px; height: 10px; background: #1b1b1b; border-radius: 50%;31  }32  .appbar {33    margin-top: 18px;34    display: flex; align-items: center; justify-content: space-between;35  }36  .logo {37    font-weight: 700; font-size: 54px; color: #111111; letter-spacing: 0.5px;38  }39  .logo .in { font-weight: 600; font-size: 36px; color: #111111; margin-left: 6px; }40  .header-icons { display: flex; align-items: center; gap: 28px; }41  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #111; stroke-width: 3; }42 43  /* Main content */44  .content { padding: 40px 40px 0 40px; }45  .title {46    text-align: center;47    color: #2d2d2d;48    font-size: 54px;49    line-height: 1.26;50    margin: 24px 40px 36px 40px;51  }52  .btn {53    width: 100%;54    height: 120px;55    border-radius: 10px;56    font-size: 40px; font-weight: 600;57    display: flex; align-items: center; justify-content: center;58    margin-bottom: 26px;59    box-sizing: border-box;60    cursor: default;61  }62  .btn-primary {63    background: #f3ca66;64    border: 2px solid #c9a447;65    color: #111111;66  }67  .btn-secondary {68    background: #eef0f4;69    border: 2px solid #cfd3d8;70    color: #333333;71  }72  .work-link {73    text-align: center;74    color: #333; font-size: 34px;75    margin: 22px 0 30px 0;76  }77  .work-link a { color: #1a79d9; text-decoration: none; }78 79  /* Feature rows */80  .features { margin-top: 20px; }81  .feature {82    display: flex; align-items: center;83    padding: 28px 10px;84    gap: 36px;85  }86  .img-ph {87    width: 170px; height: 150px; background: #E0E0E0;88    border: 1px solid #BDBDBD; color: #757575;89    display: flex; align-items: center; justify-content: center;90    text-align: center; font-size: 26px; border-radius: 6px;91  }92  .feat-text {93    color: #2f2f2f; font-size: 44px; line-height: 1.32;94    max-width: 760px;95  }96 97  /* Bottom navigation */98  .bottom-nav {99    position: absolute; left: 0; bottom: 60px;100    width: 100%; height: 130px; background: #ffffff;101    border-top: 1px solid #e3e3e3;102    display: flex; align-items: center; justify-content: space-around;103  }104  .nav-item { width: 140px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; }105  .nav-item svg { width: 56px; height: 56px; stroke: #1d1d1d; stroke-width: 3; fill: none; }106  .active-indicator {107    position: absolute; top: -6px; width: 70px; height: 16px; background: #0fa8a6; border-radius: 10px;108  }109  .badge {110    position: absolute; right: 22px; top: 16px;111    background: #0fa8a6; color: #fff; border-radius: 12px;112    font-size: 26px; padding: 4px 10px;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Header -->120  <div class="header">121    <div class="status-bar">122      <div class="status-left">123        <div>11:59</div>124        <div class="status-dot"></div>125        <div class="status-dot"></div>126        <div class="status-dot"></div>127      </div>128      <div class="status-right">129        <!-- simple wifi and battery placeholders -->130        <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M11 18h2" stroke="#111" fill="none"/></svg>131        <svg viewBox="0 0 28 24"><rect x="3" y="6" width="20" height="12" rx="2" stroke="#111" fill="none"></rect><rect x="24" y="9" width="3" height="6" rx="1" fill="#111"></rect></svg>132      </div>133    </div>134    <div class="appbar">135      <div class="logo">amazon<span class="in">.in</span></div>136      <div class="header-icons">137        <div class="icon-btn">138          <!-- Bell -->139          <svg viewBox="0 0 24 24">140            <path d="M12 3c-3 0-5 2-5 5v4l-2 3h14l-2-3V8c0-3-2-5-5-5Z"></path>141            <circle cx="12" cy="20" r="2" fill="#111"></circle>142          </svg>143        </div>144        <div class="icon-btn">145          <!-- Search -->146          <svg viewBox="0 0 24 24">147            <circle cx="10" cy="10" r="7"></circle>148            <path d="M15 15l6 6"></path>149          </svg>150        </div>151      </div>152    </div>153  </div>154 155  <!-- Main content -->156  <div class="content">157    <div class="title">Sign in for the best experience</div>158 159    <div class="btn btn-primary">Sign in</div>160    <div class="btn btn-secondary">Create account</div>161 162    <div class="work-link">Buying for work? <a href="#">Create a free business account</a></div>163 164    <div class="features">165      <div class="feature">166        <div class="img-ph">[IMG: Open package box illustration]</div>167        <div class="feat-text">Check order status and track, change or return items</div>168      </div>169      <div class="feature">170        <div class="img-ph">[IMG: Shopping bag with items illustration]</div>171        <div class="feat-text">Shop past purchases and everyday essentials</div>172      </div>173      <div class="feature">174        <div class="img-ph">[IMG: Pink list paper illustration]</div>175        <div class="feat-text">Create lists with items you want, now or later</div>176      </div>177    </div>178  </div>179 180  <!-- Bottom navigation -->181  <div class="bottom-nav">182    <div class="nav-item">183      <!-- Home icon -->184      <svg viewBox="0 0 24 24">185        <path d="M3 11l9-8 9 8M5 10v9h14v-9" />186      </svg>187    </div>188    <div class="nav-item">189      <div class="active-indicator"></div>190      <!-- User icon -->191      <svg viewBox="0 0 24 24">192        <circle cx="12" cy="8" r="4"></circle>193        <path d="M4 21c0-5 8-5 8-5s8 0 8 5" />194      </svg>195    </div>196    <div class="nav-item">197      <!-- Refresh icon -->198      <svg viewBox="0 0 24 24">199        <path d="M4 12a8 8 0 0 1 14-5M18 12a8 8 0 0 1-14 5"></path>200        <path d="M18 4v5h-5"></path>201      </svg>202    </div>203    <div class="nav-item">204      <!-- Cart icon -->205      <svg viewBox="0 0 24 24">206        <circle cx="9" cy="20" r="2"></circle>207        <circle cx="17" cy="20" r="2"></circle>208        <path d="M3 4h3l2 12h10l2-8H8"></path>209      </svg>210      <div class="badge">1</div>211    </div>212    <div class="nav-item">213      <!-- Menu icon -->214      <svg viewBox="0 0 24 24">215        <path d="M3 6h18M3 12h18M3 18h18"></path>216      </svg>217    </div>218  </div>219 220</div>221</body>222</html>