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>Shopping - You May Also Like</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #2f2f37; /* dark app chrome */12    color: #222;13  }14  .statusbar {15    height: 100px; padding: 0 32px; color: #fff;16    display: flex; align-items: center; font-weight: 600; font-size: 36px; letter-spacing: 0.2px;17  }18  .status-icons { margin-left: 24px; display: flex; align-items: center; gap: 18px; }19  .toolbar {20    height: 130px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; color: #fff;21  }22  .toolbar-left { display: flex; align-items: center; gap: 16px; }23  .toolbar-right { display: flex; align-items: center; gap: 36px; }24  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }25  .tabs {26    height: 120px; background: #fff; border-top-left-radius: 22px; border-top-right-radius: 22px;27    display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid #e9e9ef;28  }29  .tab { margin-right: 40px; font-size: 34px; color: #777; }30  .tab.active { color: #111; font-weight: 700; position: relative; }31  .tab.active::after {32    content: ""; position: absolute; left: 0; bottom: -16px; width: 34px; height: 6px; background: #ff7a27; border-radius: 3px;33  }34  .content {35    position: absolute; left: 0; right: 0; top: 350px; bottom: 240px; /* leave space for bottom bars */36    background: #f4f6f8; overflow: hidden;37  }38  .section-title {39    font-size: 40px; font-weight: 700; color: #222; padding: 34px 36px 20px;40  }41  .grid {42    display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;43    padding: 0 26px 40px; box-sizing: border-box;44  }45  .card {46    background: #fff; border-radius: 26px; box-shadow: 0 1px 0 rgba(0,0,0,0.04);47    padding: 18px; box-sizing: border-box;48  }49  .img {50    width: 100%; height: 420px; background: #E0E0E0; border: 1px solid #BDBDBD;51    border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;52    margin-bottom: 18px;53  }54  .title {55    font-size: 34px; color: #333; line-height: 1.2; margin-bottom: 10px;56  }57  .price { font-size: 42px; font-weight: 800; color: #111; margin: 6px 0 12px; }58  .badge {59    display: inline-flex; align-items: center; gap: 8px;60    background: #ff7a27; color: #fff; font-size: 28px; padding: 8px 14px; border-radius: 10px;61  }62  .sold { font-size: 28px; color: #7a7a7a; margin-top: 10px; }63  /* Floating actions */64  .float-btn {65    position: absolute; right: 32px; bottom: 560px; width: 104px; height: 104px;66    background: #fff; border-radius: 52px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);67    display: flex; align-items: center; justify-content: center; border: 1px solid #e5e5ea;68  }69  /* Helper bubble */70  .helper {71    position: absolute; right: 28px; top: 1180px; width: 92px; height: 92px;72    background: #d7f2d7; border: 1px solid #9fd39f; border-radius: 46px;73    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #2b7b2b;74  }75  /* Bottom action bar */76  .buy-bar {77    position: absolute; left: 0; right: 0; bottom: 110px; height: 220px; background: #fff; border-top: 1px solid #ececf3;78    display: flex; align-items: center; justify-content: center; gap: 36px; padding: 0 36px; box-sizing: border-box;79  }80  .buy-btn {81    flex: 1; height: 120px; background: #efeff3; border-radius: 22px; display: flex; align-items: center; justify-content: center;82    font-size: 40px; color: #6b6b73; font-weight: 700;83  }84  .nav-bottom {85    position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: #1e1e24; display: flex; align-items: center; justify-content: center;86  }87  .gesture {88    width: 220px; height: 10px; background: #c9c9cd; border-radius: 8px;89  }90  /* Small utility icon sizes */91  svg { display: block; }92</style>93</head>94<body>95<div id="render-target">96 97  <!-- Top Status Bar -->98  <div class="statusbar">99    7:35100    <div class="status-icons">101      <!-- simple dots/icons to mimic status -->102      <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/></svg>103      <svg width="28" height="28" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/></svg>104      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M5 12h14" stroke="#fff" stroke-width="2"/></svg>105      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M4 12l6 6 10-14" fill="none" stroke="#fff" stroke-width="2"/></svg>106      <span style="font-size:24px; opacity:.7;">•</span>107      <svg width="40" height="24" viewBox="0 0 40 24"><path d="M2 18h36" stroke="#fff" stroke-width="2"/><path d="M2 6h28" stroke="#fff" stroke-width="2"/></svg>108      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 20h12V8H6z" fill="none" stroke="#fff" stroke-width="2"/><path d="M18 4v4" stroke="#fff" stroke-width="2"/></svg>109    </div>110  </div>111 112  <!-- Toolbar -->113  <div class="toolbar">114    <div class="toolbar-left">115      <div class="icon-btn">116        <!-- Back arrow -->117        <svg width="48" height="48" viewBox="0 0 24 24">118          <path d="M15 6l-6 6 6 6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>119        </svg>120      </div>121    </div>122    <div class="toolbar-right">123      <!-- Cart icon -->124      <div class="icon-btn">125        <svg width="44" height="44" viewBox="0 0 24 24">126          <path d="M3 5h2l2 12h10l2-8H7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>127          <circle cx="9" cy="19" r="1.5" fill="#fff"/>128          <circle cx="17" cy="19" r="1.5" fill="#fff"/>129        </svg>130      </div>131      <!-- Share icon -->132      <div class="icon-btn">133        <svg width="44" height="44" viewBox="0 0 24 24">134          <circle cx="6" cy="12" r="2" fill="#fff"/>135          <circle cx="18" cy="6" r="2" fill="#fff"/>136          <circle cx="18" cy="18" r="2" fill="#fff"/>137          <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>138        </svg>139      </div>140      <!-- More icon -->141      <div class="icon-btn">142        <svg width="44" height="44" viewBox="0 0 24 24">143          <circle cx="6" cy="12" r="2" fill="#fff"/>144          <circle cx="12" cy="12" r="2" fill="#fff"/>145          <circle cx="18" cy="12" r="2" fill="#fff"/>146        </svg>147      </div>148    </div>149  </div>150 151  <!-- Tabs -->152  <div class="tabs">153    <div class="tab">Overview</div>154    <div class="tab">Reviews</div>155    <div class="tab">Description</div>156    <div class="tab active">You May Also Like</div>157  </div>158 159  <!-- Content Area -->160  <div class="content">161    <div class="section-title">You May Also Like</div>162 163    <div class="grid">164      <!-- Card 1 -->165      <div class="card">166        <div class="img">[IMG: White LED Projector on Table]</div>167        <div class="title">BlitzWolf® BW-V5 LED Proj...</div>168        <div class="price">₹8,929.96</div>169        <div class="badge">170          <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2l4 8-8 0 4 12" fill="#fff"/></svg>171          Flash Deals172        </div>173        <div class="sold">5390 sold</div>174      </div>175 176      <!-- Card 2 -->177      <div class="card">178        <div class="img">[IMG: Bakeey StarGazer Smart Projector]</div>179        <div class="title">Bakeey StarGazer Smart Pr...</div>180        <div class="price">₹6,149.61</div>181        <div class="badge">182          <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2l4 8-8 0 4 12" fill="#fff"/></svg>183          Flash Deals184        </div>185        <div class="sold">1815 sold</div>186      </div>187 188      <!-- Card 3 -->189      <div class="card">190        <div class="img">[IMG: Mini Projector in Hand]</div>191        <div class="title">Bakeey VP2 Mini Projector ...</div>192        <div class="price">₹5,054.33</div>193        <div class="sold">1291 sold</div>194      </div>195 196      <!-- Card 4 -->197      <div class="card">198        <div class="img">[IMG: Black BlitzWolf Projector on Fabric]</div>199        <div class="title">[Netflix Certified] BlitzWolf...</div>200        <div class="price">₹14,322.14</div>201        <div class="badge">202          <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2l4 8-8 0 4 12" fill="#fff"/></svg>203          Flash Deals204        </div>205        <div class="sold">367 sold</div>206      </div>207 208      <!-- Row 3 placeholders to show continuation -->209      <div class="card">210        <div class="img">[IMG: Phone with projector accessory]</div>211        <div class="title">Portable Phone Projector Kit</div>212        <div class="price">₹3,899.00</div>213        <div class="sold">845 sold</div>214      </div>215      <div class="card">216        <div class="img">[IMG: Compact Projector - White]</div>217        <div class="title">Compact LED Projector</div>218        <div class="price">₹7,499.00</div>219        <div class="sold">672 sold</div>220      </div>221    </div>222 223    <!-- Helper bubble -->224    <div class="helper">[IMG: Helper]</div>225 226    <!-- Floating scroll-to-top button -->227    <div class="float-btn">228      <svg width="40" height="40" viewBox="0 0 24 24">229        <path d="M12 6l-6 6M12 6l6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>230      </svg>231    </div>232  </div>233 234  <!-- Bottom Purchase Bar -->235  <div class="buy-bar">236    <div class="buy-btn">Buy Now</div>237    <div class="buy-btn">Add to Cart</div>238  </div>239 240  <!-- Bottom Navigation/Gesture bar -->241  <div class="nav-bottom">242    <div class="gesture"></div>243  </div>244 245</div>246</body>247</html>