GD-ML/AndroidCode
13.4k
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 Detail - Samsung Refrigerator</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 border-radius: 24px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.35);17 color: #fff;18 }19 20 /* Status bar */21 .status-bar {22 height: 112px;23 background: #4a4a4a;24 color: #fff;25 display: flex;26 align-items: center;27 padding: 0 36px;28 font-weight: 600;29 font-size: 36px;30 }31 .status-left { flex: 1; }32 .status-right {33 display: flex;34 gap: 24px;35 align-items: center;36 font-size: 0;37 }38 .status-icon {39 width: 42px; height: 42px;40 display: inline-flex; align-items: center; justify-content: center;41 }42 /* App bar */43 .app-bar {44 height: 140px;45 background: #1c1c1c;46 display: flex;47 align-items: center;48 padding: 0 36px;49 position: relative;50 }51 .app-left { display: flex; gap: 36px; align-items: center; }52 .app-right { margin-left: auto; position: relative; }53 .icon {54 width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;55 }56 .badge {57 position: absolute; right: -10px; top: 8px;58 background: #f1a52a; color: #000; font-weight: 700;59 width: 54px; height: 54px; border-radius: 50%;60 display: flex; align-items: center; justify-content: center;61 font-size: 30px; border: 3px solid #252525;62 }63 64 /* Image area */65 .image-area {66 background: #f4f4f4;67 height: 1040px;68 position: relative;69 padding: 40px;70 }71 .product-img {72 width: 900px; height: 960px;73 margin: 0 auto;74 background: #E0E0E0;75 border: 1px solid #BDBDBD;76 display: flex; align-items: center; justify-content: center;77 color: #757575; font-size: 36px; font-weight: 600;78 letter-spacing: 0.2px;79 }80 .count-pill {81 position: absolute; right: 48px; top: 48px;82 background: #7a7a7a; color: #fff; padding: 16px 26px; border-radius: 16px;83 font-size: 34px; font-weight: 700;84 }85 .dots {86 position: absolute; left: 0; bottom: 0;87 width: 100%; height: 120px; background: #2b2b2b;88 display: flex; align-items: center; justify-content: center; gap: 22px;89 }90 .dot {91 width: 22px; height: 22px; border-radius: 50%; background: #3e3e3e;92 }93 .dot.active { background: #f1a52a; }94 95 /* Details */96 .details {97 background: #0e0e0e;98 border-top-left-radius: 36px; border-top-right-radius: 36px;99 margin-top: -2px;100 padding: 48px 40px 280px;101 }102 .title-price {103 display: flex; gap: 20px;104 }105 h1 {106 font-size: 48px; line-height: 1.25; margin: 0 0 24px 0; font-weight: 800;107 max-width: 700px;108 }109 .price-block {110 margin-left: auto; text-align: right; min-width: 280px;111 }112 .price {113 color: #f1a52a; font-weight: 800; font-size: 44px;114 }115 .old-price {116 color: #9c9c9c; text-decoration: line-through; font-size: 34px; margin-top: 8px;117 }118 .off-pill {119 display: inline-block; margin-top: 14px;120 background: #fff; color: #111; font-weight: 800; font-size: 30px;121 border-radius: 14px; padding: 12px 20px; border: 2px solid #111;122 }123 124 .meta {125 font-size: 36px; line-height: 1.6;126 }127 .meta .by { color: #d8d8d8; }128 .meta .brand { font-weight: 700; color: #fff; }129 .meta .item-id { color: #f1a52a; font-weight: 700; }130 .stock { color: #28a745; font-weight: 700; }131 132 /* Quantity */133 .qty-row {134 display: flex; align-items: center; gap: 18px; margin: 24px 0;135 justify-content: flex-end;136 }137 .qty-btn {138 width: 90px; height: 90px; border-radius: 50%;139 border: 3px solid #6b6b6b; color: #dcdcdc; font-size: 48px; font-weight: 800;140 display: flex; align-items: center; justify-content: center;141 }142 .qty-btn.plus { border-color: #f1a52a; color: #f1a52a; }143 .qty-value {144 width: 90px; height: 90px; border: 3px solid #dcdcdc; border-radius: 16px;145 display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800;146 }147 148 /* Flags and warranty */149 .imported {150 display: flex; align-items: center; gap: 20px; margin-top: 24px; font-size: 34px;151 }152 .flag {153 width: 72px; height: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;154 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 8px;155 }156 .section-label { margin-top: 28px; font-size: 40px; font-weight: 800; }157 .warranty-options { display: flex; gap: 24px; margin-top: 20px; }158 .option {159 padding: 26px 34px; border-radius: 16px; font-size: 34px; font-weight: 700; background: #1a1a1a; border: 3px solid #5a5a5a; color: #eaeaea;160 }161 .option.primary { border-color: #f1a52a; }162 .option .chev { margin-left: 18px; opacity: 0.8; }163 164 .delivery {165 margin-top: 28px; font-size: 34px; color: #28a745; font-weight: 800;166 }167 168 /* Bottom actions */169 .actions {170 display: flex; align-items: center; justify-content: space-between;171 position: absolute; left: 0; right: 0; bottom: 120px; padding: 0 40px;172 }173 .act-left { display: flex; gap: 40px; }174 .circle-btn {175 width: 96px; height: 96px; border-radius: 50%;176 border: 3px solid #7a7a7a; background: #1d1d1d;177 display: flex; align-items: center; justify-content: center;178 }179 .add-to-cart {180 color: #fff; font-weight: 800; font-size: 44px; letter-spacing: 1px;181 }182 183 /* Home indicator */184 .home-indicator {185 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);186 width: 360px; height: 14px; background: #ffffff; border-radius: 8px; opacity: 0.85;187 }188</style>189</head>190<body>191<div id="render-target">192 <!-- Status Bar -->193 <div class="status-bar">194 <div class="status-left">9:50</div>195 <div class="status-right">196 <div class="status-icon">197 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg>198 </div>199 <div class="status-icon">200 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="10" width="18" height="8"/><rect x="6" y="7" width="12" height="3"/></svg>201 </div>202 <div class="status-icon">203 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 12h20M6 8h12M10 4h4"/></svg>204 </div>205 <div class="status-icon">206 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z"/></svg>207 </div>208 </div>209 </div>210 211 <!-- App Bar -->212 <div class="app-bar">213 <div class="app-left">214 <div class="icon">215 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round">216 <path d="M15 18l-6-6 6-6"/>217 </svg>218 </div>219 <div class="icon">220 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round">221 <path d="M4 7h16M4 12h10M4 17h8"/>222 </svg>223 </div>224 </div>225 <div class="app-right">226 <div class="icon">227 <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">228 <rect x="6" y="8" width="12" height="10" rx="2"/>229 <path d="M9 8V6h6v2"/>230 </svg>231 </div>232 <div class="badge">0</div>233 </div>234 </div>235 236 <!-- Image Area -->237 <div class="image-area">238 <div class="count-pill">1 of 5</div>239 <div class="product-img">[IMG: Samsung French Door Refrigerator]</div>240 <div class="dots">241 <div class="dot active"></div>242 <div class="dot"></div>243 <div class="dot"></div>244 <div class="dot"></div>245 </div>246 </div>247 248 <!-- Details -->249 <div class="details">250 <div class="title-price">251 <h1>Samsung RF27T5501SR 27 cu. ft. 3-Door French Door Refrigerator</h1>252 <div class="price-block">253 <div class="price">EUR 3495.00</div>254 <div class="old-price">EUR 3911.00</div>255 <div class="off-pill">11% OFF</div>256 </div>257 </div>258 259 <div class="meta">260 <div class="by">By: <span class="brand">SAMSUNG</span></div>261 <div>Item Id : <span class="item-id">35898198</span></div>262 <div class="stock">In Stock</div>263 </div>264 265 <div class="qty-row">266 <div class="qty-btn">−</div>267 <div class="qty-value">1</div>268 <div class="qty-btn plus">+</div>269 </div>270 271 <div class="imported">272 <div class="flag">US Flag</div>273 <div>Imported from US Store</div>274 </div>275 276 <div class="section-label">U‑Care Warranty:</div>277 <div class="warranty-options">278 <div class="option primary">None</div>279 <div class="option">Select a plan <span class="chev">›</span></div>280 </div>281 282 <div class="delivery">Order now and get it around Wednesday, January 17</div>283 </div>284 285 <!-- Actions -->286 <div class="actions">287 <div class="act-left">288 <div class="circle-btn">289 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">290 <path d="M12 21s-6-4.35-6-9a4 4 0 0 1 8 0 4 4 0 0 1 8 0c0 4.65-6 9-6 9z"/>291 </svg>292 </div>293 <div class="circle-btn">294 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">295 <circle cx="6" cy="12" r="2"/><circle cx="12" cy="8" r="2"/><circle cx="18" cy="14" r="2"/>296 <path d="M7.5 11l3-2.5M13.5 9.5l3 3"/>297 </svg>298 </div>299 </div>300 <div class="add-to-cart">ADD TO CART</div>301 </div>302 303 <div class="home-indicator"></div>304</div>305</body>306</html>