GD-ML/AndroidCode
13.4k
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>Product Grid - Apple MacBook</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f3f3f3;15 color: #111;16 }17 18 /* Top system/status bar */19 .status-bar {20 height: 90px;21 background: #2b2b2b;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 32px;26 font-size: 36px;27 box-sizing: border-box;28 }29 .status-bar .right {30 margin-left: auto;31 display: flex;32 align-items: center;33 gap: 22px;34 }35 .status-icon { fill: #fff; }36 37 /* App bar */38 .app-bar {39 height: 120px;40 background: #1f1f1f;41 color: #fff;42 display: flex;43 align-items: center;44 padding: 0 28px;45 box-sizing: border-box;46 gap: 22px;47 }48 .app-title {49 font-size: 44px;50 font-weight: 600;51 letter-spacing: 0.2px;52 color: #fff;53 }54 .spacer { flex: 1; }55 .icon-btn {56 width: 72px;57 height: 72px;58 display: inline-flex;59 align-items: center;60 justify-content: center;61 }62 63 /* Filter bar */64 .filter-bar {65 height: 110px;66 background: #222;67 color: #fff;68 display: flex;69 align-items: center;70 box-sizing: border-box;71 border-top: 1px solid #2e2e2e;72 border-bottom: 1px solid #2e2e2e;73 }74 .filter-item {75 height: 100%;76 display: flex;77 align-items: center;78 padding: 0 30px;79 box-sizing: border-box;80 gap: 18px;81 border-right: 1px solid #333;82 }83 .filter-item:first-child { width: 200px; }84 .filter-item:nth-child(2) { flex: 1; }85 .filter-item:last-child { width: 260px; border-right: none; justify-content: center; }86 .filter-text {87 font-size: 34px;88 font-weight: 700;89 letter-spacing: 1px;90 }91 .chev-down {92 width: 28px; height: 28px;93 }94 95 /* Grid and cards */96 .content {97 height: calc(2400px - 90px - 120px - 110px - 90px);98 overflow: auto;99 padding: 28px;100 box-sizing: border-box;101 }102 .grid {103 display: grid;104 grid-template-columns: repeat(2, 1fr);105 gap: 28px;106 }107 108 .card {109 background: #fff;110 border-radius: 20px;111 box-shadow: 0 2px 8px rgba(0,0,0,0.06);112 border: 1px solid #e9e9e9;113 overflow: hidden;114 }115 .img-box {116 height: 300px;117 background: #E0E0E0;118 border-bottom: 1px solid #BDBDBD;119 display: flex;120 align-items: center;121 justify-content: center;122 color: #757575;123 font-size: 30px;124 }125 .details {126 padding: 26px;127 }128 .wish-row {129 display: flex;130 align-items: center;131 gap: 14px;132 margin-bottom: 10px;133 }134 .heart {135 width: 40px; height: 40px;136 }137 .title {138 font-size: 30px;139 color: #333;140 line-height: 1.3;141 height: 110px;142 overflow: hidden;143 margin: 8px 0 14px 0;144 }145 .price {146 font-size: 40px;147 font-weight: 800;148 color: #1e1e1e;149 margin-bottom: 18px;150 }151 .add-btn {152 width: 100%;153 height: 86px;154 background: #F59E0B;155 color: #fff;156 border: none;157 border-radius: 12px;158 font-size: 30px;159 font-weight: 800;160 letter-spacing: 0.5px;161 }162 163 /* Skeleton variant */164 .card.skeleton .img-box {165 height: 420px;166 background: #efefef;167 color: #cfcfcf;168 position: relative;169 }170 .skeleton .line {171 height: 28px;172 background: #ededed;173 border-radius: 6px;174 margin: 16px 0;175 }176 .skeleton .line.short { width: 60%; }177 .skeleton .line.long { width: 80%; }178 179 /* Bottom gesture bar */180 .gesture-bar {181 position: absolute;182 bottom: 0;183 left: 0;184 width: 100%;185 height: 90px;186 background: #000;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div>1:00</div>196 <div class="right">197 <svg class="status-icon" width="34" height="34" viewBox="0 0 24 24"><path d="M12 3L1 14h3v7h6v-5h4v5h6v-7h3L12 3z"/></svg>198 <svg class="status-icon" width="34" height="34" viewBox="0 0 24 24"><path d="M12 21c4.97 0 9-4.03 9-9h-2a7 7 0 1 1-14 0H3c0 4.97 4.03 9 9 9z"/></svg>199 <svg class="status-icon" width="36" height="36" viewBox="0 0 24 24"><path d="M16 4h-1V2H9v2H8C6.9 4 6 4.9 6 6v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H8V7h8v13z"/></svg>200 </div>201 </div>202 203 <!-- App bar -->204 <div class="app-bar">205 <div class="icon-btn">206 <svg width="44" height="44" viewBox="0 0 24 24">207 <path d="M15 18l-6-6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="app-title">apple macbook laptop</div>211 <div class="spacer"></div>212 <div class="icon-btn">213 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">214 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.27v.8l5 4.99L20.49 19l-4.99-5zM9.5 14C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/>215 </svg>216 </div>217 <div class="icon-btn">218 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">219 <path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.16 14h9.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49-1.73-.99-3.58 6.49H8.53L5.27 2H1v2h3l3.6 7.59-1.35 2.45C5.52 15.37 6.34 17 7.84 17H20v-2H7.84l-.68-1z"/>220 </svg>221 </div>222 <div class="icon-btn">223 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">224 <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>225 </svg>226 </div>227 </div>228 229 <!-- Filter bar -->230 <div class="filter-bar">231 <div class="filter-item">232 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">233 <rect x="3" y="4" width="8" height="8" rx="1"/><rect x="13" y="4" width="8" height="8" rx="1"/>234 <rect x="3" y="14" width="8" height="8" rx="1"/><rect x="13" y="14" width="8" height="8" rx="1"/>235 </svg>236 </div>237 <div class="filter-item">238 <div class="filter-text">POPULARITY</div>239 <svg class="chev-down" viewBox="0 0 24 24" fill="#fff"><path d="M7 10l5 5 5-5z"/></svg>240 </div>241 <div class="filter-item">242 <div class="filter-text">FILTERS</div>243 </div>244 </div>245 246 <!-- Content grid -->247 <div class="content">248 <div class="grid">249 250 <!-- Skeleton cards -->251 <div class="card skeleton">252 <div class="img-box">[IMG: Loading Placeholder]</div>253 <div class="details">254 <div class="line long"></div>255 <div class="line short"></div>256 </div>257 </div>258 259 <div class="card skeleton">260 <div class="img-box">[IMG: Loading Placeholder]</div>261 <div class="details">262 <div class="line long"></div>263 <div class="line short"></div>264 </div>265 </div>266 267 <!-- Real product cards -->268 <div class="card">269 <div class="img-box">[IMG: MacBook Air (Blue/Black wallpaper)]</div>270 <div class="details">271 <div class="wish-row">272 <svg class="heart" viewBox="0 0 24 24">273 <path d="M12 21s-7.5-4.35-9.5-8.24C.7 10.04 2.02 6.5 5.2 6.5c1.92 0 3.02 1.08 3.8 2.18.78-1.1 1.88-2.18 3.8-2.18 3.18 0 4.5 3.54 2.7 6.26C19.5 16.65 12 21 12 21z" fill="none" stroke="#f39c12" stroke-width="2" stroke-linejoin="round"/>274 </svg>275 </div>276 <div class="title">Apple MacBook Air 13.6 M2 8C CPU 10C GPU 8GB 512GB...</div>277 <div class="price">EGP 87,700.00</div>278 <button class="add-btn">ADD TO CART</button>279 </div>280 </div>281 282 <div class="card">283 <div class="img-box">[IMG: MacBook Air (Gold/Black wallpaper)]</div>284 <div class="details">285 <div class="wish-row">286 <svg class="heart" viewBox="0 0 24 24">287 <path d="M12 21s-7.5-4.35-9.5-8.24C.7 10.04 2.02 6.5 5.2 6.5c1.92 0 3.02 1.08 3.8 2.18.78-1.1 1.88-2.18 3.8-2.18 3.18 0 4.5 3.54 2.7 6.26C19.5 16.65 12 21 12 21z" fill="none" stroke="#f39c12" stroke-width="2" stroke-linejoin="round"/>288 </svg>289 </div>290 <div class="title">Apple MacBook Air 13.6 M2 256GB Starlight Arabic Keyboard...</div>291 <div class="price">EGP 71,700.00</div>292 <button class="add-btn">ADD TO CART</button>293 </div>294 </div>295 296 <div class="card">297 <div class="img-box">[IMG: MacBook Pro 16 - Notch (Pink/Orange wallpaper)]</div>298 <div class="details">299 <div class="wish-row">300 <svg class="heart" viewBox="0 0 24 24">301 <path d="M12 21s-7.5-4.35-9.5-8.24C.7 10.04 2.02 6.5 5.2 6.5c1.92 0 3.02 1.08 3.8 2.18.78-1.1 1.88-2.18 3.8-2.18 3.18 0 4.5 3.54 2.7 6.26C19.5 16.65 12 21 12 21z" fill="none" stroke="#f39c12" stroke-width="2" stroke-linejoin="round"/>302 </svg>303 </div>304 <div class="title">Apple MacBook Pro 16 M1 10‑core — Space Gray</div>305 <div class="price">EGP 96,900.00</div>306 <button class="add-btn">ADD TO CART</button>307 </div>308 </div>309 310 <div class="card">311 <div class="img-box">[IMG: MacBook Air (Blue/Black wallpaper)]</div>312 <div class="details">313 <div class="wish-row">314 <svg class="heart" viewBox="0 0 24 24">315 <path d="M12 21s-7.5-4.35-9.5-8.24C.7 10.04 2.02 6.5 5.2 6.5c1.92 0 3.02 1.08 3.8 2.18.78-1.1 1.88-2.18 3.8-2.18 3.18 0 4.5 3.54 2.7 6.26C19.5 16.65 12 21 12 21z" fill="none" stroke="#f39c12" stroke-width="2" stroke-linejoin="round"/>316 </svg>317 </div>318 <div class="title">Apple MacBook Air 13.6 M2 — Midnight 8GB 256GB</div>319 <div class="price">EGP 68,500.00</div>320 <button class="add-btn">ADD TO CART</button>321 </div>322 </div>323 324 </div>325 </div>326 327 <!-- Bottom gesture/navigation bar -->328 <div class="gesture-bar"></div>329</div>330</body>331</html>