GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Greyhound Booking UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #1e3368;20 color: #fff;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-weight: 600;26 font-size: 36px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 26px;32 opacity: 0.9;33 }34 .icon {35 width: 40px;36 height: 40px;37 }38 39 /* Main header */40 .title-bar {41 background: #1e3368;42 color: #fff;43 padding: 30px 40px 40px 40px;44 border-bottom: 8px solid #154a57;45 }46 .title-row {47 display: flex;48 align-items: center;49 gap: 30px;50 }51 .title-text {52 font-size: 54px;53 font-weight: 700;54 line-height: 1.2;55 }56 .subtitle {57 color: #d7e3f1;58 font-size: 34px;59 margin-top: 8px;60 }61 .back-icon {62 width: 60px;63 height: 60px;64 }65 66 /* Brand strip */67 .brand-strip {68 background: #154a57;69 color: #fff;70 height: 180px;71 padding: 24px 40px;72 display: flex;73 align-items: center;74 justify-content: space-between;75 }76 .brand-center {77 flex: 1;78 display: flex;79 align-items: center;80 justify-content: center;81 }82 .img-placeholder {83 background: #E0E0E0;84 border: 1px solid #BDBDBD;85 color: #757575;86 display: flex;87 justify-content: center;88 align-items: center;89 font-size: 32px;90 border-radius: 12px;91 }92 .timer-badge {93 display: flex;94 align-items: center;95 gap: 18px;96 background: #f7f7f7;97 color: #1e3368;98 padding: 16px 22px;99 border-radius: 16px;100 font-weight: 700;101 box-shadow: 0 2px 0 rgba(0,0,0,0.1);102 }103 .timer-icon {104 width: 64px; height: 64px;105 }106 107 /* Trip card */108 .trip-card-wrap {109 background: #154a57;110 padding: 20px 40px 30px 40px;111 }112 .trip-card {113 background: #ffffff;114 border-radius: 26px;115 border: 2px solid #cfd8dc;116 padding: 26px 28px;117 box-shadow: 0 6px 0 rgba(0,0,0,0.15);118 color: #253238;119 font-size: 36px;120 font-weight: 600;121 }122 .trip-sub {123 font-size: 32px;124 color: #546e7a;125 margin-top: 6px;126 font-weight: 500;127 }128 129 /* Sections */130 .section {131 padding: 26px 40px;132 }133 .section-header {134 display: flex;135 align-items: center;136 gap: 20px;137 color: #0e4f5a;138 font-size: 48px;139 font-weight: 800;140 margin-bottom: 22px;141 }142 .badge {143 background: #0e4f5a;144 color: #ffffff;145 width: 70px; height: 70px;146 border-radius: 14px;147 display: flex;148 align-items: center;149 justify-content: center;150 font-weight: 800;151 font-size: 38px;152 }153 .divider {154 height: 2px; background: #e0e0e0; margin: 20px 0;155 }156 157 /* Inputs */158 .input-row {159 display: flex;160 gap: 24px;161 }162 .input {163 flex: 1;164 height: 140px;165 border: 2px solid #d7dee3;166 border-radius: 24px;167 padding: 26px;168 font-size: 36px;169 color: #6a7a85;170 }171 172 /* Generic card list items */173 .list-card {174 background: #ffffff;175 border: 2px solid #e2e6ea;176 border-radius: 26px;177 padding: 30px;178 display: flex;179 align-items: center;180 justify-content: space-between;181 margin-bottom: 24px;182 box-shadow: 0 2px 0 rgba(0,0,0,0.06);183 }184 .left-icon {185 width: 80px;186 height: 80px;187 margin-right: 26px;188 flex: 0 0 auto;189 }190 .list-content {191 flex: 1;192 }193 .list-title {194 font-size: 42px;195 color: #37474f;196 font-weight: 700;197 }198 .list-sub {199 font-size: 34px;200 color: #6c7a80;201 margin-top: 8px;202 font-weight: 600;203 }204 .chevron {205 width: 56px; height: 56px; flex: 0 0 auto;206 }207 208 /* Extras special card */209 .extras-card {210 background: #ffffff;211 border: 2px solid #e2e6ea;212 border-radius: 26px;213 overflow: hidden;214 box-shadow: 0 2px 0 rgba(0,0,0,0.06);215 margin-bottom: 24px;216 }217 .extras-top {218 display: flex;219 padding: 30px;220 border-bottom: 1px solid #eef1f4;221 }222 .icon-square {223 width: 120px;224 height: 120px;225 border-radius: 20px;226 background: #e6f0e6;227 display: flex;228 align-items: center;229 justify-content: center;230 margin-right: 26px;231 }232 .extras-title {233 font-size: 42px;234 color: #37474f;235 font-weight: 800;236 }237 .extras-desc {238 font-size: 32px;239 color: #6c7a80;240 margin-top: 6px;241 }242 .extras-row {243 display: flex;244 align-items: center;245 padding: 26px 30px;246 }247 .extras-row .list-content .list-title {248 font-size: 40px;249 }250 .extras-price {251 font-size: 42px;252 color: #0e4f5a;253 font-weight: 800;254 margin-top: 18px;255 }256 .stepper {257 margin-left: auto;258 display: flex;259 align-items: center;260 gap: 20px;261 }262 .step-btn {263 width: 120px;264 height: 110px;265 border: 2px solid #d7dee3;266 border-radius: 18px;267 display: flex;268 align-items: center;269 justify-content: center;270 background: #ffffff;271 }272 .step-value {273 width: 120px;274 height: 110px;275 border: 2px solid #eaeef2;276 border-radius: 18px;277 display: flex;278 align-items: center;279 justify-content: center;280 font-size: 44px;281 color: #37474f;282 font-weight: 800;283 background: #f8f9fb;284 }285 286 /* Bottom bar */287 .bottom-bar {288 position: absolute;289 left: 0;290 right: 0;291 bottom: 0;292 height: 130px;293 background: #132a59;294 }295 .gesture {296 position: absolute;297 bottom: 38px;298 left: 50%;299 transform: translateX(-50%);300 width: 360px;301 height: 14px;302 background: #e6e6e6;303 border-radius: 8px;304 opacity: 0.6;305 }306</style>307</head>308<body>309<div id="render-target">310 311 <!-- Status bar -->312 <div class="status-bar">313 <div>9:26</div>314 <div class="status-icons">315 <!-- Simple status icons -->316 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg>317 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="6" width="18" height="12" rx="2"></rect><rect x="7" y="3" width="10" height="3"></rect></svg>318 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 2v6M6 8l6-6 6 6"/></svg>319 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/><circle cx="6" cy="12" r="2"/></svg>320 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg>321 <div style="font-size: 34px;">100%</div>322 </div>323 </div>324 325 <!-- Title bar -->326 <div class="title-bar">327 <div class="title-row">328 <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M15 6l-6 6 6 6"/></svg>329 <div>330 <div class="title-text">New York - New Hyde Park</div>331 <div class="subtitle">Wed, Nov 22, 1 Passenger</div>332 </div>333 </div>334 </div>335 336 <!-- Brand strip -->337 <div class="brand-strip">338 <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M15 6l-6 6 6 6"/></svg>339 <div class="brand-center">340 <div class="img-placeholder" style="width: 540px; height: 110px;">[IMG: Greyhound logo]</div>341 </div>342 <div class="timer-badge">343 <svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="#1e3368" stroke-width="2">344 <circle cx="12" cy="12" r="10" fill="#ffffff"></circle>345 <path d="M12 7v5l4 2" />346 </svg>347 <div style="font-size: 42px;">05:48</div>348 </div>349 </div>350 351 <!-- Trip card -->352 <div class="trip-card-wrap">353 <div class="trip-card">354 New York Port Auth... → Queens Vil (7-11 - Jd Fo...)355 <div class="trip-sub">Wed, Nov 22, 2:10 PM - 3:35 PM</div>356 </div>357 </div>358 359 <!-- Section 1: Passengers -->360 <div class="section">361 <div class="section-header">362 <div class="badge">1</div>363 <div>Passengers</div>364 </div>365 <div class="input-row">366 <div class="input">First name (required)</div>367 <div class="input">Last name (required)</div>368 </div>369 </div>370 371 <div class="divider"></div>372 373 <!-- Section 2: Seat Reservation -->374 <div class="section">375 <div class="section-header">376 <div class="badge">2</div>377 <div>Seat Reservation</div>378 </div>379 380 <div class="list-card">381 <div style="display:flex; align-items:center; flex:1;">382 <svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="#88949c" stroke-width="2">383 <rect x="6" y="4" width="7" height="8" rx="2"></rect>384 <path d="M8 14h9l-1 4H7"></path>385 </svg>386 <div class="list-content">387 <div class="list-title">Select your seat</div>388 <div class="list-sub">from $1.99</div>389 </div>390 </div>391 <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9ea7ad" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg>392 </div>393 394 <div class="list-card">395 <div style="display:flex; align-items:center; flex:1;">396 <svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="#88949c" stroke-width="2">397 <rect x="6" y="4" width="7" height="8" rx="2"></rect>398 <path d="M8 14h9l-1 4H7"></path>399 <path d="M18 7h4M20 5l2 2-2 2"/>400 </svg>401 <div class="list-content">402 <div class="list-title">Travel neighbor-free</div>403 <div class="list-sub">$6.50</div>404 </div>405 </div>406 <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#9ea7ad" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg>407 </div>408 </div>409 410 <div class="divider"></div>411 412 <!-- Section 3: Extras -->413 <div class="section">414 <div class="section-header">415 <div class="badge">3</div>416 <div>Extras</div>417 </div>418 419 <div class="extras-card">420 <div class="extras-top">421 <div class="icon-square">422 <svg viewBox="0 0 24 24" width="72" height="72" fill="none" stroke="#607d69" stroke-width="2">423 <rect x="6" y="7" width="10" height="12" rx="2"></rect>424 <path d="M9 7V5h4v2"></path>425 <rect x="14" y="10" width="6" height="9" rx="2"></rect>426 </svg>427 </div>428 <div>429 <div class="extras-title">Included per person</div>430 <div class="extras-desc">1 Carry-on bag | 25 lb · 16×12×7 in</div>431 <div class="extras-desc">1 Stored bag | 50 lb · 31×20×12 in</div>432 </div>433 </div>434 435 <div class="extras-row">436 <svg class="left-icon" viewBox="0 0 24 24" fill="none" stroke="#88949c" stroke-width="2">437 <rect x="5" y="6" width="10" height="12" rx="2"></rect>438 <path d="M8 6V4h4v2"></path>439 <circle cx="19" cy="9" r="3"></circle>440 <path d="M18 9h2"></path>441 </svg>442 <div class="list-content">443 <div class="list-title">Excess baggage</div>444 <div class="list-sub">50 lb · 31×20×12 in</div>445 <div class="extras-price">+ $19.99</div>446 </div>447 <div class="stepper">448 <div class="step-btn">449 <svg viewBox="0 0 24 24" width="60" height="60" fill="none" stroke="#63727a" stroke-width="3"><path d="M5 12h14"/></svg>450 </div>451 <div class="step-value">0</div>452 <div class="step-btn">453 <svg viewBox="0 0 24 24" width="60" height="60" fill="none" stroke="#63727a" stroke-width="3"><path d="M12 5v14M5 12h14"/></svg>454 </div>455 </div>456 </div>457 </div>458 </div>459 460 <!-- Bottom bar / gesture area -->461 <div class="bottom-bar">462 <div class="gesture"></div>463 </div>464</div>465</body>466</html>