GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Omio Search UI - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "SF Pro Text", Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #51608F 0px, #6D82AF 220px, #E9EEF9 220px, #EEF3FA 100%);13 color: #1f2d4a;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 background: #3E4B7B;24 color: #ffffff;25 display: flex;26 align-items: center;27 padding: 0 40px;28 box-sizing: border-box;29 }30 .status-left { display: flex; align-items: center; gap: 18px; font-weight: 600; }31 .chevrons { font-size: 38px; opacity: 0.85; letter-spacing: 10px; }32 .status-right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .icon { width: 40px; height: 40px; }39 40 /* Hero / banner illustration placeholder */41 .hero {42 position: absolute;43 top: 110px;44 left: 0;45 width: 1080px;46 height: 560px;47 display: flex;48 align-items: center;49 justify-content: center;50 color: #63739C;51 background: rgba(255,255,255,0.06);52 }53 .hero .img {54 width: 1080px;55 height: 560px;56 border-top-left-radius: 0;57 border-top-right-radius: 0;58 border-bottom-left-radius: 0;59 border-bottom-right-radius: 0;60 background: #E0E0E0;61 border: 1px solid #BDBDBD;62 display: flex;63 align-items: center;64 justify-content: center;65 color: #757575;66 font-size: 34px;67 font-weight: 600;68 }69 70 /* Card container (white sheet) */71 .sheet {72 position: absolute;73 top: 650px;74 left: 0;75 width: 1080px;76 height: auto;77 background: #ffffff;78 border-top-left-radius: 30px;79 border-top-right-radius: 30px;80 box-shadow: 0 -2px 0 rgba(0,0,0,0.05) inset;81 padding: 36px 40px 0 40px;82 box-sizing: border-box;83 }84 85 .title {86 font-size: 64px;87 font-weight: 800;88 letter-spacing: 0.2px;89 margin: 8px 0 28px 0;90 color: #18315a;91 }92 93 .field {94 height: 120px;95 background: #F1F3F8;96 border-radius: 28px;97 display: flex;98 align-items: center;99 gap: 26px;100 padding: 0 32px;101 box-sizing: border-box;102 margin-bottom: 26px;103 }104 .field .label {105 font-size: 40px;106 color: #7A869C;107 letter-spacing: 0.2px;108 }109 .row {110 display: flex;111 gap: 26px;112 }113 .half { flex: 1; }114 .btn {115 height: 118px;116 background: #F6B8B4;117 color: #ffffff;118 border-radius: 28px;119 font-size: 44px;120 font-weight: 700;121 display: flex;122 align-items: center;123 justify-content: center;124 margin: 22px 0 40px 0;125 }126 127 /* Hotel promo */128 .sub-title {129 font-size: 48px;130 font-weight: 800;131 color: #102a55;132 margin: 16px 0 22px 0;133 }134 .promo-row {135 display: flex;136 gap: 26px;137 padding-bottom: 40px;138 }139 .promo-card {140 flex: 1;141 height: 360px;142 border-radius: 24px;143 background: #F6F7FB;144 border: 1px solid #E5E7F0;145 display: flex;146 flex-direction: column;147 align-items: center;148 justify-content: center;149 color: #1c2c52;150 text-align: center;151 padding: 18px;152 box-sizing: border-box;153 }154 .promo-card .promo-img {155 width: 90%;156 height: 220px;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 border-radius: 14px;160 display: flex;161 align-items: center;162 justify-content: center;163 color: #757575;164 margin-top: 18px;165 font-size: 30px;166 }167 .promo-card .promo-text {168 font-size: 40px;169 font-weight: 800;170 line-height: 1.1;171 color: #142a54;172 }173 .promo-card .promo-small {174 font-size: 34px;175 color: #64708A;176 margin-top: 6px;177 }178 179 /* Bottom navigation bar */180 .tabbar {181 position: absolute;182 bottom: 120px;183 left: 0;184 width: 1080px;185 height: 140px;186 background: #ffffff;187 border-top: 1px solid #E4E7F0;188 display: flex;189 align-items: center;190 justify-content: space-around;191 }192 .tab-icon {193 width: 120px;194 height: 120px;195 display: flex;196 align-items: center;197 justify-content: center;198 color: #E59594;199 }200 .tab-icon svg { width: 64px; height: 64px; }201 .profile-wrapper {202 position: relative;203 width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;204 }205 .dot {206 position: absolute;207 right: 30px;208 top: 24px;209 width: 22px; height: 22px;210 background: #F06362; border-radius: 50%;211 border: 3px solid #ffffff;212 }213 214 /* Home indicator line */215 .home-indicator {216 position: absolute;217 bottom: 40px;218 left: 50%;219 transform: translateX(-50%);220 width: 480px;221 height: 14px;222 background: #C9CDD7;223 border-radius: 7px;224 }225 226 /* Icon styles within fields */227 .iwrap { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }228 .field svg { width: 58px; height: 58px; }229</style>230</head>231<body>232<div id="render-target">233 234 <!-- Status bar -->235 <div class="status-bar">236 <div class="status-left">237 <div style="font-size:46px;">11:56</div>238 <div class="chevrons">^ ^</div>239 </div>240 <div class="status-right">241 <!-- Wifi icon -->242 <svg class="icon" viewBox="0 0 24 24" fill="none">243 <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>244 <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>245 <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>246 <circle cx="12" cy="19" r="1.5" fill="#fff"/>247 </svg>248 <!-- Battery icon -->249 <svg class="icon" viewBox="0 0 28 18" fill="none">250 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2"/>251 <rect x="3" y="5" width="15" height="8" rx="1.5" fill="#fff"/>252 <rect x="24" y="6" width="3" height="6" rx="1" fill="#fff"/>253 </svg>254 </div>255 </div>256 257 <!-- Hero illustration -->258 <div class="hero">259 <div class="img">[IMG: Scenic travel illustration with plane, bus and train]</div>260 </div>261 262 <!-- White sheet with form -->263 <div class="sheet">264 <div class="title">Where to?</div>265 266 <div class="field">267 <div class="iwrap">268 <!-- Circle origin icon -->269 <svg viewBox="0 0 24 24">270 <circle cx="12" cy="12" r="8" stroke="#7A869C" stroke-width="2" fill="none"/>271 <circle cx="12" cy="12" r="3" fill="#7A869C"/>272 </svg>273 </div>274 <div class="label">City, station, airport or port</div>275 </div>276 277 <div class="field">278 <div class="iwrap">279 <!-- Location pin -->280 <svg viewBox="0 0 24 24">281 <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" stroke="#7A869C" stroke-width="2" fill="none"/>282 <circle cx="12" cy="9" r="3" fill="#7A869C"/>283 </svg>284 </div>285 <div class="label">City, station, airport or port</div>286 </div>287 288 <div class="row">289 <div class="field half">290 <div class="iwrap">291 <!-- Calendar icon -->292 <svg viewBox="0 0 24 24">293 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#7A869C" stroke-width="2" fill="none"/>294 <path d="M3 9h18" stroke="#7A869C" stroke-width="2"/>295 <path d="M7 3v4M17 3v4" stroke="#7A869C" stroke-width="2" stroke-linecap="round"/>296 </svg>297 </div>298 <div class="label">Sat, Nov 4</div>299 </div>300 <div class="field half">301 <div class="iwrap">302 <!-- Calendar icon -->303 <svg viewBox="0 0 24 24">304 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#7A869C" stroke-width="2" fill="none"/>305 <path d="M3 9h18" stroke="#7A869C" stroke-width="2"/>306 <path d="M7 3v4M17 3v4" stroke="#7A869C" stroke-width="2" stroke-linecap="round"/>307 </svg>308 </div>309 <div class="label">+ Add return</div>310 </div>311 </div>312 313 <div class="field">314 <div class="iwrap">315 <!-- User icon -->316 <svg viewBox="0 0 24 24">317 <circle cx="12" cy="8" r="4" fill="#7A869C"/>318 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#7A869C" stroke-width="2" fill="none" stroke-linecap="round"/>319 </svg>320 </div>321 <div class="label">1 Adult, No discount card</div>322 </div>323 324 <div class="btn">Search Omio</div>325 326 <div class="sub-title">Need a place to stay?</div>327 328 <div class="promo-row">329 <div class="promo-card">330 <div class="promo-text">Book now,</div>331 <div class="promo-small">pay later</div>332 <div class="promo-img">[IMG: Hotel desk handshake]</div>333 </div>334 <div class="promo-card">335 <div class="promo-text">Free cancelation</div>336 <div class="promo-small">on most stays</div>337 <div class="promo-img">[IMG: Phone with “Cancelled” sticker]</div>338 </div>339 <div class="promo-card">340 <div class="promo-text">Get 10% back</div>341 <div class="promo-small">with mobile wallet</div>342 <div class="promo-img">[IMG: Reward card and city image]</div>343 </div>344 </div>345 </div>346 347 <!-- Bottom tab bar -->348 <div class="tabbar">349 <div class="tab-icon">350 <!-- Search icon -->351 <svg viewBox="0 0 24 24" fill="none">352 <circle cx="11" cy="11" r="7" stroke="#E59594" stroke-width="2"/>353 <path d="M20 20l-4.5-4.5" stroke="#E59594" stroke-width="2" stroke-linecap="round"/>354 </svg>355 </div>356 <div class="tab-icon" style="color:#98A4C7;">357 <!-- Ticket icon -->358 <svg viewBox="0 0 24 24" fill="none">359 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#98A4C7" stroke-width="2"/>360 <circle cx="8" cy="12" r="1.6" fill="#98A4C7"/>361 <circle cx="16" cy="12" r="1.6" fill="#98A4C7"/>362 </svg>363 </div>364 <div class="profile-wrapper">365 <div class="dot"></div>366 <!-- Profile icon -->367 <svg viewBox="0 0 24 24" fill="none">368 <circle cx="12" cy="8" r="4" stroke="#98A4C7" stroke-width="2"/>369 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#98A4C7" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 </div>373 374 <!-- Home indicator -->375 <div class="home-indicator"></div>376 377</div>378</body>379</html>