GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Promo App Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #111;15  }16 17  /* Top status bar */18  .status-bar {19    height: 90px;20    padding: 0 30px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-weight: 600;25    font-size: 30px;26  }27  .status-left, .status-right { display: flex; align-items: center; gap: 18px; }28  .dot { width: 10px; height: 10px; border-radius: 50%; background: #111; opacity: 0.75; }29 30  /* Search row */31  .search-row {32    height: 120px;33    padding: 0 30px;34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .search-box {39    flex: 1;40    height: 84px;41    border-radius: 42px;42    background: #F3F4F6;43    display: flex;44    align-items: center;45    gap: 18px;46    padding: 0 26px;47    color: #8A8F98;48    font-size: 34px;49  }50  .barcode {51    width: 82px;52    height: 82px;53    border-radius: 16px;54    display: flex;55    align-items: center;56    justify-content: center;57  }58 59  /* Stories */60  .stories {61    padding: 16px 24px 18px 24px;62    display: flex;63    align-items: center;64    gap: 34px;65    height: 180px;66  }67  .story-ring {68    width: 150px;69    height: 150px;70    border-radius: 50%;71    padding: 8px;72    background: conic-gradient(#ff2aa1, #ffd84c, #63e3ff, #8e6bff, #ff2aa1);73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .story {78    width: 134px;79    height: 134px;80    border-radius: 50%;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    display: flex;84    align-items: center;85    justify-content: center;86    color: #757575;87    font-size: 24px;88    text-align: center;89    line-height: 1.1;90    padding: 10px;91  }92 93  /* Hero banner */94  .hero {95    margin-top: 6px;96    height: 1650px;97    background:98      radial-gradient(1200px 800px at 70% 30%, rgba(60,60,60,0.25), transparent 60%),99      radial-gradient(900px 700px at 20% 60%, rgba(70,70,70,0.35), transparent 60%),100      #0a0a0a;101    color: #fff;102    position: relative;103    padding: 70px 40px 0 40px;104  }105  .promo-small {106    font-size: 56px;107    letter-spacing: 2px;108    font-weight: 800;109  }110  .promo-big {111    margin-top: 28px;112    font-size: 138px;113    font-weight: 900;114    letter-spacing: 4px;115    line-height: 1.02;116  }117  .code-pill {118    margin-top: 36px;119    background: #fff;120    color: #111;121    display: inline-flex;122    align-items: center;123    padding: 18px 32px;124    border-radius: 10px;125    font-size: 46px;126    font-weight: 800;127    letter-spacing: 4px;128  }129  .code-pill span {130    color: #111;131  }132  .models {133    position: absolute;134    left: 0;135    right: 0;136    bottom: 210px;137    display: flex;138    justify-content: space-between;139    padding: 0 28px;140    gap: 20px;141  }142  .model {143    width: calc(50% - 18px);144    height: 880px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    display: flex;148    align-items: flex-end;149    justify-content: center;150    color: #cfcfcf;151    font-size: 28px;152    text-transform: uppercase;153    letter-spacing: 1px;154    position: relative;155  }156  .model::before {157    content: "[IMG: Model wearing black PUMA apparel]";158    color: #757575;159    position: absolute;160    top: 30px;161    left: 50%;162    transform: translateX(-50%);163    font-size: 26px;164    white-space: nowrap;165  }166 167  /* Bottom nav */168  .bottom-nav {169    position: absolute;170    bottom: 0;171    left: 0; right: 0;172    height: 200px;173    border-top: 1px solid #E6E6E6;174    background: #ffffff;175    display: flex;176    align-items: center;177    justify-content: space-around;178    padding-bottom: 10px;179  }180  .nav-item {181    width: 20%;182    display: flex;183    flex-direction: column;184    align-items: center;185    gap: 14px;186    font-size: 28px;187    color: #222;188  }189  .nav-item .label {190    font-weight: 700;191    font-size: 30px;192    letter-spacing: 1px;193  }194  .nav-item.active .dot-active {195    width: 12px; height: 12px; border-radius: 50%; background: #111;196  }197  .badge {198    position: absolute;199    top: -8px;200    right: 32px;201    background: #D3A95A;202    color: #111;203    width: 54px; height: 54px;204    border-radius: 27px;205    font-size: 28px;206    display: flex; align-items: center; justify-content: center;207    font-weight: 800;208    border: 2px solid #fff;209  }210 211  /* Utility for simple SVG icons size */212  .ico { width: 56px; height: 56px; }213  .ico-lg { width: 64px; height: 64px; }214 215  /* Helper for subtle caption on placeholders */216  .placeholder-caption {217    color: #757575;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status Bar -->225  <div class="status-bar">226    <div class="status-left">227      <div style="font-size:34px;">8:17</div>228      <div class="dot"></div>229      <div class="dot"></div>230      <div class="dot"></div>231      <div class="dot" style="width:14px;height:14px;"></div>232    </div>233    <div class="status-right">234      <svg class="ico" viewBox="0 0 24 24">235        <path d="M3 12h18" stroke="#111" stroke-width="2" stroke-linecap="round"/>236        <path d="M6 16h12" stroke="#111" stroke-width="2" stroke-linecap="round"/>237      </svg>238      <svg class="ico" viewBox="0 0 24 24">239        <path d="M3 18h18" stroke="#111" stroke-width="2" stroke-linecap="round"/>240        <path d="M3 6h18" stroke="#111" stroke-width="2" stroke-linecap="round"/>241      </svg>242    </div>243  </div>244 245  <!-- Search Row -->246  <div class="search-row">247    <div class="search-box">248      <svg class="ico" viewBox="0 0 24 24">249        <circle cx="11" cy="11" r="7" stroke="#7A7F87" stroke-width="2" fill="none"/>250        <path d="M16.5 16.5L21 21" stroke="#7A7F87" stroke-width="2" stroke-linecap="round"/>251      </svg>252      <div>Search...</div>253    </div>254    <div class="barcode" aria-label="Barcode">255      <svg class="ico-lg" viewBox="0 0 36 36">256        <rect x="3" y="6" width="3" height="24" fill="#111"/>257        <rect x="9" y="6" width="2" height="24" fill="#111"/>258        <rect x="13" y="6" width="4" height="24" fill="#111"/>259        <rect x="20" y="6" width="2" height="24" fill="#111"/>260        <rect x="24" y="6" width="3" height="24" fill="#111"/>261        <rect x="30" y="6" width="2" height="24" fill="#111"/>262      </svg>263    </div>264  </div>265 266  <!-- Stories -->267  <div class="stories">268    <div class="story-ring">269      <div class="story">[IMG: Story]</div>270    </div>271    <div class="story-ring">272      <div class="story">[IMG: Story]</div>273    </div>274    <div class="story-ring">275      <div class="story">[IMG: Story]</div>276    </div>277    <div class="story-ring">278      <div class="story">[IMG: Story]</div>279    </div>280    <div class="story-ring">281      <div class="story">[IMG: Story]</div>282    </div>283  </div>284 285  <!-- Hero Banner -->286  <div class="hero">287    <div class="promo-small">30% OFF ALMOST EVERYTHING*</div>288    <div class="promo-big">CYBER WEEK</div>289    <div class="code-pill">290      <span>CODE: FASTERCYBER</span>291    </div>292 293    <div class="models">294      <div class="model"></div>295      <div class="model"></div>296    </div>297  </div>298 299  <!-- Bottom Navigation -->300  <div class="bottom-nav">301    <div class="nav-item active">302      <div style="position: relative;">303        <svg class="ico-lg" viewBox="0 0 24 24">304          <path d="M4 12l8-7 8 7v8a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-8z" fill="#111"/>305        </svg>306      </div>307      <div class="label">HOME</div>308      <div class="dot-active"></div>309    </div>310 311    <div class="nav-item">312      <svg class="ico-lg" viewBox="0 0 24 24">313        <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"/>314        <path d="M8 2v4M16 2v4" stroke="#111" stroke-width="2" stroke-linecap="round"/>315      </svg>316      <div class="label">DROPS</div>317    </div>318 319    <div class="nav-item">320      <svg class="ico-lg" viewBox="0 0 24 24">321        <circle cx="11" cy="11" r="6" stroke="#111" stroke-width="2" fill="none"/>322        <path d="M16.5 16.5L21 21" stroke="#111" stroke-width="2" stroke-linecap="round"/>323      </svg>324      <div class="label">SHOP</div>325    </div>326 327    <div class="nav-item">328      <svg class="ico-lg" viewBox="0 0 24 24">329        <path d="M6 7h14l-2 10H8L6 7z" fill="none" stroke="#111" stroke-width="2"/>330        <circle cx="9" cy="20" r="1.6" fill="#111"/>331        <circle cx="17" cy="20" r="1.6" fill="#111"/>332      </svg>333      <div class="label">CART</div>334    </div>335 336    <div class="nav-item" style="position: relative;">337      <svg class="ico-lg" viewBox="0 0 24 24">338        <circle cx="12" cy="8" r="4" fill="none" stroke="#111" stroke-width="2"/>339        <path d="M4 21c2-4 6-6 8-6s6 2 8 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>340      </svg>341      <div class="label">ACCOUNT</div>342      <div class="badge">9</div>343    </div>344  </div>345 346</div>347</body>348</html>