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>Product Details - Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #2f2f2f;15    color: #f2f2f2;16  }17 18  /* Status bar */19  .status-bar {20    height: 80px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #eaeaea;26    font-weight: 600;27    font-size: 36px;28    background: #3a3a3a;29  }30  .status-icons {31    display: flex;32    gap: 24px;33    align-items: center;34  }35  .dot { width: 12px; height: 12px; background: #cfcfcf; border-radius: 50%; display: inline-block; }36 37  /* App bar */38  .app-bar {39    height: 150px;40    background: #121212;41    display: flex;42    align-items: center;43    justify-content: space-between;44    padding: 0 32px;45  }46  .app-left {47    display: flex;48    align-items: center;49    gap: 28px;50  }51  .icon-btn {52    width: 80px;53    height: 80px;54    border-radius: 40px;55    display: flex;56    align-items: center;57    justify-content: center;58  }59  .cart-wrap {60    position: relative;61  }62  .badge {63    position: absolute;64    right: -4px;65    top: -6px;66    background: #ffb000;67    color: #121212;68    font-weight: 700;69    width: 44px;70    height: 44px;71    border-radius: 22px;72    display: flex;73    align-items: center;74    justify-content: center;75    font-size: 28px;76    border: 2px solid #121212;77  }78 79  /* Content area */80  .content {81    padding: 24px 36px 240px 36px; /* leave space for bottom bar */82  }83  .section-title {84    font-size: 48px;85    font-weight: 800;86    margin: 28px 0 18px 0;87  }88  .progress {89    height: 16px;90    background: #0d0d0d;91    border-radius: 10px;92    overflow: hidden;93    margin-bottom: 26px;94  }95  .progress > span {96    display: block;97    height: 100%;98    width: 38%;99    background: #f3b32b;100  }101 102  .pill {103    background: #333333;104    border: 2px solid #9e9e9e;105    border-radius: 28px;106    padding: 26px 30px;107    margin-bottom: 24px;108    font-size: 40px;109    color: #e9e9e9;110    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);111  }112 113  .qa-card {114    background: #333333;115    border: 2px solid #9e9e9e;116    border-radius: 28px;117    padding: 28px 30px;118    margin-bottom: 24px;119    font-size: 38px;120    line-height: 1.4;121    color: #d9d9d9;122  }123  .qa-card b { color: #ffffff; }124 125  .para {126    font-size: 38px;127    color: #d9d9d9;128    line-height: 1.55;129    margin: 20px 0 24px 0;130  }131 132  /* Bottom action bar */133  .bottom-bar {134    position: absolute;135    left: 0;136    right: 0;137    bottom: 80px;138    height: 160px;139    background: #121212;140    display: flex;141    align-items: center;142    padding: 0 36px;143    justify-content: space-between;144    box-shadow: 0 -6px 12px rgba(0,0,0,0.5);145  }146  .bar-left {147    display: flex;148    gap: 36px;149  }150  .circle {151    width: 96px;152    height: 96px;153    border-radius: 50%;154    background: #2d2d2d;155    border: 2px solid #3f3f3f;156    display: flex;157    align-items: center;158    justify-content: center;159  }160  .cta {161    color: #ffffff;162    font-size: 44px;163    font-weight: 900;164    letter-spacing: 1px;165  }166 167  /* Home indicator */168  .home-indicator {169    position: absolute;170    bottom: 20px;171    left: 50%;172    transform: translateX(-50%);173    width: 300px;174    height: 12px;175    background: #f2f2f2;176    border-radius: 8px;177    opacity: 0.9;178  }179 180  /* Simple svg colors */181  svg { fill: none; stroke: #eaeaea; stroke-width: 6; }182  .svg-solid { fill: #eaeaea; stroke: none; }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status bar -->189  <div class="status-bar">190    <div>9:51</div>191    <div class="status-icons">192      <span class="dot"></span>193      <span class="dot"></span>194      <span class="dot"></span>195    </div>196    <div class="status-icons">197      <!-- WiFi -->198      <svg width="44" height="44" viewBox="0 0 24 24">199        <path d="M2 8c5-4 15-4 20 0"></path>200        <path d="M5 11c3-3 11-3 14 0"></path>201        <path d="M8 14c2-2 6-2 8 0"></path>202        <circle cx="12" cy="18" r="1.5" class="svg-solid"></circle>203      </svg>204      <!-- Battery -->205      <svg width="50" height="44" viewBox="0 0 26 16">206        <rect x="1" y="3" width="20" height="10" rx="2" stroke="#eaeaea"></rect>207        <rect x="3" y="5" width="14" height="6" rx="1" class="svg-solid"></rect>208        <rect x="22" y="6" width="3" height="4" rx="1" stroke="#eaeaea"></rect>209      </svg>210    </div>211  </div>212 213  <!-- App bar -->214  <div class="app-bar">215    <div class="app-left">216      <div class="icon-btn">217        <!-- Back arrow -->218        <svg width="56" height="56" viewBox="0 0 24 24">219          <path d="M15 5l-7 7 7 7"></path>220        </svg>221      </div>222      <div class="icon-btn">223        <!-- Hamburger -->224        <svg width="56" height="56" viewBox="0 0 24 24">225          <path d="M4 6h16"></path>226          <path d="M4 12h16"></path>227          <path d="M4 18h16"></path>228        </svg>229      </div>230    </div>231    <div class="cart-wrap icon-btn">232      <!-- Cart -->233      <svg width="64" height="64" viewBox="0 0 24 24">234        <path d="M3 6h2l2 10h10l2-8H6"></path>235        <circle cx="9" cy="19" r="1.5" class="svg-solid"></circle>236        <circle cx="17" cy="19" r="1.5" class="svg-solid"></circle>237      </svg>238      <div class="badge">0</div>239    </div>240  </div>241 242  <!-- Content -->243  <div class="content">244    <div class="section-title">Feature & Benefits</div>245    <div class="progress"><span></span></div>246 247    <div class="pill">26.5 cubic feet capacity</div>248    <div class="pill">Fingerprint resistant finish</div>249    <div class="pill">Adjustable spill-proof shelves</div>250    <div class="pill">High efficiency LED lighting</div>251    <div class="pill">Family hub feature</div>252    <div class="pill">External water and ice dispenser</div>253 254    <div class="section-title" style="margin-top: 40px;">Customer Question & Answer</div>255    <div class="progress"><span style="width: 32%;"></span></div>256 257    <div class="qa-card">258      <b>Question :</b> Does it have Family Hub?<br>259      <b>Answer:</b> Yes, it does! I currently have it.260    </div>261 262    <div class="qa-card">263      <b>Question :</b> With this model and the side by side with the family hub model, is the “water dispenser” filtered water? I can’t get a straight forward answer on this.<br><br>264      <b>Answer:</b> Yes, there is a filter that is located in the middle of the inner drawer.265    </div>266 267    <div class="section-title" style="margin-top: 44px;">Editorial Review</div>268    <div class="progress"><span style="width: 34%;"></span></div>269 270    <div class="para">271      The Samsung refrigerator in question here is an excellent purchase, as it comes with a Family Hub that allows you272      to manage groceries, stream music, and mirror your phone. The fingerprint resistant finish and high efficiency LED273      lighting make everyday use easier, while the external water and ice dispenser is both convenient and reliable.274    </div>275  </div>276 277  <!-- Bottom action bar -->278  <div class="bottom-bar">279    <div class="bar-left">280      <div class="circle">281        <!-- Heart -->282        <svg width="52" height="52" viewBox="0 0 24 24">283          <path d="M12 21s-7-4.5-9-8.5C1 8 3.5 5.5 6.5 6.5c1.6.5 2.7 1.8 3.5 3 0 0 .9-2 3.5-3 3-1 5.5 1.5 3.5 6-2 4-9 8.5-9 8.5z"></path>284        </svg>285      </div>286      <div class="circle">287        <!-- Share -->288        <svg width="52" height="52" viewBox="0 0 24 24">289          <circle cx="6" cy="12" r="2" class="svg-solid"></circle>290          <circle cx="18" cy="6" r="2" class="svg-solid"></circle>291          <circle cx="18" cy="18" r="2" class="svg-solid"></circle>292          <path d="M8 12l8-6"></path>293          <path d="M8 12l8 6"></path>294        </svg>295      </div>296    </div>297    <div class="cta">ADD TO CART</div>298  </div>299 300  <div class="home-indicator"></div>301</div>302</body>303</html>