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>Drill Machine - Listing</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: #ffffff;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 right: 0;24 height: 80px;25 padding: 0 28px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 30px;30 color: #2b2b2b;31 opacity: 0.9;32 }33 .status-icons { display: flex; gap: 22px; align-items: center; }34 .dot { width: 8px; height: 8px; background:#444; border-radius: 50%; opacity: .6; }35 36 /* Header gradient */37 .header {38 position: absolute;39 top: 0;40 left: 0;41 width: 1080px;42 height: 360px;43 background: linear-gradient(180deg, #a9e2db 0%, #cbeae7 100%);44 padding-top: 92px;45 }46 47 /* Search Row */48 .search-row {49 display: flex;50 align-items: center;51 padding: 0 26px;52 }53 .back-btn {54 width: 100px;55 height: 110px;56 display: flex;57 justify-content: center;58 align-items: center;59 margin-right: 12px;60 }61 .back-btn svg { width: 44px; height: 44px; }62 .search-box {63 flex: 1;64 height: 110px;65 background: #fff;66 border: 1px solid #d9e3e5;67 border-radius: 24px;68 box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;69 display: flex;70 align-items: center;71 padding: 0 22px;72 }73 .search-icon { width: 42px; height: 42px; margin-right: 18px; opacity: .7; }74 .search-text {75 flex: 1;76 color: #333;77 font-size: 36px;78 }79 .scan-btn {80 width: 74px;81 height: 74px;82 border-radius: 14px;83 border: 1px solid #d0d7da;84 display: flex; align-items: center; justify-content: center;85 color: #4b4b4b;86 background: #f7fafb;87 }88 .scan-btn svg { width: 40px; height: 40px; }89 90 /* Location line */91 .location {92 display: flex;93 align-items: center;94 gap: 16px;95 padding: 18px 32px 10px 32px;96 color: #1a2b2b;97 font-size: 32px;98 }99 .location svg { width: 34px; height: 34px; opacity: .85; }100 101 /* Chips */102 .chips {103 display: flex;104 gap: 16px;105 padding: 14px 18px 16px 18px;106 }107 .chip {108 display: inline-flex;109 align-items: center;110 gap: 12px;111 padding: 18px 26px;112 background: #eef6f7;113 border: 1px solid #d8e4e7;114 border-radius: 28px;115 color: #1b3940;116 font-size: 30px;117 white-space: nowrap;118 }119 .switch {120 width: 78px; height: 40px; background: #dfe7ea; border-radius: 20px; position: relative; margin-left: 10px;121 }122 .switch:after {123 content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: #fff; top: 3px; left: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2);124 }125 .stars { color: #ff9800; letter-spacing: 2px; }126 127 /* Content area */128 .content {129 position: absolute;130 top: 360px;131 left: 0;132 right: 0;133 bottom: 170px;134 overflow: hidden;135 }136 .scroll {137 height: 100%;138 overflow: hidden; /* to respect overall overflow hidden, emulate snapshot */139 padding-bottom: 20px;140 }141 142 .section {143 padding: 18px 22px;144 }145 146 /* Brand block */147 .brand-row {148 display: flex; align-items: center; gap: 18px;149 padding: 8px 8px 16px 8px;150 font-weight: 600; font-size: 36px; color: #2a2a2a;151 }152 .brand-logo {153 width: 180px; height: 48px; display:flex; align-items:center; justify-content:center;154 color:#2a2a2a; font-weight:700; letter-spacing:2px;155 }156 157 .card {158 background: #fff;159 border: 1px solid #e1e5e8;160 border-radius: 18px;161 overflow: hidden;162 }163 .banner {164 height: 520px;165 background: #E0E0E0;166 border-bottom: 1px solid #BDBDBD;167 display: flex; justify-content: center; align-items: center;168 color: #757575; font-size: 36px;169 }170 .card-bottom {171 display: flex; gap: 16px; padding: 16px;172 }173 .thumb {174 width: 260px; height: 240px;175 background:#E0E0E0; border:1px solid #BDBDBD;176 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;177 border-radius: 8px;178 }179 .details {180 flex: 1;181 }182 .title {183 font-size: 34px; line-height: 42px; color:#222; margin-bottom: 8px;184 }185 .rating {186 display: flex; align-items: center; gap: 10px; color:#666; font-size: 28px;187 }188 .rating .stars { font-size: 32px; }189 190 .shop-link {191 color: #1976d2; font-size: 32px; padding: 16px 8px 8px 8px;192 }193 194 /* Sponsored Product Card */195 .product-card {196 display: flex; gap: 22px;197 padding: 20px;198 background: #fff;199 border: 1px solid #e1e5e8;200 border-radius: 18px;201 }202 .prod-img {203 width: 310px; height: 310px; border: 1px solid #BDBDBD; background: #E0E0E0;204 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius: 12px;205 }206 .prod-info { flex: 1; }207 .sponsored { color:#818a90; font-size: 26px; margin-bottom: 6px; }208 .prod-title { font-size: 34px; line-height: 44px; color:#222; margin-bottom: 10px; }209 .badge {210 display: inline-block; font-size: 26px; background:#eef2f3; color:#404c52; border:1px solid #d7dee2; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px;211 }212 .deal {213 display: inline-block; background:#c4461d; color:#fff; padding: 10px 16px; border-radius: 10px; font-size: 28px; margin: 12px 0;214 }215 .price { font-size: 38px; font-weight: 700; }216 217 /* Bottom navigation */218 .bottom-nav {219 position: absolute;220 left: 0; right: 0; bottom: 0;221 height: 150px;222 border-top: 1px solid #e6e6e6;223 background: #ffffff;224 display: flex;225 justify-content: space-around;226 align-items: center;227 }228 .nav-item { display:flex; flex-direction: column; align-items:center; gap: 12px; color:#1f444e; font-size: 26px; }229 .nav-item.inactive { color:#3c3c3c; }230 .nav-icon { width: 48px; height: 48px; }231 232 /* Gesture bar */233 .gesture {234 position: absolute;235 bottom: 154px;236 left: 50%;237 transform: translateX(-50%);238 width: 360px; height: 12px; background: #cfcfcf; border-radius: 10px;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Status bar -->246 <div class="status-bar">247 <div>8:25</div>248 <div class="status-icons">249 <span class="dot"></span>250 <span class="dot"></span>251 <span class="dot"></span>252 <svg width="34" height="34" viewBox="0 0 24 24" fill="#555"><path d="M17 18a3 3 0 0 0 3-3V9a5 5 0 0 0-5-5H9a3 3 0 0 0-3 3v10h11zM6 20h12v2H6z"/></svg>253 <div style="font-size:28px;">83%</div>254 </div>255 </div>256 257 <!-- Header -->258 <div class="header">259 <div class="search-row">260 <div class="back-btn">261 <svg viewBox="0 0 24 24" fill="none" stroke="#1c2e30" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">262 <path d="M15 18l-6-6 6-6"/>263 </svg>264 </div>265 <div class="search-box">266 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#6b7a7f" stroke-width="2">267 <circle cx="11" cy="11" r="7"></circle>268 <path d="M21 21l-4.3-4.3"></path>269 </svg>270 <div class="search-text">drill machine</div>271 <div class="scan-btn" title="Scan">272 <svg viewBox="0 0 24 24" fill="none" stroke="#4d5a5e" stroke-width="2">273 <path d="M4 8V5a1 1 0 0 1 1-1h3"/>274 <path d="M16 4h3a1 1 0 0 1 1 1v3"/>275 <path d="M20 16v3a1 1 0 0 1-1 1h-3"/>276 <path d="M8 20H5a1 1 0 0 1-1-1v-3"/>277 <rect x="8" y="8" width="8" height="8" rx="1"></rect>278 </svg>279 </div>280 </div>281 </div>282 283 <div class="location">284 <svg viewBox="0 0 24 24" fill="none" stroke="#1a2b2b" stroke-width="2">285 <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/>286 <circle cx="12" cy="10" r="2.5"/>287 </svg>288 <div>Delivering to Delhi 110001 - Update location ▾</div>289 </div>290 291 <div class="chips">292 <div class="chip">293 prime294 <div class="switch"></div>295 </div>296 <div class="chip">Impact Drivers</div>297 <div class="chip"><span class="stars">★★★★★</span> </div>298 <div class="chip">Filters (1) ▾</div>299 </div>300 </div>301 302 <!-- Content -->303 <div class="content">304 <div class="scroll">305 306 <div class="section">307 <div class="brand-row">308 <div class="brand-logo">KRÖST</div>309 <div>KROST TOOLS</div>310 </div>311 312 <div class="card">313 <div class="banner">[IMG: Krost Drill Banner]</div>314 <div class="card-bottom">315 <div class="thumb">[IMG: Drill Kit]</div>316 <div class="details">317 <div class="title">KROST Pro Series 37V Cordless Brushless Hammer Drill Machine, 13mm Metal Chuck With...</div>318 <div class="rating">319 <span class="stars">★★★★☆</span>320 <span>(18)</span>321 </div>322 </div>323 </div>324 </div>325 326 <div class="shop-link">Shop KROST TOOLS ›</div>327 </div>328 329 <div class="section">330 <div class="product-card">331 <div class="prod-img">[IMG: Tool Kit with Drill]</div>332 <div class="prod-info">333 <div class="sponsored">Sponsored</div>334 <div class="prod-title">Foster FK-5513 Pro 650W 13mm Reversible 160Pcs Impact Driver Drill Machine Kit (13mm Chuck...)</div>335 <div class="badge">electric</div>336 <div class="rating">337 <span style="color:#1976d2; font-weight:600;">3.2</span>338 <span class="stars">★★★☆☆</span>339 <span>(83)</span>340 </div>341 <div class="deal">Deal of the Day</div>342 <div class="price">₹3,899</div>343 </div>344 </div>345 </div>346 347 </div>348 </div>349 350 <!-- Bottom navigation -->351 <div class="bottom-nav">352 <div class="nav-item">353 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#1f444e" stroke-width="2"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>354 <div>Home</div>355 </div>356 <div class="nav-item inactive">357 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20a8 8 0 0 1 16 0"/></svg>358 <div>You</div>359 </div>360 <div class="nav-item inactive">361 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M3 7h18M3 12h18M3 17h12"/></svg>362 <div>More</div>363 </div>364 <div class="nav-item inactive">365 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="19" r="1.5"/><circle cx="17" cy="19" r="1.5"/></svg>366 <div>Cart</div>367 </div>368 <div class="nav-item inactive">369 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>370 <div>Menu</div>371 </div>372 </div>373 374 <!-- Gesture bar -->375 <div class="gesture"></div>376</div>377</body>378</html>