GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>REI App 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: #F5F4EF;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 100%;21 height: 90px;22 background: #000;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 40px;27 box-sizing: border-box;28 font-size: 36px;29 letter-spacing: 1px;30 }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 24px;36 }37 .dot-icon {38 width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: 0.9;39 }40 .battery {41 width: 28px; height: 18px; border: 2px solid #fff; position: relative; border-radius: 4px;42 }43 .battery::after { content: ""; position: absolute; right: -6px; top: 5px; width: 4px; height: 8px; background: #fff; border-radius: 1px; }44 .battery-fill { position: absolute; left: 2px; top: 2px; height: 12px; width: 18px; background: #fff; }45 46 /* Hero area with mountain image */47 .hero {48 position: absolute;49 top: 90px;50 left: 0;51 width: 100%;52 height: 500px;53 background: #E0E0E0;54 border-bottom: 1px solid #BDBDBD;55 display: flex;56 align-items: flex-start;57 justify-content: flex-start;58 }59 .hero .img-label {60 margin: 24px 0 0 24px;61 width: 1032px; height: 452px;62 border: 1px solid #BDBDBD;63 background: #E0E0E0;64 color: #757575;65 display: flex; align-items: center; justify-content: center;66 font-size: 30px;67 }68 .rei-logo {69 position: absolute;70 top: 120px;71 left: 40px;72 background: rgba(255,255,255,0.85);73 border: 1px solid #BDBDBD;74 padding: 20px 28px;75 font-weight: 800;76 font-size: 44px;77 color: #1f3b1a;78 border-radius: 10px;79 }80 81 /* Search bar */82 .search-wrap {83 position: absolute;84 top: 520px;85 left: 30px;86 width: 1020px;87 height: 120px;88 background: #fff;89 border-radius: 18px;90 box-shadow: 0 2px 0 rgba(0,0,0,0.08);91 display: flex;92 align-items: center;93 padding: 0 24px;94 box-sizing: border-box;95 border: 1px solid #e6e6e6;96 }97 .search-icon {98 width: 40px; height: 40px; margin-right: 18px;99 }100 .search-text {101 font-size: 38px; color: #4a4a4a;102 }103 .barcode {104 margin-left: auto;105 width: 88px; height: 60px;106 border: 2px solid #b0b0b0;107 border-radius: 4px;108 display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;109 padding: 6px;110 box-sizing: border-box;111 }112 .barcode div { background: #b0b0b0; }113 114 /* Credit card banner */115 .ad-banner {116 position: absolute;117 top: 660px;118 left: 0;119 width: 1080px;120 height: 540px;121 background: #EFE9CF;122 border-top: 1px solid #d8d2b7;123 border-bottom: 1px solid #d8d2b7;124 box-sizing: border-box;125 padding: 40px;126 }127 .ad-text {128 color: #2E4924;129 font-size: 46px;130 line-height: 1.25;131 font-weight: 700;132 max-width: 620px;133 }134 .ad-image {135 position: absolute;136 right: 40px; top: 120px;137 width: 380px; height: 260px;138 background: #E0E0E0; border: 1px solid #BDBDBD;139 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;140 }141 .ad-button {142 position: absolute;143 left: 0; bottom: 0;144 width: 100%;145 height: 110px;146 background: #BDB05A;147 display: flex; align-items: center; justify-content: center;148 font-size: 40px; font-weight: 700; color: #244b2a;149 }150 151 /* Carousel dots */152 .dots {153 position: absolute;154 top: 1216px;155 width: 100%;156 display: flex; justify-content: center; gap: 22px;157 }158 .dot {159 width: 22px; height: 22px; border-radius: 50%; background: #A1A1A1;160 }161 .dot.active { background: #3D65B2; }162 163 /* Shop section */164 .shop-title {165 position: absolute;166 top: 1266px; left: 30px;167 font-size: 76px; font-weight: 800; color: #2E2C26;168 }169 .shop-row {170 position: absolute;171 top: 1370px; left: 30px;172 display: flex; gap: 40px;173 }174 .circle-img {175 width: 280px; height: 280px; border-radius: 50%;176 background: #E0E0E0; border: 1px solid #BDBDBD;177 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;178 }179 180 /* Keyboard overlay */181 .keyboard {182 position: absolute;183 bottom: 0; left: 0;184 width: 100%; height: 730px;185 background: #0E140E;186 box-sizing: border-box;187 padding: 26px 28px;188 color: #DDE7D5;189 }190 .kb-top-icons {191 display: flex; gap: 36px; margin-bottom: 26px;192 }193 .kb-square {194 width: 64px; height: 64px; background: #1b241b; border-radius: 16px;195 display: flex; align-items: center; justify-content: center;196 color: #C9D7C9; font-size: 28px;197 }198 .kb-grid {199 display: grid;200 grid-template-columns: repeat(10, 1fr);201 grid-gap: 18px;202 }203 .key {204 height: 96px; border-radius: 18px;205 background: #1c261c; display: flex; align-items: center; justify-content: center;206 font-size: 36px; color: #CFE3CF;207 }208 .key.wide { grid-column: span 2; }209 .kb-bottom {210 position: absolute; bottom: 26px; left: 28px; right: 28px;211 display: flex; align-items: center; gap: 26px;212 }213 .kb-pill {214 flex: 1; height: 112px; background: #1c261c; border-radius: 26px;215 }216 .send-btn {217 width: 150px; height: 150px; background: #87F79D; border-radius: 50%;218 margin-left: auto;219 display: flex; align-items: center; justify-content: center;220 }221 .send-arrow {222 width: 68px; height: 68px;223 border: 10px solid #1b3622; border-left: none; border-top: none;224 transform: rotate(-45deg);225 border-radius: 6px;226 }227</style>228</head>229<body>230<div id="render-target">231 232 <!-- Status Bar -->233 <div class="status-bar">234 8:42235 <div class="status-icons">236 <div class="dot-icon"></div>237 <div class="dot-icon"></div>238 <div class="dot-icon"></div>239 <div class="dot-icon"></div>240 <div class="dot-icon"></div>241 <div class="battery">242 <div class="battery-fill"></div>243 </div>244 </div>245 </div>246 247 <!-- Mountain hero and REI logo -->248 <div class="hero">249 <div class="img-label">[IMG: Mountain Landscape]</div>250 </div>251 <div class="rei-logo">REI Co-op</div>252 253 <!-- Search bar -->254 <div class="search-wrap">255 <svg class="search-icon" viewBox="0 0 24 24">256 <circle cx="10" cy="10" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"></circle>257 <line x1="15" y1="15" x2="22" y2="22" stroke="#4a4a4a" stroke-width="3"></line>258 </svg>259 <div class="search-text">Find gear and clothing</div>260 <div class="barcode">261 <div></div><div></div><div></div><div></div>262 </div>263 </div>264 265 <!-- Credit card banner -->266 <div class="ad-banner">267 <div class="ad-text">268 Earn 5% in card rewards on your REI purchases with the REI Co‑op Mastercard269 </div>270 <div class="ad-image">[IMG: Forest Lookout & Card]</div>271 <div class="ad-button">Learn more & apply today</div>272 </div>273 274 <!-- Carousel dots -->275 <div class="dots">276 <div class="dot"></div>277 <div class="dot"></div>278 <div class="dot active"></div>279 <div class="dot"></div>280 </div>281 282 <!-- Shop section -->283 <div class="shop-title">Shop REI</div>284 <div class="shop-row">285 <div class="circle-img">[IMG: Category 1]</div>286 <div class="circle-img">[IMG: Category 2]</div>287 <div class="circle-img">[IMG: Category 3]</div>288 </div>289 290 <!-- Keyboard overlay -->291 <div class="keyboard">292 <div class="kb-top-icons">293 <div class="kb-square">⌗</div>294 <div class="kb-square">☺</div>295 <div class="kb-square">GIF</div>296 <div class="kb-square">⚙</div>297 <div class="kb-square">G</div>298 <div class="kb-square">🎨</div>299 <div class="kb-square">🎤</div>300 </div>301 302 <!-- simplified keys -->303 <div class="kb-grid" style="margin-bottom: 18px;">304 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>305 </div>306 <div class="kb-grid" style="margin-bottom: 18px;">307 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>308 </div>309 <div class="kb-grid" style="margin-bottom: 18px;">310 <div class="key">⇪</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">,</div><div class="key">.</div>311 </div>312 313 <div class="kb-bottom">314 <div class="kb-square">?123</div>315 <div class="kb-square">,</div>316 <div class="kb-square">☺</div>317 <div class="kb-pill"></div>318 <div class="kb-square">.</div>319 <div class="send-btn"><div class="send-arrow"></div></div>320 </div>321 </div>322 323</div>324</body>325</html>