GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Render</title>6<style>7 body{8 margin:0;9 padding:0;10 background:transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 }13 #render-target{14 width:1080px;15 height:2400px;16 position:relative;17 overflow:hidden;18 background:#ffffff;19 color:#1b2b53;20 }21 /* Status bar */22 .status-bar{23 height:110px;24 background:#3c4b7a;25 color:#ffffff;26 display:flex;27 align-items:center;28 padding:0 40px;29 font-weight:600;30 position:relative;31 }32 .status-time{33 font-size:44px;34 letter-spacing:0.5px;35 }36 .status-icons{37 margin-left:auto;38 display:flex;39 align-items:center;40 gap:28px;41 }42 .chevrons{43 position:absolute;44 left:200px;45 top:30px;46 display:flex;47 gap:16px;48 }49 .chevrons span{50 width:24px;51 height:24px;52 border-right:4px solid #fff;53 border-bottom:4px solid #fff;54 transform:rotate(45deg);55 opacity:0.9;56 }57 .wifi-icon svg,58 .battery-icon svg{display:block}59 .battery-icon{60 width:54px;61 height:30px;62 }63 64 /* Hero/illustration area */65 .hero{66 height:560px;67 background:linear-gradient(180deg,#7f91bf 0%, #9fb1cf 60%, #aebbd3 100%);68 position:relative;69 }70 .hero-illustration{71 position:absolute;72 left:0;73 right:0;74 bottom:0;75 height:520px;76 margin:0 24px;77 border-radius:12px;78 border:1px solid #bdbdbd;79 background:#E0E0E0;80 display:flex;81 justify-content:center;82 align-items:center;83 color:#5f6b7a;84 font-size:34px;85 letter-spacing:0.3px;86 }87 88 /* Main content card */89 .content-card{90 position:relative;91 margin-top:-40px;92 background:#ffffff;93 border-top-left-radius:32px;94 border-top-right-radius:32px;95 box-shadow:0 -4px 12px rgba(28,36,63,0.08);96 padding:40px 40px 0 40px;97 min-height:1200px;98 }99 .title{100 font-size:72px;101 font-weight:800;102 margin:24px 0 20px 0;103 color:#14234b;104 }105 .field{106 background:#f4f6fb;107 border:1px solid #e3e7f0;108 border-radius:26px;109 height:120px;110 display:flex;111 align-items:center;112 padding:0 36px;113 margin-bottom:24px;114 font-size:44px;115 color:#243256;116 }117 .field .left-icon{118 width:64px;119 height:64px;120 margin-right:24px;121 display:flex;122 align-items:center;123 justify-content:center;124 }125 .field .right-icon{126 margin-left:auto;127 width:64px;128 height:64px;129 display:flex;130 align-items:center;131 justify-content:center;132 }133 .two-cols{134 display:flex;135 gap:24px;136 }137 .col-half{138 flex:1;139 }140 141 .search-btn{142 height:120px;143 border-radius:26px;144 background:#f4b7b4;145 color:#ffffff;146 font-size:48px;147 font-weight:700;148 display:flex;149 align-items:center;150 justify-content:center;151 margin:16px 0 40px 0;152 border:none;153 }154 155 /* Stay section */156 .sub-title{157 font-size:58px;158 font-weight:800;159 color:#14234b;160 margin:24px 0 16px 0;161 }162 .promo-row{163 display:flex;164 gap:28px;165 padding:12px 0 160px 0;166 }167 .promo-card{168 flex:1;169 background:#ffffff;170 border:1px solid #e5e8ef;171 border-radius:22px;172 padding:24px;173 display:flex;174 flex-direction:column;175 gap:18px;176 box-shadow:0 2px 6px rgba(0,0,0,0.05);177 }178 .promo-image{179 width:100%;180 height:320px;181 background:#E0E0E0;182 border:1px solid #BDBDBD;183 border-radius:16px;184 display:flex;185 align-items:center;186 justify-content:center;187 color:#757575;188 font-size:34px;189 }190 .promo-title{191 font-size:44px;192 font-weight:800;193 color:#1e2c54;194 line-height:1.1;195 }196 .promo-sub{197 font-size:40px;198 color:#e96b6b;199 font-weight:800;200 }201 .promo-sub.small{202 color:#2f3a62;203 font-weight:700;204 font-size:38px;205 }206 207 /* Bottom navigation */208 .bottom-nav{209 position:absolute;210 left:0;211 right:0;212 bottom:60px;213 height:160px;214 background:#ffffff;215 border-top:1px solid #e5e8ef;216 display:flex;217 align-items:center;218 justify-content:space-around;219 padding:0 60px;220 }221 .nav-item{222 display:flex;223 flex-direction:column;224 align-items:center;225 gap:14px;226 color:#7a86a5;227 font-size:32px;228 }229 .nav-item.active{230 color:#f49c9a;231 }232 .notif-dot{233 position:absolute;234 right:270px; /* near profile icon */235 bottom:150px;236 width:26px;237 height:26px;238 background:#ff6b6b;239 border-radius:50%;240 border:4px solid #ffffff;241 }242 .home-indicator{243 position:absolute;244 bottom:16px;245 left:50%;246 transform:translateX(-50%);247 width:320px;248 height:18px;249 background:#c9c9c9;250 border-radius:9px;251 }252 253 /* Simple helper for SVG icons */254 svg{width:48px;height:48px}255</style>256</head>257<body>258<div id="render-target">259 260 <!-- Status Bar -->261 <div class="status-bar">262 <div class="status-time">11:57</div>263 <div class="chevrons">264 <span></span><span style="transform:rotate(-135deg); border-right-color:#fff;border-bottom-color:#fff;"></span>265 </div>266 <div class="status-icons">267 <div class="wifi-icon">268 <svg viewBox="0 0 24 24" fill="none">269 <path d="M2 9c4-3 16-3 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>270 <path d="M6 13c3-2 9-2 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>271 <path d="M10 17c2-1 2-1 4 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>272 <circle cx="12" cy="20" r="1.5" fill="#fff"/>273 </svg>274 </div>275 <div class="battery-icon">276 <svg viewBox="0 0 36 20" fill="none">277 <rect x="1" y="3" width="28" height="14" rx="3" stroke="#fff" stroke-width="2"/>278 <rect x="4" y="6" width="22" height="8" rx="2" fill="#fff"/>279 <rect x="30" y="7" width="4" height="6" rx="1" fill="#fff"/>280 </svg>281 </div>282 </div>283 </div>284 285 <!-- Hero illustration -->286 <div class="hero">287 <div class="hero-illustration">[IMG: Transport illustration with plane, bus and train]</div>288 </div>289 290 <!-- Content card -->291 <div class="content-card">292 <div class="title">Where to?</div>293 294 <!-- Departure Field -->295 <div class="field">296 <div class="left-icon">297 <svg viewBox="0 0 24 24">298 <circle cx="12" cy="12" r="9" stroke="#6b7aa6" stroke-width="2" fill="none"/>299 </svg>300 </div>301 <div>Aalst Belgium</div>302 <div class="right-icon">303 <svg viewBox="0 0 24 24">304 <path d="M8 5v6l-3-3M16 19v-6l3 3" stroke="#6b7aa6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>305 <path d="M21 6H9" stroke="#6b7aa6" stroke-width="2" stroke-linecap="round"/>306 <path d="M3 18h12" stroke="#6b7aa6" stroke-width="2" stroke-linecap="round"/>307 </svg>308 </div>309 </div>310 311 <!-- Destination Field -->312 <div class="field">313 <div class="left-icon">314 <svg viewBox="0 0 24 24">315 <path d="M12 2c4 0 7 3 7 7 0 5-7 13-7 13S5 14 5 9c0-4 3-7 7-7z" stroke="#6b7aa6" stroke-width="2" fill="none"/>316 <circle cx="12" cy="9" r="3" stroke="#6b7aa6" stroke-width="2" fill="none"/>317 </svg>318 </div>319 <div style="color:#8a94b5">City, station, airport or port</div>320 </div>321 322 <!-- Dates -->323 <div class="two-cols">324 <div class="field col-half">325 <div class="left-icon">326 <svg viewBox="0 0 24 24">327 <rect x="3" y="5" width="18" height="16" rx="3" stroke="#6b7aa6" stroke-width="2" fill="none"/>328 <path d="M8 3v4M16 3v4" stroke="#6b7aa6" stroke-width="2" stroke-linecap="round"/>329 </svg>330 </div>331 <div>Sat, Nov 4</div>332 </div>333 <div class="field col-half">334 <div class="left-icon">335 <svg viewBox="0 0 24 24">336 <rect x="3" y="5" width="18" height="16" rx="3" stroke="#6b7aa6" stroke-width="2" fill="none"/>337 <path d="M8 3v4M16 3v4" stroke="#6b7aa6" stroke-width="2" stroke-linecap="round"/>338 </svg>339 </div>340 <div style="color:#8a94b5">+ Add return</div>341 </div>342 </div>343 344 <!-- Passengers Field -->345 <div class="field">346 <div class="left-icon">347 <svg viewBox="0 0 24 24">348 <circle cx="12" cy="8" r="4" stroke="#6b7aa6" stroke-width="2" fill="none"/>349 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#6b7aa6" stroke-width="2" fill="none"/>350 </svg>351 </div>352 <div>1 Adult, No discount card</div>353 </div>354 355 <!-- Search Button -->356 <div class="search-btn">Search Omio</div>357 358 <!-- Stay Section -->359 <div class="sub-title">Need a place to stay?</div>360 361 <div class="promo-row">362 <div class="promo-card">363 <div class="promo-title">Book now,<br>pay later</div>364 <div class="promo-image">[IMG: Reception desk and traveler]</div>365 </div>366 <div class="promo-card">367 <div class="promo-sub">Free cancelation</div>368 <div class="promo-title" style="font-size:42px;font-weight:800;">on most stays</div>369 <div class="promo-image">[IMG: Phone showing cancelled banner]</div>370 </div>371 <div class="promo-card">372 <div class="promo-sub small">Get 10% back</div>373 <div class="promo-title" style="font-size:42px;">with mobile app</div>374 <div class="promo-image">[IMG: Loyalty points on phone]</div>375 </div>376 </div>377 </div>378 379 <!-- Bottom Navigation -->380 <div class="bottom-nav">381 <div class="nav-item active">382 <svg viewBox="0 0 24 24">383 <circle cx="11" cy="11" r="7" stroke="#f49c9a" stroke-width="2" fill="none"/>384 <path d="M18 18l4 4" stroke="#f49c9a" stroke-width="2" stroke-linecap="round"/>385 </svg>386 <div>Search</div>387 </div>388 <div class="nav-item">389 <svg viewBox="0 0 24 24">390 <path d="M3 7l4-2h10l4 2v10l-4 2H7l-4-2V7z" stroke="#7a86a5" stroke-width="2" fill="none"/>391 <path d="M7 10h10" stroke="#7a86a5" stroke-width="2"/>392 <circle cx="8" cy="15" r="1.5" fill="#7a86a5"/>393 <circle cx="16" cy="15" r="1.5" fill="#7a86a5"/>394 </svg>395 <div>Tickets</div>396 </div>397 <div class="nav-item">398 <svg viewBox="0 0 24 24">399 <circle cx="12" cy="8" r="4" stroke="#7a86a5" stroke-width="2" fill="none"/>400 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#7a86a5" stroke-width="2" fill="none"/>401 </svg>402 <div>Profile</div>403 </div>404 </div>405 <div class="notif-dot"></div>406 <div class="home-indicator"></div>407 408</div>409</body>410</html>