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>Hamleys Mobile UI Mock</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  /* Status bar */16  .status-bar {17    height: 110px; background: #2c2c2c; color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 32px; font-size: 40px;20  }21  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }22  .sb-icon svg { width: 40px; height: 40px; fill: #cfcfcf; }23 24  /* Promo banner */25  .promo {26    height: 140px; background: #8bd2e8;27    display: flex; align-items: center; padding: 0 24px; color: #0f2c38;28    gap: 24px; font-size: 38px; font-weight: 600;29  }30  .promo .arrow {31    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;32    background: rgba(255,255,255,0.5); border-radius: 50%;33  }34  .promo .cta { color: #d3162c; text-decoration: underline; font-weight: 800; margin-left: 12px; }35 36  /* Top header */37  .topbar {38    height: 170px; background: #cf1c2d; display: flex; align-items: center;39    padding: 0 24px; gap: 24px; color: #fff;40  }41  .logo-box {42    width: 180px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;43    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px;44    flex: 0 0 auto;45  }46  .search-wrap {47    flex: 1 1 auto; height: 100px; background: #fff; border-radius: 50px;48    display: flex; align-items: center; padding: 0 32px; gap: 20px;49  }50  .search-wrap input {51    border: none; outline: none; font-size: 40px; flex: 1; color: #777;52  }53  .top-actions { display: flex; gap: 24px; }54  .action-btn {55    width: 96px; height: 96px; background: rgba(255,255,255,0.2); border-radius: 50%;56    display: flex; align-items: center; justify-content: center;57  }58  .action-btn svg { width: 56px; height: 56px; fill: #fff; }59 60  /* Hero image placeholder */61  .hero {62    height: 900px; margin: 0; display: flex; align-items: center; justify-content: center;63    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-size: 44px;64  }65 66  /* Ad strip under hero */67  .cashback {68    height: 100px; background: #ffffff; border-top: 1px solid #eee; border-bottom: 1px solid #eee;69    display: flex; align-items: center; gap: 24px; padding: 0 24px; font-size: 32px; color: #333;70  }71  .cashback .partner {72    width: 180px; height: 70px; background: #E0E0E0; border: 1px solid #BDBDBD;73    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 8px;74    flex: 0 0 auto;75  }76 77  /* Carousel indicators */78  .carousel {79    height: 90px; display: flex; align-items: center; justify-content: center; gap: 26px; background: #fff;80  }81  .dot {82    width: 28px; height: 28px; border-radius: 50%; background: #d0d0d0;83  }84  .dot.active { width: 100px; height: 28px; border-radius: 16px; background: #cf1c2d; }85 86  /* Section: Shop by Age */87  .section {88    padding: 40px 36px 0;89  }90  .section h2 {91    text-align: center; font-size: 74px; margin: 24px 0 32px; font-weight: 800; color: #111;92  }93  .age-row {94    display: flex; gap: 24px; overflow: hidden;95  }96  .age-card {97    width: 330px; height: 210px; background: #E0E0E0; border: 1px solid #BDBDBD;98    border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #757575;99  }100 101  /* Bottom nav */102  .bottom-nav {103    position: absolute; left: 0; bottom: 48px; width: 100%; height: 240px; background: #ffffff;104    border-top: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: space-around;105    padding-top: 20px;106  }107  .nav-item {108    width: 180px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;109    color: #888; font-size: 34px; gap: 16px;110  }111  .nav-item .icon-wrap {112    width: 100px; height: 100px; border: 2px solid #d9d9d9; border-radius: 18px; display: flex; align-items: center; justify-content: center;113  }114  .nav-item svg { width: 56px; height: 56px; fill: #888; }115  .nav-item.active { color: #cf1c2d; font-weight: 700; }116  .nav-item.active .icon-wrap { border-color: #cf1c2d; }117  .nav-item.active svg { fill: #cf1c2d; }118 119  /* Home indicator */120  .home-indicator {121    position: absolute; left: 50%; transform: translateX(-50%);122    bottom: 12px; width: 420px; height: 20px; background: #000; border-radius: 10px;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="status-bar">131    <div class="status-left">132      <div>2:11</div>133      <div class="sb-icon">134        <svg viewBox="0 0 24 24"><path d="M12 2a8 8 0 0 0 0 20c-3.9-1.6-6-5.3-6-10s2.1-8.4 6-10z"/></svg>135      </div>136      <div class="sb-icon">137        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>138      </div>139      <div class="sb-icon">140        <svg viewBox="0 0 24 24"><path d="M10 3h4v2h-4zM4 7h16v2H4zm2 4h12v2H6zm4 4h4v2h-4z"/></svg>141      </div>142      <div class="sb-icon">143        <svg viewBox="0 0 24 24"><circle cx="2" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="22" cy="12" r="2"/></svg>144      </div>145    </div>146    <div class="status-right">147      <div class="sb-icon">148        <svg viewBox="0 0 24 24"><path d="M12 2l6 10H6z"/></svg>149      </div>150      <div class="sb-icon">151        <svg viewBox="0 0 24 24"><path d="M3 12l5 5 13-13"/></svg>152      </div>153      <div class="sb-icon">154        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2"/></svg>155      </div>156    </div>157  </div>158 159  <!-- Promo banner -->160  <div class="promo">161    <div class="arrow">162      <svg viewBox="0 0 24 24"><path d="M14 4l-8 8 8 8" stroke="#0f2c38" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>163    </div>164    <div style="flex:1;">165      Use Code HAM10 - Addn.10% off on cart above Rs. 4,499/- <span class="cta">SHOP NOW!!</span>166    </div>167    <div class="arrow">168      <svg viewBox="0 0 24 24"><path d="M10 4l8 8-8 8" stroke="#0f2c38" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>169    </div>170  </div>171 172  <!-- Top header with search -->173  <div class="topbar">174    <div class="logo-box">[IMG: Hamleys logo]</div>175    <div class="search-wrap">176      <svg viewBox="0 0 24 24" style="width:44px;height:44px; fill:#cf1c2d;"><circle cx="11" cy="11" r="8"/><path d="M21 21l-5-5" stroke="#cf1c2d" stroke-width="2" fill="none" stroke-linecap="round"/></svg>177      <input type="text" value="Toys for 5 yr old girl..." />178    </div>179    <div class="top-actions">180      <div class="action-btn">181        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.6-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.4-7 10-7 10z"/></svg>182      </div>183      <div class="action-btn">184        <svg viewBox="0 0 24 24"><path d="M6 7h12v13H6z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>185      </div>186    </div>187  </div>188 189  <!-- Hero promotional image -->190  <div class="hero">191    [IMG: Christmas promo illustration with tree, fireplace, and bears]192  </div>193 194  <!-- Cashback strip -->195  <div class="cashback">196    <div class="partner">[IMG: MobiKwik logo]</div>197    <div>Addn. Cashback of Upto Rs. 500 on min. transaction of Rs. 1999. Valid only on MobiKwik wallet.</div>198  </div>199 200  <!-- Carousel dots -->201  <div class="carousel">202    <div class="dot active"></div>203    <div class="dot"></div>204    <div class="dot"></div>205    <div class="dot"></div>206    <div class="dot"></div>207    <div class="dot"></div>208  </div>209 210  <!-- Shop by Age section -->211  <div class="section">212    <h2>Shop by Age</h2>213    <div class="age-row">214      <div class="age-card">[IMG: Age 0-2 toys card]</div>215      <div class="age-card">[IMG: Age 3-4 toys card]</div>216      <div class="age-card">[IMG: Age 5-7 toys card]</div>217      <div class="age-card">[IMG: Age 8+ toys card]</div>218    </div>219  </div>220 221  <!-- Bottom navigation -->222  <div class="bottom-nav">223    <div class="nav-item active">224      <div class="icon-wrap">225        <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11z"/></svg>226      </div>227      <div>Home</div>228    </div>229    <div class="nav-item">230      <div class="icon-wrap">231        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>232      </div>233      <div>Category</div>234    </div>235    <div class="nav-item">236      <div class="icon-wrap">237        <svg viewBox="0 0 24 24"><rect x="2" y="5" width="14" height="10"/><rect x="16" y="9" width="6" height="6"/><circle cx="7" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg>238      </div>239      <div>Tracking</div>240    </div>241    <div class="nav-item">242      <div class="icon-wrap">243        <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>244      </div>245      <div>Profile</div>246    </div>247  </div>248 249  <!-- Home indicator -->250  <div class="home-indicator"></div>251 252</div>253</body>254</html>