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>Greyhound Booking UI</title>7<style>8 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#f6f7f8;13 color:#0e3c46;14 }15 16 /* Header / status area */17 .top-header {18 position:absolute; left:0; top:0; width:100%; height:300px;19 background:#0c2f36;20 }21 .status-row {22 height:100px; padding:0 40px; color:#ffffff; font-weight:600;23 display:flex; align-items:center; justify-content:space-between;24 font-size:40px;25 }26 .status-left { letter-spacing:1px; }27 .status-right { display:flex; align-items:center; gap:26px; opacity:0.95; }28 .icon-wifi, .icon-battery { width:44px; height:44px; }29 .logo-wrap {30 position:absolute; left:40px; top:150px; width:340px; height:70px;31 display:flex; align-items:center;32 }33 .img-placeholder {34 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;35 display:flex; align-items:center; justify-content:center; text-align:center;36 }37 .logo-img { width:340px; height:70px; border-radius:6px; }38 /* Form area */39 .content {40 position:absolute; left:0; top:300px; width:100%; padding:30px 30px 0;41 }42 .field-card {43 background:#ffffff; border:2px solid #D6D6D6; border-radius:22px;44 padding:28px 32px 34px; margin-bottom:26px;45 box-shadow:0 2px 0 rgba(0,0,0,0.03);46 position:relative;47 }48 .field-label {49 font-size:28px; color:#4c6670; margin-bottom:16px; position:relative;50 }51 .label-line {52 position:absolute; left:100px; right:10px; top:50%;53 border-top:2px solid #ccd6da; content:"";54 }55 .field-value { font-size:52px; color:#1a3f47; }56 .swap-btn {57 position:absolute; right:20px; bottom:-34px;58 width:120px; height:120px; border-radius:60px;59 background:#F1F1F1; border:2px solid #CFCFCF;60 display:flex; align-items:center; justify-content:center;61 box-shadow:0 2px 0 rgba(0,0,0,0.04);62 }63 .grid-2 { display:flex; gap:26px; }64 .grid-2 .field-card { flex:1; }65 .inline-add {66 position:absolute; right:26px; bottom:26px; width:64px; height:64px;67 border-radius:32px; border:2px solid #CFCFCF; background:#F3F3F3;68 display:flex; align-items:center; justify-content:center; color:#385b64; font-size:44px; font-weight:700;69 }70 .passengers .field-value { font-size:46px; }71 .cta-btn {72 width:960px; height:120px; border-radius:20px; background:#ba651f;73 color:#fff; font-size:48px; font-weight:700; display:flex; align-items:center; justify-content:center;74 margin:28px auto 36px;75 box-shadow:0 8px 0 rgba(0,0,0,0.08);76 }77 78 /* Promo card below form */79 .promo-card {80 margin:20px 24px;81 background:#ffffff; border-radius:20px; border:1px solid #E1E1E1;82 overflow:hidden;83 box-shadow:0 2px 0 rgba(0,0,0,0.03);84 }85 .promo-header { padding:24px 28px; color:#6d7f86; font-size:28px; letter-spacing:0.3px; }86 .promo-title { padding:0 28px 18px; font-size:54px; font-weight:800; color:#1b3f47; }87 .promo-image { width:100%; height:520px; }88 .promo-text { padding:24px 28px; font-size:38px; color:#5a6e76; line-height:1.35; }89 .promo-link { padding:0 28px 34px; font-size:40px; color:#0e3c46; font-weight:800; letter-spacing:1px; }90 91 /* Bottom navigation */92 .bottom-nav {93 position:absolute; left:0; bottom:0; width:100%; height:170px;94 background:#f0f0f0; border-top:1px solid #d9d9d9;95 display:flex; align-items:center; justify-content:space-around;96 }97 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#5c6c73; font-size:34px; }98 .nav-item.active { color:#0e3c46; font-weight:800; }99 .nav-icon { width:64px; height:64px; }100 .home-indicator {101 position:absolute; left:50%; transform:translateX(-50%);102 bottom:20px; width:360px; height:12px; border-radius:6px; background:#ffffff; box-shadow:0 0 0 1px rgba(0,0,0,0.06) inset;103 }104 105 /* Modal overlay */106 .overlay {107 position:absolute; left:0; top:0; width:100%; height:100%;108 background:rgba(12,47,54,0.45);109 }110 .modal {111 position:absolute; left:120px; top:840px; width:840px;112 background:#ffffff; border-radius:16px;113 box-shadow:0 18px 60px rgba(0,0,0,0.3);114 padding:40px 40px 20px;115 }116 .modal-illustration {117 width:220px; height:220px; border-radius:110px; margin:18px auto 16px;118 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;119 display:flex; align-items:center; justify-content:center;120 box-shadow:0 0 0 7px #f5f7f8 inset;121 }122 .modal-title {123 text-align:center; font-size:50px; color:#0e3c46; font-weight:800; margin:24px 24px 12px;124 }125 .modal-text {126 text-align:center; font-size:36px; color:#5a6e76; margin:0 24px 24px; line-height:1.45;127 }128 .modal-actions {129 display:flex; align-items:center; justify-content:space-between; padding:28px 20px 10px;130 border-top:1px solid #e6eaec;131 }132 .modal-btn {133 font-size:42px; font-weight:900; letter-spacing:2px; color:#0e3c46; text-transform:uppercase;134 }135 136 /* Simple SVG helpers */137 svg { display:block; }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Top header with status bar -->144 <div class="top-header">145 <div class="status-row">146 <div class="status-left">10:14</div>147 <div class="status-right">148 <!-- Light app badges as dots -->149 <span>•</span>150 <svg class="icon-wifi" viewBox="0 0 24 24">151 <path d="M2 9c6-5 14-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>152 <path d="M6 13c4-3 8-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>153 <circle cx="12" cy="17" r="2" fill="#fff"/>154 </svg>155 <svg class="icon-battery" viewBox="0 0 28 16">156 <rect x="1" y="1" width="22" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>157 <rect x="3" y="3" width="16" height="10" rx="1" fill="#fff"/>158 <rect x="23" y="5" width="4" height="6" rx="1" fill="#fff"/>159 </svg>160 </div>161 </div>162 <div class="logo-wrap">163 <div class="img-placeholder logo-img">[IMG: Greyhound logo]</div>164 </div>165 </div>166 167 <!-- Booking form -->168 <div class="content">169 <div class="field-card">170 <div class="field-label">From <span class="label-line"></span></div>171 <div class="field-value">San Francisco, CA</div>172 <div class="swap-btn" title="Swap">173 <svg viewBox="0 0 64 64" width="64" height="64">174 <path d="M20 22l8-8 8 8" fill="none" stroke="#0e3c46" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>175 <path d="M28 14v24" fill="none" stroke="#0e3c46" stroke-width="3" stroke-linecap="round"/>176 <path d="M44 42l-8 8-8-8" fill="none" stroke="#0e3c46" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>177 <path d="M36 50V26" fill="none" stroke="#0e3c46" stroke-width="3" stroke-linecap="round"/>178 </svg>179 </div>180 </div>181 182 <div class="field-card">183 <div class="field-label">To <span class="label-line"></span></div>184 <div class="field-value">Albenga</div>185 </div>186 187 <div class="grid-2">188 <div class="field-card">189 <div class="field-label">Departing <span class="label-line"></span></div>190 <div class="field-value">Oct 25, 2023</div>191 </div>192 <div class="field-card">193 <div class="field-label">Return <span class="label-line"></span></div>194 <div class="field-value" style="color:#7b9098;">Tap to add</div>195 <div class="inline-add">+</div>196 </div>197 </div>198 199 <div class="field-card passengers">200 <div class="field-label">Passengers <span class="label-line"></span></div>201 <div class="field-value">1 adult</div>202 </div>203 204 <div class="cta-btn">Search trips</div>205 206 <!-- Promo content below -->207 <div class="promo-card">208 <div class="promo-header">WHAT'S NEW</div>209 <div class="promo-title">Greyhound + FlixBus</div>210 <div class="img-placeholder promo-image">[IMG: Greyhound and FlixBus buses]</div>211 <div class="promo-text">Our network has expanded! See how this benefits you.</div>212 <div class="promo-link">FIND OUT MORE</div>213 </div>214 </div>215 216 <!-- Modal overlay -->217 <div class="overlay"></div>218 <div class="modal">219 <div class="modal-illustration">[IMG: Notification on phone]</div>220 <div class="modal-title">Be always updated about your trips!</div>221 <div class="modal-text">222 Don’t miss any information about your trips or our promotions.223 We will notify you when there are changes, delays or any relevant updates.224 </div>225 <div class="modal-actions">226 <div class="modal-btn">NOT NOW</div>227 <div class="modal-btn">YES, PLEASE</div>228 </div>229 </div>230 231 <!-- Bottom navigation -->232 <div class="bottom-nav">233 <div class="nav-item active">234 <svg class="nav-icon" viewBox="0 0 24 24">235 <circle cx="12" cy="12" r="9" fill="none" stroke="#0e3c46" stroke-width="2"/>236 <circle cx="12" cy="12" r="2" fill="#0e3c46"/>237 </svg>238 <div>Booking</div>239 </div>240 <div class="nav-item">241 <svg class="nav-icon" viewBox="0 0 24 24">242 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#5c6c73" stroke-width="2"/>243 <circle cx="8" cy="12" r="2" fill="#5c6c73"/>244 <path d="M18 6v3" stroke="#5c6c73" stroke-width="2"/>245 </svg>246 <div>Tickets</div>247 </div>248 <div class="nav-item">249 <svg class="nav-icon" viewBox="0 0 24 24">250 <path d="M12 3c3.3 0 6 2.7 6 6 0 4.5-6 12-6 12S6 13.5 6 9c0-3.3 2.7-6 6-6z" fill="none" stroke="#5c6c73" stroke-width="2"/>251 <circle cx="12" cy="9" r="2.5" fill="#5c6c73"/>252 </svg>253 <div>Stops</div>254 </div>255 <div class="nav-item">256 <svg class="nav-icon" viewBox="0 0 24 24">257 <circle cx="12" cy="12" r="10" fill="none" stroke="#5c6c73" stroke-width="2"/>258 <circle cx="12" cy="7" r="1.8" fill="#5c6c73"/>259 <path d="M12 11v7" stroke="#5c6c73" stroke-width="2"/>260 </svg>261 <div>More</div>262 </div>263 <div class="home-indicator"></div>264 </div>265 266</div>267</body>268</html>