GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Flipkart - Adidas Product Details</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 80px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-size: 36px;25 color: #222;26 }27 .status-icons { display: flex; gap: 26px; align-items: center; color:#444; }28 .dot { width: 10px; height: 10px; background:#444; border-radius: 50%; display:inline-block; }29 30 /* Header search row */31 .header {32 display: flex;33 align-items: center;34 gap: 24px;35 padding: 16px 28px 10px 28px;36 }37 .icon-btn {38 width: 64px; height: 64px;39 display: flex; align-items: center; justify-content: center;40 }41 .search-bar {42 flex: 1;43 background: #f1f3f6;44 border: 2px solid #e0e0e0;45 height: 84px;46 border-radius: 18px;47 display: flex; align-items: center;48 padding: 0 22px;49 gap: 18px;50 }51 .search-input {52 flex: 1;53 color: #666;54 font-size: 36px;55 }56 .cart-wrap {57 position: relative;58 width: 70px; height: 70px;59 display: flex; align-items: center; justify-content: center;60 }61 .badge {62 position: absolute;63 right: -2px;64 top: -10px;65 background: #e53935;66 color: #fff;67 font-size: 28px;68 border-radius: 24px;69 padding: 4px 10px;70 line-height: 1;71 }72 73 /* Content area */74 .content {75 height: 1960px;76 overflow: auto;77 padding-bottom: 180px; /* for sticky bar space */78 }79 80 .section {81 padding: 0 32px;82 }83 84 .about-brand-title {85 font-size: 36px;86 color: #6b6b6b;87 margin-top: 14px;88 }89 90 .brand-row {91 display: flex;92 align-items: center;93 gap: 24px;94 margin: 18px 0 12px 0;95 }96 .brand-logo {97 width: 92px; height: 92px; background:#E0E0E0; border:1px solid #BDBDBD;98 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; border-radius:12px;99 }100 .brand-name { font-size: 54px; font-weight: 700; }101 102 .pill-row { margin-top: 18px; }103 .fact-item {104 display: flex; align-items: center; gap: 20px;105 padding: 18px 0;106 }107 .fact-title { font-size: 40px; font-weight: 700; }108 .fact-sub { color:#6b6b6b; font-size: 30px; margin-left: 84px; }109 110 .divider { height: 16px; background:#f5f5f5; margin: 22px 0; }111 112 .section-title {113 font-size: 46px; font-weight: 800; margin: 8px 0 20px 0;114 }115 116 .details-grid {117 display: grid;118 grid-template-columns: 1fr 1.2fr;119 row-gap: 30px;120 column-gap: 16px;121 align-items: start;122 }123 .label { color:#7a7a7a; font-size: 36px; }124 .value { font-size: 38px; font-weight: 700; }125 126 .sub-title { font-size: 44px; font-weight: 800; margin: 40px 0 10px 0; }127 .para {128 font-size: 34px; line-height: 1.55; color:#2b2b2b;129 }130 .link-blue { color:#1976d2; font-size: 36px; margin-top: 14px; }131 132 .row-link {133 display: flex; align-items: center; justify-content: space-between;134 font-size: 42px; font-weight: 700; padding: 26px 0;135 }136 137 .similar-title { font-size: 48px; font-weight: 800; margin: 26px 0 16px 0; }138 .thumbs {139 display: flex; gap: 24px; overflow: hidden;140 }141 .thumb {142 width: 300px; height: 220px; background:#E0E0E0; border:1px solid #BDBDBD;143 display:flex; align-items:center; justify-content:center; color:#757575; border-radius:16px;144 }145 146 /* Sticky bottom bar */147 .sticky-bar {148 position: absolute;149 left: 0; right: 0; bottom: 0;150 height: 150px;151 display: flex;152 }153 .cart-btn {154 flex: 1;155 background: #111;156 color: #fff;157 display: flex; align-items: center; justify-content: center;158 font-size: 44px; font-weight: 800;159 }160 .buy-btn {161 flex: 1.1;162 background: #ffc93c;163 color: #111;164 display: flex; align-items: center; justify-content: center;165 font-size: 48px; font-weight: 800;166 }167 168 /* Floating help icon */169 .fab {170 position: absolute;171 right: 36px;172 bottom: 196px;173 width: 136px; height: 136px;174 background: #2f5bd7;175 border-radius: 50%;176 display: flex; align-items: center; justify-content: center;177 box-shadow: 0 8px 18px rgba(0,0,0,0.25);178 border: 6px solid #fff;179 }180 .fab::after {181 content: "f";182 font-weight: 900;183 font-size: 64px;184 color: #ffd54f;185 }186 .mini-fab {187 position: absolute;188 right: 36px;189 bottom: 360px;190 width: 88px; height: 88px;191 background: #ffd54f;192 border-radius: 50%;193 display: flex; align-items: center; justify-content: center;194 box-shadow: 0 6px 12px rgba(0,0,0,0.2);195 color:#2f5bd7; font-size: 46px; font-weight: 900;196 }197 198 /* Simple icons */199 svg { display: block; }200 .grey { color:#6b6b6b; }201</style>202</head>203<body>204<div id="render-target">205 <!-- Status Bar -->206 <div class="status-bar">207 <div>5:29</div>208 <div class="status-icons">209 <span>🛈</span>210 <span class="dot"></span>211 <span>📶</span>212 <span>🔋</span>213 </div>214 </div>215 216 <!-- Header with search -->217 <div class="header">218 <div class="icon-btn" aria-label="Back">219 <svg width="42" height="42" viewBox="0 0 24 24">220 <path d="M15.5 4l-8 8 8 8" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>221 </svg>222 </div>223 224 <div class="search-bar">225 <svg width="38" height="38" viewBox="0 0 24 24">226 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"></circle>227 <path d="M20 20l-3.5-3.5" stroke="#777" stroke-width="2" stroke-linecap="round"/>228 </svg>229 <div class="search-input">Search for products</div>230 <svg width="38" height="38" viewBox="0 0 24 24">231 <path d="M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z" fill="#777"/>232 <path d="M5 14c0 3.9 14 3.9 14 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>233 </svg>234 </div>235 236 <div class="cart-wrap" aria-label="Cart">237 <svg width="46" height="46" viewBox="0 0 24 24">238 <path d="M7 6h14l-2 8H8L6 2H2" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239 <circle cx="9" cy="20" r="2" fill="#222"></circle>240 <circle cx="18" cy="20" r="2" fill="#222"></circle>241 </svg>242 <div class="badge">1</div>243 </div>244 </div>245 246 <div class="content">247 <div class="section">248 <div class="about-brand-title">About the brand</div>249 <div class="brand-row">250 <div class="brand-logo">[IMG: Adidas Logo]</div>251 <div class="brand-name">ADIDAS</div>252 </div>253 254 <div class="pill-row">255 <div class="fact-item">256 <svg width="40" height="40" viewBox="0 0 24 24">257 <path d="M3 17l6-6 4 4 7-7" fill="none" stroke="#2e7d32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 <div>260 <div class="fact-title">Favorite in Walking</div>261 <div class="fact-sub">Based on recent orders on Flipkart</div>262 </div>263 </div>264 265 <div class="fact-item">266 <svg width="40" height="40" viewBox="0 0 24 24">267 <path d="M12 2l2.8 6H22l-5 4.1L18.6 20 12 16.7 5.4 20 7 12.1 2 8h7.2z" fill="#ffca28" stroke="#ffb300" stroke-width="1"/>268 </svg>269 <div>270 <div class="fact-title">Loved by customers</div>271 <div class="fact-sub">Based on customer ratings</div>272 </div>273 </div>274 275 <div class="fact-item">276 <svg width="40" height="40" viewBox="0 0 24 24">277 <path d="M4 4h16v14H4z" fill="none" stroke="#1976d2" stroke-width="2"/>278 <path d="M4 10h16" stroke="#1976d2" stroke-width="2"/>279 </svg>280 <div>281 <div class="fact-title">8+ years on Flipkart</div>282 <div class="fact-sub">Trusted brand on Flipkart</div>283 </div>284 </div>285 </div>286 </div>287 288 <div class="divider"></div>289 290 <div class="section">291 <div class="section-title">Product Details</div>292 293 <div class="details-grid">294 <div class="label">Outer material</div>295 <div class="value">Synthetic</div>296 297 <div class="label">Occasion</div>298 <div class="value">Sports</div>299 300 <div class="label">Type For Sports</div>301 <div class="value">Walking Shoes</div>302 </div>303 304 <div class="sub-title">Details</div>305 <div class="para">306 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...307 </div>308 <div class="link-blue">more</div>309 310 <div class="row-link">311 <div>All Details</div>312 <svg width="28" height="28" viewBox="0 0 24 24">313 <path d="M9 6l6 6-6 6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>314 </svg>315 </div>316 </div>317 318 <div class="divider"></div>319 320 <div class="section">321 <div class="similar-title">Similar Products</div>322 <div class="thumbs">323 <div class="thumb">[IMG: White Walking Shoe]</div>324 <div class="thumb">[IMG: Blue Running Shoe]</div>325 <div class="thumb">[IMG: Grey Sports Shoe]</div>326 </div>327 </div>328 </div>329 330 <!-- Floating helper icons -->331 <div class="mini-fab">›</div>332 <div class="fab"></div>333 334 <!-- Sticky bottom bar -->335 <div class="sticky-bar">336 <div class="cart-btn">Go to cart</div>337 <div class="buy-btn">Buy now</div>338 </div>339</div>340</body>341</html>