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>UI Rendering</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #333; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #F6F7F9;13 }14 /* Status bar */15 .status-bar {16 height: 120px;17 background: #D9D9D9;18 display: flex; align-items: center;19 padding: 0 40px;20 font-weight: 600; color: #fff; font-size: 40px;21 }22 .status-icons { margin-left: 20px; display: flex; gap: 18px; align-items: center; }23 .status-dot { width: 14px; height: 14px; background: #FFFFFF; border-radius: 50%; opacity: 0.9; }24 .status-right { margin-left: auto; display: flex; gap: 18px; align-items: center; }25 .status-shape {26 width: 30px; height: 20px; border: 2px solid #fff; border-radius: 4px; position: relative;27 }28 .status-battery { width: 36px; height: 18px; border: 2px solid #fff; border-radius: 3px; position: relative; }29 .status-battery::after { content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 8px; background: #fff; border-radius: 1px; }30 .top-bar {31 height: 120px; background: #FFFFFF;32 display: flex; align-items: center; padding: 0 28px;33 box-shadow: 0 1px 0 rgba(0,0,0,0.06);34 }35 .top-left { display: flex; align-items: center; gap: 24px; }36 .top-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }37 .icon-btn svg { width: 60px; height: 60px; stroke: #212121; }38 /* Location card */39 .location-card {40 margin: 12px 28px 0 28px; background: #fff;41 border: 1px solid #E0E0E0; border-radius: 18px;42 padding: 30px 34px; display: flex; align-items: center;43 }44 .location-code { font-size: 42px; color: #6B6B6B; }45 .check-dot {46 width: 28px; height: 28px; background: #2E7D32; border-radius: 50%;47 margin-left: 18px;48 }49 .location-change { margin-left: auto; color: #2E77D0; font-size: 40px; }50 /* Delivery rows */51 .info-row {52 display: flex; align-items: center; gap: 26px;53 padding: 32px 28px; border-bottom: 1px solid #ECEFF1;54 }55 .info-icon {56 width: 96px; height: 96px; background: #F2F8FF;57 border: 1px solid #D6E6FF; border-radius: 18px;58 display: flex; align-items: center; justify-content: center;59 }60 .info-text { flex: 1; }61 .info-text .line1 { font-size: 42px; font-weight: 700; color: #212121; }62 .info-text .line2 { font-size: 38px; color: #6B6B6B; margin-top: 8px; }63 .green { color: #2E7D32; font-weight: 700; }64 .link { color: #2E77D0; font-size: 40px; }65 /* Seller section */66 .seller-section { padding: 34px 28px 0 28px; }67 .seller-title { font-size: 52px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 16px; color: #333; }68 .seller-sub { font-size: 38px; color: #8A8A8A; }69 .seller-brand { color: #2E77D0; font-weight: 700; }70 .policy-card {71 margin-top: 26px; background: #fff; border: 1px solid #E0E0E0; border-radius: 18px;72 padding: 32px; display: flex; align-items: center; gap: 26px;73 }74 /* Complete your kit section */75 .kit-section {76 margin: 28px; background: #EAF4FB; border: 1px solid #D6E6FF; border-radius: 26px;77 padding: 32px;78 }79 .kit-header { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }80 .kit-title { font-size: 48px; font-weight: 800; letter-spacing: 0.3px; }81 .kit-list { display: flex; gap: 26px; }82 .product-card {83 background: #fff; border: 1px solid #E0E0E0; border-radius: 18px;84 padding: 22px; width: 480px;85 }86 .img-placeholder {87 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;88 display: flex; align-items: center; justify-content: center;89 }90 .img-square { width: 436px; height: 436px; border-radius: 12px; }91 .img-circle { width: 436px; height: 436px; border-radius: 50%; }92 .rating-badge {93 display: inline-flex; align-items: center; gap: 8px;94 background: #fff; border: 1px solid #E0E0E0; border-radius: 12px;95 padding: 10px 14px; font-size: 34px; color: #5C5C5C; margin-top: 16px;96 }97 .product-title { font-size: 44px; font-weight: 800; margin-top: 18px; }98 .product-desc { font-size: 36px; color: #666; margin-top: 8px; line-height: 1.35; }99 .price-row { display: flex; align-items: baseline; gap: 18px; margin-top: 18px; }100 .price-tag {101 background: #FFEB3B; color: #212121; font-weight: 800;102 padding: 12px 18px; border-radius: 10px; font-size: 44px;103 border: 1px solid #E0D700;104 }105 .price-mrp { color: #8A8A8A; font-size: 36px; text-decoration: line-through; }106 .plus-col {107 width: 48px; display: flex; align-items: center; justify-content: center;108 }109 /* Bottom add-to-cart bar */110 .bottom-bar {111 position: absolute; left: 24px; right: 24px; bottom: 140px;112 background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 24px;113 padding: 22px 26px; display: flex; align-items: center; gap: 24px;114 box-shadow: 0 8px 24px rgba(0,0,0,0.08);115 }116 .wishlist-btn {117 width: 140px; height: 120px; border: 2px solid #D6E6FF; border-radius: 18px;118 display: flex; align-items: center; justify-content: center;119 background: #F8FBFF;120 }121 .primary-cta {122 flex: 1; height: 120px; background: #FFE056; color: #1E1E1E; font-weight: 900; font-size: 48px;123 border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 22px;124 border: 1px solid #F0D240; letter-spacing: 1px;125 }126 .gesture {127 position: absolute; left: 50%; transform: translateX(-50%);128 bottom: 60px; width: 320px; height: 14px; background: #111; border-radius: 8px; opacity: 0.85;129 }130 /* Floating chat bubble */131 .chat-bubble {132 position: absolute; right: 60px; bottom: 420px;133 background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 18px;134 padding: 22px 26px; width: 520px; box-shadow: 0 6px 18px rgba(0,0,0,0.08);135 display: flex; gap: 18px; align-items: flex-start;136 }137 .chat-close {138 position: absolute; left: -20px; top: -20px;139 width: 46px; height: 46px; background: #ECEFF1; color: #666;140 border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;141 border: 1px solid #D0D5DA;142 }143 .chat-text { font-size: 36px; color: #333; line-height: 1.35; }144 .avatar {145 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;146 display: flex; align-items: center; justify-content: center; color: #757575; flex-shrink: 0;147 }148 /* Small progress bar indicator in kit section bottom */149 .kit-progress {150 height: 10px; background: #DFE6EF; border-radius: 6px; margin: 22px 26px 0 26px; overflow: hidden;151 }152 .kit-progress .bar { width: 260px; height: 100%; background: #2E77D0; border-radius: 6px; }153</style>154</head>155<body>156<div id="render-target">157 <!-- Status bar -->158 <div class="status-bar">159 10:40160 <div class="status-icons">161 <div class="status-dot"></div>162 <div class="status-dot"></div>163 <div class="status-dot"></div>164 <div class="status-dot"></div>165 <div class="status-dot"></div>166 </div>167 <div class="status-right">168 <div class="status-shape"></div>169 <div class="status-battery"></div>170 </div>171 </div>172 173 <!-- App top bar -->174 <div class="top-bar">175 <div class="top-left">176 <div class="icon-btn">177 <svg viewBox="0 0 48 48" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">178 <path d="M30 10 L16 24 L30 38" stroke="#212121"/>179 </svg>180 </div>181 </div>182 <div class="top-right">183 <div class="icon-btn">184 <svg viewBox="0 0 48 48" fill="none" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">185 <circle cx="21" cy="21" r="12" stroke="#212121"></circle>186 <path d="M34 34 L44 44" stroke="#212121"></path>187 </svg>188 </div>189 <div class="icon-btn">190 <svg viewBox="0 0 48 48" fill="none" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">191 <path d="M24 40 C10 28, 8 20, 16 14 C20 11, 24 13, 24 16 C24 13, 28 11, 32 14 C40 20, 38 28, 24 40 Z" stroke="#212121"></path>192 </svg>193 </div>194 <div class="icon-btn">195 <svg viewBox="0 0 48 48" fill="none" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">196 <path d="M6 12 H42 L38 28 H12 L10 18" stroke="#212121"></path>197 <circle cx="16" cy="36" r="3" stroke="#212121"></circle>198 <circle cx="34" cy="36" r="3" stroke="#212121"></circle>199 </svg>200 </div>201 </div>202 </div>203 204 <!-- Location card -->205 <div class="location-card">206 <div class="location-code">110026</div>207 <div class="check-dot"></div>208 <div class="location-change">Change</div>209 </div>210 211 <!-- Delivery rows -->212 <div class="info-row">213 <div class="info-icon">214 <svg viewBox="0 0 64 64" width="64" height="64">215 <rect x="6" y="20" width="34" height="20" fill="none" stroke="#2E77D0" stroke-width="3"></rect>216 <rect x="40" y="26" width="18" height="14" fill="none" stroke="#2E77D0" stroke-width="3"></rect>217 <circle cx="16" cy="44" r="4" fill="#2E77D0"></circle>218 <circle cx="48" cy="44" r="4" fill="#2E77D0"></circle>219 </svg>220 </div>221 <div class="info-text">222 <div class="line1">Home Delivery by 23rd Dec 2023</div>223 <div class="line2">Order within <span class="green">03h:24m</span></div>224 </div>225 </div>226 <div class="info-row">227 <div class="info-icon">228 <svg viewBox="0 0 64 64" width="64" height="64">229 <rect x="12" y="16" width="40" height="28" fill="none" stroke="#2E77D0" stroke-width="3"></rect>230 <rect x="20" y="28" width="24" height="16" fill="none" stroke="#2E77D0" stroke-width="3"></rect>231 </svg>232 </div>233 <div class="info-text">234 <div class="line1" style="font-weight:600;">Free Pickup in Store Available</div>235 </div>236 <div class="link">View stores</div>237 </div>238 239 <!-- Seller details -->240 <div class="seller-section">241 <div class="seller-title">SELLER DETAILS</div>242 <div class="seller-sub">Sold And Fulfilled By: <span class="seller-brand">Decathlon Sports India Pvt Ltd</span></div>243 244 <div class="policy-card">245 <div class="info-icon" style="width:96px;height:96px;background:#fff;border-color:#E0E0E0;">246 <svg viewBox="0 0 64 64" width="64" height="64">247 <path d="M12 44 L12 20 L28 12 L44 20 L44 44 L28 52 Z" fill="none" stroke="#FF8A00" stroke-width="3"></path>248 <circle cx="28" cy="32" r="10" fill="none" stroke="#2E77D0" stroke-width="3"></circle>249 <text x="28" y="36" text-anchor="middle" font-size="12" fill="#2E77D0" font-family="Arial">30</text>250 </svg>251 </div>252 <div style="font-size:44px;color:#424242;">30 Days Return Policy</div>253 </div>254 </div>255 256 <!-- Complete your kit -->257 <div class="kit-section">258 <div class="kit-header">259 <div class="info-icon" style="width:72px;height:72px; border-radius: 16px;">260 <svg viewBox="0 0 64 64" width="48" height="48">261 <circle cx="32" cy="32" r="24" fill="none" stroke="#2E77D0" stroke-width="3"></circle>262 <path d="M32 22 V42 M22 32 H42" stroke="#2E77D0" stroke-width="3" stroke-linecap="round"/>263 </svg>264 </div>265 <div class="kit-title">COMPLETE YOUR KIT</div>266 </div>267 268 <div class="kit-list">269 <!-- Product 1 -->270 <div class="product-card">271 <div class="img-placeholder img-circle">[IMG: Beach Volleyball Ball]</div>272 <div class="rating-badge">273 <svg viewBox="0 0 24 24" width="32" height="32">274 <path d="M12 2 L14.8 8.5 L22 9 L16.5 13.5 L18.5 20 L12 16.5 L5.5 20 L7.5 13.5 L2 9 L9.2 8.5 Z" fill="#FFC107"></path>275 </svg>276 <span>4.3</span>277 </div>278 <div class="product-title">COPAYA</div>279 <div class="product-desc">Beach Volleyball Outdoor Ball 100 Green</div>280 <div class="price-row">281 <div class="price-tag">₹499</div>282 <div class="price-mrp">₹699</div>283 </div>284 </div>285 286 <!-- Plus -->287 <div class="plus-col">288 <svg viewBox="0 0 48 48" width="48" height="48">289 <path d="M24 10 V38 M10 24 H38" stroke="#6B6B6B" stroke-width="4" stroke-linecap="round"></path>290 </svg>291 </div>292 293 <!-- Product 2 -->294 <div class="product-card">295 <div class="img-placeholder img-square">[IMG: Sports Ball Pump]</div>296 <div class="rating-badge">297 <svg viewBox="0 0 24 24" width="32" height="32">298 <path d="M12 2 L14.8 8.5 L22 9 L16.5 13.5 L18.5 20 L12 16.5 L5.5 20 L7.5 13.5 L2 9 L9.2 8.5 Z" fill="#FFC107"></path>299 </svg>300 <span>4.6</span>301 </div>302 <div class="product-title">KIPSTA</div>303 <div class="product-desc">Sports Ball Pump Single Action</div>304 </div>305 </div>306 307 <div class="kit-progress">308 <div class="bar"></div>309 </div>310 </div>311 312 <!-- Floating chat bubble -->313 <div class="chat-bubble">314 <div class="chat-close">×</div>315 <div class="chat-text">316 <div style="font-weight:800; margin-bottom: 10px;">Hi There,</div>317 <div>Please click here to sign in & chat with me:)</div>318 </div>319 <div class="avatar">[IMG: Support Agent]</div>320 </div>321 322 <!-- Bottom Add to Cart bar -->323 <div class="bottom-bar">324 <div class="wishlist-btn">325 <svg viewBox="0 0 48 48" width="58" height="58" fill="none" stroke-width="3.5" stroke="#2E77D0" stroke-linecap="round" stroke-linejoin="round">326 <path d="M24 40 C10 28, 8 20, 16 14 C20 11, 24 13, 24 16 C24 13, 28 11, 32 14 C40 20, 38 28, 24 40 Z"></path>327 <path d="M24 16 V32 M16 24 H32" stroke="#2E77D0"></path>328 </svg>329 </div>330 <div class="primary-cta">331 ADD TO CART332 <svg viewBox="0 0 48 48" width="54" height="54" fill="none" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">333 <path d="M6 12 H42 L38 28 H12 L10 18"></path>334 <circle cx="16" cy="36" r="3"></circle>335 <circle cx="34" cy="36" r="3"></circle>336 </svg>337 </div>338 </div>339 340 <!-- Gesture handle -->341 <div class="gesture"></div>342</div>343</body>344</html>