GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product details mock</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 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 border-radius: 32px;16 box-shadow: 0 8px 30px rgba(0,0,0,0.12);17 color: #111;18 }19 20 /* Top gradient header */21 .top-gradient {22 background: linear-gradient(90deg, #7dd3cf, #c8f0e7);23 height: 330px;24 padding: 24px 28px 0 28px;25 box-sizing: border-box;26 }27 28 /* Status bar */29 .status-bar {30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #0b0b0b;34 font-weight: 600;35 font-size: 44px;36 height: 86px;37 padding: 6px 8px;38 }39 .status-left, .status-right {40 display: flex;41 align-items: center;42 gap: 20px;43 }44 .dot {45 width: 18px; height: 18px; background:#1f2937; border-radius:50%;46 opacity: 0.9;47 }48 .small-dot {49 width: 12px; height: 12px; background:#1f2937; border-radius:50%;50 opacity: 0.9;51 }52 53 /* Search row */54 .search-row {55 display: flex;56 align-items: center;57 margin-top: 10px;58 gap: 18px;59 }60 .back-btn {61 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; border-radius: 36px;62 background: transparent;63 }64 .search-box {65 flex: 1;66 background: #fff;67 border-radius: 36px;68 height: 96px;69 box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;70 display: flex;71 align-items: center;72 padding: 0 28px;73 border: 1px solid #e5e7eb;74 }75 .search-box svg { flex: 0 0 auto; }76 .search-input {77 margin-left: 20px;78 color: #4b5563;79 font-size: 38px;80 white-space: nowrap;81 overflow: hidden;82 text-overflow: ellipsis;83 flex: 1;84 }85 .scan-btn {86 width: 64px; height: 64px; border-radius: 14px; background: #eef6f6; border: 1px solid #d1d5db;87 display:flex; align-items:center; justify-content:center; margin-left: 16px;88 }89 90 /* Tabs */91 .tabs {92 display: flex;93 align-items: center;94 gap: 34px;95 margin-top: 28px;96 position: relative;97 }98 .tab {99 font-size: 40px;100 color: #6b7280;101 padding: 16px 8px;102 }103 .tab.active {104 color: #111827;105 font-weight: 700;106 position: relative;107 }108 .tab-underline {109 position: absolute;110 left: 0;111 bottom: -2px;112 width: 170px;113 height: 8px;114 background: #ff8a3d;115 border-radius: 4px;116 }117 .chev-up {118 margin-left: auto;119 margin-right: 12px;120 }121 122 /* Content area */123 .content {124 padding: 22px 40px 180px 40px;125 }126 .section-title-main {127 font-size: 54px;128 font-weight: 700;129 margin: 20px 0 12px 0;130 }131 .divider {132 height: 2px; background: #e5e7eb; width: 100%; margin: 20px 0;133 }134 .subheading {135 font-size: 46px; font-weight: 700; margin: 12px 0 24px 0;136 }137 138 .kv-grid {139 display: grid;140 grid-template-columns: 420px 1fr;141 row-gap: 26px;142 column-gap: 26px;143 margin-top: 12px;144 }145 .kv-label {146 color: #6b7280;147 font-size: 38px;148 }149 .kv-value {150 color: #111827;151 font-size: 40px;152 }153 .kv-link {154 color: #0e8aa5;155 font-weight: 600;156 }157 158 .bullets {159 margin: 26px 0 12px 16px;160 font-size: 38px;161 line-height: 1.45;162 }163 .bullets li {164 margin: 16px 0;165 }166 .see-more {167 display: inline-flex; align-items: center; gap: 8px;168 color: #0e8aa5; font-size: 40px; font-weight: 600; cursor: default;169 margin: 10px 0 24px 0;170 }171 172 /* Accordion rows */173 .accordion {174 border-top: 2px solid #e5e7eb;175 border-bottom: 2px solid #e5e7eb;176 margin-top: 18px;177 }178 .acc-row {179 display:flex; align-items:center; justify-content:space-between;180 padding: 36px 8px;181 }182 .acc-title {183 font-size: 44px; font-weight: 700;184 }185 186 /* Bottom nav */187 .bottom-nav {188 position: absolute;189 left: 0; right: 0; bottom: 0;190 height: 180px;191 background: #ffffff;192 border-top: 1px solid #e5e7eb;193 display: flex;194 align-items: center;195 justify-content: space-around;196 }197 .nav-item {198 display:flex; flex-direction: column; align-items:center; gap: 10px; color:#6b7280; font-size: 30px;199 }200 .nav-item.active { color: #0e8aa5; }201 .home-pill {202 position: absolute;203 bottom: 24px;204 left: 50%;205 transform: translateX(-50%);206 width: 360px; height: 14px; border-radius: 8px; background:#bdbdbd;207 opacity: 0.9;208 }209 210 /* Simple utility for small chevrons */211 .chev {212 width: 34px; height: 34px;213 }214</style>215</head>216<body>217<div id="render-target">218 219 <div class="top-gradient">220 <!-- Status bar -->221 <div class="status-bar">222 <div class="status-left">223 <div>9:01</div>224 <div class="dot"></div>225 <svg width="44" height="44" viewBox="0 0 24 24" fill="#111"><circle cx="12" cy="12" r="10" opacity="0.25"/></svg>226 <svg width="44" height="44" viewBox="0 0 24 24" fill="#111"><circle cx="12" cy="12" r="10" opacity="0.25"/></svg>227 <div class="small-dot"></div>228 <div class="small-dot"></div>229 </div>230 <div class="status-right">231 <svg width="48" height="48" viewBox="0 0 24 24" fill="#111"><path d="M2 18h20L12 6 2 18z"/></svg>232 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M3 7h18v10H3z"/><path d="M6 7V5h12v2"/></svg>233 </div>234 </div>235 236 <!-- Back and search -->237 <div class="search-row">238 <div class="back-btn" title="Back">239 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">240 <path d="M15 18l-6-6 6-6"/>241 </svg>242 </div>243 <div class="search-box">244 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">245 <circle cx="11" cy="11" r="7"></circle>246 <path d="M21 21l-4.3-4.3"></path>247 </svg>248 <div class="search-input">portable tool box for toolbox for h...</div>249 <div class="scan-btn" title="Scan">250 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0f766e" stroke-width="2">251 <path d="M4 7V4h3M20 7V4h-3M4 17v3h3M20 17v3h-3"/>252 <rect x="7" y="7" width="10" height="10" rx="2"/>253 </svg>254 </div>255 </div>256 </div>257 258 <!-- Tabs -->259 <div class="tabs">260 <div class="tab active">Details</div>261 <div class="tab">Questions</div>262 <div class="tab">Compare</div>263 <div class="tab">Reviews</div>264 <svg class="chev-up" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M18 14l-6-6-6 6"/></svg>265 <div class="tab-underline"></div>266 </div>267 </div>268 269 <!-- Content -->270 <div class="content">271 <div class="section-title-main">Product details</div>272 <div class="divider"></div>273 274 <div class="subheading">Top Highlights</div>275 276 <div class="kv-grid">277 <div class="kv-label">Brand</div>278 <div class="kv-value">Plantex</div>279 280 <div class="kv-label">Material</div>281 <div class="kv-value">Metal</div>282 283 <div class="kv-label">Colour</div>284 <div class="kv-value">Brown & Ivory</div>285 286 <div class="kv-label">Product Dimensions</div>287 <div class="kv-value">46L x 20W x 20.7H Centimeters</div>288 289 <div class="kv-label">Water Resistance Level</div>290 <div class="kv-value kv-link">Water Resistant</div>291 292 <div class="kv-label">Maximum Weight Recommendation</div>293 <div class="kv-value">35 Kilograms</div>294 </div>295 296 <ul class="bullets">297 <li>🛠️ <strong>Quality Guaranteed (Exported in US, UK, UAE)</strong> Material: High grade 0.7 mm thick metal sheet with premium 6 layer powder coated. Structure is built from high grade steel clamps with stainless steel riveting (Size: 48 x 23 x 21 Cm, Weight: 5 Kg)</li>298 <li>🛠️ <strong>5 Cabinets for Large Store Capacity:</strong> This steel cantilever toolbox equipped with 5 trays for easy access to tools and parts, which can store different...</li>299 </ul>300 301 <div class="see-more">302 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#0e8aa5" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>303 See more304 </div>305 306 <div class="divider"></div>307 308 <div class="accordion">309 <div class="acc-row">310 <div class="acc-title">Product Specifications</div>311 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>312 </div>313 </div>314 315 <div class="accordion">316 <div class="acc-row">317 <div class="acc-title">Images and Videos</div>318 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>319 </div>320 </div>321 322 <!-- Placeholder where an image gallery might appear -->323 <div style="margin-top: 24px; width:100%; height: 320px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">324 [IMG: Product media gallery placeholder]325 </div>326 </div>327 328 <!-- Bottom navigation -->329 <div class="bottom-nav">330 <div class="nav-item active">331 <svg width="56" height="56" viewBox="0 0 24 24" fill="#0e8aa5"><path d="M12 3l9 8h-3v8h-12v-8h-3z"/></svg>332 <div>Home</div>333 </div>334 <div class="nav-item">335 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 6.5-6 8-6s6.5 2 8 6"/></svg>336 <div>You</div>337 </div>338 <div class="nav-item">339 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>340 <div>More</div>341 </div>342 <div class="nav-item">343 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6h15l-2 12H7L6 6z"/><circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>344 <div>Cart</div>345 </div>346 <div class="nav-item">347 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>348 <div>Menu</div>349 </div>350 <div class="home-pill"></div>351 </div>352 353</div>354</body>355</html>