GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Agoda UI Mock</title>7<style>8 * { box-sizing: border-box; }9 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #222; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #ffffff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #9e9e9e;26 color: #fff;27 padding: 0 40px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-weight: 600;32 font-size: 40px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 24px;38 font-size: 36px;39 }40 .battery {41 width: 56px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;42 }43 .battery::after {44 content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 16px; background: #fff; border-radius: 2px;45 }46 .battery .level {47 width: 70%; height: 100%; background: #fff; border-radius: 4px;48 }49 50 /* Content container */51 .content {52 position: absolute;53 top: 120px;54 left: 0;55 width: 100%;56 height: calc(100% - 120px);57 overflow: hidden;58 }59 60 /* Header */61 .header {62 padding: 36px 44px 20px 44px;63 }64 .header-top {65 display: flex;66 align-items: center;67 justify-content: space-between;68 }69 .brand {70 display: flex;71 align-items: baseline;72 gap: 18px;73 }74 .brand-name {75 font-size: 64px;76 font-weight: 700;77 letter-spacing: 0.5px;78 }79 .vip-wrap {80 display: flex;81 gap: 12px;82 }83 .badge {84 height: 60px;85 padding: 0 26px;86 border-radius: 16px;87 display: inline-flex;88 align-items: center;89 gap: 14px;90 font-size: 34px;91 font-weight: 700;92 color: #fff;93 }94 .badge.vip { background: #1f1f25; }95 .badge.bronze { background: #b46c35; }96 .badge svg { width: 34px; height: 34px; }97 .brand-dots {98 margin-top: 16px;99 display: flex;100 gap: 16px;101 }102 .dot { width: 22px; height: 22px; border-radius: 50%; }103 .dot.red { background: #ef5350; }104 .dot.orange { background: #ffa726; }105 .dot.yellow { background: #ffeb3b; }106 .dot.green { background: #66bb6a; }107 .dot.blue { background: #42a5f5; }108 .dot.purple { background: #ab47bc; }109 110 /* Feature grid */111 .features {112 padding: 16px 44px 10px 44px;113 display: grid;114 grid-template-columns: 1fr 1fr;115 gap: 40px;116 }117 .feature-card {118 height: 340px;119 border-radius: 36px;120 padding: 28px;121 position: relative;122 }123 .feature-card .title {124 font-size: 44px;125 font-weight: 700;126 color: #222;127 }128 .feature-card .img {129 position: absolute;130 left: 28px;131 right: 28px;132 bottom: 26px;133 height: 200px;134 background: #E0E0E0;135 border: 1px solid #BDBDBD;136 border-radius: 20px;137 display: flex; justify-content: center; align-items: center;138 color: #757575; font-size: 38px; font-weight: 600;139 }140 .fc-hotels { background: #f8dfe0; }141 .fc-flights { background: #e9dcf7; }142 .fc-hourly { background: #f4d9dc; }143 .fc-activities { background: #f5efcf; }144 .fc-homes { background: #e6f3e6; }145 146 .new-tag {147 position: absolute;148 top: -12px;149 left: 50%;150 transform: translateX(-50%);151 background: #e53935;152 color: #fff;153 font-weight: 700;154 font-size: 30px;155 padding: 8px 16px;156 border-radius: 14px;157 }158 159 /* Carousel dots */160 .carousel-dots {161 display: flex;162 justify-content: center;163 gap: 14px;164 padding: 10px 0 24px 0;165 }166 .carousel-dots .dot {167 width: 16px; height: 16px; border-radius: 50%;168 background: #bdbdbd;169 }170 .carousel-dots .dot.active { background: #3d6cff; }171 172 /* Welcome pack */173 .section-title {174 padding: 10px 44px 10px 44px;175 font-size: 56px;176 font-weight: 800;177 }178 .benefits {179 padding: 0 44px 20px 44px;180 display: grid;181 grid-template-columns: 1fr 1fr;182 gap: 26px;183 }184 .benefit-card {185 height: 170px;186 border: 1px solid #e0e0e0;187 border-radius: 28px;188 display: flex;189 align-items: center;190 padding: 28px;191 gap: 26px;192 background: #fff;193 }194 .benefit-icon {195 width: 80px; height: 80px; border-radius: 20px; background: #f2f4ff; display: flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0;196 }197 .benefit-text {198 flex: 1;199 }200 .benefit-text .headline { font-size: 42px; font-weight: 800; }201 .benefit-text .sub { font-size: 34px; color: #757575; margin-top: 6px; }202 .benefit-cta {203 color: #3d6cff;204 font-weight: 800;205 font-size: 38px;206 padding: 10px 0 10px 10px;207 }208 .benefit-card.alt .benefit-icon { background: #fffaf0; }209 210 /* Promotions */211 .section {212 padding: 16px 44px;213 }214 .section h2 {215 font-size: 52px;216 font-weight: 800;217 margin: 0 0 18px 0;218 }219 .promo-row {220 display: flex;221 gap: 26px;222 }223 .promo-banner {224 width: 660px; height: 360px; border-radius: 30px; overflow: hidden;225 background: #E0E0E0; border: 1px solid #BDBDBD;226 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; font-weight: 700;227 }228 229 /* Flights & Activities Promotions */230 .subpromos {231 padding: 6px 44px 0 44px;232 }233 .subpromos h3 {234 font-size: 48px; font-weight: 800; margin: 0 0 22px 0;235 }236 .progress-strip {237 height: 12px; background: #ece7fb; border-radius: 6px; overflow: hidden;238 }239 .progress-strip .fill {240 width: 48%; height: 100%; background: #7b61ff;241 }242 243 /* Bottom nav */244 .bottom-nav {245 position: absolute;246 left: 0;247 bottom: 94px;248 width: 100%;249 height: 210px;250 background: #ffffff;251 border-top: 1px solid #e0e0e0;252 display: flex;253 align-items: center;254 justify-content: space-around;255 }256 .nav-item {257 display: flex; flex-direction: column; align-items: center; gap: 18px;258 color: #9e9e9e;259 font-size: 28px; font-weight: 700;260 }261 .nav-item .icon {262 width: 80px; height: 80px;263 }264 .nav-item.active { color: #3d6cff; }265 .home-indicator {266 position: absolute;267 bottom: 26px;268 left: 50%;269 transform: translateX(-50%);270 width: 240px; height: 16px; background: #ffffff; border-radius: 12px; box-shadow: 0 0 0 2px rgba(0,0,0,0.06);271 }272</style>273</head>274<body>275<div id="render-target">276 277 <!-- Status Bar -->278 <div class="status-bar">279 <div>6:23</div>280 <div class="status-icons">281 <span>•</span>282 <span>◯</span>283 <span>LR</span>284 <span>N</span>285 <div class="battery"><div class="level"></div></div>286 <span>100%</span>287 </div>288 </div>289 290 <!-- Content -->291 <div class="content">292 <!-- Header -->293 <div class="header">294 <div class="header-top">295 <div class="brand">296 <div class="brand-name">agoda</div>297 </div>298 <div class="vip-wrap">299 <div class="badge vip">300 <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3 7h7l-5.5 4 2 7L12 16 5.5 20l2-7L2 9h7z"/></svg>301 VIP302 </div>303 <div class="badge bronze">Bronze</div>304 </div>305 </div>306 <div class="brand-dots">307 <div class="dot red"></div>308 <div class="dot orange"></div>309 <div class="dot yellow"></div>310 <div class="dot green"></div>311 <div class="dot blue"></div>312 <div class="dot purple"></div>313 </div>314 </div>315 316 <!-- Feature grid -->317 <div class="features">318 <div class="feature-card fc-hotels">319 <div class="title">Hotels</div>320 <div class="img">[IMG: Hotel building icon]</div>321 </div>322 323 <div class="feature-card fc-flights">324 <div class="title">Flights</div>325 <div class="img">[IMG: Airplane icon with clouds]</div>326 </div>327 328 <div class="feature-card fc-hourly">329 <div class="title">Hourly Stay</div>330 <div class="img">[IMG: Clock and building icon]</div>331 </div>332 333 <div class="feature-card fc-activities">334 <div class="new-tag">New!</div>335 <div class="title">Activities</div>336 <div class="img">[IMG: Ferris wheel icon]</div>337 </div>338 339 <div class="feature-card fc-homes" style="grid-column: span 2; height: 320px;">340 <div class="title">Homes & Apts</div>341 <div class="img">[IMG: Houses and apartment icon]</div>342 </div>343 </div>344 345 <div class="carousel-dots">346 <div class="dot active"></div>347 <div class="dot"></div>348 </div>349 350 <!-- Welcome pack -->351 <div class="section-title">New user welcome pack!</div>352 <div class="benefits">353 <div class="benefit-card">354 <div class="benefit-icon">355 <svg class="icon" viewBox="0 0 24 24">356 <path d="M3 6h14v12H3z" fill="#b0b6ff"></path>357 <path d="M17 8h4v8h-4z" fill="#d1d6ff"></path>358 <path d="M6 10h8v2H6z" fill="#5965ff"></path>359 </svg>360 </div>361 <div class="benefit-text">362 <div class="headline">10% off</div>363 <div class="sub">First time booking</div>364 </div>365 <div class="benefit-cta">Collect</div>366 </div>367 368 <div class="benefit-card alt">369 <div class="benefit-icon">370 <svg class="icon" viewBox="0 0 24 24">371 <path d="M12 2l3 7h7l-5.5 4 2 7L12 16 5.5 20l2-7L2 9h7z" fill="#ffcc55"></path>372 </svg>373 </div>374 <div class="benefit-text">375 <div class="headline">VIP Gold trial</div>376 <div class="sub">Up to 18% off</div>377 </div>378 </div>379 </div>380 381 <!-- Promotions -->382 <div class="section">383 <h2>Promotions</h2>384 <div class="promo-row">385 <div class="promo-banner">[IMG: Festive Deals promotion banner]</div>386 <div class="promo-banner">[IMG: Hotel deals promotion banner]</div>387 </div>388 </div>389 390 <!-- Flights & Activities Promotions -->391 <div class="subpromos">392 <h3>Flights & Activities Promotions</h3>393 <div class="progress-strip"><div class="fill"></div></div>394 </div>395 </div>396 397 <!-- Bottom Navigation -->398 <div class="bottom-nav">399 <div class="nav-item active">400 <svg class="icon" viewBox="0 0 24 24" fill="#3d6cff">401 <path d="M3 10l9-7 9 7v10H3z"></path>402 </svg>403 <div>Home</div>404 </div>405 <div class="nav-item">406 <svg class="icon" viewBox="0 0 24 24" fill="#9e9e9e">407 <path d="M6 3h12v6H6zM4 9h16v12H4z"></path>408 </svg>409 <div>My Trips</div>410 </div>411 <div class="nav-item">412 <svg class="icon" viewBox="0 0 24 24" fill="#9e9e9e">413 <circle cx="12" cy="12" r="9"></circle>414 <text x="12" y="16" text-anchor="middle" font-size="10" fill="#fff">%</text>415 </svg>416 <div>Deals</div>417 </div>418 <div class="nav-item">419 <svg class="icon" viewBox="0 0 24 24" fill="#9e9e9e">420 <path d="M7 7h14l-2 10H7L5 5H2" stroke="#9e9e9e" stroke-width="2" fill="none"></path>421 <circle cx="9" cy="20" r="2" fill="#9e9e9e"></circle>422 <circle cx="17" cy="20" r="2" fill="#9e9e9e"></circle>423 </svg>424 <div>Cart</div>425 </div>426 <div class="nav-item">427 <svg class="icon" viewBox="0 0 24 24" fill="#9e9e9e">428 <circle cx="12" cy="8" r="4"></circle>429 <path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#9e9e9e"></path>430 </svg>431 <div>More</div>432 </div>433 </div>434 <div class="home-indicator"></div>435 436</div>437</body>438</html>