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>Generated UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status {21    height: 110px;22    background: #3f51b5;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 32px;27    font-weight: 600;28    font-size: 36px;29  }30  .status .right { margin-left: auto; display: flex; align-items: center; gap: 24px; opacity: .95; }31  .progress {32    height: 8px;33    background: linear-gradient(to right, #e74c3c 55%, transparent 55%);34  }35 36  /* Tabs */37  .tabs {38    height: 96px;39    display: flex;40    align-items: center;41    padding: 0 36px;42    gap: 64px;43    border-bottom: 1px solid #e5e5e5;44    color: #444;45  }46  .tabs span { font-size: 32px; white-space: nowrap; }47 48  /* Toolbar with icons */49  .toolbar {50    height: 140px;51    display: flex;52    align-items: center;53    padding: 0 40px;54    gap: 36px;55    background: #fff;56    border-bottom: 1px solid #eee;57  }58  .toolbar .spacer { flex: 1; }59  .icon {60    width: 64px;61    height: 64px;62    display: inline-flex;63    align-items: center;64    justify-content: center;65    color: #111;66  }67  .icon svg { width: 56px; height: 56px; stroke: #111; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }68 69  /* Newsletter section */70  .newsletter {71    background: #e8e5df;72    padding: 40px 40px 48px;73  }74  .newsletter .title {75    text-align: center;76    font-size: 34px;77    color: #555;78    margin-top: 10px;79    margin-bottom: 34px;80  }81  .email-input {82    width: 960px;83    margin: 0 auto;84    height: 100px;85    border: 2px solid #bdb7b0;86    background: #f3f1ee;87    display: flex;88    align-items: center;89    padding: 0 28px;90    color: #c9c5c1;91    font-weight: 700;92    letter-spacing: .5px;93    box-sizing: border-box;94  }95 96  /* Sections */97  .section-row {98    display: flex;99    align-items: center;100    justify-content: space-between;101    background: #e8e5df;102    padding: 36px 36px;103    border-top: 1px solid #ddd6cf;104    border-bottom: 1px solid #ddd6cf;105  }106  .section-row .label {107    font-size: 34px;108    letter-spacing: 3px;109    font-weight: 700;110    color: #333;111  }112  .plus {113    width: 44px; height: 44px;114    position: relative;115  }116  .plus::before, .plus::after {117    content: "";118    position: absolute;119    background: #111;120    border-radius: 2px;121  }122  .plus::before {123    width: 44px; height: 6px; top: 19px; left: 0;124  }125  .plus::after {126    width: 6px; height: 44px; top: 0; left: 19px;127  }128 129  /* Modal card */130  .modal {131    position: absolute;132    top: 910px;133    left: 28px;134    width: 1024px;135    background: #fff;136    border-radius: 18px;137    box-shadow: 0 10px 28px rgba(0,0,0,0.25);138    padding: 40px 44px 48px;139  }140  .modal h1 {141    margin: 8px 0 22px;142    font-size: 76px;143    line-height: 1.05;144  }145  .loading-row {146    display: flex;147    align-items: center;148    gap: 24px;149  }150  .spinner {151    width: 72px; height: 72px;152    border-radius: 50%;153    border: 8px solid #e6e6e6;154    border-left-color: #e74c3c;155    animation: spin 1.1s linear infinite;156  }157  .loading-row .text {158    font-size: 44px;159    color: #666;160    font-weight: 700;161  }162  @keyframes spin { to { transform: rotate(360deg); } }163 164  /* Links list */165  .links {166    background: #e8e5df;167    padding: 10px 0 28px;168  }169  .links .item {170    padding: 28px 40px;171    font-size: 34px;172    color: #6a6a6a;173  }174 175  /* Floating action button */176  .fab {177    position: absolute;178    right: 64px;179    bottom: 240px;180    width: 116px;181    height: 116px;182    border-radius: 50%;183    background: #3f51b5;184    box-shadow: 0 12px 18px rgba(0,0,0,0.25);185    display: flex;186    align-items: center;187    justify-content: center;188    color: #fff;189    font-size: 72px;190    line-height: 0;191  }192 193  /* Bottom nav bar + home indicator */194  .bottom-area {195    position: absolute;196    left: 0; right: 0; bottom: 0;197    height: 160px;198    background: #000;199  }200  .home-indicator {201    width: 260px;202    height: 14px;203    background: #c8c8c8;204    border-radius: 10px;205    position: absolute;206    left: 50%;207    transform: translateX(-50%);208    bottom: 42px;209    opacity: .9;210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status bar -->217  <div class="status">218    <div>7:21</div>219    <div class="right">220      <!-- Simple status glyphs -->221      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">222        <circle cx="12" cy="12" r="3"></circle>223        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M16.9 16.9l2.1 2.1M19.1 4.9l-2.2 2.2M4.9 19.1l2.2-2.2"></path>224      </svg>225      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">226        <path d="M2 10a10 10 0 0 1 20 0"></path>227        <path d="M6 10a6 6 0 0 1 12 0"></path>228        <circle cx="12" cy="18" r="2" fill="#fff" stroke="none"></circle>229      </svg>230      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">231        <rect x="3" y="7" width="18" height="10" rx="2"></rect>232        <rect x="19" y="9" width="2" height="6" fill="#fff" stroke="none"></rect>233      </svg>234    </div>235  </div>236  <div class="progress"></div>237 238  <!-- Tabs -->239  <div class="tabs">240    <span>Pottery Barn Kids</span>241    <span>Pottery Barn Teen</span>242    <span>Pottery Barn Dorm</span>243    <span>Williams Sonoma</span>244  </div>245 246  <!-- Toolbar -->247  <div class="toolbar">248    <div class="icon">249      <svg viewBox="0 0 24 24">250        <path d="M3 6h18M3 12h18M3 18h18"></path>251      </svg>252    </div>253    <div class="icon">254      <svg viewBox="0 0 24 24">255        <circle cx="11" cy="11" r="7"></circle>256        <path d="M21 21l-4.2-4.2"></path>257      </svg>258    </div>259    <div class="spacer"></div>260    <div class="icon">261      <svg viewBox="0 0 24 24">262        <path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"></path>263      </svg>264    </div>265    <div class="icon">266      <svg viewBox="0 0 24 24">267        <path d="M3 5h3l2 11h11l2-8H7"></path>268        <circle cx="9" cy="20" r="1.5" fill="#111" stroke="none"></circle>269        <circle cx="18" cy="20" r="1.5" fill="#111" stroke="none"></circle>270      </svg>271    </div>272  </div>273 274  <!-- Newsletter -->275  <div class="newsletter">276    <div class="title">Join our VIP list for inspiration, new arrivals &amp; more.</div>277    <div class="email-input">ENTER YOUR EMAIL</div>278  </div>279 280  <!-- Section: Customer Service -->281  <div class="section-row">282    <div class="label">CUSTOMER SERVICE</div>283    <div class="plus"></div>284  </div>285 286  <!-- Modal "Please Wait" -->287  <div class="modal">288    <h1>Please Wait</h1>289    <div class="loading-row">290      <div class="spinner"></div>291      <div class="text">Loading...</div>292    </div>293  </div>294 295  <!-- Section: Business to Business -->296  <div class="section-row" style="margin-top: 160px;">297    <div class="label">BUSINESS TO BUSINESS</div>298    <div class="plus"></div>299  </div>300 301  <div class="links">302    <div class="item">Accessibility</div>303    <div class="item">Privacy</div>304    <div class="item">Terms</div>305  </div>306 307  <!-- Floating action button -->308  <div class="fab">+</div>309 310  <!-- Bottom system bar -->311  <div class="bottom-area">312    <div class="home-indicator"></div>313  </div>314 315</div>316</body>317</html>