GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Hamleys Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 110px; background: #2d2d2d; color: #fff;18 display: flex; align-items: center; padding: 0 30px; font-weight: 600;19 font-size: 42px;20 }21 .status-icons { margin-left: 20px; display: flex; gap: 28px; align-items: center; }22 .dot { width: 14px; height: 14px; background: #bdbdbd; border-radius: 50%; display: inline-block; }23 .status-right { margin-left: auto; display: flex; gap: 26px; align-items: center; }24 .status-ico { width: 34px; height: 34px; background: #bdbdbd; border-radius: 50%; }25 26 /* Promo banner */27 .promo {28 position: absolute; top: 110px; left: 0; right: 0;29 height: 160px; background: #86cfe6; color: #0a2a33;30 display: flex; align-items: center; justify-content: center;31 font-size: 36px; font-weight: 700; letter-spacing: 0.2px;32 }33 .promo .arrow {34 position: absolute; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent;35 top: 70px;36 }37 .promo .arrow.left { left: 24px; border-right: 26px solid #103a46; }38 .promo .arrow.right { right: 24px; border-left: 26px solid #103a46; }39 .promo .red { color: #d61a2a; }40 41 /* Red header with search */42 .header {43 position: absolute; top: 270px; left: 0; right: 0;44 height: 210px; background: #d3162d; display: flex; align-items: center;45 padding: 0 34px; box-sizing: border-box; color: #fff; gap: 24px;46 }47 .brand {48 font-size: 64px; font-weight: 800; font-style: italic; margin-right: 18px;49 }50 .search-wrap {51 flex: 1; height: 110px; background: #ffffff; border-radius: 55px;52 display: flex; align-items: center; padding: 0 34px; box-sizing: border-box;53 }54 .search-wrap input {55 border: none; outline: none; flex: 1; font-size: 36px; color: #666;56 }57 .icon-btn { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }58 .icon-btn svg { width: 50px; height: 50px; }59 60 /* Content area */61 .content {62 position: absolute; top: 480px; left: 0; right: 0; bottom: 220px; overflow-y: hidden;63 }64 .section { padding: 30px 44px; box-sizing: border-box; }65 .title-center {66 text-align: center; font-size: 68px; font-weight: 800; color: #111; margin: 24px 0 34px;67 }68 69 /* Age cards */70 .age-row { display: flex; gap: 40px; justify-content: center; }71 .age-card {72 width: 300px; height: 220px; border-radius: 28px; position: relative; overflow: hidden;73 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;74 color: #757575; font-weight: 700;75 }76 .age-label {77 position: absolute; bottom: 12px; left: 16px; background: rgba(0,0,0,0.55); color: #fff;78 padding: 8px 16px; border-radius: 16px; font-size: 28px;79 }80 81 .divider { height: 16px; background: #eeeeee; margin-top: 30px; }82 83 /* Christmas Picks section */84 .xmas {85 background: #c81428; padding: 40px 28px 50px; color: #fff;86 }87 .xmas .title-center { color: #fff; margin-bottom: 28px; }88 .cards-row { display: flex; gap: 40px; padding: 22px; box-sizing: border-box; }89 .product-card {90 width: 460px; background: #fff; border-radius: 16px; box-shadow: 10px 10px 0 #00000033;91 padding: 24px; box-sizing: border-box; color: #222; position: relative;92 }93 .img-placeholder {94 width: 100%; height: 340px; background: #E0E0E0; border: 1px solid #BDBDBD;95 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;96 border-radius: 8px;97 }98 .wishlist-circle {99 position: absolute; top: 20px; right: 20px; width: 74px; height: 74px; background: #fff; border-radius: 50%;100 box-shadow: 0 2px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;101 }102 .product-title { font-size: 34px; font-weight: 700; margin: 18px 0 12px; line-height: 1.25; }103 .price-row { display: flex; gap: 16px; align-items: baseline; margin-bottom: 8px; }104 .mrp { color: #777; font-size: 30px; }105 .strike { text-decoration: line-through; margin-left: 6px; }106 .sale { color: #1a8c3a; font-size: 28px; margin-top: 8px; }107 108 .add-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; }109 .add-text { color: #d3162d; font-size: 36px; font-weight: 800; }110 .bag-rect {111 width: 64px; height: 64px; border: 2px solid #d3162d; border-radius: 12px; display: flex; align-items: center; justify-content: center;112 }113 .bag-rect svg { width: 38px; height: 38px; }114 115 /* Bottom nav */116 .bottom-nav {117 position: absolute; left: 0; right: 0; bottom: 80px;118 height: 170px; background: #ffffff; border-top: 1px solid #e0e0e0;119 display: flex; justify-content: space-around; align-items: center;120 }121 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9e9e9e; font-size: 28px; }122 .nav-item.active { color: #d3162d; font-weight: 700; }123 .nav-item svg { width: 58px; height: 58px; }124 125 /* Gesture bar */126 .gesture {127 position: absolute; left: 340px; right: 340px; bottom: 20px; height: 18px; background: #000; border-radius: 10px;128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Status Bar -->135 <div class="status-bar">136 2:12137 <div class="status-icons">138 <span class="dot"></span>139 <span class="dot"></span>140 <span class="dot"></span>141 </div>142 <div class="status-right">143 <div class="status-ico"></div>144 <div class="status-ico"></div>145 <div class="status-ico"></div>146 <div class="status-ico"></div>147 </div>148 </div>149 150 <!-- Promo Banner -->151 <div class="promo">152 <div class="arrow left"></div>153 Use Code HAM10 - Addn.10% off on cart above Rs. 4,499/- <span class="red"> SHOP NOW!!!</span>154 <div class="arrow right"></div>155 </div>156 157 <!-- Header with Search -->158 <div class="header">159 <div class="brand">Hamleys</div>160 <div class="search-wrap">161 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#b0b0b0" stroke-width="2" style="margin-right:16px">162 <circle cx="11" cy="11" r="7"></circle>163 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>164 </svg>165 <input type="text" value="" placeholder="Toys for 5 yr old girl....">166 </div>167 <div class="icon-btn">168 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">169 <path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2 4.5 4.5 0 0 1 8 2c0 5.65-7 10-9 10z"/>170 </svg>171 </div>172 <div class="icon-btn">173 <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">174 <path d="M7 7h10v12H7z"></path>175 <path d="M9 7c0-2 6-2 6 0"></path>176 </svg>177 </div>178 </div>179 180 <!-- Main Content -->181 <div class="content">182 <div class="section">183 <div class="title-center">Shop by Age</div>184 <div class="age-row">185 <div class="age-card">186 [IMG: Bear with Christmas hat]187 <div class="age-label">0-18 months</div>188 </div>189 <div class="age-card">190 [IMG: Smiling bear & gifts]191 <div class="age-label">18-36 months</div>192 </div>193 <div class="age-card">194 [IMG: Bear & festive icons]195 <div class="age-label">3-5 years</div>196 </div>197 </div>198 <div class="divider"></div>199 </div>200 201 <div class="section xmas">202 <div class="title-center">Top Christmas Picks</div>203 <div class="cards-row">204 <!-- Product Card 1 -->205 <div class="product-card">206 <div class="wishlist-circle">207 <svg viewBox="0 0 24 24" fill="none" stroke="#d3162d" stroke-width="2">208 <path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2 4.5 4.5 0 0 1 8 2c0 5.65-7 10-9 10z"/>209 </svg>210 </div>211 <div class="img-placeholder">[IMG: Gabby's Dollhouse Product]</div>212 <div class="product-title">Gabbys Dollhouse, Purrfect Dollhouse with 2 Toy Figures, 8 F...</div>213 <div class="price-row">214 <div class="mrp">MRP</div>215 <div class="mrp strike">₹9999</div>216 <div style="font-size:32px; color:#111; font-weight:800;">₹9499</div>217 </div>218 <div class="sale">Save 5%</div>219 <div class="add-row">220 <div class="add-text">Add</div>221 <div class="bag-rect">222 <svg viewBox="0 0 24 24" fill="none" stroke="#d3162d" stroke-width="2">223 <path d="M7 7h10v12H7z"></path>224 <path d="M9 7c0-2 6-2 6 0"></path>225 </svg>226 </div>227 </div>228 </div>229 230 <!-- Product Card 2 (partially visible) -->231 <div class="product-card">232 <div class="img-placeholder">[IMG: Hot Wheels 3 Inch Pack]</div>233 <div class="product-title">Hot Wheels 3Inch Die-Cast 2 Pack Assortment</div>234 <div class="price-row">235 <div class="mrp">MRP</div>236 <div style="font-size:32px; color:#111; font-weight:800;">₹299</div>237 </div>238 </div>239 </div>240 </div>241 </div>242 243 <!-- Bottom Navigation -->244 <div class="bottom-nav">245 <div class="nav-item active">246 <svg viewBox="0 0 24 24" fill="none" stroke="#d3162d" stroke-width="2">247 <path d="M3 11l9-8 9 8"></path>248 <path d="M5 12v8h14v-8"></path>249 </svg>250 Home251 </div>252 <div class="nav-item">253 <svg viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2">254 <rect x="3" y="3" width="8" height="8"></rect>255 <rect x="13" y="3" width="8" height="8"></rect>256 <rect x="3" y="13" width="8" height="8"></rect>257 <rect x="13" y="13" width="8" height="8"></rect>258 </svg>259 Category260 </div>261 <div class="nav-item">262 <svg viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2">263 <rect x="1" y="8" width="15" height="9"></rect>264 <path d="M16 11h4v6h-4z"></path>265 <circle cx="6" cy="18" r="2"></circle>266 <circle cx="18" cy="18" r="2"></circle>267 </svg>268 Tracking269 </div>270 <div class="nav-item">271 <svg viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2">272 <circle cx="12" cy="8" r="4"></circle>273 <path d="M4 22c2-5 14-5 16 0"></path>274 </svg>275 Profile276 </div>277 </div>278 279 <!-- Gesture bar -->280 <div class="gesture"></div>281 282</div>283</body>284</html>