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>Samsung Shop Listing</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #000000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30    font-weight: 600;31    letter-spacing: 0.3px;32  }33  .status-left { display: flex; align-items: center; gap: 20px; }34  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.9; }36  .status-icon {37    width: 28px; height: 28px; border: 2px solid #fff; border-radius: 4px; opacity: 0.9;38  }39  .status-geo {40    width: 18px; height: 28px; border: 2px solid #fff; border-radius: 8px; position: relative;41  }42  .status-geo::after { content: ""; position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }43  .battery {44    width: 42px; height: 22px; border: 2px solid #fff; border-radius: 4px; position: relative;45  }46  .battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 2px; }47 48  /* Header / App info */49  .app-header {50    position: absolute;51    top: 110px;52    left: 0;53    width: 1080px;54    padding: 28px 32px 16px 32px;55    box-sizing: border-box;56    display: flex;57    align-items: center;58    gap: 24px;59  }60  .app-icon {61    width: 120px;62    height: 120px;63    border-radius: 28px;64    background: #3B82F6;65    color: #fff;66    font-weight: 700;67    display: flex;68    align-items: center;69    justify-content: center;70    box-shadow: 0 6px 18px rgba(0,0,0,0.08);71  }72  .app-texts { flex: 1; }73  .app-name {74    font-size: 42px;75    color: #1d1d1d;76    margin: 0 0 10px 0;77    font-weight: 700;78  }79  .subline {80    display: flex;81    align-items: center;82    gap: 12px;83    color: #5f6368;84    font-size: 30px;85  }86  .star {87    width: 28px; height: 28px;88  }89  .gplay {90    display: inline-flex; align-items: center; gap: 10px;91  }92  .info-btn {93    width: 42px; height: 42px;94    border-radius: 21px;95    border: 2px solid #BDBDBD;96    display: flex; align-items: center; justify-content: center;97    color: #4f7df0;98    font-weight: 700;99  }100 101  /* Grid of cards */102  .content {103    position: absolute;104    top: 240px; /* below app header */105    left: 0;106    right: 0;107    bottom: 200px; /* make room for bottom bar */108    overflow-y: auto;109    padding: 10px 32px 24px 32px;110    box-sizing: border-box;111  }112  .grid {113    display: grid;114    grid-template-columns: repeat(2, 1fr);115    grid-column-gap: 36px;116    grid-row-gap: 36px;117  }118  .card {119    width: 486px;120    background: #FFFFFF;121    border-radius: 28px;122    box-shadow: 0 6px 16px rgba(0,0,0,0.06);123    overflow: hidden;124    position: relative;125    border: 1px solid #ECECEC;126  }127  .img-box {128    width: 100%;129    height: 600px;130    background: #E0E0E0;131    border-bottom: 1px solid #BDBDBD;132    display: flex; align-items: center; justify-content: center;133    color: #757575;134    font-size: 30px;135  }136  .discount {137    position: absolute;138    top: 18px;139    left: 18px;140    background: #FFFFFF;141    color: #2D62F0;142    border: 2px solid #79A8FF;143    padding: 8px 16px;144    border-radius: 14px;145    font-weight: 700;146    font-size: 30px;147  }148  .title {149    padding: 24px;150    font-size: 32px;151    color: #2b2b2b;152    line-height: 1.25;153  }154 155  /* Bottom action bar */156  .bottom-bar {157    position: absolute;158    left: 0;159    right: 0;160    bottom: 70px;161    height: 120px;162    padding: 0 32px;163    display: flex;164    align-items: center;165    justify-content: space-between;166    gap: 24px;167    box-sizing: border-box;168  }169  .pill {170    flex: 1;171    height: 100px;172    border-radius: 100px;173    display: flex; align-items: center; justify-content: center;174    font-size: 36px;175    font-weight: 700;176    box-shadow: 0 6px 16px rgba(0,0,0,0.06);177  }178  .pill-outline { background: #fff; border: 2px solid #DADCE0; color: #3c4043; }179  .pill-install { background: #06C167; color: #fff; border: 2px solid #06C167; }180 181  /* Gesture pill */182  .gesture {183    position: absolute;184    bottom: 18px;185    left: 50%;186    transform: translateX(-50%);187    width: 320px;188    height: 12px;189    background: #000000;190    border-radius: 12px;191    opacity: 0.9;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status Bar -->199  <div class="status-bar">200    <div class="status-left">201      <div style="font-size:38px;">4:22</div>202      <div class="status-icon"></div>203      <div class="status-icon" style="border-radius:50%;"></div>204      <div class="status-icon" style="border-radius:50%;"></div>205      <div class="dot"></div>206    </div>207    <div class="status-right">208      <div class="status-geo"></div>209      <div class="status-icon" style="border-radius:50%; width:26px; height:26px;"></div>210      <div class="battery"></div>211    </div>212  </div>213 214  <!-- App Header -->215  <div class="app-header">216    <div class="app-icon">Shop</div>217    <div class="app-texts">218      <div class="app-name">Samsung Shop</div>219      <div class="subline">220        <span>4.5</span>221        <svg class="star" viewBox="0 0 24 24" fill="#F4B400" xmlns="http://www.w3.org/2000/svg">222          <path d="M12 2l3 6 6 .9-4.5 4.3 1 6.8L12 17l-5.5 3 1-6.8L3 8.9 9 8l3-6z"/>223        </svg>224        <span>Google Play</span>225      </div>226    </div>227    <div class="info-btn">i</div>228  </div>229 230  <!-- Content Grid -->231  <div class="content">232    <div class="grid">233 234      <!-- Card 1 -->235      <div class="card">236        <div class="discount">-28%</div>237        <div class="img-box">[IMG: Samsung Sound Tower Speaker]</div>238        <div class="title">Samsung 300W 2.0Ch Sound Tower T40</div>239      </div>240 241      <!-- Card 2 -->242      <div class="card">243        <div class="discount">-41%</div>244        <div class="img-box">[IMG: Samsung 615L Side-by-Side Refrigerator]</div>245        <div class="title">Samsung 615L Convertible 5in1 Side By Side...</div>246      </div>247 248      <!-- Card 3 -->249      <div class="card">250        <div class="discount">-50%</div>251        <div class="img-box">[IMG: Samsung Freestyle Projector]</div>252        <div class="title">Samsung Freestyle Projector</div>253      </div>254 255      <!-- Card 4 -->256      <div class="card">257        <div class="discount">-21%</div>258        <div class="img-box">[IMG: Samsung Galaxy S22 Ultra Phone]</div>259        <div class="title">Samsung Galaxy S22 Ultra | 12GB |512GB |17.31cm (6.8")...</div>260      </div>261 262      <!-- Card 5 -->263      <div class="card">264        <div class="discount">-50%</div>265        <div class="img-box">[IMG: Galaxy Buds Case]</div>266        <div class="title">Galaxy Buds Case (Lavender)</div>267      </div>268 269      <!-- Card 6 -->270      <div class="card">271        <div class="img-box">[IMG: Samsung Tab S8 Tablet]</div>272        <div class="title">Samsung Galaxy Tab S8</div>273      </div>274 275    </div>276  </div>277 278  <!-- Bottom Action Bar -->279  <div class="bottom-bar">280    <div class="pill pill-outline">Close</div>281    <div class="pill pill-install">INSTALL</div>282  </div>283 284  <!-- Gesture Bar -->285  <div class="gesture"></div>286 287</div>288</body>289</html>