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>Groupon Loading Screen Mock</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 box-sizing: border-box;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 110px;29 background: #ffffff;30 display: flex;31 align-items: center;32 justify-content: space-between;33 padding: 0 34px;34 color: #4a4a4a;35 font-size: 34px;36 }37 .status-left {38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .yt-icon {43 width: 42px;44 height: 28px;45 border-radius: 6px;46 background: #d9d9d9;47 position: relative;48 }49 .yt-icon:after {50 content: "";51 position: absolute;52 left: 14px;53 top: 6px;54 width: 0;55 height: 0;56 border-left: 16px solid #7a7a7a;57 border-top: 10px solid transparent;58 border-bottom: 10px solid transparent;59 }60 .status-right {61 display: flex;62 align-items: center;63 gap: 22px;64 }65 .icon-wifi svg, .icon-battery svg {66 width: 42px;67 height: 42px;68 fill: none;69 stroke: #5a5a5a;70 stroke-width: 4;71 }72 73 /* Top toolbar with back button and search/location pill */74 .top-bar {75 position: absolute;76 top: 110px;77 left: 0;78 width: 1080px;79 height: 130px;80 display: flex;81 align-items: center;82 padding: 0 28px;83 box-sizing: border-box;84 background: #ffffff;85 }86 .back-btn {87 width: 96px;88 height: 96px;89 display: flex;90 align-items: center;91 justify-content: center;92 margin-right: 16px;93 }94 .back-btn svg {95 width: 60px;96 height: 60px;97 stroke: #1f1f1f;98 stroke-width: 10;99 fill: none;100 }101 .search-pill {102 flex: 1;103 height: 110px;104 background: #f3f4f6;105 border-radius: 55px;106 display: flex;107 align-items: center;108 padding: 0 26px;109 box-shadow: inset 0 0 0 1px #e2e2e2;110 }111 .pill-section {112 display: flex;113 align-items: center;114 gap: 18px;115 color: #222;116 }117 .pill-section .label {118 font-size: 40px;119 }120 .divider {121 width: 2px;122 height: 56px;123 background: #d8d8d8;124 margin: 0 24px;125 }126 .icon-search, .icon-pin {127 width: 46px;128 height: 46px;129 }130 .icon-search svg, .icon-pin svg {131 width: 100%;132 height: 100%;133 stroke: #333;134 stroke-width: 6;135 fill: none;136 }137 .cart-btn {138 width: 96px;139 height: 96px;140 margin-left: 18px;141 display: flex;142 align-items: center;143 justify-content: center;144 }145 .cart-btn svg {146 width: 60px;147 height: 60px;148 stroke: #222;149 stroke-width: 8;150 fill: none;151 }152 153 /* Spinner */154 .spinner {155 position: absolute;156 top: 420px;157 left: 50%;158 transform: translateX(-50%);159 width: 140px;160 height: 140px;161 border-radius: 50%;162 border: 18px solid #a7c8ff;163 border-top-color: #4285f4;164 animation: spin 1.1s linear infinite;165 }166 @keyframes spin {167 to { transform: translateX(-50%) rotate(360deg); }168 }169 170 /* Keyboard area */171 .keyboard {172 position: absolute;173 left: 0;174 bottom: 0;175 width: 1080px;176 height: 950px;177 background: #1f2024;178 box-shadow: 0 -2px 0 #2a2b2f inset;179 }180 .keyboard .row {181 display: flex;182 justify-content: space-between;183 padding: 20px 26px;184 }185 .key {186 height: 120px;187 min-width: 86px;188 background: #2a2b2f;189 color: #eaeaea;190 border-radius: 22px;191 display: flex;192 align-items: center;193 justify-content: center;194 font-size: 56px;195 box-shadow: inset 0 0 0 1px #3a3b40;196 }197 .key.small {198 min-width: 70px;199 font-size: 50px;200 }201 .key.wide {202 min-width: 220px;203 }204 .key.extra-wide {205 min-width: 540px;206 }207 .numbers {208 color: #cfcfcf;209 opacity: 0.85;210 }211 212 /* Gesture bar indicator */213 .gesture {214 position: absolute;215 left: 50%;216 transform: translateX(-50%);217 bottom: 20px;218 width: 460px;219 height: 12px;220 background: #d9d9d9;221 border-radius: 8px;222 opacity: 0.7;223 }224</style>225</head>226<body>227<div id="render-target">228 229 <!-- Status bar -->230 <div class="status-bar">231 <div class="status-left">232 <div>5:45</div>233 <div class="yt-icon"></div>234 </div>235 <div class="status-right">236 <div class="icon-wifi">237 <svg viewBox="0 0 24 24">238 <path d="M2 9c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 15c2-2 6-2 8 0M12 18l2 2-2 2-2-2z"/>239 </svg>240 </div>241 <div class="icon-battery">242 <svg viewBox="0 0 28 24">243 <rect x="2" y="6" width="20" height="12" rx="2"></rect>244 <rect x="4" y="8" width="14" height="8" fill="#6d6d6d"></rect>245 <rect x="22" y="10" width="4" height="4" rx="1"></rect>246 </svg>247 </div>248 </div>249 </div>250 251 <!-- Top bar -->252 <div class="top-bar">253 <div class="back-btn">254 <svg viewBox="0 0 24 24">255 <path d="M15 5l-7 7 7 7"></path>256 </svg>257 </div>258 259 <div class="search-pill">260 <div class="pill-section">261 <div class="icon-search">262 <svg viewBox="0 0 24 24">263 <circle cx="10" cy="10" r="7"></circle>264 <path d="M21 21l-6-6"></path>265 </svg>266 </div>267 <div class="label">Search Groupon</div>268 </div>269 <div class="divider"></div>270 <div class="pill-section">271 <div class="icon-pin">272 <svg viewBox="0 0 24 24">273 <path d="M12 22s7-8 7-12a7 7 0 1 0-14 0c0 4 7 12 7 12z"></path>274 <circle cx="12" cy="10" r="3"></circle>275 </svg>276 </div>277 <div class="label" style="color:#333;">Michigan, USA</div>278 </div>279 </div>280 281 <div class="cart-btn">282 <svg viewBox="0 0 24 24">283 <path d="M3 5h3l2 12h10l2-9H7"></path>284 <circle cx="9" cy="21" r="1.8"></circle>285 <circle cx="17" cy="21" r="1.8"></circle>286 </svg>287 </div>288 </div>289 290 <!-- Center spinner -->291 <div class="spinner"></div>292 293 <!-- Keyboard -->294 <div class="keyboard">295 <!-- numbers row -->296 <div class="row">297 <div class="key numbers">1</div>298 <div class="key numbers">2</div>299 <div class="key numbers">3</div>300 <div class="key numbers">4</div>301 <div class="key numbers">5</div>302 <div class="key numbers">6</div>303 <div class="key numbers">7</div>304 <div class="key numbers">8</div>305 <div class="key numbers">9</div>306 <div class="key numbers">0</div>307 </div>308 309 <!-- qwerty row -->310 <div class="row">311 <div class="key">q</div>312 <div class="key">w</div>313 <div class="key">e</div>314 <div class="key">r</div>315 <div class="key">t</div>316 <div class="key">y</div>317 <div class="key">u</div>318 <div class="key">i</div>319 <div class="key">o</div>320 <div class="key">p</div>321 </div>322 323 <!-- asdf row -->324 <div class="row">325 <div class="key">a</div>326 <div class="key">s</div>327 <div class="key">d</div>328 <div class="key">f</div>329 <div class="key">g</div>330 <div class="key">h</div>331 <div class="key">j</div>332 <div class="key">k</div>333 <div class="key">l</div>334 </div>335 336 <!-- zxcv row -->337 <div class="row">338 <div class="key wide">⌂</div>339 <div class="key">z</div>340 <div class="key">x</div>341 <div class="key">c</div>342 <div class="key">v</div>343 <div class="key">b</div>344 <div class="key">n</div>345 <div class="key">m</div>346 <div class="key wide">⌫</div>347 </div>348 349 <!-- bottom controls -->350 <div class="row">351 <div class="key wide">?123</div>352 <div class="key small">,</div>353 <div class="key extra-wide"></div>354 <div class="key small">.</div>355 <div class="key wide">356 <svg viewBox="0 0 24 24" width="44" height="44">357 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>358 <path d="M21 21l-6-6" stroke="#fff" stroke-width="2" fill="none"></path>359 </svg>360 </div>361 </div>362 </div>363 364 <div class="gesture"></div>365</div>366</body>367</html>