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 - Washing Machine</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; background: #ffffff;11 color: #222;12 }13 .statusbar {14 height: 110px; background: #f5f5f5; display: flex; align-items: center; padding: 0 32px; font-size: 40px; color: #666;15 }16 .statusbar .icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }17 .topbar {18 height: 140px; display: flex; align-items: center; padding: 0 28px; gap: 24px;19 }20 .back-btn { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }21 .search-pill {22 flex: 1; height: 100px; background: #f0f0f0; border-radius: 50px; display: flex; align-items: center; padding: 0 34px; gap: 20px; color: #888; font-size: 40px;23 }24 .right-icons { width: 320px; display: flex; align-items: center; justify-content: flex-end; gap: 28px; }25 .tabbar { display: flex; align-items: center; gap: 40px; padding: 0 32px; height: 110px; border-bottom: 1px solid #eee; }26 .tab { font-size: 40px; color: #888; }27 .tab.active { color: #ff9f1a; font-weight: 700; display: flex; align-items: center; gap: 16px; }28 .section { padding: 32px; }29 .price { font-size: 72px; font-weight: 800; margin: 22px 0; }30 .title-row { display: flex; align-items: flex-start; gap: 16px; }31 .title { font-size: 38px; line-height: 1.4; color: #333; flex: 1; }32 .like-btn { width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; }33 .badge {34 margin-top: 26px; background: #fff3df; border: 1px solid #f5d9a9; border-radius: 18px;35 padding: 28px; font-size: 34px; color: #a66a00; display: flex; align-items: center; justify-content: space-between;36 }37 .split { height: 22px; background: #f7f7f7; margin: 32px 0; }38 .row-between { display: flex; align-items: center; justify-content: space-between; }39 .subtitle { font-size: 46px; font-weight: 700; color: #222; }40 .subnote { font-size: 38px; color: #888; margin-left: 14px; }41 .thumbs { display: flex; gap: 24px; margin-top: 24px; }42 .img-placeholder {43 width: 230px; height: 230px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 20px;44 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; text-align: center;45 }46 .delivery { font-size: 40px; color: #555; line-height: 1.65; }47 .delivery .bold { font-weight: 800; color: #222; }48 .delivery .accent { color: #333; font-weight: 700; }49 .card { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 28px 0; }50 .protection-grid {51 display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 20px; font-size: 36px; color: #444;52 }53 .protect-item { display: flex; align-items: center; gap: 18px; }54 .share-banner {55 background: #ffe9d3; color: #d27a0c; border-top: 1px solid #ffd9b0; border-bottom: 1px solid #ffd9b0;56 padding: 34px 32px; display: flex; align-items: center; justify-content: space-between; font-size: 40px;57 }58 .reviews { padding: 28px 32px; }59 .chips { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }60 .chip {61 padding: 18px 26px; background: #f1f1f1; color: #666; font-size: 34px; border-radius: 999px; border: 1px solid #e6e6e6;62 }63 .bottom-bar {64 position: absolute; left: 0; bottom: 90px; width: 100%; height: 180px;65 background: #ffffff; border-top: 1px solid #eee; display: flex; align-items: center; gap: 24px; padding: 0 26px;66 }67 .mini-actions { display: flex; gap: 22px; }68 .mini-btn {69 width: 140px; height: 120px; border-radius: 26px; border: 1px solid #eee; background: #fafafa;70 display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 30px; color: #333; gap: 10px;71 }72 .add-cart {73 flex: 1; height: 120px; border-radius: 60px; border: 2px solid #ffd14f; background: #fff9e9; color: #3a2e00;74 font-size: 44px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 16px;75 }76 .buy-now {77 width: 330px; height: 120px; border-radius: 60px; background: #ffcc00; color: #1a1a1a; font-size: 44px; font-weight: 800;78 display: flex; align-items: center; justify-content: center;79 }80 .home-indicator {81 position: absolute; left: 50%; transform: translateX(-50%);82 bottom: 24px; width: 360px; height: 16px; background: #d9d9d9; border-radius: 10px;83 }84 .arrow-right { color: #bbb; font-size: 42px; }85 /* Simple utility */86 .muted { color: #999; }87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Status bar -->93 <div class="statusbar">94 <div>9:47</div>95 <div class="icons">96 <!-- search icon in status -->97 <svg width="42" height="42" viewBox="0 0 32 32">98 <circle cx="14" cy="14" r="9" stroke="#777" stroke-width="2.5" fill="none"/>99 <line x1="19.5" y1="19.5" x2="28" y2="28" stroke="#777" stroke-width="2.5" stroke-linecap="round"/>100 </svg>101 <!-- two rectangles icon -->102 <svg width="42" height="42" viewBox="0 0 32 32">103 <rect x="4" y="5" width="10" height="20" rx="2" fill="#777"/>104 <rect x="18" y="7" width="10" height="18" rx="2" fill="#a3a3a3"/>105 </svg>106 <!-- S letter icon -->107 <div style="width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#777;">S</div>108 <div style="width:10px;height:10px;background:#9e9e9e;border-radius:50%;"></div>109 <!-- signal & battery placeholders -->110 <svg width="42" height="42" viewBox="0 0 32 32">111 <path d="M4 24h4v4H4zM10 18h4v10h-4zM16 12h4v16h-4zM22 6h4v22h-4z" fill="#777"/>112 </svg>113 <svg width="42" height="42" viewBox="0 0 32 32">114 <rect x="4" y="9" width="20" height="14" rx="2" fill="#777"/>115 <rect x="25" y="13" width="3" height="6" fill="#777"/>116 </svg>117 </div>118 </div>119 120 <!-- Top search bar -->121 <div class="topbar">122 <div class="back-btn">123 <svg width="56" height="56" viewBox="0 0 32 32">124 <path d="M20 6 L8 16 L20 26" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>125 </svg>126 </div>127 <div class="search-pill">128 <svg width="44" height="44" viewBox="0 0 32 32">129 <circle cx="14" cy="14" r="9" stroke="#888" stroke-width="2.5" fill="none"/>130 <line x1="19.5" y1="19.5" x2="28" y2="28" stroke="#888" stroke-width="2.5" stroke-linecap="round"/>131 </svg>132 <span>washing machine</span>133 </div>134 <div class="right-icons">135 <!-- coin/timer icon -->136 <div style="position: relative;">137 <svg width="52" height="52" viewBox="0 0 32 32">138 <circle cx="16" cy="16" r="12" stroke="#888" stroke-width="2.5" fill="none"/>139 <path d="M16 8v8l6 3" stroke="#888" stroke-width="2.5" fill="none" stroke-linecap="round"/>140 </svg>141 <div style="position:absolute;right:-2px;top:-2px;width:26px;height:26px;background:#ffd54f;border-radius:50%;border:2px solid #fff;"></div>142 </div>143 <!-- cart -->144 <svg width="52" height="52" viewBox="0 0 32 32">145 <path d="M5 6h4l3 16h11l3-12H11" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>146 <circle cx="14" cy="26" r="2.5" fill="#333"/>147 <circle cx="24" cy="26" r="2.5" fill="#333"/>148 </svg>149 <!-- more/ellipsis -->150 <div style="position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center;">151 <svg width="42" height="42" viewBox="0 0 32 32">152 <circle cx="16" cy="8" r="3" fill="#333"/><circle cx="16" cy="16" r="3" fill="#333"/><circle cx="16" cy="24" r="3" fill="#333"/>153 </svg>154 <div style="position:absolute;right:0;top:0;width:18px;height:18px;background:#ff1a1a;border-radius:50%;"></div>155 </div>156 </div>157 </div>158 159 <!-- Tabs -->160 <div class="tabbar">161 <div class="tab active">162 <svg width="34" height="34" viewBox="0 0 32 32">163 <path d="M16 4l6 8h-4v10h-4V12h-4z" fill="#ff9f1a"/>164 </svg>165 <span>Overview</span>166 </div>167 <div class="tab">Description</div>168 <div class="tab">Recommend</div>169 </div>170 171 <!-- Price and title -->172 <div class="section">173 <div class="price">958,75 €</div>174 <div class="title-row">175 <div class="title">Free shipping 380w Power Washer Can Wash 8kg Clothes Top Loading Washer Automatic Top ...</div>176 <div class="like-btn">177 <svg width="50" height="50" viewBox="0 0 32 32">178 <path d="M23 6c-2 0-3 1-7 5-4-4-5-5-7-5a5 5 0 0 0 0 10l7 6 7-6a5 5 0 0 0 0-10z" stroke="#333" stroke-width="2.2" fill="none"/>179 </svg>180 </div>181 </div>182 183 <div class="badge">184 <div style="display:flex;align-items:center;gap:16px;">185 <svg width="40" height="40" viewBox="0 0 32 32">186 <path d="M10 4h12v10l-6 3-6-3z" fill="#f0b84f"/>187 <path d="M12 20h8v8h-8z" fill="#f0b84f"/>188 </svg>189 <span>NO.61 in Washing Machines 7 days Top Ranking list ></span>190 </div>191 <svg width="44" height="44" viewBox="0 0 32 32">192 <path d="M16 4l10 6-4 12H10L6 10z" stroke="#e0a64a" stroke-width="2" fill="none"/>193 <star/>194 </svg>195 </div>196 </div>197 198 <div class="split"></div>199 200 <!-- Please Select -->201 <div class="section row-between">202 <div>203 <div class="subtitle">Please Select <span class="subnote">Options</span></div>204 <div class="thumbs">205 <div class="img-placeholder">[IMG: Top Loading Washer]</div>206 <div class="img-placeholder">[IMG: Top Loading Washer]</div>207 </div>208 </div>209 <div class="arrow-right">›</div>210 </div>211 212 <div class="split"></div>213 214 <!-- Delivery -->215 <div class="section">216 <div class="row-between">217 <div class="subtitle">Delivery</div>218 <div class="arrow-right">›</div>219 </div>220 <div class="delivery" style="margin-top:16px;">221 Shipping Cost : <span class="bold">Free Shipping</span><br/>222 To <span class="bold">Jordan</span> via <span class="bold">TNT</span> Estimated Delivery time <span class="accent">Dec 10 to Dec 25</span>223 </div>224 </div>225 226 <div class="split"></div>227 228 <!-- Trade Protection -->229 <div class="section card">230 <div class="row-between">231 <div class="subtitle">Trade Protection</div>232 <div class="arrow-right">›</div>233 </div>234 <div class="protection-grid">235 <div class="protect-item">236 <svg width="42" height="42" viewBox="0 0 32 32">237 <path d="M16 4l12 6v6c0 6-6 10-12 12C10 26 4 22 4 16v-6z" stroke="#666" stroke-width="2" fill="none"/>238 <path d="M10 16l4 4 8-8" stroke="#666" stroke-width="2" fill="none"/>239 </svg>240 <span>Buyer Protection</span>241 </div>242 <div class="protect-item">243 <svg width="42" height="42" viewBox="0 0 32 32">244 <rect x="6" y="8" width="20" height="16" rx="3" stroke="#666" stroke-width="2" fill="none"/>245 <path d="M10 12h12M10 16h12" stroke="#666" stroke-width="2"/>246 </svg>247 <span>Secure Payment</span>248 </div>249 <div class="protect-item">250 <svg width="42" height="42" viewBox="0 0 32 32">251 <path d="M8 8h16v10H8z" stroke="#666" stroke-width="2" fill="none"/>252 <path d="M12 22l-2 4h12l-2-4" stroke="#666" stroke-width="2" fill="none"/>253 </svg>254 <span>Return Policy</span>255 </div>256 <div class="protect-item">257 <svg width="42" height="42" viewBox="0 0 32 32">258 <path d="M16 4l12 6-12 6L4 10z" stroke="#666" stroke-width="2" fill="none"/>259 <path d="M6 24h20" stroke="#666" stroke-width="2"/>260 </svg>261 <span>Refund for No Delivery</span>262 </div>263 </div>264 </div>265 266 <!-- Share banner -->267 <div class="share-banner">268 <div style="display:flex;align-items:center;gap:18px;">269 <svg width="48" height="48" viewBox="0 0 32 32">270 <circle cx="16" cy="16" r="12" fill="#ffb74d"/>271 <text x="16" y="21" font-size="16" text-anchor="middle" fill="#7a4b00" font-weight="800">$</text>272 </svg>273 <span>Share To Earn 28,76 €</span>274 </div>275 <div class="arrow-right">›</div>276 </div>277 278 <div class="split"></div>279 280 <!-- Store Reviews -->281 <div class="reviews">282 <div class="row-between">283 <div class="subtitle">Store Reviews <span class="muted">(343)</span></div>284 <div class="arrow-right">›</div>285 </div>286 <div class="chips">287 <div class="chip">good grinder (12)</div>288 <div class="chip">good quality (5)</div>289 <div class="chip">amazing mixer (5)</div>290 <div class="chip">good (4)</div>291 <div class="chip">satisfied (4)</div>292 <div class="chip">love (3)</div>293 </div>294 </div>295 296 <!-- Bottom sticky bar -->297 <div class="bottom-bar">298 <div class="mini-actions">299 <div class="mini-btn">300 <svg width="40" height="40" viewBox="0 0 32 32">301 <path d="M6 22h20v6H6zM6 22l3-8h14l3 8" stroke="#333" stroke-width="2" fill="none"/>302 </svg>303 <div>Store</div>304 </div>305 <div class="mini-btn">306 <svg width="40" height="40" viewBox="0 0 32 32">307 <path d="M6 6h20v14H16l-6 6v-6H6z" stroke="#333" stroke-width="2" fill="none" stroke-linejoin="round"/>308 </svg>309 <div>Chat</div>310 </div>311 </div>312 <div class="add-cart">313 <svg width="44" height="44" viewBox="0 0 32 32">314 <circle cx="16" cy="16" r="12" fill="#ffd14f"/>315 <text x="16" y="22" font-size="18" text-anchor="middle" fill="#7a4b00" font-weight="800">S</text>316 </svg>317 <span>Add to Cart</span>318 </div>319 <div class="buy-now">Buy Now</div>320 </div>321 322 <!-- Home indicator -->323 <div class="home-indicator"></div>324 325</div>326</body>327</html>