GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 color: #212121;16 }17 /* Top search bar */18 .topbar {19 width: 100%;20 padding: 24px 24px 16px 24px;21 box-sizing: border-box;22 }23 .topbar-row {24 display: flex;25 align-items: center;26 gap: 24px;27 }28 .icon-btn {29 width: 64px;30 height: 64px;31 border-radius: 32px;32 display: flex;33 align-items: center;34 justify-content: center;35 }36 .search-box {37 flex: 1;38 height: 96px;39 border: 1px solid #DADCE0;40 background: #F5F6F7;41 border-radius: 16px;42 display: flex;43 align-items: center;44 padding: 0 24px;45 box-sizing: border-box;46 }47 .search-placeholder {48 flex: 1;49 color: #757575;50 font-size: 34px;51 }52 .search-actions {53 display: flex;54 align-items: center;55 gap: 24px;56 }57 .cart-wrap {58 position: relative;59 width: 80px;60 height: 80px;61 display: flex;62 align-items: center;63 justify-content: center;64 }65 .badge {66 position: absolute;67 right: 0;68 top: -6px;69 background: #E53935;70 color: #fff;71 font-size: 28px;72 line-height: 28px;73 border-radius: 16px;74 padding: 6px 12px;75 }76 .divider {77 height: 14px;78 background: #EEEEEE;79 width: 100%;80 }81 82 /* Product header */83 .content { padding: 24px 32px; box-sizing: border-box; }84 .link { color: #1565C0; font-size: 36px; font-weight: 600; margin-top: 8px; }85 .title { font-size: 44px; font-weight: 700; margin-top: 12px; }86 .rating-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }87 .ratings-count { color: #1565C0; font-size: 32px; }88 .assured {89 margin-left: auto;90 display: inline-flex;91 align-items: center;92 gap: 8px;93 padding: 8px 14px;94 border: 1px solid #E0E0E0;95 border-radius: 20px;96 font-size: 28px;97 color: #616161;98 }99 .monthly { font-size: 58px; font-weight: 800; margin-top: 28px; }100 .emi-note { font-size: 32px; color: #616161; margin-top: 8px; }101 .emi-note .link { font-size: 32px; font-weight: 700; display: inline; }102 .price-block { margin-top: 24px; }103 .off { color: #1BAE6E; font-size: 42px; font-weight: 700; }104 .strike { color: #9E9E9E; text-decoration: line-through; font-size: 40px; margin: 0 12px; }105 .price { font-size: 46px; font-weight: 800; }106 .fee { font-size: 32px; color: #616161; margin-top: 10px; }107 108 /* Pincode row */109 .pincode-row {110 display: flex;111 align-items: center;112 justify-content: space-between;113 padding: 24px 0;114 border-top: 1px solid #E0E0E0;115 border-bottom: 1px solid #E0E0E0;116 margin-top: 24px;117 }118 .pincode-text { font-size: 36px; color: #424242; }119 .pincode-btn {120 border: 1px solid #C5CAE9;121 color: #1565C0;122 background: #FFF;123 border-radius: 12px;124 padding: 20px 32px;125 font-size: 36px;126 font-weight: 600;127 }128 129 /* Delivery section */130 .delivery {131 display: flex;132 align-items: center;133 gap: 24px;134 padding: 24px 0;135 border-bottom: 1px solid #E0E0E0;136 }137 .delivery-text { flex: 1; }138 .delivery-line {139 font-size: 36px;140 }141 .free { color: #1BAE6E; font-weight: 700; }142 .cut { color: #9E9E9E; text-decoration: line-through; }143 .arrival { color: #424242; }144 .eta { font-size: 32px; color: #616161; margin-top: 8px; }145 .eta .highlight { color: #D81B60; font-weight: 700; }146 .chevron { width: 48px; height: 48px; }147 148 /* Feature icons row */149 .features {150 display: flex;151 gap: 40px;152 padding: 24px 0;153 justify-content: space-between;154 border-bottom: 1px solid #E0E0E0;155 }156 .feature {157 width: 180px;158 text-align: center;159 }160 .feature-icon {161 width: 140px;162 height: 140px;163 border-radius: 70px;164 background: #FAFAFA;165 border: 1px solid #E0E0E0;166 margin: 0 auto 12px auto;167 display: flex;168 align-items: center;169 justify-content: center;170 }171 .feature-label {172 font-size: 30px;173 color: #616161;174 }175 176 /* Warranty banner */177 .warranty {178 display: flex;179 align-items: center;180 gap: 24px;181 background: #FAFAFA;182 border: 1px solid #E0E0E0;183 border-radius: 12px;184 padding: 24px;185 margin-top: 24px;186 }187 .warranty-text {188 font-size: 34px;189 color: #424242;190 }191 .know { color: #1565C0; font-weight: 700; }192 193 /* Deal section */194 .deal {195 margin-top: 24px;196 border-top: 1px solid #E0E0E0;197 padding-top: 24px;198 }199 .deal-row {200 display: flex;201 align-items: center;202 }203 .deal-left {204 flex: 1;205 }206 .deal-badge {207 color: #1E88E5;208 font-size: 40px;209 font-weight: 900;210 }211 .deal-price {212 margin-top: 8px;213 font-size: 44px;214 }215 .deal-price .green { color: #1BAE6E; font-weight: 800; }216 .deal-float {217 width: 120px;218 height: 120px;219 border-radius: 60px;220 background: #1E88E5;221 margin-left: 24px;222 position: relative;223 box-shadow: 0 8px 14px rgba(0,0,0,0.2);224 }225 .deal-float-inner {226 position: absolute;227 right: -8px;228 bottom: -8px;229 width: 72px;230 height: 72px;231 border-radius: 36px;232 background: #FFD54F;233 border: 4px solid #FFFFFF;234 }235 236 /* Bottom action bar */237 .bottom-bar {238 position: absolute;239 left: 0;240 right: 0;241 bottom: 64px;242 display: flex;243 gap: 24px;244 padding: 16px 24px;245 box-sizing: border-box;246 background: #FFFFFF;247 }248 .btn {249 height: 120px;250 border-radius: 16px;251 font-size: 38px;252 font-weight: 700;253 display: flex;254 align-items: center;255 justify-content: center;256 flex: 1;257 border: 2px solid #E0E0E0;258 color: #424242;259 background: #FFF;260 }261 .btn.cart { flex: 0 0 180px; }262 .btn.emi { color: #212121; }263 .btn.buy { background: #FFC107; border-color: #FFC107; color: #212121; }264 265 /* Home indicator */266 .home-indicator {267 position: absolute;268 bottom: 8px;269 left: 0;270 width: 100%;271 height: 40px;272 background: #000000;273 }274 .home-pill {275 width: 240px;276 height: 10px;277 background: #FFFFFF;278 opacity: 0.9;279 border-radius: 5px;280 margin: 15px auto 0 auto;281 }282</style>283</head>284<body>285<div id="render-target">286 <div class="topbar">287 <div class="topbar-row">288 <div class="icon-btn">289 <svg width="40" height="40" viewBox="0 0 24 24">290 <path d="M15 18l-6-6 6-6" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>291 </svg>292 </div>293 <div class="search-box">294 <svg width="40" height="40" viewBox="0 0 24 24" style="margin-right:12px;">295 <circle cx="10" cy="10" r="6" fill="none" stroke="#757575" stroke-width="2"></circle>296 <path d="M14 14l6 6" stroke="#757575" stroke-width="2" stroke-linecap="round"></path>297 </svg>298 <div class="search-placeholder">Search for products</div>299 <div class="search-actions">300 <svg width="40" height="40" viewBox="0 0 24 24">301 <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#757575" stroke-width="2"></rect>302 <path d="M12 14v3" stroke="#757575" stroke-width="2" stroke-linecap="round"></path>303 <circle cx="12" cy="20" r="2" fill="#757575"></circle>304 </svg>305 </div>306 </div>307 <div class="cart-wrap">308 <svg width="48" height="48" viewBox="0 0 24 24">309 <path d="M3 6h3l2 9h10l2-7H7" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>310 <circle cx="10" cy="20" r="2" fill="#424242"></circle>311 <circle cx="18" cy="20" r="2" fill="#424242"></circle>312 </svg>313 <div class="badge">1</div>314 </div>315 </div>316 </div>317 318 <div class="divider"></div>319 320 <div class="content">321 <div class="link">View more from APPLE</div>322 <div class="title">APPLE iPhone 15 (Blue, 256 GB)</div>323 324 <div class="rating-row">325 <!-- 5 stars -->326 <svg width="160" height="32" viewBox="0 0 160 32">327 <g fill="#1BAE6E">328 <polygon points="16,1 20,12 32,12 22,18 26,29 16,22 6,29 10,18 0,12 12,12"></polygon>329 <polygon transform="translate(32,0)" points="16,1 20,12 32,12 22,18 26,29 16,22 6,29 10,18 0,12 12,12"></polygon>330 <polygon transform="translate(64,0)" points="16,1 20,12 32,12 22,18 26,29 16,22 6,29 10,18 0,12 12,12"></polygon>331 <polygon transform="translate(96,0)" points="16,1 20,12 32,12 22,18 26,29 16,22 6,29 10,18 0,12 12,12"></polygon>332 <polygon transform="translate(128,0)" points="16,1 20,12 32,12 22,18 26,29 16,22 6,29 10,18 0,12 12,12"></polygon>333 </g>334 </svg>335 <div class="ratings-count">2,766 ratings</div>336 <div class="assured">337 <svg width="24" height="24" viewBox="0 0 24 24">338 <path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFD54F"></path>339 </svg>340 Plus F-ASSURED341 </div>342 </div>343 344 <div class="monthly">₹13,834/month</div>345 <div class="emi-note">6 months No cost EMI Plan with HDFC credit-card. <span class="link">Details</span></div>346 347 <div class="price-block">348 <span class="off">7% off</span>349 <span class="strike">89,900</span>350 <span class="price">₹82,999</span>351 <div class="fee">+ ₹99 Secured Packaging Fee</div>352 </div>353 354 <div class="pincode-row">355 <div class="pincode-text">Find a seller that delivers to you</div>356 <button class="pincode-btn">Enter pincode</button>357 </div>358 359 <div class="delivery">360 <div class="icon-btn" style="width:72px;height:72px;">361 <svg width="48" height="48" viewBox="0 0 24 24">362 <rect x="2" y="6" width="12" height="8" rx="2" fill="none" stroke="#757575" stroke-width="2"></rect>363 <path d="M14 9h4l3 3v2h-7" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round"></path>364 <circle cx="6" cy="18" r="2" fill="#757575"></circle>365 <circle cx="18" cy="18" r="2" fill="#757575"></circle>366 </svg>367 </div>368 <div class="delivery-text">369 <div class="delivery-line">370 <span class="free">FREE Delivery</span> <span class="cut">₹40</span> | <span class="arrival">Delivery by 11 Jan, Thursday</span>371 </div>372 <div class="eta">If ordered within <span class="highlight">01h 59m 11s</span></div>373 </div>374 <svg class="chevron" viewBox="0 0 24 24">375 <path d="M10 6l6 6-6 6" fill="none" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>376 </svg>377 </div>378 379 <div class="features">380 <div class="feature">381 <div class="feature-icon">382 <svg width="56" height="56" viewBox="0 0 24 24">383 <circle cx="12" cy="12" r="10" fill="none" stroke="#1E88E5" stroke-width="2"></circle>384 <path d="M12 7v5l3 3" stroke="#1E88E5" stroke-width="2" stroke-linecap="round"></path>385 </svg>386 </div>387 <div class="feature-label">7 Days Service C…</div>388 </div>389 <div class="feature">390 <div class="feature-icon">391 <svg width="56" height="56" viewBox="0 0 24 24">392 <rect x="4" y="6" width="16" height="10" rx="2" fill="none" stroke="#FB8C00" stroke-width="2"></rect>393 <path d="M4 10h10" stroke="#FB8C00" stroke-width="2"></path>394 </svg>395 </div>396 <div class="feature-label">Open Box Delivery</div>397 </div>398 <div class="feature">399 <div class="feature-icon">400 <svg width="56" height="56" viewBox="0 0 24 24">401 <circle cx="12" cy="8" r="4" fill="none" stroke="#3949AB" stroke-width="2"></circle>402 <path d="M5 20c1-4 5-6 7-6s6 2 7 6" fill="none" stroke="#3949AB" stroke-width="2"></path>403 <circle cx="17" cy="16" r="3" fill="#FFD54F"></circle>404 </svg>405 </div>406 <div class="feature-label">Top Rated Seller</div>407 </div>408 <div class="feature">409 <div class="feature-icon">410 <svg width="56" height="56" viewBox="0 0 24 24">411 <rect x="4" y="6" width="16" height="10" rx="2" fill="none" stroke="#1E88E5" stroke-width="2"></rect>412 <path d="M8 12l4 3 4-6" fill="none" stroke="#1E88E5" stroke-width="2"></path>413 </svg>414 </div>415 <div class="feature-label">Cash on Delivery</div>416 </div>417 <div class="feature">418 <div class="feature-icon">419 <svg width="56" height="56" viewBox="0 0 24 24">420 <circle cx="12" cy="12" r="10" fill="none" stroke="#F4511E" stroke-width="2"></circle>421 <path d="M6 12h12" stroke="#F4511E" stroke-width="2"></path>422 </svg>423 </div>424 <div class="feature-label">No Cost EMI</div>425 </div>426 </div>427 428 <div class="warranty">429 <div style="font-size:56px;">🍎</div>430 <div class="warranty-text">1 Year Warranty for Phone and 6 Months Warranty for In-Box Accessories <span class="know">Know More</span></div>431 </div>432 433 <div class="deal">434 <div class="deal-row">435 <div class="deal-left">436 <div class="deal-badge">WOW! DEAL</div>437 <div class="deal-price">Get at <span class="green">₹78,999</span> or 13,167/m</div>438 </div>439 <div class="deal-float">440 <div class="deal-float-inner"></div>441 </div>442 </div>443 </div>444 </div>445 446 <div class="bottom-bar">447 <div class="btn cart">448 <svg width="48" height="48" viewBox="0 0 24 24" style="margin-right:12px;">449 <path d="M3 6h3l2 9h10l2-7H7" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>450 <path d="M9 3v4h4" fill="none" stroke="#424242" stroke-width="2"></path>451 </svg>452 </div>453 <div class="btn emi">Pay with EMI</div>454 <div class="btn buy">Buy now</div>455 </div>456 457 <div class="home-indicator">458 <div class="home-pill"></div>459 </div>460</div>461</body>462</html>