GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Product Detail UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 /* Status bar */16 .status-bar {17 height: 120px;18 background: #1aa9ad;19 color: #fff;20 display: flex;21 align-items: center;22 padding: 0 36px;23 font-size: 38px;24 letter-spacing: 0.5px;25 }26 .status-right {27 margin-left: auto;28 display: flex;29 align-items: center;30 gap: 24px;31 font-size: 32px;32 }33 .status-icon {34 width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8);35 }36 37 /* App bar */38 .app-bar {39 height: 140px;40 background: #ffffff;41 border-bottom: 1px solid #e9e9e9;42 display: flex;43 align-items: center;44 padding: 0 24px;45 }46 .app-left { display: flex; align-items: center; }47 .app-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }48 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }49 .icon-svg { width: 54px; height: 54px; }50 51 /* Product image */52 .product-media {53 margin: 30px 24px 16px;54 height: 820px;55 border: 1px solid #BDBDBD;56 background: #E0E0E0;57 display: flex;58 align-items: center;59 justify-content: center;60 color: #757575;61 font-size: 36px;62 }63 64 /* Floating action circles */65 .floating-circle {66 position: absolute;67 right: 36px;68 width: 120px;69 height: 120px;70 border-radius: 60px;71 background: #ffffff;72 border: 1px solid #E6E6E6;73 box-shadow: 0 6px 16px rgba(0,0,0,0.08);74 display: flex;75 align-items: center;76 justify-content: center;77 }78 .fav-circle { top: 980px; }79 .share-circle { top: 1120px; }80 81 /* Carousel dots */82 .dots {83 height: 60px;84 display: flex;85 align-items: center;86 justify-content: center;87 gap: 18px;88 }89 .dot {90 width: 18px; height: 18px; border-radius: 50%; background: #d9d9d9;91 }92 .dot.active { background: #1aa9ad; }93 94 /* Title and price */95 .content {96 padding: 12px 36px 0;97 }98 .title {99 font-size: 38px;100 line-height: 52px;101 color: #222;102 margin-bottom: 24px;103 }104 .price-row {105 display: flex;106 align-items: baseline;107 gap: 22px;108 margin-bottom: 12px;109 }110 .price-main {111 font-size: 44px;112 font-weight: 700;113 color: #222;114 }115 .price-mrp {116 font-size: 34px;117 color: #888;118 text-decoration: line-through;119 }120 .price-off {121 font-size: 34px;122 color: #1aa9ad;123 font-weight: 700;124 }125 .tax-text {126 font-size: 30px;127 color: #7a7a7a;128 margin-bottom: 20px;129 }130 131 /* Offer box */132 .offer-box {133 margin: 20px 24px 0;134 border: 2px solid #1aa9ad;135 border-radius: 12px;136 overflow: hidden;137 }138 .offer-header {139 background: #e7f7f8;140 color: #1aa9ad;141 padding: 26px 28px;142 display: flex;143 align-items: center;144 justify-content: space-between;145 font-size: 36px;146 font-weight: 700;147 }148 .offer-header .left {149 display: flex;150 align-items: center;151 gap: 16px;152 }153 .offer-body {154 background: #ffffff;155 border-top: 1px solid #cfe9ea;156 padding: 0;157 }158 .offer-grid {159 display: grid;160 grid-template-columns: 1.4fr 2fr 1.4fr;161 border-bottom: 1px solid #cfe9ea;162 }163 .grid-head, .grid-cell {164 padding: 24px;165 font-size: 30px;166 color: #444;167 text-align: center;168 border-right: 1px solid #cfe9ea;169 }170 .grid-head:last-child, .grid-cell:last-child { border-right: none; }171 .grid-head { font-weight: 700; background: #f8feff; }172 .offer-values {173 display: grid;174 grid-template-columns: 1.4fr 2fr 1.4fr;175 }176 .value {177 padding: 26px;178 font-size: 36px;179 text-align: center;180 color: #222;181 position: relative;182 }183 .value .tag {184 position: absolute;185 left: 26px; top: 50%;186 transform: translateY(-50%);187 font-size: 36px;188 color: #1aa9ad;189 }190 .value.deal { font-weight: 700; color: #1aa9ad; }191 .offer-note {192 font-size: 26px;193 color: #666;194 padding: 18px 24px 26px;195 }196 197 /* Bottom CTA bar */198 .cta-bar {199 position: absolute;200 left: 0; right: 0; bottom: 36px;201 margin: 0 0;202 height: 160px;203 display: flex;204 box-shadow: 0 -4px 16px rgba(0,0,0,0.06);205 }206 .cta-btn {207 flex: 1;208 display: flex;209 align-items: center;210 justify-content: center;211 font-size: 38px;212 font-weight: 800;213 letter-spacing: 1px;214 color: #fff;215 }216 .cta-cart { background: #ff7a00; }217 .cta-buy { background: linear-gradient(90deg, #ff7a00, #ff4e8b); }218 219 /* Simple gesture bar */220 .gesture {221 position: absolute;222 bottom: 12px;223 left: 50%;224 transform: translateX(-50%);225 width: 320px;226 height: 12px;227 background: #000;228 opacity: 0.1;229 border-radius: 6px;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status bar -->237 <div class="status-bar">238 <div>8:33</div>239 <div class="status-right">240 <div class="status-icon"></div>241 <div class="status-icon"></div>242 <div class="status-icon"></div>243 <div style="display:flex; align-items:center; gap:8px;">244 <span>100%</span>245 </div>246 </div>247 </div>248 249 <!-- App bar -->250 <div class="app-bar">251 <div class="app-left">252 <div class="icon-btn" title="Back">253 <svg class="icon-svg" viewBox="0 0 24 24">254 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#20b2b4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>255 </svg>256 </div>257 </div>258 <div class="app-right">259 <div class="icon-btn" title="Search">260 <svg class="icon-svg" viewBox="0 0 24 24">261 <circle cx="10" cy="10" r="7" fill="none" stroke="#20b2b4" stroke-width="2"/>262 <line x1="16" y1="16" x2="22" y2="22" stroke="#20b2b4" stroke-width="2" stroke-linecap="round"/>263 </svg>264 </div>265 <div class="icon-btn" title="Cart">266 <svg class="icon-svg" viewBox="0 0 24 24">267 <path d="M3 6 H6 L7.5 16 H18 L20 8 H7" fill="none" stroke="#20b2b4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>268 <circle cx="9" cy="20" r="2" fill="#20b2b4"/>269 <circle cx="17" cy="20" r="2" fill="#20b2b4"/>270 </svg>271 </div>272 </div>273 </div>274 275 <!-- Main product image -->276 <div class="product-media">[IMG: Samsung TV product photo]</div>277 278 <!-- Floating circles -->279 <div class="floating-circle fav-circle">280 <svg viewBox="0 0 24 24" width="56" height="56">281 <path d="M12 21 L5 14 C2 11 3 7 6 6 C8 5 10 6.2 12 8 C14 6.2 16 5 18 6 C21 7 22 11 19 14 L12 21 Z" fill="none" stroke="#999" stroke-width="2"/>282 </svg>283 </div>284 <div class="floating-circle share-circle">285 <svg viewBox="0 0 24 24" width="56" height="56">286 <circle cx="6" cy="12" r="3" fill="#999"/>287 <circle cx="18" cy="6" r="3" fill="#999"/>288 <circle cx="18" cy="18" r="3" fill="#999"/>289 <path d="M8.7 11 L15.3 7.5 M8.7 13 L15.3 16.5" stroke="#999" stroke-width="2" fill="none" stroke-linecap="round"/>290 </svg>291 </div>292 293 <!-- Dots -->294 <div class="dots">295 <div class="dot active"></div>296 <div class="dot"></div>297 <div class="dot"></div>298 <div class="dot"></div>299 <div class="dot"></div>300 <div class="dot"></div>301 <div class="dot"></div>302 <div class="dot"></div>303 <div class="dot"></div>304 <div class="dot"></div>305 <div class="dot"></div>306 <div class="dot"></div>307 </div>308 309 <!-- Text content -->310 <div class="content">311 <div class="title">312 Samsung 139 cm (55 inches) 4K Ultra HD Smart QLED TV QA55Q60TAKXXL (Black) (2020 Model)313 </div>314 315 <div class="price-row">316 <div class="price-main">₹1,13,509</div>317 <div class="price-mrp">MRP: ₹1,23,900</div>318 <div class="price-off">8% off</div>319 </div>320 <div class="tax-text">Inclusive of all taxes</div>321 </div>322 323 <!-- Offer box -->324 <div class="offer-box">325 <div class="offer-header">326 <div class="left">327 <svg viewBox="0 0 24 24" width="36" height="36">328 <path d="M12 2 L14 8 L20 9 L15 13 L16 20 L12 16 L8 20 L9 13 L4 9 L10 8 Z" fill="#1aa9ad"/>329 </svg>330 <span>Get this for as low as: ₹1,13,309</span>331 </div>332 <svg viewBox="0 0 24 24" width="36" height="36">333 <path d="M6 14 L12 8 L18 14" fill="none" stroke="#1aa9ad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>334 </svg>335 </div>336 <div class="offer-body">337 <div class="offer-grid">338 <div class="grid-head">Original Price</div>339 <div class="grid-head">Applicable for All Users<br><span style="font-weight:400; color:#1aa9ad;">Discount by CB+</span></div>340 <div class="grid-head">Deal Price</div>341 </div>342 <div class="offer-values">343 <div class="value">344 <span>₹1,13,509</span>345 <span class="tag">−</span>346 </div>347 <div class="value">348 <span>₹200</span>349 </div>350 <div class="value deal">351 <span class="tag">=</span>352 <span>₹1,13,309</span>353 </div>354 </div>355 <div class="offer-note">356 *All discounts can avail in cart page | Earn CluesBucks+357 </div>358 </div>359 </div>360 361 <!-- Bottom CTA -->362 <div class="cta-bar">363 <div class="cta-btn cta-cart">ADD TO CART</div>364 <div class="cta-btn cta-buy">BUY NOW</div>365 </div>366 367 <div class="gesture"></div>368</div>369</body>370</html>