GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>GetByBus UI - Static Mock</title>5<style>6 body{margin:0;padding:0;background:transparent;}7 #render-target{8 width:1080px;9 height:2400px;10 position:relative;11 overflow:hidden;12 background:#eef3fb;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14 color:#2d2f42;15 }16 17 /* Status bar */18 .top-status{19 position:absolute; top:0; left:0;20 width:100%; height:80px;21 padding:18px 36px;22 display:flex; align-items:center; justify-content:space-between;23 font-size:38px; color:#222;24 }25 .status-right{display:flex; align-items:center; gap:24px;}26 .status-icon svg{width:48px; height:48px; fill:none; stroke:#3a3a3a; stroke-width:6;}27 28 /* Logo */29 .logo-wrap{position:absolute; top:110px; left:0; width:100%; text-align:center;}30 .logo{31 display:inline-flex; align-items:center; gap:22px;32 font-weight:700; font-size:92px; letter-spacing:0.5px;33 }34 .logo .get{color:#64c15a;} /* green */35 .logo .by{color:#f6a640;} /* orange */36 .logo .bus{color:#3270d7;} /* blue */37 .logo-badge{38 width:120px; height:120px; border-radius:60px;39 background:#E0E0E0; border:1px solid #BDBDBD;40 display:flex; align-items:center; justify-content:center;41 color:#757575; font-size:28px;42 }43 44 /* Mini transport icons row */45 .transport-icons{46 position:absolute; top:310px; left:0; width:100%;47 display:flex; justify-content:center; gap:48px; align-items:center;48 }49 .ti{50 width:88px; height:88px; border-radius:14px;51 background:#ffffff; border:1px solid #d7d9e5;52 display:flex; align-items:center; justify-content:center;53 box-shadow:0 1px 0 rgba(0,0,0,0.04);54 }55 .ti svg{width:64px; height:64px; stroke:#3a4a7a; stroke-width:6; fill:none;}56 57 /* Cards */58 .form-area{position:absolute; top:420px; left:0; width:100%;}59 .card{60 width:1000px; margin:26px auto;61 background:#fff; border-radius:22px;62 box-shadow:0 2px 0 rgba(0,0,0,0.04);63 padding:30px 40px;64 }65 .label{66 font-size:32px; color:#7a7ea5; letter-spacing:1px;67 text-transform:uppercase; margin-bottom:20px;68 }69 .field{70 display:flex; align-items:center; gap:22px; font-size:54px; color:#1f233d;71 }72 .icon{73 width:56px; height:56px; display:flex; align-items:center; justify-content:center;74 }75 .icon svg{width:56px; height:56px; stroke:#394276; stroke-width:6; fill:none;}76 77 /* Swap button */78 .swap-btn{79 position:absolute; right:32px; top:50%; transform:translateY(-50%);80 width:72px; height:72px; border-radius:12px; background:#7dc84a;81 display:flex; align-items:center; justify-content:center;82 box-shadow:0 4px 0 rgba(0,0,0,0.09);83 }84 .swap-btn svg{width:44px; height:44px; stroke:#fff; stroke-width:6;}85 86 /* Dual date card inner grid */87 .date-grid{display:flex; gap:20px;}88 .date-box{flex:1; padding:10px 0;}89 .date-label{font-size:32px; color:#7a7ea5; text-transform:uppercase; margin-bottom:16px;}90 .date-field{display:flex; align-items:center; gap:18px; font-size:48px; color:#1f233d;}91 .date-field .icon svg{stroke:#394276;}92 93 /* Search button */94 .search-btn{95 width:1000px; margin:28px auto;96 height:120px; background:#8cc84b; color:#fff;97 border-radius:16px; font-size:56px; font-weight:700;98 display:flex; align-items:center; justify-content:center;99 box-shadow:0 6px 0 rgba(0,0,0,0.08);100 }101 102 /* Bottom navigation */103 .bottom-nav{104 position:absolute; bottom:0; left:0; width:100%; height:220px;105 background:#fff; box-shadow:0 -4px 10px rgba(0,0,0,0.06);106 display:flex; justify-content:space-around; align-items:center;107 }108 .nav-item{display:flex; flex-direction:column; align-items:center; gap:16px;}109 .nav-item svg{width:64px; height:64px; stroke:#7f84a6; stroke-width:6; fill:none;}110 .nav-item .label{font-size:40px; text-transform:none; color:#7f84a6;}111 .nav-item.active svg{stroke:#2b3e91;}112 .nav-item.active .label{color:#2b3e91;}113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="top-status">120 <div>3:31</div>121 <div class="status-right">122 <div class="status-icon">123 <!-- wifi -->124 <svg viewBox="0 0 24 24">125 <path d="M2 8c5-4 15-4 20 0"/>126 <path d="M5 12c3-3 11-3 14 0"/>127 <path d="M8 16c2-2 6-2 8 0"/>128 <circle cx="12" cy="20" r="1.5" fill="#3a3a3a" stroke="none"></circle>129 </svg>130 </div>131 <div class="status-icon">132 <!-- battery -->133 <svg viewBox="0 0 26 24">134 <rect x="2" y="5" width="18" height="14" rx="2"></rect>135 <rect x="21" y="9" width="3" height="6" rx="1"></rect>136 <rect x="4" y="7" width="12" height="10" fill="#3a3a3a" stroke="none"></rect>137 </svg>138 </div>139 </div>140 </div>141 142 <!-- Logo -->143 <div class="logo-wrap">144 <div class="logo">145 <div class="logo-badge">[IMG: Logo Mark]</div>146 <span class="get">get</span><span class="by">by</span><span class="bus">bus</span>147 <span style="color:#60c46a; font-size:50px;">®</span>148 </div>149 </div>150 151 <!-- Transport Icons -->152 <div class="transport-icons">153 <div class="ti">154 <!-- walk -->155 <svg viewBox="0 0 24 24">156 <circle cx="9" cy="4" r="2"></circle>157 <path d="M9 6l2 4 3 1"/>158 <path d="M8 10l-2 5"/>159 <path d="M13 11l2 5"/>160 </svg>161 </div>162 <div class="ti">163 <!-- group -->164 <svg viewBox="0 0 24 24">165 <circle cx="7" cy="6" r="3"></circle>166 <circle cx="17" cy="6" r="3"></circle>167 <path d="M2 20c1-4 6-4 8-4s7 0 8 4"/>168 </svg>169 </div>170 <div class="ti">171 <!-- bus -->172 <svg viewBox="0 0 24 24">173 <rect x="3" y="4" width="18" height="12" rx="2"></rect>174 <rect x="5" y="6" width="14" height="6"></rect>175 <circle cx="7" cy="18" r="2"></circle>176 <circle cx="17" cy="18" r="2"></circle>177 </svg>178 </div>179 <div class="ti">180 <!-- cup -->181 <svg viewBox="0 0 24 24">182 <path d="M5 6h9v8a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V6z"/>183 <path d="M14 7h4a2 2 0 0 1 0 4h-2"/>184 </svg>185 </div>186 <div class="ti">187 <!-- ferry -->188 <svg viewBox="0 0 24 24">189 <path d="M3 12h12l3 3H6z"/>190 <path d="M6 9h6V6H9z"/>191 <path d="M2 18c2 2 4 2 6 0s4-2 6 0 4 2 6 0"/>192 </svg>193 </div>194 <div class="ti">195 <!-- car -->196 <svg viewBox="0 0 24 24">197 <path d="M3 14l2-5h10l2 5"/>198 <rect x="4" y="14" width="16" height="4" rx="2"></rect>199 <circle cx="7" cy="19" r="2"></circle>200 <circle cx="17" cy="19" r="2"></circle>201 </svg>202 </div>203 <div class="ti">204 <!-- plane -->205 <svg viewBox="0 0 24 24">206 <path d="M2 12l9 1 9-1-9-2z"/>207 <path d="M11 13l-2 6"/>208 <path d="M13 13l2 6"/>209 </svg>210 </div>211 </div>212 213 <!-- Form area -->214 <div class="form-area">215 216 <!-- Depart From -->217 <div class="card">218 <div class="label">Depart From</div>219 <div class="field">220 <div class="icon">221 <!-- location pin -->222 <svg viewBox="0 0 24 24">223 <path d="M12 22s-7-8-7-12a7 7 0 1 1 14 0c0 4-7 12-7 12z"/>224 <circle cx="12" cy="10" r="3"></circle>225 </svg>226 </div>227 <div>Rome</div>228 </div>229 </div>230 231 <!-- Travel To -->232 <div class="card" style="position:relative;">233 <div class="label">Travel To</div>234 <div class="field">235 <div class="icon">236 <svg viewBox="0 0 24 24">237 <path d="M12 22s-7-8-7-12a7 7 0 1 1 14 0c0 4-7 12-7 12z"/>238 <circle cx="12" cy="10" r="3"></circle>239 </svg>240 </div>241 <div>Florence</div>242 </div>243 <div class="swap-btn">244 <!-- swap arrows -->245 <svg viewBox="0 0 24 24">246 <path d="M8 4v8M8 4l-3 3M8 4l3 3"/>247 <path d="M16 20v-8M16 20l-3-3M16 20l3-3"/>248 </svg>249 </div>250 </div>251 252 <!-- Dates -->253 <div class="card">254 <div class="date-grid">255 <div class="date-box">256 <div class="date-label">Departing On</div>257 <div class="date-field">258 <div class="icon">259 <!-- calendar -->260 <svg viewBox="0 0 24 24">261 <rect x="3" y="5" width="18" height="16" rx="2"></rect>262 <path d="M3 9h18"/>263 <path d="M7 3v4M17 3v4"/>264 </svg>265 </div>266 <div>2023-11-15</div>267 </div>268 </div>269 <div class="date-box">270 <div class="date-label">Returning On</div>271 <div class="date-field">272 <div class="icon">273 <svg viewBox="0 0 24 24">274 <rect x="3" y="5" width="18" height="16" rx="2"></rect>275 <path d="M3 9h18"/>276 <path d="M7 3v4M17 3v4"/>277 </svg>278 </div>279 <div>Optional</div>280 </div>281 </div>282 </div>283 </div>284 285 <!-- Passengers -->286 <div class="card">287 <div class="label">Passengers</div>288 <div class="field">289 <div class="icon">290 <!-- people icon -->291 <svg viewBox="0 0 24 24">292 <circle cx="8" cy="7" r="3"></circle>293 <circle cx="15.5" cy="9" r="2.5"></circle>294 <path d="M3 20c1.5-4.5 8-4.5 10 0"/>295 <path d="M12 18c1-3 5-3 6.5 0"/>296 </svg>297 </div>298 <div>1 passenger</div>299 </div>300 </div>301 302 <!-- Search button -->303 <div class="search-btn">Search</div>304 </div>305 306 <!-- Bottom Navigation -->307 <div class="bottom-nav">308 <div class="nav-item active">309 <svg viewBox="0 0 24 24">310 <circle cx="11" cy="11" r="6"></circle>311 <path d="M20 20l-4-4"/>312 </svg>313 <div class="label">Search</div>314 </div>315 <div class="nav-item">316 <svg viewBox="0 0 24 24">317 <rect x="4" y="6" width="16" height="10" rx="2"></rect>318 <path d="M6 6v-2h12v2"/>319 <circle cx="8" cy="16" r="1.5"></circle>320 <circle cx="16" cy="16" r="1.5"></circle>321 </svg>322 <div class="label">Booking</div>323 </div>324 <div class="nav-item">325 <svg viewBox="0 0 24 24">326 <path d="M4 6h16M4 12h16M4 18h16"/>327 </svg>328 <div class="label">Menu</div>329 </div>330 </div>331 332</div>333</body>334</html>