GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Decathlon Mobile UI - HTML Render</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 color: #222;13 }14 #render-target {15 position: relative;16 overflow: hidden;17 width: 1080px;18 height: 2400px;19 background: #ffffff;20 }21 22 /* Header Area */23 .header {24 background: #2A77B3;25 color: #fff;26 padding: 24px 32px 20px 32px;27 }28 .status-bar {29 display: flex;30 align-items: center;31 font-size: 34px;32 opacity: 0.95;33 margin-bottom: 22px;34 }35 .status-time {36 font-weight: 600;37 margin-right: 18px;38 }39 .status-icons {40 display: flex;41 gap: 18px;42 margin-left: auto;43 }44 .decathlon-logo {45 display: inline-flex;46 align-items: center;47 justify-content: center;48 background: #fff;49 color: #0B5EA6;50 font-weight: 800;51 border-radius: 6px;52 padding: 18px 24px;53 font-size: 42px;54 width: 360px;55 height: 92px;56 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;57 }58 .location-row {59 margin-top: 22px;60 font-size: 36px;61 }62 .location-row .code {63 color: #FFD84D;64 font-weight: 700;65 margin: 0 6px;66 }67 .location-row .change {68 color: #B6E0FF;69 text-decoration: underline;70 margin-left: 12px;71 cursor: pointer;72 }73 74 .search-area {75 margin-top: 18px;76 display: flex;77 align-items: center;78 gap: 18px;79 }80 .search-bar {81 flex: 1;82 background: #fff;83 border-radius: 22px;84 height: 120px;85 display: flex;86 align-items: center;87 padding: 0 24px;88 box-shadow: 0 4px 10px rgba(0,0,0,0.15);89 }90 .search-icon {91 width: 56px;92 height: 56px;93 margin-right: 14px;94 }95 .search-placeholder {96 font-size: 40px;97 color: #666;98 }99 .mic-btn {100 margin-left: auto;101 width: 86px;102 height: 86px;103 background: #E6F3FF;104 border-radius: 50%;105 display: flex;106 align-items: center;107 justify-content: center;108 border: 2px solid #CDE6FF;109 }110 .round-action {111 width: 104px;112 height: 104px;113 border-radius: 26px;114 display: flex;115 align-items: center;116 justify-content: center;117 background: #FFEB80;118 box-shadow: 0 4px 8px rgba(0,0,0,0.15);119 }120 .icon-btn {121 width: 88px;122 height: 88px;123 border-radius: 50%;124 border: 2px solid rgba(255,255,255,0.65);125 display: flex;126 align-items: center;127 justify-content: center;128 }129 130 /* Category Grid */131 .categories {132 padding: 28px 26px 10px 26px;133 background: #fff;134 }135 .cat-grid {136 display: flex;137 flex-wrap: wrap;138 }139 .cat-item {140 width: 25%;141 padding: 18px;142 text-align: center;143 }144 .cat-img {145 width: 220px;146 height: 220px;147 background: #E0E0E0;148 border: 1px solid #BDBDBD;149 border-radius: 22px;150 display: flex;151 align-items: center;152 justify-content: center;153 color: #757575;154 font-size: 30px;155 }156 .cat-label {157 margin-top: 18px;158 font-size: 36px;159 color: #333;160 font-weight: 600;161 }162 163 /* Banner */164 .outdoor-banner {165 margin: 8px 26px;166 background: linear-gradient(90deg, #E8F2E8 0%, #F2F7EF 60%, #F7F5EE 100%);167 border-radius: 18px;168 padding: 28px;169 position: relative;170 }171 .banner-title {172 font-size: 64px;173 font-weight: 800;174 color: #2E3E2E;175 letter-spacing: 1px;176 }177 .price-tag {178 position: absolute;179 right: 28px;180 top: 28px;181 background: #FFD84D;182 color: #111;183 padding: 10px 16px;184 border-radius: 10px;185 font-weight: 800;186 font-size: 32px;187 }188 .banner-cards {189 display: flex;190 gap: 24px;191 margin-top: 26px;192 }193 .banner-card {194 flex: 1;195 height: 420px;196 background: #E0E0E0;197 border: 1px solid #BDBDBD;198 border-radius: 46px;199 display: flex;200 align-items: center;201 justify-content: center;202 color: #757575;203 font-size: 34px;204 }205 .shop-btn {206 margin: 24px auto 12px auto;207 width: 320px;208 height: 96px;209 background: #FFE36A;210 border-radius: 16px;211 display: flex;212 align-items: center;213 justify-content: center;214 font-weight: 800;215 font-size: 40px;216 color: #222;217 box-shadow: 0 4px 8px rgba(0,0,0,0.12);218 }219 .dots {220 display: flex;221 justify-content: center;222 gap: 18px;223 margin-top: 10px;224 }225 .dot {226 width: 16px;227 height: 16px;228 border-radius: 50%;229 background: #D0D0D0;230 }231 .dot.active {232 background: #2A77B3;233 }234 235 /* Trending */236 .trending {237 padding: 28px 26px;238 }239 .trending-title {240 font-size: 60px;241 font-weight: 900;242 letter-spacing: 1px;243 margin-bottom: 20px;244 }245 .trend-row {246 display: flex;247 gap: 30px;248 }249 .trend-item {250 width: 200px;251 height: 200px;252 border-radius: 50%;253 background: #E0E0E0;254 border: 10px solid #9C67D6;255 display: flex;256 align-items: center;257 justify-content: center;258 color: #616161;259 font-size: 26px;260 }261 262 /* Bottom Nav */263 .bottom-nav {264 position: absolute;265 left: 0;266 right: 0;267 bottom: 0;268 background: #ffffff;269 border-top: 1px solid #E5E5E5;270 display: flex;271 justify-content: space-around;272 padding: 18px 0 24px 0;273 height: 160px;274 }275 .nav-item {276 display: flex;277 align-items: center;278 flex-direction: column;279 gap: 10px;280 color: #5A5A5A;281 font-size: 32px;282 }283 .nav-item.active {284 color: #2A77B3;285 }286 .nav-icon {287 width: 68px;288 height: 68px;289 }290 291 /* Utility icon styles */292 svg { display: block; }293</style>294</head>295<body>296<div id="render-target">297 298 <!-- Header -->299 <div class="header">300 <div class="status-bar">301 <div class="status-time">10:35</div>302 <div class="status-icons">303 <!-- simple weather/cloud icons substitute -->304 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="7"/></svg>305 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><rect x="5" y="8" width="14" height="8" rx="3"/></svg>306 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M3 12h18" stroke="#fff" stroke-width="3"/></svg>307 </div>308 </div>309 310 <div class="decathlon-logo">DECATHLON</div>311 312 <div class="location-row">313 Delivery Location <span class="code">560001</span><span class="change">CHANGE</span>314 </div>315 316 <div class="search-area">317 <div class="search-bar">318 <svg class="search-icon" viewBox="0 0 24 24">319 <circle cx="11" cy="11" r="7" stroke="#2A77B3" stroke-width="2" fill="none"/>320 <line x1="17" y1="17" x2="22" y2="22" stroke="#2A77B3" stroke-width="2"/>321 </svg>322 <div class="search-placeholder">Search for " Run"</div>323 <div class="mic-btn">324 <svg width="46" height="46" viewBox="0 0 24 24">325 <rect x="9" y="5" width="6" height="10" rx="3" fill="#2A77B3"/>326 <path d="M6 11c0 3 2.5 5 6 5s6-2 6-5" stroke="#2A77B3" stroke-width="2" fill="none"/>327 <line x1="12" y1="16" x2="12" y2="20" stroke="#2A77B3" stroke-width="2"/>328 </svg>329 </div>330 </div>331 332 <div class="icon-btn" title="Favorites">333 <svg width="44" height="44" viewBox="0 0 24 24">334 <path d="M12 21s-7-4.6-9-8.7C1.3 9 3.2 6.5 6 6.5c2 0 3.4 1.2 4 2.2.6-1 2-2.2 4-2.2 2.8 0 4.7 2.5 3 5.8-2 4.1-9 8.7-9 8.7z" fill="none" stroke="#fff" stroke-width="2"/>335 </svg>336 </div>337 <div class="round-action" title="Cart">338 <svg width="56" height="56" viewBox="0 0 24 24">339 <path d="M3 6h2l2 10h10l2-8H6" fill="none" stroke="#333" stroke-width="2"/>340 <circle cx="9" cy="20" r="2" fill="#333"/>341 <circle cx="17" cy="20" r="2" fill="#333"/>342 </svg>343 </div>344 </div>345 </div>346 347 <!-- Categories -->348 <div class="categories">349 <div class="cat-grid">350 <div class="cat-item">351 <div class="cat-img">[IMG: Men Apparel]</div>352 <div class="cat-label">Men</div>353 </div>354 <div class="cat-item">355 <div class="cat-img">[IMG: Women Apparel]</div>356 <div class="cat-label">Women</div>357 </div>358 <div class="cat-item">359 <div class="cat-img">[IMG: Kids Wear]</div>360 <div class="cat-label">Kids</div>361 </div>362 <div class="cat-item">363 <div class="cat-img">[IMG: Sale Badge]</div>364 <div class="cat-label">Sale</div>365 </div>366 367 <div class="cat-item">368 <div class="cat-img">[IMG: Eco Design Icon]</div>369 <div class="cat-label">Eco Design</div>370 </div>371 <div class="cat-item">372 <div class="cat-img">[IMG: Running Shoes]</div>373 <div class="cat-label">Shoes</div>374 </div>375 <div class="cat-item">376 <div class="cat-img">[IMG: Sports Equipment]</div>377 <div class="cat-label">Sports Equipment</div>378 </div>379 <div class="cat-item">380 <div class="cat-img">[IMG: Accessories Mix]</div>381 <div class="cat-label">Accessories</div>382 </div>383 </div>384 </div>385 386 <!-- Outdoor Banner -->387 <div class="outdoor-banner">388 <div class="banner-title">GO PLACES, GO OUTDOORS</div>389 <div class="price-tag">Starting from ₹199</div>390 <div class="banner-cards">391 <div class="banner-card">[IMG: Trekking - Two Hikers]</div>392 <div class="banner-card">[IMG: Wildlife Photographer]</div>393 <div class="banner-card">[IMG: Friends at Viewpoint]</div>394 </div>395 <div class="shop-btn">SHOP NOW</div>396 <div class="dots">397 <div class="dot active"></div>398 <div class="dot"></div>399 <div class="dot"></div>400 <div class="dot"></div>401 <div class="dot"></div>402 </div>403 </div>404 405 <!-- Trending -->406 <div class="trending">407 <div class="trending-title">WHAT'S TRENDING</div>408 <div class="trend-row">409 <div class="trend-item">[IMG: GO PLACES]</div>410 <div class="trend-item">[IMG: CS500 Cycling]</div>411 <div class="trend-item">[IMG: Prices]</div>412 <div class="trend-item">[IMG: Sports Tees]</div>413 <div class="trend-item">[IMG: Fitness Gear]</div>414 </div>415 </div>416 417 <!-- Bottom Navigation -->418 <div class="bottom-nav">419 <div class="nav-item active">420 <svg class="nav-icon" viewBox="0 0 24 24">421 <path d="M3 11l9-7 9 7v9H3z" fill="none" stroke="#2A77B3" stroke-width="2"/>422 </svg>423 <div>Home</div>424 </div>425 <div class="nav-item">426 <svg class="nav-icon" viewBox="0 0 24 24">427 <rect x="4" y="4" width="6" height="6" fill="#5A5A5A"/>428 <rect x="14" y="4" width="6" height="6" fill="#5A5A5A"/>429 <rect x="4" y="14" width="6" height="6" fill="#5A5A5A"/>430 <rect x="14" y="14" width="6" height="6" fill="#5A5A5A"/>431 </svg>432 <div>Sport</div>433 </div>434 <div class="nav-item">435 <svg class="nav-icon" viewBox="0 0 24 24">436 <path d="M3 8v-3h6M21 8v-3h-6M3 16v3h6M21 16v3h-6" stroke="#5A5A5A" stroke-width="2" fill="none"/>437 <rect x="7" y="7" width="10" height="10" fill="none" stroke="#5A5A5A" stroke-width="2"/>438 </svg>439 <div>Scan</div>440 </div>441 <div class="nav-item">442 <svg class="nav-icon" viewBox="0 0 24 24">443 <circle cx="12" cy="8" r="3.5" fill="#5A5A5A"/>444 <path d="M4 20c1-4 5-6 8-6s7 2 8 6" fill="none" stroke="#5A5A5A" stroke-width="2"/>445 </svg>446 <div>Account</div>447 </div>448 </div>449 450</div>451</body>452</html>