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>Temu - Choose Account Modal</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    border-radius: 0;16    box-shadow: none;17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18    color: #212121;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 130px;28    background: #000000;29    color: #ffffff;30    display: flex;31    align-items: center;32    padding: 0 40px;33    box-sizing: border-box;34    font-size: 40px;35  }36  .sb-left { flex: 1; }37  .sb-right { display: flex; gap: 24px; align-items: center; }38  .sb-dot { width: 14px; height: 14px; background: #ffffff; border-radius: 50%; opacity: 0.9; }39 40  /* Page content under modal (dimmed) */41  .page {42    position: absolute;43    top: 130px;44    left: 0;45    width: 1080px;46    height: 2070px;47    background: #f7f7f7;48  }49 50  .close-btn {51    position: absolute;52    top: 60px;53    left: 36px;54    width: 70px;55    height: 70px;56    display: flex;57    align-items: center;58    justify-content: center;59    color: #000;60  }61  .close-btn svg { width: 42px; height: 42px; stroke: #000; stroke-width: 6; }62 63  .brand {64    position: absolute;65    top: 50px;66    left: 0;67    width: 100%;68    text-align: center;69    font-weight: 800;70    font-size: 76px;71    letter-spacing: 6px;72    color: #d66f00;73  }74 75  .benefits {76    position: absolute;77    top: 210px;78    left: 0;79    width: 100%;80    padding: 0 80px;81    box-sizing: border-box;82    display: flex;83    justify-content: space-between;84    align-items: flex-start;85  }86  .benefit {87    width: 420px;88    text-align: center;89  }90  .benefit .icon-wrap {91    width: 140px;92    height: 140px;93    margin: 0 auto 26px auto;94    border-radius: 50%;95    background: #f0e6dd;96    display: flex;97    align-items: center;98    justify-content: center;99  }100  .benefit .label {101    font-size: 40px;102    font-weight: 700;103    margin-bottom: 8px;104  }105  .benefit .sub {106    font-size: 32px;107    color: #6b6b6b;108  }109 110  /* Dim overlay */111  .overlay {112    position: absolute;113    top: 130px;114    left: 0;115    width: 1080px;116    height: 2070px;117    background: rgba(0,0,0,0.55);118  }119 120  /* Modal card */121  .modal {122    position: absolute;123    top: 470px;124    left: 50%;125    transform: translateX(-50%);126    width: 960px;127    background: #ffffff;128    border-radius: 28px;129    box-shadow: 0 18px 40px rgba(0,0,0,0.25);130    padding: 48px 56px 40px 56px;131    box-sizing: border-box;132  }133  .temu-logo {134    width: 120px;135    height: 120px;136    border-radius: 60px;137    background: #ff7a00;138    color: #ffffff;139    font-weight: 800;140    display: flex;141    align-items: center;142    justify-content: center;143    margin: 10px auto 24px auto;144    font-size: 42px;145    letter-spacing: 1px;146  }147  .modal h1 {148    margin: 8px 0 8px 0;149    font-size: 58px;150    text-align: center;151    font-weight: 700;152  }153  .modal .subhead {154    text-align: center;155    color: #6d6d6d;156    font-size: 32px;157    margin-bottom: 30px;158  }159 160  .list {161    margin-top: 8px;162    border-top: 1px solid #e0e0e0;163  }164  .row {165    display: flex;166    align-items: center;167    padding: 26px 0;168    gap: 28px;169    border-bottom: 1px solid #e0e0e0;170  }171  .avatar {172    width: 82px;173    height: 82px;174    border-radius: 50%;175    display: flex;176    align-items: center;177    justify-content: center;178    color: #ffffff;179    font-weight: 700;180    font-size: 36px;181    flex-shrink: 0;182  }183  .avatar.purple { background: #6c3cd2; }184  .avatar.brown { background: #9b7766; }185 186  .row .info {187    display: flex;188    flex-direction: column;189  }190  .info .name {191    font-size: 36px;192    font-weight: 700;193    margin-bottom: 6px;194  }195  .info .email {196    font-size: 30px;197    color: #6d6d6d;198  }199 200  .add-icon {201    width: 84px;202    height: 84px;203    border-radius: 42px;204    background: #eaeaea;205    display: flex;206    align-items: center;207    justify-content: center;208  }209  .add-icon svg { width: 38px; height: 38px; fill: #5f6368; }210 211  .share-note {212    margin-top: 26px;213    padding-top: 26px;214    border-top: 1px solid #e0e0e0;215    color: #6d6d6d;216    font-size: 30px;217    line-height: 1.45;218  }219 220  /* Bottom gesture area */221  .bottom-bar {222    position: absolute;223    bottom: 0;224    left: 0;225    width: 1080px;226    height: 140px;227    background: #000000;228  }229  .home-pill {230    position: absolute;231    bottom: 38px;232    left: 50%;233    transform: translateX(-50%);234    width: 240px;235    height: 18px;236    background: #e0e0e0;237    border-radius: 16px;238    opacity: 0.85;239  }240 241  /* Simple icons for benefits */242  .truck svg, .return svg { width: 70px; height: 70px; stroke: #9a7a5f; stroke-width: 6; fill: none; }243</style>244</head>245<body>246<div id="render-target">247 248  <div class="status-bar">249    <div class="sb-left">9:41</div>250    <div class="sb-right">251      <!-- simplified status icons -->252      <svg width="36" height="36" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="3" fill="#fff"/></svg>253      <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/></svg>254      <div class="sb-dot"></div>255      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>256      <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 10h18M6 14h12" stroke="#fff" stroke-width="2"/></svg>257    </div>258  </div>259 260  <div class="page">261    <div class="close-btn">262      <svg viewBox="0 0 24 24">263        <line x1="4" y1="4" x2="20" y2="20"></line>264        <line x1="20" y1="4" x2="4" y2="20"></line>265      </svg>266    </div>267 268    <div class="brand">TEMU</div>269 270    <div class="benefits">271      <div class="benefit">272        <div class="icon-wrap truck">273          <svg viewBox="0 0 24 24">274            <rect x="3" y="6" width="10" height="8" rx="1"></rect>275            <rect x="13" y="8" width="6" height="6" rx="1"></rect>276            <circle cx="7" cy="16" r="2" fill="#9a7a5f" stroke="none"></circle>277            <circle cx="17" cy="16" r="2" fill="#9a7a5f" stroke="none"></circle>278          </svg>279        </div>280        <div class="label">Free shipping</div>281        <div class="sub">On all orders</div>282      </div>283      <div class="benefit">284        <div class="icon-wrap return">285          <svg viewBox="0 0 24 24">286            <rect x="5" y="5" width="14" height="14" rx="2"></rect>287            <path d="M9 12h6M11 10l-2 2 2 2" stroke-linecap="round" stroke-linejoin="round"></path>288          </svg>289        </div>290        <div class="label">Free returns</div>291        <div class="sub">Within 90 days</div>292      </div>293    </div>294  </div>295 296  <div class="overlay"></div>297 298  <div class="modal">299    <div class="temu-logo">TEMU</div>300    <h1>Choose an account</h1>301    <div class="subhead">to continue to Temu</div>302 303    <div class="list">304      <div class="row">305        <div class="avatar purple">J</div>306        <div class="info">307          <div class="name">Jason Smith</div>308          <div class="email">jasonsmith9810244659106538@gmail.com</div>309        </div>310      </div>311 312      <div class="row">313        <div class="avatar brown">A</div>314        <div class="info">315          <div class="name">Amelia miller</div>316          <div class="email">amelia.miller2709@gmail.com</div>317        </div>318      </div>319 320      <div class="row" style="border-bottom:none;">321        <div class="add-icon">322          <svg viewBox="0 0 24 24">323            <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />324            <path d="M4 20c0-3.5 4-5 8-5s8 1.5 8 5" />325            <path d="M19 7v6M22 10h-6" />326          </svg>327        </div>328        <div class="info">329          <div class="name" style="font-weight:700;">Add another account</div>330        </div>331      </div>332    </div>333 334    <div class="share-note">335      To continue, Google will share your name, email address, and profile picture with Temu.336    </div>337  </div>338 339  <div class="bottom-bar">340    <div class="home-pill"></div>341  </div>342</div>343</body>344</html>