GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shopping - Apple MacBook Laptop</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F2F2F2;14    font-family: Arial, Helvetica, sans-serif;15    color: #222;16  }17 18  /* Top bars */19  .status-bar {20    height: 70px;21    background: #2b2b2b;22  }23  .app-bar {24    height: 150px;25    background: #2b2b2b;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31  }32  .app-bar .title {33    font-size: 44px;34    font-weight: 600;35    margin-left: 16px;36    flex: 1;37    white-space: nowrap;38    overflow: hidden;39    text-overflow: ellipsis;40  }41  .app-bar .icon {42    width: 56px;43    height: 56px;44    margin-left: 26px;45  }46  .icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 4; }47 48  /* Ad banner */49  .ad-wrap {50    margin: 28px 40px 20px;51    background: #fff;52    border-radius: 8px;53    padding: 18px;54    box-shadow: 0 1px 0 rgba(0,0,0,0.08);55  }56  .ad-inner {57    border: 2px solid #CFCFCF;58    background: #fafafa;59    height: 290px;60    display: flex;61    align-items: center;62    justify-content: center;63    position: relative;64  }65  .ad-inner .img {66    width: 30%;67    height: 220px;68    margin: 0 14px;69    background: #E0E0E0;70    border: 1px solid #BDBDBD;71    display: flex; align-items: center; justify-content: center;72    color: #757575; font-size: 28px;73  }74  .ad-badge {75    position: absolute;76    top: 10px; right: 10px;77    font-size: 24px; color: #00A0FF;78  }79  .ad-close {80    position: absolute;81    top: 10px; right: 54px;82    color: #00A0FF; font-size: 28px;83    font-weight: bold;84  }85 86  /* Filter/Sort bar */87  .filter-bar {88    height: 120px;89    background: #3a3a3a;90    display: grid;91    grid-template-columns: 140px 1fr 1fr;92    align-items: center;93    color: #fff;94    border-top: 1px solid #2e2e2e;95    border-bottom: 1px solid #2e2e2e;96  }97  .filter-bar .cell {98    height: 100%;99    display: flex; align-items: center; justify-content: center;100    position: relative;101  }102  .filter-bar .cell + .cell::before {103    content: "";104    position: absolute; left: 0; top: 20%;105    width: 1px; height: 60%;106    background: #4a4a4a;107  }108  .grid-icon svg, .chev svg { stroke: #fff; }109  .filter-bar .label {110    font-size: 36px; font-weight: 700; letter-spacing: 1px;111  }112  .chev {113    width: 36px; height: 36px; margin-left: 12px;114  }115 116  /* Product grid */117  .product-section {118    padding: 26px 30px 120px;119  }120  .grid {121    display: grid;122    grid-template-columns: 1fr 1fr;123    gap: 34px;124  }125  .card {126    background: #fff;127    border-radius: 22px;128    padding: 20px;129    box-shadow: 0 2px 10px rgba(0,0,0,0.06);130    position: relative;131  }132  .product-img {133    width: 100%;134    height: 300px;135    background: #E0E0E0;136    border: 1px solid #BDBDBD;137    border-radius: 14px;138    display: flex; align-items: center; justify-content: center;139    color: #757575; font-size: 28px;140  }141  .fav {142    position: absolute; top: 340px; left: 26px;143    width: 52px; height: 52px;144  }145  .fav svg { stroke: #F39C12; fill: none; stroke-width: 6; }146  .title {147    margin-top: 18px;148    color: #444;149    font-size: 30px;150    line-height: 38px;151    height: 76px;152    overflow: hidden;153  }154  .price {155    margin-top: 12px;156    font-size: 40px;157    font-weight: 800;158  }159  .btn {160    margin-top: 18px;161    background: #F39C12;162    color: #fff;163    text-align: center;164    padding: 26px 0;165    font-weight: 800;166    font-size: 30px;167    border-radius: 12px;168  }169 170  /* Bottom gesture bar */171  .gesture {172    position: absolute;173    bottom: 18px; left: 50%;174    transform: translateX(-50%);175    width: 320px; height: 12px;176    background: #000;177    border-radius: 8px;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <div class="status-bar"></div>185 186  <div class="app-bar">187    <div class="icon">188      <svg viewBox="0 0 24 24">189        <path d="M15 4 L7 12 L15 20" />190      </svg>191    </div>192    <div class="title">apple macbook laptop</div>193    <div class="icon">194      <svg viewBox="0 0 24 24">195        <circle cx="10" cy="10" r="7"></circle>196        <path d="M15 15 L21 21"></path>197      </svg>198    </div>199    <div class="icon">200      <svg viewBox="0 0 24 24">201        <path d="M3 6 L21 6 L19 14 L7 14 Z"></path>202        <circle cx="8.5" cy="18.5" r="1.5"></circle>203        <circle cx="17.5" cy="18.5" r="1.5"></circle>204      </svg>205    </div>206    <div class="icon">207      <svg viewBox="0 0 24 24">208        <circle cx="12" cy="5" r="2.2"></circle>209        <circle cx="12" cy="12" r="2.2"></circle>210        <circle cx="12" cy="19" r="2.2"></circle>211      </svg>212    </div>213  </div>214 215  <div class="ad-wrap">216    <div class="ad-inner">217      <div class="img">[IMG: Furniture Ad - Logo]</div>218      <div class="img">[IMG: Sofa Photo]</div>219      <div class="img">[IMG: Sofa Photo]</div>220      <div class="ad-close">✕</div>221      <div class="ad-badge">Ad</div>222    </div>223  </div>224 225  <div class="filter-bar">226    <div class="cell">227      <div class="grid-icon" style="width:56px;height:56px;">228        <svg viewBox="0 0 24 24" stroke-width="2">229          <rect x="3" y="3" width="7" height="7" stroke="#fff"></rect>230          <rect x="14" y="3" width="7" height="7" stroke="#fff"></rect>231          <rect x="3" y="14" width="7" height="7" stroke="#fff"></rect>232          <rect x="14" y="14" width="7" height="7" stroke="#fff"></rect>233        </svg>234      </div>235    </div>236    <div class="cell">237      <div class="label">POPULARITY</div>238      <div class="chev">239        <svg viewBox="0 0 24 24">240          <path d="M5 9 L12 16 L19 9" />241        </svg>242      </div>243    </div>244    <div class="cell">245      <div class="label">FILTERS</div>246    </div>247  </div>248 249  <div class="product-section">250    <div class="grid">251      <!-- Card 1 -->252      <div class="card">253        <div class="product-img">[IMG: MacBook Air M2 - Blue Abstract Screen]</div>254        <div class="fav">255          <svg viewBox="0 0 24 24">256            <path d="M12 20 C5 14,3 11,5.5 8.5 C7 7,9.5 7.5,12 10 C14.5 7.5,17 7,18.5 8.5 C21 11,19 14,12 20 Z"></path>257          </svg>258        </div>259        <div class="title">Apple MacBook Air 13.6 M2 8C CPU 10C GPU 8GB 512GB...</div>260        <div class="price">EGP 87,700.00</div>261        <div class="btn">ADD TO CART</div>262      </div>263 264      <!-- Card 2 -->265      <div class="card">266        <div class="product-img">[IMG: MacBook Air M2 - Gold Abstract Screen]</div>267        <div class="fav">268          <svg viewBox="0 0 24 24">269            <path d="M12 20 C5 14,3 11,5.5 8.5 C7 7,9.5 7.5,12 10 C14.5 7.5,17 7,18.5 8.5 C21 11,19 14,12 20 Z"></path>270          </svg>271        </div>272        <div class="title">Apple MacBook Air 13.6 M2 256GB Starlight Arabic Keyboard...</div>273        <div class="price">EGP 71,700.00</div>274        <div class="btn">ADD TO CART</div>275      </div>276 277      <!-- Card 3 -->278      <div class="card">279        <div class="product-img">[IMG: MacBook Pro 16 - Dark Abstract Screen]</div>280        <div class="fav">281          <svg viewBox="0 0 24 24">282            <path d="M12 20 C5 14,3 11,5.5 8.5 C7 7,9.5 7.5,12 10 C14.5 7.5,17 7,18.5 8.5 C21 11,19 14,12 20 Z"></path>283          </svg>284        </div>285        <div class="title">Apple MacBook Pro 16 M1 - 10C CPU 16C GPU - 16GB - 512GB...</div>286        <div class="price">EGP 128,000.00</div>287        <div class="btn">ADD TO CART</div>288      </div>289 290      <!-- Card 4 -->291      <div class="card">292        <div class="product-img">[IMG: MacBook Air M2 - Blue Abstract Screen]</div>293        <div class="fav">294          <svg viewBox="0 0 24 24">295            <path d="M12 20 C5 14,3 11,5.5 8.5 C7 7,9.5 7.5,12 10 C14.5 7.5,17 7,18.5 8.5 C21 11,19 14,12 20 Z"></path>296          </svg>297        </div>298        <div class="title">Apple MacBook Air 13.6 M2 256GB Midnight (English)</div>299        <div class="price">EGP 71,700.00</div>300        <div class="btn">ADD TO CART</div>301      </div>302    </div>303  </div>304 305  <div class="gesture"></div>306</div>307</body>308</html>