GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Decathlon App UI Mock</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 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 }21 22 /* Header */23 .topbar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 320px;29 background: #1e78c8; /* Decathlon-like blue */30 box-sizing: border-box;31 padding: 30px 30px 20px 30px;32 color: #fff;33 }34 .status-row {35 height: 40px;36 display: flex;37 align-items: center;38 justify-content: flex-end;39 gap: 18px;40 opacity: 0.9;41 }42 .logo-location {43 margin-top: 10px;44 display: flex;45 align-items: center;46 justify-content: space-between;47 }48 .decathlon-logo {49 width: 300px;50 height: 80px;51 border-radius: 8px;52 background: #ffffff;53 color: #1e78c8;54 display: flex;55 align-items: center;56 justify-content: center;57 font-weight: 800;58 letter-spacing: 2px;59 font-size: 36px;60 }61 .delivery {62 color: #e9f3ff;63 font-size: 32px;64 }65 .delivery .pin {66 font-weight: 800;67 color: #ffea00;68 }69 .delivery .change {70 margin-left: 10px;71 text-decoration: underline;72 color: #ffffff;73 font-weight: 700;74 }75 76 .search-row {77 margin-top: 20px;78 display: flex;79 align-items: center;80 gap: 20px;81 }82 .searchbox {83 flex: 1;84 height: 110px;85 background: #ffffff;86 border-radius: 18px;87 display: flex;88 align-items: center;89 padding: 0 26px;90 box-sizing: border-box;91 gap: 18px;92 }93 .searchbox .magnifier {94 width: 46px;95 height: 46px;96 }97 .searchbox input {98 border: none;99 flex: 1;100 height: 100%;101 font-size: 36px;102 outline: none;103 color: #333;104 }105 .mic-wrap {106 width: 84px;107 height: 84px;108 border-radius: 42px;109 background: #e6f1ff;110 display: flex;111 align-items: center;112 justify-content: center;113 }114 .icon-btn {115 width: 100px;116 height: 100px;117 border-radius: 22px;118 background: #ffffff;119 display: flex;120 align-items: center;121 justify-content: center;122 }123 .cart-btn {124 width: 140px;125 height: 100px;126 border-radius: 22px;127 background: #ffd633;128 display: flex;129 align-items: center;130 justify-content: center;131 }132 133 /* Category grid */134 .categories {135 position: absolute;136 top: 320px;137 left: 0;138 width: 1080px;139 padding: 30px 30px 0 30px;140 box-sizing: border-box;141 }142 .cat-grid {143 display: grid;144 grid-template-columns: repeat(4, 1fr);145 grid-gap: 28px 24px;146 }147 .cat-item {148 text-align: center;149 }150 .cat-img {151 width: 220px;152 height: 190px;153 margin: 0 auto 18px auto;154 background: #E0E0E0;155 border: 1px solid #BDBDBD;156 border-radius: 28px;157 display: flex;158 align-items: center;159 justify-content: center;160 color: #757575;161 font-size: 28px;162 padding: 10px;163 box-sizing: border-box;164 }165 .cat-label {166 font-size: 32px;167 font-weight: 700;168 color: #333;169 }170 171 /* Banner */172 .banner {173 position: absolute;174 top: 900px;175 left: 0;176 width: 1080px;177 padding: 0 30px;178 box-sizing: border-box;179 }180 .banner-top {181 width: 1020px;182 height: 600px;183 border-radius: 16px;184 background: #E0E0E0;185 border: 1px solid #BDBDBD;186 position: relative;187 overflow: hidden;188 display: flex;189 align-items: center;190 justify-content: center;191 color: #555;192 font-size: 48px;193 font-weight: 800;194 text-align: center;195 }196 .banner-label {197 position: absolute;198 top: 40px;199 left: 40px;200 color: #0a3a1f;201 font-size: 60px;202 font-weight: 900;203 letter-spacing: 1px;204 }205 .price-tag {206 position: absolute;207 top: 60px;208 right: 40px;209 background: #ffe76b;210 color: #000;211 border-radius: 10px;212 padding: 10px 16px;213 font-weight: 800;214 font-size: 34px;215 }216 .banner-grid {217 position: absolute;218 bottom: 70px;219 left: 40px;220 right: 40px;221 display: grid;222 grid-template-columns: repeat(3, 1fr);223 grid-gap: 24px;224 }225 .banner-img {226 height: 340px;227 background: #E0E0E0;228 border: 1px solid #BDBDBD;229 border-radius: 16px;230 display: flex;231 align-items: center;232 justify-content: center;233 color: #757575;234 font-size: 28px;235 }236 .shop-btn {237 position: absolute;238 bottom: 20px;239 left: 40px;240 background: #ffdf3b;241 color: #000;242 font-weight: 900;243 font-size: 40px;244 padding: 18px 36px;245 border-radius: 10px;246 }247 248 .dots {249 width: 100%;250 display: flex;251 justify-content: center;252 gap: 18px;253 margin-top: 18px;254 }255 .dot {256 width: 18px;257 height: 18px;258 background: #cfcfcf;259 border-radius: 50%;260 }261 .dot.active {262 background: #8c8c8c;263 }264 265 /* Trending */266 .trending {267 position: absolute;268 top: 1580px;269 left: 0;270 width: 1080px;271 padding: 0 30px;272 box-sizing: border-box;273 }274 .trend-title {275 font-size: 52px;276 font-weight: 900;277 margin-bottom: 24px;278 color: #333;279 }280 .trend-row {281 display: flex;282 gap: 30px;283 overflow: hidden;284 }285 .story {286 width: 200px;287 height: 200px;288 border-radius: 100px;289 border: 10px solid #7a4caf; /* purple-ish ring */290 display: flex;291 align-items: center;292 justify-content: center;293 background: #E0E0E0;294 color: #757575;295 font-size: 24px;296 }297 298 /* Bottom navigation */299 .bottom-nav {300 position: absolute;301 bottom: 60px;302 left: 0;303 width: 1080px;304 height: 180px;305 background: #f8f8f8;306 border-top: 1px solid #e2e2e2;307 display: flex;308 align-items: center;309 justify-content: space-around;310 }311 .nav-item {312 width: 200px;313 display: flex;314 align-items: center;315 justify-content: center;316 flex-direction: column;317 color: #333;318 gap: 16px;319 }320 .nav-item .label {321 font-size: 32px;322 font-weight: 700;323 }324 .gesture {325 position: absolute;326 bottom: 18px;327 left: 50%;328 transform: translateX(-50%);329 width: 320px;330 height: 10px;331 border-radius: 6px;332 background: #000000;333 opacity: 0.7;334 }335 336 /* Simple helper */337 .tiny {338 width: 32px;339 height: 32px;340 }341</style>342</head>343<body>344<div id="render-target">345 346 <!-- Header -->347 <div class="topbar">348 <div class="status-row">349 <!-- minimal status icons -->350 <svg class="tiny" viewBox="0 0 24 24">351 <path fill="#fff" d="M3 18h18v3H3zM6 15h12v2H6zM9 12h6v2H9zM12 4l7 7H5z"/>352 </svg>353 <svg class="tiny" viewBox="0 0 24 24">354 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>355 <rect x="21" y="9" width="2" height="6" rx="1" fill="#fff"/>356 </svg>357 </div>358 359 <div class="logo-location">360 <div class="decathlon-logo">DECATHLON</div>361 <div class="delivery">Delivery Location <span class="pin">560001</span> <span class="change">CHANGE</span></div>362 </div>363 364 <div class="search-row">365 <div class="searchbox">366 <svg class="magnifier" viewBox="0 0 24 24">367 <circle cx="11" cy="11" r="7" fill="none" stroke="#777" stroke-width="2"></circle>368 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#777" stroke-width="2"></line>369 </svg>370 <input type="text" value="Search for " Swimmi"" />371 <div class="mic-wrap">372 <svg viewBox="0 0 24 24" width="44" height="44">373 <rect x="9" y="4" width="6" height="8" rx="3" fill="#1e78c8"/>374 <path d="M5 11c0 4 3 6 7 6s7-2 7-6" fill="none" stroke="#1e78c8" stroke-width="2"/>375 <line x1="12" y1="17" x2="12" y2="21" stroke="#1e78c8" stroke-width="2"/>376 <line x1="9" y1="21" x2="15" y2="21" stroke="#1e78c8" stroke-width="2"/>377 </svg>378 </div>379 </div>380 <div class="icon-btn" title="Wishlist">381 <svg viewBox="0 0 24 24" width="56" height="56">382 <path d="M12 21s-7-4.35-9.5-7.5C-0.5 10.5 2 6 6 6c2.2 0 3.7 1.1 4.5 2.4C11.3 7.1 12.8 6 15 6c4 0 6.5 4.5 3.5 7.5C19 16.65 12 21 12 21z" fill="none" stroke="#1e78c8" stroke-width="2"/>383 </svg>384 </div>385 <div class="cart-btn" title="Cart">386 <svg viewBox="0 0 24 24" width="64" height="64">387 <circle cx="9" cy="20" r="2" fill="#1e78c8"/>388 <circle cx="17" cy="20" r="2" fill="#1e78c8"/>389 <path d="M3 4h3l2 10h10l2-7H7" fill="none" stroke="#1e78c8" stroke-width="2" stroke-linejoin="round"/>390 </svg>391 </div>392 </div>393 </div>394 395 <!-- Categories -->396 <div class="categories">397 <div class="cat-grid">398 <div class="cat-item">399 <div class="cat-img">[IMG: Men Category]</div>400 <div class="cat-label">Men</div>401 </div>402 <div class="cat-item">403 <div class="cat-img">[IMG: Women Category]</div>404 <div class="cat-label">Women</div>405 </div>406 <div class="cat-item">407 <div class="cat-img">[IMG: Kids Category]</div>408 <div class="cat-label">Kids</div>409 </div>410 <div class="cat-item">411 <div class="cat-img">[IMG: Sale Badge]</div>412 <div class="cat-label">Sale</div>413 </div>414 415 <div class="cat-item">416 <div class="cat-img">[IMG: Buy More Save More]</div>417 <div class="cat-label">Offers</div>418 </div>419 <div class="cat-item">420 <div class="cat-img">[IMG: Shoes]</div>421 <div class="cat-label">Shoes</div>422 </div>423 <div class="cat-item">424 <div class="cat-img">[IMG: Bottle & Rope]</div>425 <div class="cat-label">Accessories</div>426 </div>427 <div class="cat-item">428 <div class="cat-img">[IMG: Sports Equipment]</div>429 <div class="cat-label">Sports Equipment</div>430 </div>431 </div>432 </div>433 434 <!-- Banner Section -->435 <div class="banner">436 <div class="banner-top">437 <div class="banner-label">GO PLACES, GO OUTDOORS</div>438 <div class="price-tag">STARTING FROM ₹199</div>439 <div class="banner-grid">440 <div class="banner-img">[IMG: Hikers in Forest]</div>441 <div class="banner-img">[IMG: Trekker with Camera]</div>442 <div class="banner-img">[IMG: Group by Railing]</div>443 </div>444 <div class="shop-btn">SHOP NOW</div>445 </div>446 <div class="dots">447 <div class="dot"></div>448 <div class="dot active"></div>449 <div class="dot"></div>450 <div class="dot"></div>451 <div class="dot"></div>452 <div class="dot"></div>453 </div>454 </div>455 456 <!-- Trending -->457 <div class="trending">458 <div class="trend-title">WHAT'S TRENDING</div>459 <div class="trend-row">460 <div class="story">[IMG: Go Places]</div>461 <div class="story">[IMG: Play in Rain]</div>462 <div class="story">[IMG: Cycling Group]</div>463 <div class="story">[IMG: CS500 White]</div>464 <div class="story">[IMG: Price Tag]</div>465 </div>466 </div>467 468 <!-- Bottom Navigation -->469 <div class="bottom-nav">470 <div class="nav-item">471 <svg viewBox="0 0 24 24" width="64" height="64">472 <path d="M3 12l9-8 9 8v8H3z" fill="none" stroke="#1e78c8" stroke-width="2"/>473 <path d="M9 20v-6h6v6" fill="none" stroke="#1e78c8" stroke-width="2"/>474 </svg>475 <div class="label">Home</div>476 </div>477 <div class="nav-item">478 <svg viewBox="0 0 24 24" width="64" height="64">479 <rect x="3" y="3" width="7" height="7" fill="none" stroke="#1e78c8" stroke-width="2"/>480 <rect x="14" y="3" width="7" height="7" fill="none" stroke="#1e78c8" stroke-width="2"/>481 <rect x="3" y="14" width="7" height="7" fill="none" stroke="#1e78c8" stroke-width="2"/>482 <rect x="14" y="14" width="7" height="7" fill="none" stroke="#1e78c8" stroke-width="2"/>483 </svg>484 <div class="label">Sport</div>485 </div>486 <div class="nav-item">487 <svg viewBox="0 0 24 24" width="64" height="64">488 <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#1e78c8" stroke-width="2"/>489 <path d="M7 9h10M7 12h10M7 15h6" stroke="#1e78c8" stroke-width="2"/>490 </svg>491 <div class="label">Scan</div>492 </div>493 <div class="nav-item">494 <svg viewBox="0 0 24 24" width="64" height="64">495 <circle cx="12" cy="8" r="4" fill="none" stroke="#1e78c8" stroke-width="2"/>496 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#1e78c8" stroke-width="2"/>497 </svg>498 <div class="label">Account</div>499 </div>500 </div>501 502 <div class="gesture"></div>503</div>504</body>505</html>