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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111; /* outer background seen around sections */15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #0b0b0b;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 font-size: 36px;32 letter-spacing: 1px;33 }34 .status-left { flex: 1; }35 .status-right { display: flex; gap: 22px; align-items: center; opacity: 0.9; }36 .status-dot { width: 10px; height: 10px; background: #bbb; border-radius: 50%; display: inline-block; }37 38 /* Gallery area */39 .gallery {40 position: absolute;41 top: 120px;42 left: 0;43 width: 1080px;44 height: 920px;45 background: #f2f2f2;46 }47 .gallery .placeholder {48 position: absolute;49 top: 80px;50 left: 60px;51 right: 60px;52 bottom: 120px;53 background: #E0E0E0;54 border: 1px solid #BDBDBD;55 display: flex;56 align-items: center;57 justify-content: center;58 color: #757575;59 font-size: 38px;60 border-radius: 8px;61 }62 63 /* Floating circular controls */64 .circle-btn {65 position: absolute;66 width: 120px;67 height: 120px;68 background: #ffffff;69 border-radius: 60px;70 box-shadow: 0 4px 12px rgba(0,0,0,0.08);71 display: flex;72 align-items: center;73 justify-content: center;74 }75 .btn-back { left: 40px; top: 160px; }76 .btn-chat { right: 320px; top: 160px; }77 .btn-share { right: 180px; top: 160px; }78 .btn-like { right: 40px; top: 160px; }79 80 /* Find similar items button */81 .similar-btn {82 position: absolute;83 right: 40px;84 bottom: 48px;85 background: #fff;86 color: #111;87 border-radius: 50px;88 height: 96px;89 padding: 0 36px 0 28px;90 display: inline-flex;91 align-items: center;92 gap: 18px;93 box-shadow: 0 6px 16px rgba(0,0,0,0.12);94 font-size: 36px;95 }96 .similar-icon {97 width: 56px; height: 56px; border: 2px solid #222; border-radius: 14px; position: relative;98 }99 .similar-icon:after, .similar-icon:before {100 content: ""; position: absolute; width: 10px; height: 10px; border: 3px solid #222; border-radius: 50%;101 }102 .similar-icon:after { right: -6px; bottom: -6px; }103 .similar-icon:before { display: none; }104 105 /* Carousel dots */106 .dots {107 position: absolute;108 left: 0; right: 0;109 top: 980px;110 display: flex;111 justify-content: center;112 gap: 22px;113 }114 .dot { width: 18px; height: 18px; border-radius: 50%; background: #6f6f6f; }115 .dot.active { background: #ffffff; }116 117 /* Details section */118 .details {119 position: absolute;120 top: 1040px;121 left: 0;122 right: 0;123 bottom: 200px; /* leave space for bottom nav */124 background: #0f0f0f;125 padding: 48px 44px 220px;126 box-sizing: border-box;127 overflow: hidden;128 }129 130 .badge-stock { color: #b7b7b7; letter-spacing: 1px; font-size: 34px; text-transform: uppercase; margin-bottom: 16px; }131 .price { font-size: 86px; font-weight: 700; margin: 6px 0 18px; }132 .title { font-size: 40px; line-height: 1.4; color: #ddd; margin-bottom: 32px; max-width: 960px; }133 134 .shop-badge {135 background: #3b3b3b;136 border-radius: 20px;137 padding: 28px 30px;138 font-size: 38px;139 color: #fff;140 display: inline-flex;141 gap: 18px;142 margin-bottom: 42px;143 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);144 }145 .shop-name { font-weight: 700; }146 147 .meta-row {148 display: flex;149 gap: 40px;150 margin-bottom: 54px;151 }152 .meta-col { flex: 1; }153 .meta-col + .meta-col { border-left: 2px solid #2d2d2d; padding-left: 40px; }154 .meta-label { font-size: 34px; color: #b8b8b8; }155 .meta-value { margin-top: 10px; font-size: 38px; font-weight: 700; }156 .rating { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }157 .rating small { font-weight: 500; color: #7aa1ff; }158 159 .field-label { font-size: 36px; margin: 34px 0 14px; }160 .required { color: #ff6b6b; }161 .select {162 height: 120px;163 border: 2px solid #5c5c5c;164 border-radius: 20px;165 display: flex;166 align-items: center;167 justify-content: space-between;168 padding: 0 28px;169 font-size: 38px;170 color: #d6d6d6;171 background: transparent;172 }173 .caret {174 width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 18px solid #cfcfcf;175 }176 177 /* Bottom navigation bar */178 .bottom-nav {179 position: absolute;180 left: 0; right: 0; bottom: 0;181 height: 180px;182 background: #2a2a2a;183 display: flex;184 align-items: center;185 justify-content: space-around;186 color: #eaeaea;187 font-size: 30px;188 padding-bottom: 10px;189 }190 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #dedede; }191 .nav-item.active { color: #ffffff; }192 .nav-icon svg { width: 54px; height: 54px; fill: currentColor; }193 .home-indicator {194 position: absolute;195 left: 50%;196 transform: translateX(-50%);197 bottom: 190px;198 width: 300px;199 height: 10px;200 background: #e7e7e7;201 border-radius: 8px;202 opacity: 0.9;203 }204 /* Small helpers */205 .muted { color: #bdbdbd; }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status bar -->212 <div class="status-bar">213 <div class="status-left">11:14</div>214 <div class="status-right">215 <span class="status-dot"></span>216 <span class="status-dot"></span>217 <span class="status-dot"></span>218 <span class="status-dot"></span>219 </div>220 </div>221 222 <!-- Gallery area -->223 <div class="gallery">224 <div class="placeholder">[IMG: Product gallery placeholder]</div>225 226 <!-- Floating circular action buttons -->227 <div class="circle-btn btn-back">228 <svg viewBox="0 0 40 40" width="52" height="52">229 <path d="M22 8 L10 20 L22 32" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>230 <path d="M10 20 H32" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"></path>231 </svg>232 </div>233 <div class="circle-btn btn-chat">234 <svg viewBox="0 0 40 40" width="54" height="54">235 <rect x="6" y="8" width="28" height="18" rx="4" fill="none" stroke="#111" stroke-width="3"></rect>236 <path d="M14 28 L12 34 L20 29" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"></path>237 <circle cx="14" cy="17" r="2" fill="#111"></circle>238 <circle cx="20" cy="17" r="2" fill="#111"></circle>239 <circle cx="26" cy="17" r="2" fill="#111"></circle>240 </svg>241 </div>242 <div class="circle-btn btn-share">243 <svg viewBox="0 0 40 40" width="54" height="54">244 <circle cx="12" cy="20" r="3" fill="#111"></circle>245 <circle cx="28" cy="12" r="3" fill="#111"></circle>246 <circle cx="28" cy="28" r="3" fill="#111"></circle>247 <path d="M15 19 L25 13 M15 21 L25 27" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"></path>248 </svg>249 </div>250 <div class="circle-btn btn-like">251 <svg viewBox="0 0 40 40" width="54" height="54">252 <path d="M20 31 C20 31 9 24 9 16 A5 5 0 0 1 20 16 A5 5 0 0 1 31 16 C31 24 20 31 20 31 Z" fill="none" stroke="#111" stroke-width="3" stroke-linejoin="round"></path>253 </svg>254 </div>255 256 <!-- Find similar items -->257 <div class="similar-btn">258 <span class="similar-icon"></span>259 <span>Find similar items</span>260 </div>261 </div>262 263 <!-- Carousel dots -->264 <div class="dots">265 <div class="dot active"></div>266 <div class="dot"></div>267 <div class="dot"></div>268 <div class="dot"></div>269 <div class="dot"></div>270 </div>271 272 <!-- Details -->273 <div class="details">274 <div class="badge-stock">IN STOCK</div>275 <div class="price">$3.99+</div>276 <div class="title">Portable Door Lock Home Security for Dorm, Airbnb, Hotel...</div>277 278 <div class="shop-badge">279 <span class="shop-name">DesignInGifts</span>280 <span class="muted">|</span>281 <span class="muted">1,143 sales</span>282 </div>283 284 <div class="meta-row">285 <div class="meta-col">286 <div class="meta-label">Est. arrival</div>287 <div class="meta-value">Dec 11-16</div>288 </div>289 <div class="meta-col">290 <div class="meta-label">Ratings</div>291 <div class="meta-value rating">292 <svg viewBox="0 0 24 24" width="36" height="36">293 <path d="M12 2 L14.8 8.6 L22 9.3 L16.8 13.9 L18.2 21 L12 17.6 L5.8 21 L7.2 13.9 L2 9.3 L9.2 8.6 Z" fill="#ffb400"></path>294 </svg>295 4.79 <small>(295)</small>296 </div>297 </div>298 </div>299 300 <div class="field-label">Pack<span class="required">*</span></div>301 <div class="select">302 <span>Select an option</span>303 <span class="caret"></span>304 </div>305 306 <div class="field-label" style="margin-top: 36px;">Quantity</div>307 <div class="select">308 <span>1</span>309 <span class="caret"></span>310 </div>311 </div>312 313 <!-- Home indicator above nav -->314 <div class="home-indicator"></div>315 316 <!-- Bottom navigation -->317 <div class="bottom-nav">318 <div class="nav-item active">319 <div class="nav-icon">320 <svg viewBox="0 0 24 24">321 <path d="M4 11 L12 4 L20 11 V20 H14 V14 H10 V20 H4 Z"></path>322 </svg>323 </div>324 <div>Home</div>325 </div>326 <div class="nav-item">327 <div class="nav-icon">328 <svg viewBox="0 0 24 24">329 <path d="M12 21 C12 21 4 15 4 9 A4 4 0 0 1 12 9 A4 4 0 0 1 20 9 C20 15 12 21 12 21 Z" fill="none" stroke="currentColor" stroke-width="2"></path>330 </svg>331 </div>332 <div>Favorites</div>333 </div>334 <div class="nav-item">335 <div class="nav-icon">336 <svg viewBox="0 0 24 24">337 <path d="M3 12 L12 3 L21 12 V21 H3 Z" fill="none" stroke="currentColor" stroke-width="2"></path>338 <path d="M12 8 L12 16" stroke="currentColor" stroke-width="2"></path>339 <path d="M8 12 L16 12" stroke="currentColor" stroke-width="2"></path>340 </svg>341 </div>342 <div>Deals</div>343 </div>344 <div class="nav-item">345 <div class="nav-icon">346 <svg viewBox="0 0 24 24">347 <circle cx="12" cy="8" r="4"></circle>348 <path d="M4 21 C5 17 8 15 12 15 C16 15 19 17 20 21 Z"></path>349 </svg>350 </div>351 <div>You</div>352 </div>353 <div class="nav-item">354 <div class="nav-icon">355 <svg viewBox="0 0 24 24">356 <circle cx="9" cy="20" r="2"></circle>357 <circle cx="17" cy="20" r="2"></circle>358 <path d="M3 4 H6 L7.5 14 H19 L21 7 H8" fill="none" stroke="currentColor" stroke-width="2"></path>359 </svg>360 </div>361 <div>Cart</div>362 </div>363 </div>364 365</div>366</body>367</html>