GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Shopping UI - Generate HTML</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #f9f9f9;18 border-radius: 0;19 }20 /* Utility */21 * { box-sizing: border-box; }22 .row { display: flex; }23 .icon-btn { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; }24 .muted { color: #6f6f6f; }25 .thin { font-weight: 300; }26 .shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }27 28 /* Header */29 .app-header {30 position: absolute;31 top: 0;32 left: 0;33 width: 1080px;34 height: 140px;35 background: #ffffff;36 display: flex;37 align-items: center;38 padding: 0 24px;39 border-bottom: 1px solid #e6e6e6;40 }41 .header-right {42 margin-left: auto;43 display: flex;44 gap: 10px;45 }46 47 /* Promo banner */48 .promo {49 position: absolute;50 top: 160px;51 left: 30px;52 width: 1020px;53 background: #ffffff;54 border: 1px solid #e6e6e6;55 border-radius: 16px;56 padding: 26px 28px;57 display: flex;58 align-items: center;59 gap: 22px;60 }61 .promo-tag {62 width: 86px;63 height: 60px;64 background: #45b67a;65 border-radius: 10px;66 color: #fff;67 font-weight: bold;68 display: flex; align-items: center; justify-content: center;69 }70 .promo-text {71 font-size: 38px;72 color: #222;73 }74 .promo-sub {75 font-size: 32px;76 color: #888;77 }78 .promo-chevron {79 margin-left: auto;80 }81 82 /* Kit section */83 .kit-section {84 position: absolute;85 top: 360px;86 left: 30px;87 width: 1020px;88 background: #eaf3f7;89 border-radius: 20px;90 padding: 30px;91 }92 .kit-head {93 display: flex; align-items: center; gap: 20px;94 color: #1f2a37;95 font-weight: 800;96 letter-spacing: 1px;97 font-size: 44px;98 margin-bottom: 26px;99 }100 .kit-head .plus-badge {101 width: 66px; height: 66px; background: #fff; border: 2px dashed #8fb5d1;102 display: flex; align-items: center; justify-content: center; border-radius: 12px; color: #3b82b1; font-weight: bold; font-size: 40px;103 }104 .product-row {105 display: grid;106 grid-template-columns: 1fr 90px 1fr;107 gap: 26px;108 }109 .card {110 background: #fff;111 border-radius: 12px;112 border: 1px solid #dfe7ee;113 padding: 20px;114 }115 .img {116 width: 100%;117 height: 420px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 display: flex; align-items: center; justify-content: center;121 color: #757575; font-size: 34px; border-radius: 8px;122 }123 .rating-badge {124 margin-top: 16px;125 display: inline-flex; align-items: center; gap: 8px;126 background: #ffd54f; color: #1f1f1f; font-weight: bold;127 border-radius: 10px; padding: 8px 14px; font-size: 30px;128 }129 .brand {130 margin-top: 22px;131 font-weight: 800;132 font-size: 38px;133 color: #1c1c1c;134 }135 .title {136 font-size: 32px; color: #333; margin-top: 8px; line-height: 1.25;137 }138 .price-row {139 margin-top: 20px; display: flex; align-items: center; gap: 16px;140 }141 .price {142 background: #fff6a1;143 border-radius: 8px;144 font-weight: 800; padding: 8px 14px; font-size: 36px; color: #222;145 }146 .strike {147 font-size: 30px; color: #888; text-decoration: line-through;148 }149 .offer {150 font-size: 28px; color: #e24c4c;151 }152 .plus-middle {153 display: flex; align-items: center; justify-content: center;154 color: #2f4c6b; font-size: 80px; font-weight: 900;155 }156 .slider-area {157 margin-top: 18px; height: 14px; background: #dbe8f1; border-radius: 8px; position: relative;158 }159 .slider-fill {160 position: absolute; left: 0; top: 0; height: 14px; width: 280px; background: #4d84b6; border-radius: 8px;161 }162 .kit-footer {163 margin-top: 30px; display: flex; align-items: center;164 }165 .total {166 font-size: 42px; font-weight: 800; color: #222;167 }168 .select-btn {169 margin-left: auto;170 width: 540px; height: 110px; background: #2e6aa4; color: #fff; font-size: 40px; font-weight: 800;171 border-radius: 16px; display: flex; align-items: center; justify-content: center;172 box-shadow: 0 4px 8px rgba(0,0,0,0.15);173 }174 175 /* Tabs */176 .tabs {177 position: absolute; top: 1160px; left: 30px; width: 1020px; background: #ffffff; border-radius: 0;178 border-bottom: 1px solid #eaeaea; display: flex;179 }180 .tab {181 padding: 32px 30px; font-size: 42px; font-weight: 800; color: #2a2a2a;182 }183 .tab.active {184 color: #2f4c6b; border-bottom: 6px solid #2f4c6b;185 }186 187 /* Details content */188 .details {189 position: absolute; top: 1280px; left: 30px; width: 1020px;190 }191 .section-title {192 font-size: 44px; font-weight: 800; color: #2a2a2a; margin-bottom: 20px;193 }194 .paragraph {195 font-size: 36px; color: #4a4a4a; line-height: 1.45;196 }197 198 /* Floating add-to-cart */199 .bottom-bar-wrapper {200 position: absolute; bottom: 100px; left: 30px; width: 1020px;201 background: #ffffff; border: 1px solid #eaeaea; border-radius: 20px; padding: 22px; display: flex; align-items: center; gap: 20px;202 box-shadow: 0 8px 20px rgba(0,0,0,0.08);203 }204 .wishlist {205 width: 120px; height: 120px; background: #ffffff; border: 1px solid #dfe2e7; border-radius: 18px; display: flex; align-items: center; justify-content: center;206 }207 .add-cart {208 flex: 1; height: 120px; background: #ffea62; border-radius: 16px; display: flex; align-items: center; justify-content: center;209 font-size: 46px; font-weight: 900; color: #1c1c1c; letter-spacing: 1px;210 }211 212 /* Chat bubble */213 .chat-bubble {214 position: absolute; right: 46px; bottom: 270px; width: 160px; height: 160px; background: #3d7bd6; border-radius: 50%;215 display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.15);216 }217 .chat-inner {218 width: 110px; height: 110px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;219 }220 221 /* Simple icon styles */222 svg { display: block; }223</style>224</head>225<body>226<div id="render-target">227 228 <!-- Header -->229 <div class="app-header">230 <div class="icon-btn">231 <!-- Back Arrow -->232 <svg width="46" height="46" viewBox="0 0 24 24">233 <path d="M15 18l-6-6 6-6" fill="none" stroke="#1f2a37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 <div class="header-right">237 <!-- Search -->238 <div class="icon-btn">239 <svg width="46" height="46" viewBox="0 0 24 24">240 <circle cx="10" cy="10" r="7" fill="none" stroke="#1f2a37" stroke-width="2"/>241 <path d="M21 21l-5.2-5.2" stroke="#1f2a37" stroke-width="2" fill="none" stroke-linecap="round"/>242 </svg>243 </div>244 <!-- Heart -->245 <div class="icon-btn">246 <svg width="46" height="46" viewBox="0 0 24 24">247 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-3 4.5 4.5 0 018 3c0 4.5-7 9-7 9z" fill="none" stroke="#1f2a37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>248 </svg>249 </div>250 <!-- Cart -->251 <div class="icon-btn">252 <svg width="46" height="46" viewBox="0 0 24 24">253 <circle cx="9" cy="20" r="1.7" fill="#1f2a37"/>254 <circle cx="18" cy="20" r="1.7" fill="#1f2a37"/>255 <path d="M3 4h2l2.5 12h11l2-8H7.8" fill="none" stroke="#1f2a37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>256 </svg>257 </div>258 </div>259 </div>260 261 <!-- Promo Banner -->262 <div class="promo shadow">263 <div class="promo-tag">%</div>264 <div>265 <div class="promo-text">Buy 3 product(s) and save ₹98</div>266 <div class="promo-sub">Limited period offer</div>267 </div>268 <div class="promo-chevron">269 <svg width="40" height="40" viewBox="0 0 24 24">270 <path d="M9 6l6 6-6 6" fill="none" stroke="#6f6f6f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 </div>274 275 <!-- Kit Section -->276 <div class="kit-section shadow">277 <div class="kit-head">278 <div class="plus-badge">+</div>279 <div>COMPLETE YOUR KIT</div>280 </div>281 282 <div class="product-row">283 <!-- Left Card -->284 <div class="card shadow">285 <div class="img">[IMG: Grey Walking Shoe]</div>286 <div class="rating-badge">287 <svg width="28" height="28" viewBox="0 0 24 24">288 <path d="M12 17.3l-6.2 3.3 1.6-6.8L2 9.8l6.9-.6L12 3l3.1 6.2 6.9.6-5.4 4.1 1.6 6.8z" fill="#f0b400"/>289 </svg>290 4.5291 </div>292 <div class="brand">NEWFEEL</div>293 <div class="title">Men Walking Shoes PW 100 - Grey</div>294 <div class="price-row">295 <div class="price">₹699</div>296 <div class="strike">₹999</div>297 <div class="offer">(+1 Offer)</div>298 </div>299 </div>300 301 <!-- Middle Plus -->302 <div class="plus-middle">+</div>303 304 <!-- Right Card -->305 <div class="card shadow">306 <div class="img">[IMG: White Running Socks]</div>307 <div class="rating-badge">308 <svg width="28" height="28" viewBox="0 0 24 24">309 <path d="M12 17.3l-6.2 3.3 1.6-6.8L2 9.8l6.9-.6L12 3l3.1 6.2 6.9.6-5.4 4.1 1.6 6.8z" fill="#f0b400"/>310 </svg>311 4.6312 </div>313 <div class="brand">KIPRUN</div>314 <div class="title">ECO-DESIGN RUN500 X2 INV RUNNING SOCKS - WHITE</div>315 <div class="price-row">316 <div class="price">₹249</div>317 <div class="strike">₹499</div>318 </div>319 </div>320 </div>321 322 <div class="slider-area">323 <div class="slider-fill"></div>324 </div>325 326 <div class="kit-footer">327 <div class="total">Total Price: ₹1,147</div>328 <div class="select-btn">SELECT PRODUCTS</div>329 </div>330 </div>331 332 <!-- Tabs -->333 <div class="tabs">334 <div class="tab active">PRODUCT DETAILS</div>335 <div class="tab">TECHNICAL INFORMATION</div>336 </div>337 338 <!-- Details Section -->339 <div class="details">340 <div class="section-title">Made For</div>341 <div class="paragraph">342 This is an Occasional walking shoe which we advise to use 1-2 times a week. Not to be used with any other sport. This shoe is designed only for walking.343 </div>344 </div>345 346 <!-- Floating bottom bar -->347 <div class="bottom-bar-wrapper">348 <div class="wishlist">349 <svg width="70" height="70" viewBox="0 0 24 24">350 <path d="M12 20s-7-4.5-7-9a4.5 4.5 0 018-3 4.5 4.5 0 018 3c0 4.5-7 9-7 9z" fill="none" stroke="#1f2a37" stroke-width="2"/>351 <path d="M17 7l0 0" stroke="#1f2a37" stroke-width="2"/>352 <path d="M6 7l0 0" stroke="#1f2a37" stroke-width="2"/>353 <path d="M18 6l3 0" stroke="#1f2a37" stroke-width="2"/>354 </svg>355 </div>356 <div class="add-cart">357 ADD TO CART358 <svg style="margin-left:18px" width="48" height="48" viewBox="0 0 24 24">359 <circle cx="9" cy="20" r="1.7" fill="#1f2a37"/>360 <circle cx="18" cy="20" r="1.7" fill="#1f2a37"/>361 <path d="M3 4h2l2.5 12h11l2-8H7.8" fill="none" stroke="#1f2a37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>362 </svg>363 </div>364 </div>365 366 <!-- Chat bubble -->367 <div class="chat-bubble">368 <div class="chat-inner">369 <svg width="46" height="46" viewBox="0 0 24 24">370 <circle cx="7.5" cy="12" r="2" fill="#3d7bd6"/>371 <circle cx="12" cy="12" r="2" fill="#3d7bd6"/>372 <circle cx="16.5" cy="12" r="2" fill="#3d7bd6"/>373 </svg>374 </div>375 </div>376 377</div>378</body>379</html>