GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Apple MacBook Laptop - Listing</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: #f2f2f2;14  }15  /* Status bar */16  .status-bar {17    height: 120px;18    background: #1f1f1f;19    color: #fff;20    display: flex;21    align-items: center;22    padding: 0 32px;23    font-size: 28px;24  }25  .status-right { margin-left: auto; opacity: 0.8; }26  /* App bar */27  .appbar {28    height: 150px;29    background: #2c2c2c;30    color: #fff;31    display: flex;32    align-items: center;33    padding: 0 32px;34  }35  .appbar-title {36    font-size: 44px;37    font-weight: 600;38    margin-left: 18px;39  }40  .appbar-actions {41    margin-left: auto;42    display: flex;43    gap: 32px;44  }45  .icon {46    width: 48px;47    height: 48px;48  }49  .icon path, .icon circle, .icon rect, .icon line { stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }50  /* Ad banner */51  .ad-banner {52    margin: 24px 40px;53    height: 320px;54    border: 2px solid #cfcfcf;55    background: #E0E0E0;56    display: flex;57    justify-content: center;58    align-items: center;59    color: #757575;60    font-size: 32px;61  }62  /* Sort/Filter bar */63  .sortbar {64    height: 120px;65    background: #3a3a3a;66    color: #fff;67    display: flex;68    align-items: center;69    padding: 0 40px;70    gap: 40px;71  }72  .sortbar .section {73    display: flex;74    align-items: center;75    gap: 20px;76    font-size: 34px;77    font-weight: 700;78  }79  .divider {80    width: 1px;81    height: 60px;82    background: rgba(255,255,255,0.25);83    margin: 0 24px;84  }85  .chevron path { stroke: #fff; }86  /* Product grid */87  .grid {88    padding: 30px 30px 0 30px;89    display: grid;90    grid-template-columns: 1fr 1fr;91    gap: 26px;92  }93  .card {94    background: #fff;95    border-radius: 22px;96    box-shadow: 0 6px 16px rgba(0,0,0,0.10);97    padding: 26px;98  }99  .product-img {100    width: 100%;101    height: 250px;102    background: #E0E0E0;103    border: 1px solid #BDBDBD;104    display: flex;105    justify-content: center;106    align-items: center;107    color: #757575;108    font-size: 28px;109    border-radius: 12px;110  }111  .heart {112    width: 40px;113    height: 40px;114    margin-top: 18px;115  }116  .heart path { stroke: #ff9b2f; fill: none; stroke-width: 3; }117  .title {118    font-size: 28px;119    color: #555;120    margin-top: 16px;121    line-height: 36px;122  }123  .price {124    font-size: 40px;125    font-weight: 800;126    color: #000;127    margin-top: 18px;128  }129  .btn {130    margin-top: 22px;131    height: 100px;132    background: #f7931e;133    color: #fff;134    border-radius: 12px;135    display: flex;136    align-items: center;137    justify-content: center;138    font-size: 32px;139    font-weight: 800;140    box-shadow: 0 6px 12px rgba(247,147,30,0.4);141  }142  /* Bottom system bar */143  .bottom-bar {144    position: absolute;145    bottom: 0;146    left: 0;147    width: 1080px;148    height: 120px;149    background: #000;150    display: flex;151    align-items: center;152    justify-content: center;153  }154  .home-pill {155    width: 200px;156    height: 14px;157    background: #fff;158    border-radius: 10px;159    opacity: 0.9;160  }161</style>162</head>163<body>164<div id="render-target">165  <!-- Status bar -->166  <div class="status-bar">167    <div>1:00</div>168    <div class="status-right">•••</div>169  </div>170 171  <!-- App bar -->172  <div class="appbar">173    <!-- Back icon -->174    <svg class="icon" viewBox="0 0 24 24">175      <path d="M14 5 L5 12 L14 19"></path>176    </svg>177    <div class="appbar-title">apple macbook laptop</div>178    <div class="appbar-actions">179      <!-- Search -->180      <svg class="icon" viewBox="0 0 24 24">181        <circle cx="11" cy="11" r="7"></circle>182        <line x1="16.5" y1="16.5" x2="22" y2="22"></line>183      </svg>184      <!-- Cart -->185      <svg class="icon" viewBox="0 0 24 24">186        <path d="M3 6 H6 L7.5 16 H19 L21 9 H8"></path>187        <circle cx="9" cy="20" r="2"></circle>188        <circle cx="17" cy="20" r="2"></circle>189      </svg>190      <!-- More -->191      <svg class="icon" viewBox="0 0 24 24">192        <circle cx="5" cy="12" r="2" fill="#fff" stroke="none"></circle>193        <circle cx="12" cy="12" r="2" fill="#fff" stroke="none"></circle>194        <circle cx="19" cy="12" r="2" fill="#fff" stroke="none"></circle>195      </svg>196    </div>197  </div>198 199  <!-- Ad banner -->200  <div class="ad-banner">[IMG: Pepperfry Furniture Ad]</div>201 202  <!-- Sort / Filter bar -->203  <div class="sortbar">204    <div class="section">205      <!-- Grid icon -->206      <svg class="icon" viewBox="0 0 24 24">207        <rect x="3" y="3" width="8" height="8"></rect>208        <rect x="13" y="3" width="8" height="8"></rect>209        <rect x="3" y="13" width="8" height="8"></rect>210        <rect x="13" y="13" width="8" height="8"></rect>211      </svg>212      <span>POPULARITY</span>213      <svg class="icon chevron" viewBox="0 0 24 24">214        <path d="M6 9 L12 15 L18 9"></path>215      </svg>216    </div>217    <div class="divider"></div>218    <div class="section">219      <span>FILTERS</span>220    </div>221  </div>222 223  <!-- Product Grid -->224  <div class="grid">225    <!-- Card 1 -->226    <div class="card">227      <div class="product-img">[IMG: MacBook Air - Blue Waves]</div>228      <svg class="heart" viewBox="0 0 24 24">229        <path d="M12 20 C10 18,5 15,5 10 C5 8,6.5 6.5,8.5 6.5 C9.8 6.5,11 7.4,12 8.7 C13 7.4,14.2 6.5,15.5 6.5 C17.5 6.5,19 8,19 10 C19 15,14 18,12 20 Z"></path>230      </svg>231      <div class="title">Apple MacBook Air 13.6 M2 8C CPU 10C GPU 8GB 512GB...</div>232      <div class="price">EGP 87,700.00</div>233      <div class="btn">ADD TO CART</div>234    </div>235 236    <!-- Card 2 -->237    <div class="card">238      <div class="product-img">[IMG: MacBook Air - Gold Swirl]</div>239      <svg class="heart" viewBox="0 0 24 24">240        <path d="M12 20 C10 18,5 15,5 10 C5 8,6.5 6.5,8.5 6.5 C9.8 6.5,11 7.4,12 8.7 C13 7.4,14.2 6.5,15.5 6.5 C17.5 6.5,19 8,19 10 C19 15,14 18,12 20 Z"></path>241      </svg>242      <div class="title">Apple MacBook Air 13.6 M2 256GB Starlight Arabic Key...</div>243      <div class="price">EGP 71,700.00</div>244      <div class="btn">ADD TO CART</div>245    </div>246 247    <!-- Card 3 -->248    <div class="card">249      <div class="product-img">[IMG: MacBook Pro 16 - Dark Diagonal]</div>250      <svg class="heart" viewBox="0 0 24 24">251        <path d="M12 20 C10 18,5 15,5 10 C5 8,6.5 6.5,8.5 6.5 C9.8 6.5,11 7.4,12 8.7 C13 7.4,14.2 6.5,15.5 6.5 C17.5 6.5,19 8,19 10 C19 15,14 18,12 20 Z"></path>252      </svg>253      <div class="title">Apple MacBook Pro 16 M1 -10C CPU 16C GPU - 16GB - 512GB...</div>254      <div class="price">EGP 128,000.00</div>255      <div class="btn">ADD TO CART</div>256    </div>257 258    <!-- Card 4 -->259    <div class="card">260      <div class="product-img">[IMG: MacBook Air - Midnight]</div>261      <svg class="heart" viewBox="0 0 24 24">262        <path d="M12 20 C10 18,5 15,5 10 C5 8,6.5 6.5,8.5 6.5 C9.8 6.5,11 7.4,12 8.7 C13 7.4,14.2 6.5,15.5 6.5 C17.5 6.5,19 8,19 10 C19 15,14 18,12 20 Z"></path>263      </svg>264      <div class="title">Apple MacBook Air 13.6 M2 256GB Midnight (English)</div>265      <div class="price">EGP 71,700.00</div>266      <div class="btn">ADD TO CART</div>267    </div>268  </div>269 270  <!-- Bottom system bar -->271  <div class="bottom-bar">272    <div class="home-pill"></div>273  </div>274</div>275</body>276</html>