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 Details Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Header */19 .header {20 background: linear-gradient(90deg, #6fd8cf, #b7ece6);21 padding: 34px 32px 24px 24px;22 }23 .topbar {24 display: flex;25 align-items: center;26 gap: 20px;27 }28 .back-btn {29 width: 60px; height: 60px; border-radius: 30px;30 display: flex; align-items: center; justify-content: center;31 }32 .search-bar {33 flex: 1;34 background: #fff;35 border-radius: 28px;36 box-shadow: 0 2px 0 rgba(0,0,0,0.06);37 display: flex; align-items: center;38 padding: 18px 22px;39 gap: 18px;40 }41 .search-input {42 flex: 1;43 color: #333;44 font-size: 32px;45 outline: none;46 border: none;47 background: transparent;48 }49 .search-placeholder { color: #666; }50 .search-icon, .camera-icon {51 width: 40px; height: 40px; color: #6b6b6b;52 }53 54 /* Tabs */55 .tabs {56 background: #ffffff;57 display: flex;58 align-items: center;59 border-bottom: 1px solid #e6e6e6;60 }61 .tab {62 padding: 26px 34px;63 font-size: 32px;64 color: #6a6a6a;65 position: relative;66 }67 .tab.active {68 color: #111;69 font-weight: 700;70 }71 .tab.active::after {72 content: "";73 position: absolute;74 left: 28px; right: 28px; bottom: -2px;75 height: 6px; background: #f38f2a; border-radius: 3px;76 }77 .tabs-spacer {78 flex: 1;79 }80 .collapse-up {81 margin-right: 20px;82 width: 52px; height: 52px;83 display: flex; align-items: center; justify-content: center;84 background: #e9f8f6;85 border-radius: 14px;86 }87 88 /* Benefits row */89 .benefits {90 display: flex;91 gap: 24px;92 padding: 22px 24px;93 background: #fff;94 overflow: hidden;95 }96 .benefit {97 flex: 1;98 min-width: 0;99 text-align: center;100 }101 .benefit-icon {102 width: 132px; height: 132px; margin: 0 auto 12px;103 background: #f5f7f8;104 border: 1px solid #e0e3e5;105 border-radius: 66px;106 display: flex; align-items: center; justify-content: center;107 }108 .benefit span {109 display: block;110 color: #118089;111 font-size: 30px;112 }113 114 /* Accessory section */115 .section {116 background: #fff;117 padding: 26px 26px 0 26px;118 }119 .section h3 {120 margin: 16px 0 18px;121 font-size: 44px;122 color: #111;123 }124 .accessory {125 padding: 18px 0 26px 0;126 position: relative;127 }128 .accessory + .accessory {129 border-top: 1px solid #e6e6e6;130 }131 .acc-title {132 color: #017185;133 font-size: 34px;134 line-height: 1.35;135 margin-right: 240px;136 }137 .price {138 font-size: 40px;139 margin: 18px 0 6px;140 color: #111;141 }142 .cta {143 position: absolute;144 right: 10px;145 top: 22px;146 background: #ffd814;147 border: none;148 padding: 22px 38px;149 border-radius: 40px;150 font-size: 32px;151 font-weight: 700;152 color: #111;153 box-shadow: 0 2px 0 rgba(0,0,0,0.05);154 }155 156 /* Product details */157 .details-header {158 margin-top: 18px;159 padding: 22px 0;160 border-top: 8px solid #eef0f2;161 }162 .details-header h4 {163 margin: 0;164 font-size: 44px;165 color: #111;166 }167 .kv {168 display: flex;169 padding: 16px 0;170 border-bottom: 1px solid #f1f1f1;171 gap: 24px;172 }173 .kv .k {174 width: 420px;175 color: #333;176 font-weight: 700;177 font-size: 34px;178 }179 .kv .v {180 flex: 1;181 color: #333;182 font-size: 34px;183 }184 185 /* Bottom navigation */186 .bottom-nav {187 position: absolute;188 left: 0; right: 0; bottom: 64px;189 background: #ffffff;190 border-top: 1px solid #e6e6e6;191 height: 140px;192 display: flex;193 align-items: center;194 justify-content: space-around;195 }196 .nav-item {197 width: 20%;198 display: flex; flex-direction: column;199 align-items: center; justify-content: center;200 color: #6d6d6d;201 font-size: 26px;202 }203 .nav-item.active {204 color: #15a3a3;205 font-weight: 700;206 }207 .nav-underline {208 width: 70px; height: 6px; background: #15a3a3; border-radius: 3px; margin-top: 8px;209 }210 .nav-icon { width: 48px; height: 48px; }211 212 /* Gesture bar */213 .gesture {214 position: absolute; left: 50%; transform: translateX(-50%);215 bottom: 18px; width: 260px; height: 12px; border-radius: 8px; background: #c8c8c8;216 }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- Gradient header with search -->223 <div class="header">224 <div class="topbar">225 <div class="back-btn">226 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#222" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">227 <path d="M15 19L8 12l7-7"/>228 </svg>229 </div>230 <div class="search-bar">231 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">232 <circle cx="11" cy="11" r="7"></circle>233 <path d="M20 20l-4-4"></path>234 </svg>235 <div class="search-input search-placeholder">yoga mats for women</div>236 <svg class="camera-icon" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">237 <rect x="4" y="7" width="16" height="12" rx="2"></rect>238 <circle cx="12" cy="13" r="3"></circle>239 <path d="M9 7l1.5-2h3L15 7"></path>240 </svg>241 </div>242 </div>243 </div>244 245 <!-- Tabs -->246 <div class="tabs">247 <div class="tab active">Details</div>248 <div class="tab">Questions</div>249 <div class="tab">Compare</div>250 <div class="tab">Reviews</div>251 <div class="tabs-spacer"></div>252 <div class="collapse-up">253 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#0e8d86" stroke-width="2.5" stroke-linecap="round">254 <path d="M5 15l7-7 7 7"/>255 </svg>256 </div>257 </div>258 259 <!-- Benefits row -->260 <div class="benefits">261 <div class="benefit">262 <div class="benefit-icon">263 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#f59f00" stroke-width="2">264 <circle cx="8" cy="16" r="3"></circle>265 <circle cx="18" cy="16" r="3"></circle>266 <path d="M5 16h13l2-6H7L5 6H2"></path>267 </svg>268 </div>269 <span>Free Delivery</span>270 </div>271 <div class="benefit">272 <div class="benefit-icon">273 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#fb8c00" stroke-width="2">274 <path d="M5 3h14v12H5z"></path>275 <path d="M5 9h14"></path>276 <path d="M9 17l2 4 4-8"></path>277 </svg>278 </div>279 <span>Pay on Delivery</span>280 </div>281 <div class="benefit">282 <div class="benefit-icon">283 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#fb8c00" stroke-width="2">284 <circle cx="12" cy="12" r="8"></circle>285 <path d="M12 8v5l3 2"></path>286 </svg>287 </div>288 <span>10 days Returnable</span>289 </div>290 <div class="benefit">291 <div class="benefit-icon">292 <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#ff9900" stroke-width="2">293 <rect x="3" y="6" width="18" height="12" rx="2"></rect>294 <path d="M7 14h10"></path>295 </svg>296 </div>297 <span>Amazon Delivered</span>298 </div>299 </div>300 301 <!-- Accessory list -->302 <div class="section">303 <h3>Add an Accessory</h3>304 305 <div class="accessory">306 <div class="acc-title">amazon basics Foam Yoga Blocks - 4 X 9 X 6 Inches, Set Of 2, Purple</div>307 <div class="price">₹459.00</div>308 <button class="cta">Add to Cart</button>309 </div>310 311 <div class="accessory">312 <div class="acc-title">Yoga Belt for Women and Men - Yoga Strap for Stretching with Extra Safe Adjustable D-Ring Buckle - Durable and Comfy Texture</div>313 <div class="price">₹179.00</div>314 <button class="cta">Add to Cart</button>315 </div>316 317 <div class="details-header">318 <h4>Product details</h4>319 </div>320 321 <div class="kv">322 <div class="k">Colour</div>323 <div class="v">Grey</div>324 </div>325 <div class="kv">326 <div class="k">Brand</div>327 <div class="v">Boldfit</div>328 </div>329 <div class="kv">330 <div class="k">Material</div>331 <div class="v">Ethylene Vinyl Acetate</div>332 </div>333 <div class="kv">334 <div class="k">Product Care Instructions</div>335 <div class="v">Hand Wash Only</div>336 </div>337 <div class="kv">338 <div class="k">Product Dimensions</div>339 <div class="v">183L x 61W x 0.6Th</div>340 </div>341 <div style="height: 640px;"></div>342 </div>343 344 <!-- Bottom navigation bar -->345 <div class="bottom-nav">346 <div class="nav-item active">347 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#15a3a3" stroke-width="2">348 <path d="M3 11l9-7 9 7"></path>349 <path d="M5 10v9h14v-9"></path>350 </svg>351 <div>Home</div>352 <div class="nav-underline"></div>353 </div>354 <div class="nav-item">355 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6d6d6d" stroke-width="2">356 <circle cx="12" cy="8" r="4"></circle>357 <path d="M4 20c1.5-4 14.5-4 16 0"></path>358 </svg>359 <div>You</div>360 </div>361 <div class="nav-item">362 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6d6d6d" stroke-width="2">363 <path d="M3 12a9 9 0 0 1 15-6M21 12a9 9 0 0 1-15 6"></path>364 <path d="M3 4v6h6"></path>365 </svg>366 <div>More</div>367 </div>368 <div class="nav-item">369 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6d6d6d" stroke-width="2">370 <circle cx="9" cy="19" r="2"></circle>371 <circle cx="17" cy="19" r="2"></circle>372 <path d="M5 5h3l2 9h8l2-6H7"></path>373 </svg>374 <div>Cart</div>375 </div>376 <div class="nav-item">377 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#6d6d6d" stroke-width="2">378 <path d="M4 6h16M4 12h16M4 18h16"></path>379 </svg>380 <div>Menu</div>381 </div>382 </div>383 384 <div class="gesture"></div>385</div>386</body>387</html>