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 - Toolbox</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; height:2400px; position:relative; overflow:hidden; background:#ffffff;11 }12 /* Header / status */13 .header {14 position:relative;15 width:100%;16 height:260px;17 background: linear-gradient(180deg, #79e1d5 0%, #c7efe7 100%);18 }19 .status {20 height:70px; padding:0 32px; display:flex; align-items:center; color:#2e2e2e; font-weight:600; font-size:30px;21 }22 .status .icons { margin-left:auto; display:flex; align-items:center; gap:22px; color:#4a4a4a; }23 .status .dot { width:18px; height:18px; background:#2d2d2d; border-radius:50%; display:inline-block; }24 .status .wifi { width:32px; height:24px; border:3px solid #2d2d2d; border-top:none; border-radius:0 0 20px 20px; position:relative; }25 .status .battery { width:48px; height:24px; border:3px solid #2d2d2d; position:relative; }26 .status .battery::after { content:""; position:absolute; right:-8px; top:7px; width:6px; height:10px; background:#2d2d2d; }27 /* Search bar */28 .search-wrap { display:flex; align-items:center; gap:22px; padding:0 24px; margin-top:10px; }29 .icon-btn { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; }30 .icon-btn svg { width:44px; height:44px; }31 .searchbar {32 flex:1; height:88px; background:#fff; border-radius:20px; box-shadow:0 4px 10px rgba(0,0,0,0.18);33 display:flex; align-items:center; padding:0 24px; gap:18px; color:#555;34 }35 .searchbar .placeholder { font-size:34px; color:#5c5c5c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }36 .scan { margin-left:auto; width:60px; height:60px; border-radius:14px; background:#f3f7f7; display:flex; align-items:center; justify-content:center; }37 .scan svg { width:40px; height:40px; }38 /* Colour row */39 .colour-row { display:flex; align-items:center; gap:12px; padding:24px 32px 16px 32px; background:#fff; }40 .colour-row .label { font-size:40px; color:#333; }41 .colour-row .value { font-weight:700; font-size:40px; color:#1a1a1a; }42 .colour-row .chev { margin-left:auto; }43 .chev svg { width:36px; height:36px; }44 /* Cards row */45 .cards { display:flex; gap:26px; padding:0 32px 20px 32px; }46 .card {47 width:320px; border:2px solid #d9d9d9; border-radius:24px; background:#fff; overflow:hidden;48 }49 .card.selected { border-color:#ff9800; box-shadow:0 0 0 3px rgba(255,152,0,0.2) inset; }50 .card-img {51 width:100%; height:260px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;52 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;53 }54 .card-body { padding:18px; }55 .title { font-size:34px; color:#1f1f1f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }56 .price { font-size:34px; color:#111; margin-top:10px; }57 .stock { color:#1aa13b; font-size:30px; margin-top:8px; }58 /* Divider */59 .divider { height:18px; background:#f0f2f2; margin-top:22px; }60 /* Deal section */61 .deal { padding:28px 32px 8px 32px; }62 .badge { display:inline-block; background:#cf0b2c; color:#fff; border-radius:12px; padding:14px 22px; font-size:32px; font-weight:700; }63 .price-row { display:flex; align-items:flex-end; gap:26px; margin-top:22px; }64 .pct { color:#e41a1a; font-size:86px; font-weight:700; line-height:1; }65 .sale { font-size:86px; font-weight:800; color:#111; line-height:1; }66 .mrp { font-size:30px; color:#7a7a7a; margin-top:18px; }67 .mrp .strike { text-decoration:line-through; }68 .emi { font-size:32px; color:#222; margin-top:18px; }69 .emi a { color:#0a7bd4; text-decoration:none; }70 /* Offers box */71 .offers {72 margin:26px 32px; border:2px solid #e6e6e6; border-radius:20px; background:#fff;73 display:flex; align-items:center; padding:22px;74 }75 .offers .pct-ico {76 width:64px; height:64px; border-radius:50%; border:2px solid #dedede; display:flex; align-items:center; justify-content:center; margin-right:22px; color:#c78300;77 }78 .offers .txt { flex:1; }79 .offers .txt .title { font-weight:700; font-size:36px; }80 .offers .txt .sub { font-size:32px; color:#6b6b6b; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }81 .offers .chev { margin-left:12px; }82 /* Totals and delivery */83 .total { font-size:42px; font-weight:700; color:#111; padding:12px 32px; }84 .delivery { padding:0 32px; font-size:34px; color:#222; }85 .delivery .blue { color:#0a7bd4; }86 .delivery .green { color:#118d2e; }87 .location { padding:22px 32px; display:flex; align-items:center; gap:16px; font-size:34px; color:#333; }88 .location .link { color:#0a7bd4; }89 .pin svg { width:42px; height:42px; fill:#7a7a7a; }90 .instock-title { padding:12px 32px; color:#1aa13b; font-size:44px; font-weight:700; }91 /* Bottom nav */92 .bottom-nav {93 position:absolute; left:0; right:0; bottom:0;94 height:170px; background:#fff; border-top:2px solid #e6e6e6;95 display:flex; align-items:center; justify-content:space-around; padding-bottom:12px;96 }97 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#1f1f1f; font-size:28px; }98 .nav-item .ico { width:56px; height:56px; }99 .nav-item.active { color:#0a9aa4; }100 .cart-badge {101 position:absolute; top:-10px; right:-10px; background:#0a9aa4; color:#fff; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:22px;102 }103 .home-indicator {104 position:absolute; bottom:174px; left:50%; transform:translateX(-50%);105 width:280px; height:12px; background:#bdbdbd; border-radius:12px;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <div class="header">113 <div class="status">114 <div>9:00</div>115 <div class="icons">116 <div style="font-size:26px; border:1px solid #9aa; border-radius:10px; padding:2px 8px; color:#667;">ib</div>117 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="11" cy="11" r="9" stroke="#333" stroke-width="2" fill="none"/><path d="M20 20 L16 16" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>118 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"/><path d="M12 7 L12 13" stroke="#333" stroke-width="2"/><path d="M9 10 L15 10" stroke="#333" stroke-width="2"/></svg>119 <span class="dot"></span>120 <span class="dot" style="opacity:.5;"></span>121 <div class="wifi"></div>122 <div class="battery"></div>123 </div>124 </div>125 126 <div class="search-wrap">127 <div class="icon-btn">128 <svg viewBox="0 0 24 24">129 <path d="M15 5 L7 12 L15 19" stroke="#1a1a1a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>130 </svg>131 </div>132 <div class="searchbar">133 <svg width="40" height="40" viewBox="0 0 24 24">134 <circle cx="11" cy="11" r="7" stroke="#5c5c5c" stroke-width="2" fill="none"/>135 <path d="M20 20 L16 16" stroke="#5c5c5c" stroke-width="2" stroke-linecap="round"/>136 </svg>137 <div class="placeholder">portable tool box for toolbox for h...</div>138 <div class="scan">139 <svg viewBox="0 0 24 24">140 <rect x="4" y="4" width="4" height="4" fill="#0a9aa4"/>141 <rect x="16" y="4" width="4" height="4" fill="#0a9aa4"/>142 <rect x="4" y="16" width="4" height="4" fill="#0a9aa4"/>143 <rect x="16" y="16" width="4" height="4" fill="#0a9aa4"/>144 </svg>145 </div>146 </div>147 </div>148 </div>149 150 <div class="colour-row">151 <div class="label">Colour:</div>152 <div class="value">Brown & Ivory</div>153 <div class="chev">154 <svg viewBox="0 0 24 24">155 <path d="M5 15 L12 8 L19 15" stroke="#1f1f1f" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>156 </svg>157 </div>158 </div>159 160 <div class="cards">161 <div class="card">162 <div class="card-img">[IMG: Toolbox - Blue & Black]</div>163 <div class="card-body">164 <div class="title">Blue & Black</div>165 <div class="price">₹2,184.00</div>166 <div class="stock">In stock</div>167 </div>168 </div>169 <div class="card selected">170 <div class="card-img">[IMG: Toolbox - Brown & Ivory]</div>171 <div class="card-body">172 <div class="title">Brown & Iv...</div>173 <div class="price">₹2,184.00</div>174 <div class="stock">In stock</div>175 </div>176 </div>177 <div class="card">178 <div class="card-img">[IMG: Toolbox - Red & Black]</div>179 <div class="card-body">180 <div class="title">Red & Black</div>181 <div class="price">₹2,184.00</div>182 <div class="stock">In stock</div>183 </div>184 </div>185 </div>186 187 <div class="divider"></div>188 189 <div class="deal">190 <div class="badge">Deal of the Day</div>191 <div class="price-row">192 <div class="pct">-66%</div>193 <div class="sale">₹2,184</div>194 </div>195 <div class="mrp">M.R.P.: <span class="strike">₹6,335</span></div>196 <div class="emi">EMI from ₹106. No Cost EMI available. <a href="#">EMI options</a><br/>Inclusive of all taxes</div>197 </div>198 199 <div class="offers">200 <div class="pct-ico">%</div>201 <div class="txt">202 <div class="title">Save Extra with Offers</div>203 <div class="sub">Bank Offers, No Cost EMI Offers and Partner...</div>204 </div>205 <div class="chev">206 <svg viewBox="0 0 24 24">207 <path d="M9 6 L15 12 L9 18" stroke="#333" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 </div>211 212 <div class="total">Total: ₹2,184</div>213 214 <div class="delivery">215 <span class="blue">FREE delivery</span> <strong>Friday, 8 December.</strong> Order within <span class="green">6 hrs 59 mins</span>. <span class="blue">Details</span>216 </div>217 218 <div class="location">219 <div class="pin">220 <svg viewBox="0 0 24 24">221 <path d="M12 2 C8 2 5 5 5 9 C5 14 12 22 12 22 C12 22 19 14 19 9 C19 5 16 2 12 2 Z" fill="#7a7a7a"/>222 <circle cx="12" cy="9" r="3" fill="#fff"/>223 </svg>224 </div>225 <div>Delivering to Delhi 110001 - <span class="link">Update location</span></div>226 </div>227 228 <div class="instock-title">In stock</div>229 230 <div class="home-indicator"></div>231 232 <div class="bottom-nav">233 <div class="nav-item active">234 <svg class="ico" viewBox="0 0 24 24">235 <path d="M3 10 L12 3 L21 10 V21 H14 V15 H10 V21 H3 Z" fill="#0a9aa4"/>236 </svg>237 <div>Home</div>238 </div>239 <div class="nav-item">240 <svg class="ico" viewBox="0 0 24 24">241 <circle cx="12" cy="8" r="5" fill="#444"/>242 <path d="M4 22 C5 16 19 16 20 22 Z" fill="#444"/>243 </svg>244 <div>You</div>245 </div>246 <div class="nav-item">247 <svg class="ico" viewBox="0 0 24 24">248 <rect x="4" y="4" width="16" height="8" fill="#444"/>249 <rect x="6" y="13" width="12" height="7" fill="#444"/>250 </svg>251 <div>More</div>252 </div>253 <div class="nav-item" style="position:relative;">254 <svg class="ico" viewBox="0 0 24 24">255 <path d="M6 6 H21 L20 12 H7 L6 6 Z" fill="#444"/>256 <circle cx="9" cy="19" r="2" fill="#444"/>257 <circle cx="17" cy="19" r="2" fill="#444"/>258 </svg>259 <div class="cart-badge">1</div>260 <div>Cart</div>261 </div>262 <div class="nav-item">263 <svg class="ico" viewBox="0 0 24 24">264 <path d="M3 6 H21 V8 H3 Z M3 11 H21 V13 H3 Z M3 16 H21 V18 H3 Z" fill="#444"/>265 </svg>266 <div>Menu</div>267 </div>268 </div>269 270</div>271</body>272</html>