GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>GetByFerry Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #eef2f8;13 }14 15 /* Top status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 100%;21 height: 120px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #2f2f2f;27 font-size: 40px;28 }29 .status-right {30 display: flex;31 gap: 24px;32 align-items: center;33 }34 .dot { width: 12px; height: 12px; background: #2f2f2f; border-radius: 50%; display: inline-block; }35 36 /* Logo area */37 .logo-wrap {38 position: absolute;39 top: 150px;40 left: 0;41 width: 100%;42 display: flex;43 justify-content: center;44 align-items: center;45 gap: 22px;46 }47 .logo-mark {48 width: 110px; height: 110px; border-radius: 55px;49 border: 4px solid #6bc562; background: #dff3df;50 display: flex; align-items: center; justify-content: center;51 color: #3a9d4f; font-weight: 700;52 font-size: 30px;53 }54 .logo-text {55 font-size: 84px; font-weight: 700; letter-spacing: 1px;56 }57 .logo-text .g { color: #5cc25e; }58 .logo-text .b { color: #f1a43a; }59 .logo-text .f { color: #4b73da; }60 61 /* Transport icons row */62 .modes {63 position: absolute;64 top: 310px;65 left: 40px;66 right: 40px;67 height: 140px;68 border-top: 4px solid #c9cfe1;69 display: flex;70 align-items: center;71 justify-content: space-between;72 padding: 0 10px;73 }74 .mode {75 width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;76 }77 .mode svg { width: 100%; height: 100%; stroke: #2f378b; fill: none; stroke-width: 6; }78 79 /* Form cards */80 .content {81 position: absolute;82 top: 480px;83 left: 40px;84 right: 40px;85 }86 .card {87 background: #ffffff;88 border-radius: 24px;89 box-shadow: 0 3px 8px rgba(30, 40, 80, 0.1);90 padding: 36px;91 margin-bottom: 30px;92 }93 .label {94 font-size: 34px;95 color: #6a63a6;96 margin-bottom: 26px;97 letter-spacing: 0.5px;98 }99 .field-row {100 display: flex;101 align-items: center;102 justify-content: space-between;103 }104 .field-left {105 display: flex;106 align-items: center;107 gap: 24px;108 }109 .text-main {110 font-size: 54px;111 color: #1f2454;112 }113 .icon {114 width: 64px; height: 64px;115 }116 .icon svg { width: 100%; height: 100%; }117 .swap {118 width: 78px; height: 78px;119 background: #e9f7e6;120 border-radius: 16px;121 display: flex;122 align-items: center;123 justify-content: center;124 border: 3px solid #91d96c;125 }126 .swap svg { stroke: #50b44a; stroke-width: 6; fill: none; }127 128 .two-col {129 display: grid;130 grid-template-columns: 1fr 1fr;131 gap: 28px;132 }133 .date-text {134 font-size: 50px;135 color: #1f2454;136 }137 .calendar {138 width: 60px; height: 60px;139 margin-right: 22px;140 }141 .calendar svg { width: 100%; height: 100%; stroke: #2f378b; fill: none; stroke-width: 6; }142 .close-pill {143 width: 80px; height: 80px; border-radius: 40px;144 background: #f6b25a; display: flex; align-items: center; justify-content: center;145 }146 .close-pill svg { width: 48px; height: 48px; stroke: #ffffff; stroke-width: 8; }147 148 /* Search button */149 .search-btn {150 background: #86d44b;151 color: #ffffff;152 border-radius: 28px;153 height: 160px;154 display: flex; align-items: center; justify-content: center;155 font-size: 72px; font-weight: 700;156 box-shadow: 0 6px 16px rgba(60, 140, 20, 0.25);157 margin-top: 18px;158 }159 160 /* Bottom nav */161 .bottom-nav {162 position: absolute;163 bottom: 0; left: 0; right: 0;164 height: 180px;165 background: #ffffff;166 box-shadow: 0 -6px 18px rgba(30,40,80,0.08);167 display: flex;168 align-items: center;169 justify-content: space-around;170 }171 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #9097b2; font-size: 40px; }172 .nav-item.active { color: #273b9a; }173 .nav-icon { width: 64px; height: 64px; }174 .nav-icon svg { width: 100%; height: 100%; stroke-width: 6; }175 176</style>177</head>178<body>179<div id="render-target">180 181 <!-- Status bar -->182 <div class="status-bar">183 <div>3:31</div>184 <div class="status-right">185 <span class="dot"></span>186 <span class="dot"></span>187 <span class="dot"></span>188 <span class="dot"></span>189 <!-- battery -->190 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="#2f2f2f" stroke-width="4">191 <rect x="4" y="10" width="34" height="24" rx="4"></rect>192 <rect x="40" y="16" width="6" height="12" rx="2"></rect>193 <rect x="7" y="13" width="28" height="18" fill="#2f2f2f"></rect>194 </svg>195 </div>196 </div>197 198 <!-- Logo -->199 <div class="logo-wrap">200 <div class="logo-mark">GB</div>201 <div class="logo-text"><span class="g">get</span><span class="b">by</span><span class="f">ferry</span></div>202 </div>203 204 <!-- Transport modes icons -->205 <div class="modes">206 <div class="mode">207 <!-- Direction sign -->208 <svg viewBox="0 0 100 100">209 <path d="M50 10 v80" />210 <rect x="20" y="22" width="46" height="14" rx="6"></rect>211 <rect x="34" y="44" width="46" height="14" rx="6"></rect>212 </svg>213 </div>214 <div class="mode">215 <!-- Walk person -->216 <svg viewBox="0 0 100 100">217 <circle cx="50" cy="20" r="10"></circle>218 <path d="M50 32 l-12 20 l18 14" />219 <path d="M46 52 l-20 28" />220 <path d="M62 48 l16 28" />221 </svg>222 </div>223 <div class="mode">224 <!-- People group -->225 <svg viewBox="0 0 100 100">226 <circle cx="30" cy="30" r="10"></circle>227 <circle cx="50" cy="30" r="10"></circle>228 <circle cx="70" cy="30" r="10"></circle>229 <path d="M22 50 h20" />230 <path d="M42 50 h20" />231 <path d="M62 50 h20" />232 </svg>233 </div>234 <div class="mode">235 <!-- Bus -->236 <svg viewBox="0 0 100 100">237 <rect x="18" y="26" width="64" height="40" rx="8"></rect>238 <rect x="24" y="32" width="52" height="18" rx="4"></rect>239 <circle cx="32" cy="74" r="8"></circle>240 <circle cx="68" cy="74" r="8"></circle>241 </svg>242 </div>243 <div class="mode">244 <!-- Cup -->245 <svg viewBox="0 0 100 100">246 <rect x="32" y="26" width="36" height="38" rx="8"></rect>247 <path d="M68 34 h12 v18 a10 10 0 0 1 -10 10 h-2" />248 <rect x="36" y="20" width="28" height="6" rx="3"></rect>249 </svg>250 </div>251 <div class="mode">252 <!-- Ferry/Boat -->253 <svg viewBox="0 0 100 100">254 <rect x="40" y="20" width="12" height="16"></rect>255 <rect x="28" y="36" width="44" height="18" rx="4"></rect>256 <path d="M18 60 h64 l-12 12 h-40 z" />257 <path d="M16 80 q14 10 28 0 q14 10 28 0" />258 </svg>259 </div>260 <div class="mode">261 <!-- Car -->262 <svg viewBox="0 0 100 100">263 <path d="M18 60 h64 l-8 -18 h-48 z" />264 <rect x="26" y="46" width="16" height="10"></rect>265 <rect x="50" y="46" width="16" height="10"></rect>266 <circle cx="30" cy="72" r="8"></circle>267 <circle cx="70" cy="72" r="8"></circle>268 </svg>269 </div>270 <div class="mode">271 <!-- Airplane -->272 <svg viewBox="0 0 100 100">273 <path d="M10 64 l80 -14 -80 -14 20 14 z" />274 <path d="M70 36 l8 -14" />275 <path d="M70 64 l8 14" />276 </svg>277 </div>278 </div>279 280 <!-- Form content -->281 <div class="content">282 283 <!-- Depart From -->284 <div class="card">285 <div class="label">DEPART FROM</div>286 <div class="field-row">287 <div class="field-left">288 <div class="icon">289 <!-- Location pin -->290 <svg viewBox="0 0 64 64" fill="none" stroke="#2f378b" stroke-width="4">291 <path d="M32 6 c10 0 18 8 18 18 c0 12 -18 28 -18 28 s-18 -16 -18 -28 c0 -10 8 -18 18 -18 z"></path>292 <circle cx="32" cy="24" r="6"></circle>293 </svg>294 </div>295 <div class="text-main">Rome</div>296 </div>297 </div>298 </div>299 300 <!-- Travel To -->301 <div class="card">302 <div class="label">TRAVEL TO</div>303 <div class="field-row">304 <div class="field-left">305 <div class="icon">306 <svg viewBox="0 0 64 64" fill="none" stroke="#2f378b" stroke-width="4">307 <path d="M32 6 c10 0 18 8 18 18 c0 12 -18 28 -18 28 s-18 -16 -18 -28 c0 -10 8 -18 18 -18 z"></path>308 <circle cx="32" cy="24" r="6"></circle>309 </svg>310 </div>311 <div class="text-main">Florence</div>312 </div>313 <div class="swap">314 <!-- Swap arrows -->315 <svg viewBox="0 0 64 64">316 <path d="M14 24 h28 l-8 -8" />317 <path d="M50 40 h-28 l8 8" />318 </svg>319 </div>320 </div>321 </div>322 323 <!-- Dates -->324 <div class="two-col">325 <div class="card">326 <div class="label">DEPARTING ON</div>327 <div class="field-row">328 <div class="field-left">329 <div class="calendar">330 <!-- Calendar icon -->331 <svg viewBox="0 0 64 64">332 <rect x="8" y="16" width="48" height="36" rx="6"></rect>333 <path d="M8 26 h48"></path>334 <rect x="18" y="34" width="12" height="10"></rect>335 <rect x="34" y="34" width="12" height="10"></rect>336 <path d="M20 12 v8"></path>337 <path d="M44 12 v8"></path>338 </svg>339 </div>340 <div class="date-text">2023-11-15</div>341 </div>342 </div>343 </div>344 <div class="card">345 <div class="label">RETURNING ON</div>346 <div class="field-row">347 <div class="field-left">348 <div class="calendar">349 <svg viewBox="0 0 64 64">350 <rect x="8" y="16" width="48" height="36" rx="6"></rect>351 <path d="M8 26 h48"></path>352 <rect x="18" y="34" width="12" height="10"></rect>353 <rect x="34" y="34" width="12" height="10"></rect>354 <path d="M20 12 v8"></path>355 <path d="M44 12 v8"></path>356 </svg>357 </div>358 <div class="date-text">2023-11-20</div>359 </div>360 <div class="close-pill">361 <svg viewBox="0 0 48 48">362 <path d="M12 12 L36 36 M36 12 L12 36"></path>363 </svg>364 </div>365 </div>366 </div>367 </div>368 369 <!-- Passengers -->370 <div class="card">371 <div class="label">PASSENGERS</div>372 <div class="field-row">373 <div class="field-left">374 <div class="icon">375 <!-- Passengers icon -->376 <svg viewBox="0 0 64 64" fill="none" stroke="#2f378b" stroke-width="4">377 <circle cx="22" cy="20" r="8"></circle>378 <circle cx="42" cy="20" r="8"></circle>379 <path d="M12 42 c10 -10 20 -10 30 0"></path>380 <path d="M22 34 c12 0 20 6 24 16"></path>381 </svg>382 </div>383 <div class="text-main">1 passenger</div>384 </div>385 </div>386 </div>387 388 <!-- Search button -->389 <div class="search-btn">Search</div>390 391 </div>392 393 <!-- Bottom navigation -->394 <div class="bottom-nav">395 <div class="nav-item active">396 <div class="nav-icon">397 <svg viewBox="0 0 64 64" fill="none" stroke="#273b9a">398 <circle cx="28" cy="28" r="18"></circle>399 <path d="M40 40 l14 14" stroke-width="7"></path>400 </svg>401 </div>402 <div>Search</div>403 </div>404 <div class="nav-item">405 <div class="nav-icon">406 <svg viewBox="0 0 64 64" fill="none" stroke="#9097b2">407 <rect x="12" y="16" width="40" height="28" rx="6"></rect>408 <path d="M24 48 v6 M40 48 v6"></path>409 </svg>410 </div>411 <div>Booking</div>412 </div>413 <div class="nav-item">414 <div class="nav-icon">415 <svg viewBox="0 0 64 64" fill="none" stroke="#9097b2" stroke-width="6">416 <path d="M12 18 h40"></path>417 <path d="M12 32 h40"></path>418 <path d="M12 46 h40"></path>419 </svg>420 </div>421 <div>Menu</div>422 </div>423 </div>424 425</div>426</body>427</html>