GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Flipkart Product Details - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 height: 90px;18 padding: 20px 24px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #333;23 font-size: 32px;24 }25 .status-right {26 display: flex;27 align-items: center;28 gap: 18px;29 }30 .dot-icon { width: 16px; height: 16px; background:#777; border-radius:50%; display:inline-block; }31 .wifi-icon, .battery-icon {32 width: 40px; height: 24px; border:2px solid #333; border-radius:4px; position: relative;33 }34 .wifi-icon::after {35 content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 8px; background:#333;36 }37 .battery-icon::after {38 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background:#333; border-radius:2px;39 }40 41 /* Header with search */42 .header {43 padding: 0 24px 24px 24px;44 }45 .top-row {46 display: flex;47 align-items: center;48 gap: 24px;49 }50 .icon-btn {51 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;52 }53 .search-container {54 flex: 1;55 height: 96px;56 border-radius: 18px;57 border: 2px solid #e3e3e3;58 display: flex;59 align-items: center;60 padding: 0 24px;61 gap: 18px;62 background: #f7f7f7;63 }64 .search-container input {65 border: none; outline: none; background: transparent; font-size: 34px; flex: 1; color: #222;66 }67 .search-actions {68 display: flex; align-items: center; gap: 20px;69 }70 .cart-btn { width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; }71 72 /* Brand intro - faded skeleton style */73 .brand-block {74 margin: 8px 24px 24px 24px;75 padding: 24px;76 border-radius: 16px;77 background: #fafafa;78 border: 1px solid #eee;79 color: #bdbdbd;80 }81 .brand-top {82 display: flex;83 align-items: center;84 gap: 24px;85 margin-bottom: 12px;86 }87 .img-placeholder {88 width: 90px; height: 90px; background:#E0E0E0; border:1px solid #BDBDBD;89 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; border-radius:12px;90 }91 .brand-title { font-size: 38px; color: #bdbdbd; }92 .brand-items { margin-top: 12px; display: grid; gap: 12px; color:#c4c4c4; font-size: 30px; }93 .brand-items div { display: flex; align-items: center; gap: 14px; }94 95 /* Product details */96 .section {97 margin: 0 24px;98 padding: 24px 0;99 border-top: 1px solid #f0f0f0;100 }101 .section h2 {102 margin: 0 0 20px 0; font-size: 42px; color: #6d6d6d; font-weight: 700;103 }104 .details-grid {105 display: grid;106 grid-template-columns: 1.3fr 1.7fr;107 gap: 12px 24px;108 align-items: start;109 color: #b5b5b5;110 font-size: 36px;111 }112 .details-grid .label { color: #c6c6c6; }113 .details-grid .value { color: #9c9c9c; }114 115 .spinner {116 width: 90px;117 height: 90px;118 border: 10px solid #90CAF9;119 border-top-color: #1E88E5;120 border-radius: 50%;121 animation: spin 1.1s linear infinite;122 margin: 12px 0;123 }124 @keyframes spin { to { transform: rotate(360deg); } }125 126 .desc {127 margin-top: 24px; color: #b0b0b0; font-size: 34px; line-height: 1.6;128 }129 .more-link { color: #8ab4f8; font-size: 34px; margin-top: 6px; }130 131 .row-link {132 margin: 16px 24px;133 padding: 28px 8px;134 border-top: 1px solid #eeeeee;135 display:flex; align-items:center; justify-content: space-between;136 }137 .row-link .text { font-size: 38px; color:#acacac; }138 .chev {139 width: 48px; height: 48px;140 }141 142 /* Similar products */143 .similar-section { margin: 0 24px; }144 .similar-title { font-size: 44px; color:#b1b1b1; margin: 20px 0; }145 .thumbs { display:flex; gap: 24px; }146 .thumb {147 width: 308px; height: 308px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius: 18px;148 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 28px;149 }150 151 /* Floating chat bubble */152 .chat-bubble {153 position: absolute;154 right: 36px;155 bottom: 360px;156 width: 136px;157 height: 136px;158 background: #ffd740;159 border-radius: 50%;160 box-shadow: 0 6px 18px rgba(0,0,0,0.2);161 border: 6px solid #2e5fff;162 display:flex; align-items:center; justify-content:center;163 }164 .chat-bubble span {165 font-weight: bold; color:#2e5fff; font-size: 38px;166 }167 168 /* Bottom bar */169 .bottom-bar {170 position: absolute;171 left: 0; right: 0; bottom: 0;172 height: 180px;173 display: flex;174 box-shadow: 0 -6px 20px rgba(0,0,0,0.06);175 background: #ffffff;176 }177 .btn-half {178 flex: 1; display:flex; align-items:center; justify-content:center;179 font-size: 44px; font-weight: 700;180 }181 .btn-cart { background:#ffffff; color:#111; }182 .btn-buy { background:#f8c23a; color:#0b0b0b; }183 .gesture-bar {184 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);185 width: 320px; height: 10px; background:#cccccc; border-radius: 8px;186 }187 188 /* Icons */189 svg { display: block; }190 .icon { width: 54px; height: 54px; }191 .mic { width: 46px; height: 46px; }192</style>193</head>194<body>195<div id="render-target">196 197 <!-- Status bar -->198 <div class="status-bar">199 <div>5:28</div>200 <div class="status-right">201 <span class="dot-icon"></span>202 <span class="dot-icon"></span>203 <span class="dot-icon"></span>204 <div class="wifi-icon"></div>205 <div class="battery-icon"></div>206 </div>207 </div>208 209 <!-- Header with search -->210 <div class="header">211 <div class="top-row">212 <div class="icon-btn">213 <svg class="icon" viewBox="0 0 40 40">214 <path d="M25 6 L11 20 L25 34" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>215 </svg>216 </div>217 218 <div class="search-container">219 <svg class="icon" viewBox="0 0 40 40">220 <circle cx="17" cy="17" r="12" stroke="#888" stroke-width="3" fill="none"></circle>221 <line x1="28" y1="28" x2="36" y2="36" stroke="#888" stroke-width="3" stroke-linecap="round"></line>222 </svg>223 <input type="text" value="Search for products" />224 <div class="search-actions">225 <svg class="mic" viewBox="0 0 40 40">226 <rect x="14" y="8" width="12" height="16" rx="6" fill="#666"></rect>227 <path d="M20 24 V31 M13 31 H27" stroke="#666" stroke-width="3" stroke-linecap="round"></path>228 </svg>229 </div>230 </div>231 232 <div class="cart-btn">233 <svg class="icon" viewBox="0 0 40 40">234 <path d="M7 10 H33 L31 28 H11 Z" stroke="#222" stroke-width="3" fill="none"></path>235 <circle cx="15" cy="31" r="3" fill="#222"></circle>236 <circle cx="27" cy="31" r="3" fill="#222"></circle>237 </svg>238 </div>239 </div>240 </div>241 242 <!-- Brand section -->243 <div class="brand-block">244 <div class="brand-top">245 <div class="img-placeholder">[IMG: Adidas Logo]</div>246 <div>247 <div style="font-size: 32px; color:#d0d0d0;">About the brand</div>248 <div class="brand-title">ADIDAS</div>249 </div>250 </div>251 <div class="brand-items">252 <div>↗ Favorite in Walking — Based on recent orders on Flipkart</div>253 <div>★ Loved by customers — Based on customer ratings</div>254 <div>🛍 8+ years on Flipkart — Trusted brand on Flipkart</div>255 </div>256 </div>257 258 <!-- Product Details -->259 <div class="section">260 <h2>Product Details</h2>261 <div class="details-grid">262 <div class="label">Outer material</div>263 <div class="value">Synthetic</div>264 265 <div class="label">Occasion</div>266 <div class="value">Sports</div>267 268 <div class="label">Type For Sports</div>269 <div class="value">Walking Shoes</div>270 </div>271 272 <div class="spinner"></div>273 274 <div class="desc">275 Light Weight Shoe And Mesh With 4 Way Stretching Lining & Binding Which Is Very Comfortable For Insertion Of Foot On The Shoe. Pop Webbing On Eye Stay & Decorative Stitch On Vamp & Quarter With The 3D...276 </div>277 <div class="more-link">more</div>278 </div>279 280 <div class="row-link">281 <div class="text">All Details</div>282 <svg class="chev" viewBox="0 0 40 40">283 <path d="M15 10 L25 20 L15 30" stroke="#b5b5b5" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>284 </svg>285 </div>286 287 <!-- Similar Products -->288 <div class="similar-section">289 <div class="similar-title">Similar Products</div>290 <div class="thumbs">291 <div class="thumb">[IMG: Walking Shoe A]</div>292 <div class="thumb">[IMG: Walking Shoe B]</div>293 <div class="thumb">[IMG: Walking Shoe C]</div>294 </div>295 </div>296 297 <!-- Floating support/chat bubble -->298 <div class="chat-bubble"><span>f</span></div>299 300 <!-- Bottom actions -->301 <div class="bottom-bar">302 <div class="btn-half btn-cart">Go to cart</div>303 <div class="btn-half btn-buy">Buy now</div>304 <div class="gesture-bar"></div>305 </div>306 307</div>308</body>309</html>