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>REI Mobile UI</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 color: #222;20 }21 22 /* Status bar */23 .status-bar {24 height: 120px;25 background: #000;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 40px;30 font-weight: 600;31 font-size: 40px;32 box-sizing: border-box;33 }34 .status-left {35 display: flex;36 align-items: center;37 gap: 20px;38 }39 .status-right {40 margin-left: auto;41 display: flex;42 align-items: center;43 gap: 26px;44 }45 .status-icon svg {46 width: 40px;47 height: 40px;48 fill: #fff;49 }50 51 /* Hero */52 .hero {53 position: relative;54 height: 520px;55 overflow: hidden;56 }57 .hero .bg {58 position: absolute;59 inset: 0;60 background: #E0E0E0;61 border-bottom: 1px solid #BDBDBD;62 display: flex;63 align-items: center;64 justify-content: center;65 color: #757575;66 font-size: 34px;67 }68 .hero-inner {69 position: absolute;70 left: 0;71 right: 0;72 top: 0;73 padding: 30px 40px;74 }75 .rei-logo {76 color: #fff;77 font-weight: 800;78 font-size: 64px;79 letter-spacing: 1px;80 display: flex;81 align-items: center;82 gap: 16px;83 text-shadow: 0 2px 4px rgba(0,0,0,0.35);84 }85 .search-bar {86 margin-top: 180px;87 background: #fff;88 height: 120px;89 border-radius: 18px;90 box-shadow: 0 2px 8px rgba(0,0,0,0.12);91 display: flex;92 align-items: center;93 padding: 0 32px;94 gap: 24px;95 border: 1px solid #e6e6e6;96 }97 .search-input {98 font-size: 40px;99 color: #555;100 flex: 1;101 }102 .search-icon svg,103 .barcode-icon svg {104 width: 56px;105 height: 56px;106 fill: none;107 stroke: #777;108 stroke-width: 5;109 }110 111 /* Cyber Monday banner */112 .promo {113 background: #F3EEE6;114 padding: 50px 40px;115 display: flex;116 gap: 30px;117 align-items: stretch;118 }119 .promo-text {120 flex: 1.2;121 }122 .promo-text .big {123 font-family: "Times New Roman", Georgia, serif;124 font-size: 120px;125 line-height: 1.05;126 color: #C74A2C;127 font-weight: 700;128 }129 .promo-text .sub {130 margin-top: 24px;131 font-size: 46px;132 color: #BD5A3A;133 font-weight: 700;134 }135 .promo-image {136 flex: 0.9;137 display: flex;138 align-items: center;139 justify-content: center;140 }141 .promo-image .img {142 width: 100%;143 height: 540px;144 background: #E0E0E0;145 border: 1px solid #BDBDBD;146 display: flex;147 align-items: center;148 justify-content: center;149 color: #757575;150 font-size: 34px;151 }152 153 /* Carousel dots */154 .dots {155 display: flex;156 gap: 18px;157 justify-content: center;158 padding: 26px 0 20px;159 }160 .dot {161 width: 22px;162 height: 22px;163 border-radius: 50%;164 background: #7A7A7A;165 opacity: 0.5;166 }167 .dot.active {168 background: #284c7b;169 opacity: 1;170 }171 172 /* Shop REI section */173 .section-title {174 font-weight: 800;175 font-size: 80px;176 padding: 24px 40px;177 }178 .circle-list {179 display: flex;180 padding: 0 40px 20px;181 gap: 40px;182 }183 .circle-item {184 width: 240px;185 text-align: center;186 flex-shrink: 0;187 }188 .circle {189 width: 240px;190 height: 240px;191 border-radius: 50%;192 background: #E0E0E0;193 border: 1px solid #BDBDBD;194 display: flex;195 align-items: center;196 justify-content: center;197 color: #757575;198 font-size: 28px;199 margin-bottom: 24px;200 overflow: hidden;201 }202 .circle-label {203 font-size: 44px;204 color: #333;205 font-weight: 700;206 }207 208 /* Latest deals */209 .latest {210 padding: 30px 40px 240px;211 }212 .latest-title {213 font-weight: 800;214 font-size: 74px;215 margin-bottom: 24px;216 }217 .deal-grid {218 display: grid;219 grid-template-columns: 1fr 1fr;220 gap: 30px;221 }222 .deal-card {223 background: #fff;224 border: 1px solid #E5E5E5;225 border-radius: 16px;226 overflow: hidden;227 box-shadow: 0 2px 8px rgba(0,0,0,0.06);228 }229 .deal-img {230 height: 300px;231 background: #E0E0E0;232 border-bottom: 1px solid #BDBDBD;233 display: flex;234 align-items: center;235 justify-content: center;236 color: #757575;237 font-size: 30px;238 }239 .deal-info {240 padding: 22px;241 }242 .deal-name {243 font-size: 38px;244 font-weight: 700;245 color: #333;246 }247 .deal-price {248 font-size: 34px;249 color: #2d6b3e;250 margin-top: 8px;251 font-weight: 700;252 }253 254 /* Bottom nav */255 .bottom-nav {256 position: absolute;257 bottom: 0;258 left: 0;259 right: 0;260 height: 180px;261 background: #fff;262 border-top: 1px solid #E5E5E5;263 display: flex;264 justify-content: space-around;265 align-items: center;266 }267 .nav-item {268 display: flex;269 flex-direction: column;270 align-items: center;271 gap: 14px;272 color: #606060;273 font-size: 36px;274 font-weight: 700;275 }276 .nav-item.active {277 color: #284c7b;278 }279 .nav-item svg {280 width: 64px;281 height: 64px;282 stroke: currentColor;283 fill: none;284 stroke-width: 5;285 }286</style>287</head>288<body>289<div id="render-target">290 291 <!-- Status Bar -->292 <div class="status-bar">293 <div class="status-left">294 <div>8:41</div>295 <div class="status-icon">296 <svg viewBox="0 0 24 24">297 <circle cx="5" cy="12" r="2"></circle>298 <circle cx="11" cy="12" r="2"></circle>299 <circle cx="17" cy="12" r="2"></circle>300 </svg>301 </div>302 </div>303 <div class="status-right">304 <div class="status-icon">305 <!-- WiFi -->306 <svg viewBox="0 0 24 24">307 <path d="M2 8c5-4 15-4 20 0"></path>308 <path d="M5 12c3-3 11-3 14 0"></path>309 <path d="M8 16c2-2 6-2 8 0"></path>310 <circle cx="12" cy="19" r="1.8" fill="#fff"></circle>311 </svg>312 </div>313 <div class="status-icon">314 <!-- Battery -->315 <svg viewBox="0 0 26 24">316 <rect x="2" y="6" width="18" height="12" rx="2" fill="#fff"></rect>317 <rect x="3.5" y="7.5" width="12" height="9" rx="1" fill="#000"></rect>318 <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff"></rect>319 </svg>320 </div>321 </div>322 </div>323 324 <!-- Hero section -->325 <div class="hero">326 <div class="bg">[IMG: Mountain Landscape]</div>327 <div class="hero-inner">328 <div class="rei-logo">REI co-op</div>329 <div class="search-bar">330 <div class="search-icon">331 <svg viewBox="0 0 24 24">332 <circle cx="11" cy="11" r="7"></circle>333 <line x1="16" y1="16" x2="22" y2="22"></line>334 </svg>335 </div>336 <div class="search-input">Find gear and clothing</div>337 <div class="barcode-icon">338 <svg viewBox="0 0 24 24">339 <line x1="3" y1="4" x2="3" y2="20"></line>340 <line x1="8" y1="4" x2="8" y2="20"></line>341 <line x1="12" y1="4" x2="12" y2="20"></line>342 <line x1="17" y1="4" x2="17" y2="20"></line>343 <line x1="21" y1="4" x2="21" y2="20"></line>344 </svg>345 </div>346 </div>347 </div>348 </div>349 350 <!-- Promo banner -->351 <div class="promo">352 <div class="promo-text">353 <div class="big">It's Cyber Monday!</div>354 <div class="sub">Select deals end tonight.</div>355 </div>356 <div class="promo-image">357 <div class="img">[IMG: Outdoor action shot]</div>358 </div>359 </div>360 361 <!-- Dots -->362 <div class="dots">363 <div class="dot active"></div>364 <div class="dot"></div>365 <div class="dot"></div>366 <div class="dot"></div>367 </div>368 369 <!-- Shop REI -->370 <div class="section-title">Shop REI</div>371 <div class="circle-list">372 <div class="circle-item">373 <div class="circle">[IMG: Cozy winter gear]</div>374 <div class="circle-label">Shop all gifts</div>375 </div>376 <div class="circle-item">377 <div class="circle">[IMG: Camp lantern night]</div>378 <div class="circle-label">Gifts for her</div>379 </div>380 <div class="circle-item">381 <div class="circle">[IMG: Active jacket jump]</div>382 <div class="circle-label">Gifts for him</div>383 </div>384 <div class="circle-item">385 <div class="circle">[IMG: Kid winter outfit]</div>386 <div class="circle-label">Gifts for kids</div>387 </div>388 </div>389 390 <!-- Latest deals -->391 <div class="latest">392 <div class="latest-title">Latest deals</div>393 <div class="deal-grid">394 <div class="deal-card">395 <div class="deal-img">[IMG: Women's insulated jacket]</div>396 <div class="deal-info">397 <div class="deal-name">Insulated Jacket</div>398 <div class="deal-price">$129.00</div>399 </div>400 </div>401 <div class="deal-card">402 <div class="deal-img">[IMG: Crewneck fleece]</div>403 <div class="deal-info">404 <div class="deal-name">Cozy Fleece Crew</div>405 <div class="deal-price">$39.99</div>406 </div>407 </div>408 </div>409 </div>410 411 <!-- Bottom Navigation -->412 <div class="bottom-nav">413 <div class="nav-item active">414 <svg viewBox="0 0 24 24">415 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>416 <path d="M9 21V12h6v9"></path>417 </svg>418 <div>Home</div>419 </div>420 <div class="nav-item">421 <svg viewBox="0 0 24 24">422 <path d="M6 7h12v14H6z"></path>423 <path d="M9 7V5a3 3 0 0 1 6 0v2"></path>424 </svg>425 <div>Shop</div>426 </div>427 <div class="nav-item">428 <svg viewBox="0 0 24 24">429 <path d="M12 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14z"></path>430 <path d="M12 10v10"></path>431 </svg>432 <div>Stores</div>433 </div>434 <div class="nav-item">435 <svg viewBox="0 0 24 24">436 <path d="M3 5h3l2 12h11l2-9H8"></path>437 <circle cx="9" cy="20" r="2"></circle>438 <circle cx="18" cy="20" r="2"></circle>439 </svg>440 <div>Cart</div>441 </div>442 <div class="nav-item">443 <svg viewBox="0 0 24 24">444 <circle cx="12" cy="7" r="4"></circle>445 <path d="M4 22c0-5 4-8 8-8s8 3 8 8"></path>446 </svg>447 <div>Account</div>448 </div>449 </div>450 451</div>452</body>453</html>