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 - Specs</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    border-radius: 44px;16    box-shadow: 0 30px 80px rgba(0,0,0,0.45);17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 100%;24    height: 92px;25    background: #2A2A2A;26    display: flex;27    align-items: center;28    padding: 0 36px;29    font-weight: 600;30    font-size: 40px;31    letter-spacing: 0.2px;32  }33  .status-left { display: flex; align-items: center; gap: 22px; }34  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35  .status-dot { width: 14px; height: 14px; background: #BDBDBD; border-radius: 50%; opacity: 0.7; }36 37  /* App bar */38  .app-bar {39    position: absolute;40    top: 92px; left: 0;41    width: 100%;42    height: 140px;43    background: #1C1C1C;44    display: flex;45    align-items: center;46    padding: 0 28px;47  }48  .app-left { display: flex; align-items: center; gap: 34px; }49  .app-right { margin-left: auto; position: relative; }50  .icon-btn { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }51  .cart-badge {52    position: absolute;53    top: 18px; right: 18px;54    background: #FFB200;55    color: #121212;56    font-weight: 800;57    font-size: 30px;58    min-width: 48px;59    height: 48px;60    padding: 0 10px;61    border-radius: 24px;62    display: flex;63    align-items: center;64    justify-content: center;65    box-shadow: 0 6px 10px rgba(0,0,0,0.25);66  }67 68  /* Specs card/table */69  .spec-card {70    position: absolute;71    top: 232px; left: 24px;72    width: 1032px;73    height: 1680px;74    background: #141414;75    border-radius: 0 0 34px 34px;76    overflow: hidden;77    border: 1px solid #222;78  }79  .spec-row {80    display: flex;81    align-items: center;82    border-top: 1px solid #2B2B2B;83    border-bottom: 1px solid #2B2B2B;84    height: 115px;85    font-size: 40px;86  }87  .spec-row:nth-child(odd) { background: #1B1B1B; }88  .spec-row:nth-child(even) { background: #202020; }89 90  .cell {91    width: 50%;92    padding: 0 34px;93    color: #EDEDED;94  }95  .label { color: #D7D7D7; }96  .value { color: #FFFFFF; font-weight: 600; }97 98  /* Bottom action bar */99  .bottom-bar {100    position: absolute;101    bottom: 110px; left: 0;102    width: 100%;103    height: 150px;104    background: #0F0F0F;105    display: flex;106    align-items: center;107    padding: 0 40px;108    border-top: 1px solid #222;109  }110  .bottom-actions { display: flex; align-items: center; gap: 40px; }111  .bottom-text {112    margin-left: auto;113    font-size: 56px;114    font-weight: 800;115    letter-spacing: 1.2px;116  }117 118  /* Home/gesture indicator */119  .home-indicator {120    position: absolute;121    bottom: 36px;122    left: 50%;123    transform: translateX(-50%);124    width: 240px;125    height: 12px;126    background: #FFFFFF;127    border-radius: 10px;128    opacity: 0.9;129  }130 131  /* Simple utility */132  svg { display: block; }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status bar -->139  <div class="status-bar">140    <div class="status-left">141      <div>9:51</div>142      <div class="status-dot"></div>143      <div class="status-dot"></div>144      <div class="status-dot"></div>145      <div class="status-dot"></div>146    </div>147    <div class="status-right">148      <!-- WiFi icon -->149      <svg width="48" height="48" viewBox="0 0 24 24">150        <path d="M4 8c4.4-3.3 11.6-3.3 16 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>151        <path d="M7 12c3-2.2 7-2.2 10 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>152        <path d="M10 16c1.7-1.2 2.3-1.2 4 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>153        <circle cx="12" cy="19" r="1.5" fill="#fff"/>154      </svg>155      <!-- Battery icon -->156      <svg width="48" height="48" viewBox="0 0 24 24">157        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>158        <rect x="4" y="8" width="12" height="8" fill="#fff"/>159        <rect x="20" y="10" width="2" height="4" fill="#fff"/>160      </svg>161    </div>162  </div>163 164  <!-- App bar -->165  <div class="app-bar">166    <div class="app-left">167      <div class="icon-btn">168        <!-- Back chevron -->169        <svg width="64" height="64" viewBox="0 0 24 24">170          <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171        </svg>172      </div>173      <div class="icon-btn">174        <!-- Two-line menu icon -->175        <svg width="64" height="64" viewBox="0 0 24 24">176          <path d="M6 9h12M6 15h8" stroke="#fff" stroke-width="2.4" stroke-linecap="round" fill="none"/>177        </svg>178      </div>179    </div>180    <div class="app-right">181      <div class="icon-btn">182        <!-- Cart icon -->183        <svg width="64" height="64" viewBox="0 0 24 24">184          <path d="M4 6h2l2 10h9l2-7H8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185          <circle cx="10" cy="20" r="1.5" fill="#fff"/>186          <circle cx="17" cy="20" r="1.5" fill="#fff"/>187        </svg>188      </div>189      <div class="cart-badge">0</div>190    </div>191  </div>192 193  <!-- Specs content card -->194  <div class="spec-card">195    <div class="spec-row">196      <div class="cell label">Number of Doors</div>197      <div class="cell value">3</div>198    </div>199    <div class="spec-row">200      <div class="cell label">Voltage</div>201      <div class="cell value">115 Volts</div>202    </div>203    <div class="spec-row">204      <div class="cell label">Form Factor</div>205      <div class="cell value">French Door</div>206    </div>207    <div class="spec-row">208      <div class="cell label">Lock Type</div>209      <div class="cell value">Electronic</div>210    </div>211    <div class="spec-row">212      <div class="cell label">Efficiency</div>213      <div class="cell value">High Efficiency</div>214    </div>215    <div class="spec-row">216      <div class="cell label">Annual Energy Consumption</div>217      <div class="cell value">746 Kilowatt Hours</div>218    </div>219    <div class="spec-row">220      <div class="cell label">Product Dimensions</div>221      <div class="cell value">37.5"D x 72"W x 37.5"H (95.3 x 182.9 x 95.3 cm)</div>222    </div>223    <div class="spec-row">224      <div class="cell label">Brand</div>225      <div class="cell value">SAMSUNG</div>226    </div>227    <div class="spec-row">228      <div class="cell label">Capacity</div>229      <div class="cell value">26.5 Cubic Feet</div>230    </div>231    <div class="spec-row">232      <div class="cell label">Configuration</div>233      <div class="cell value">French Door</div>234    </div>235    <div class="spec-row">236      <div class="cell label">Color</div>237      <div class="cell value">Grey</div>238    </div>239    <div class="spec-row">240      <div class="cell label">Installation Type</div>241      <div class="cell value">Freestanding</div>242    </div>243    <div class="spec-row">244      <div class="cell label">Number of Doors</div>245      <div class="cell value">3</div>246    </div>247    <div class="spec-row">248      <div class="cell label">Voltage</div>249      <div class="cell value">115 Volts</div>250    </div>251    <div class="spec-row">252      <div class="cell label">Finish Type</div>253      <div class="cell value">Matte</div>254    </div>255    <div class="spec-row">256      <div class="cell label">Door Material Type</div>257      <div class="cell value">Stainless Steel</div>258    </div>259  </div>260 261  <!-- Bottom action bar -->262  <div class="bottom-bar">263    <div class="bottom-actions">264      <div class="icon-btn">265        <!-- Heart icon -->266        <svg width="64" height="64" viewBox="0 0 24 24">267          <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>268        </svg>269      </div>270      <div class="icon-btn">271        <!-- Share icon -->272        <svg width="64" height="64" viewBox="0 0 24 24">273          <circle cx="18" cy="5" r="2.2" fill="#fff"/>274          <circle cx="6" cy="12" r="2.2" fill="#fff"/>275          <circle cx="18" cy="19" r="2.2" fill="#fff"/>276          <path d="M8 12l8-7M8 12l8 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>277        </svg>278      </div>279    </div>280    <div class="bottom-text">ADD TO CART</div>281  </div>282 283  <!-- home indicator -->284  <div class="home-indicator"></div>285</div>286</body>287</html>