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>Infobus UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #E8F2FB;12 border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.12);13 }14 /* Header */15 .topbar {16 position: absolute; top: 0; left: 0; width: 100%; height: 220px;17 background: #2F3B46;18 color: #fff;19 }20 .brand {21 position: absolute; left: 0; right: 0; top: 72px; text-align: center;22 font-weight: 700; letter-spacing: 10px; font-size: 64px;23 }24 .top-actions {25 position: absolute; right: 36px; top: 80px; display: flex; gap: 28px;26 }27 .icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.9; }28 /* Content wrapper */29 .content { position: absolute; top: 220px; left: 36px; right: 36px; bottom: 220px; }30 .card {31 background: #fff; border-radius: 28px; box-shadow: 0 2px 0 rgba(0,0,0,0.04);32 }33 /* Tabs card */34 .tabs { padding: 36px 24px; margin-top: 18px; }35 .tabs-row { display: flex; justify-content: space-around; align-items: center; text-align: center; }36 .tab {37 width: 19%; color: #44515E;38 }39 .tab svg { display: block; margin: 0 auto 12px auto; }40 .tab .label { font-size: 36px; }41 .tab.active .label { color: #15A8FF; font-weight: 600; }42 .tab .icon-stroke { stroke: #44515E; }43 .tab.active .icon-stroke { stroke: #15A8FF; }44 /* Search form card */45 .search-card { margin-top: 24px; padding: 24px 32px 36px 32px; position: relative; }46 .field { padding: 28px 0; display: flex; align-items: center; gap: 22px; font-size: 40px; color: #5B6772; }47 .field-divider { height: 1px; background: #E3EBF2; margin: 0; }48 .arrow-tri { width: 0; height: 0; border-left: 22px solid #3C4652; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }49 .arrow-tri.blue { border-left-color: #15A8FF; }50 .swap {51 position: absolute; right: 28px; top: 144px; width: 84px; height: 84px;52 background: #2F3B46; border-radius: 50%; display: flex; align-items: center; justify-content: center;53 }54 .dates { display: flex; align-items: center; gap: 28px; padding-top: 28px; font-size: 34px; color: #8A96A2; }55 .dates .there { display: flex; flex-direction: column; gap: 8px; width: 300px; }56 .dates .date { color: #15A8FF; font-size: 40px; }57 .dates .divider { width: 2px; height: 44px; background: #E3EBF2; }58 .plus { color: #15A8FF; font-size: 60px; font-weight: 400; margin-left: auto; margin-right: 8px; }59 .search-btn {60 margin-top: 36px; background: #15A8FF; color: #fff; border-radius: 28px;61 height: 140px; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 700;62 }63 /* Checkbox card */64 .checkbox-card { margin-top: 24px; padding: 32px; display: flex; align-items: center; gap: 24px; font-size: 40px; color: #3C4652; }65 .checkbox {66 width: 54px; height: 54px; border: 3px solid #C9D4DF; border-radius: 10px; background: #fff;67 }68 /* History card */69 .history-card { margin-top: 24px; padding: 32px; display: flex; align-items: center; gap: 24px; font-size: 42px; color: #5B6772; }70 /* Cheaper card */71 .promo-card { margin-top: 24px; padding: 32px; color: #3C4652; }72 .promo-title { display: flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 600; margin-bottom: 18px; }73 .promo-text { font-size: 36px; line-height: 1.5; color: #5B6772; margin-bottom: 24px; }74 .subscribe {75 display: flex; border: 2px solid #D4DEE8; border-radius: 24px; overflow: hidden;76 }77 .subscribe input {78 flex: 1; border: none; padding: 32px; font-size: 36px; outline: none; color: #5B6772;79 }80 .subscribe .btn {81 width: 360px; background: #15A8FF; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700;82 }83 /* About card (partial) */84 .about-card { margin-top: 24px; padding: 32px; font-size: 42px; color: #5B6772; }85 /* Bottom nav */86 .bottom-nav {87 position: absolute; left: 0; right: 0; bottom: 50px; height: 180px; background: #2F3B46; color: #DDE6EF;88 display: flex; justify-content: space-around; align-items: center;89 }90 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 34px; }91 .nav-item.active { color: #ffffff; }92 .gesture { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; width: 240px; height: 10px; background: #D7D7D7; border-radius: 8px; }93</style>94</head>95<body>96<div id="render-target">97 <!-- Header -->98 <div class="topbar">99 <div class="brand">INFOBUS</div>100 <div class="top-actions">101 <!-- Headphones icon -->102 <div class="icon-btn">103 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">104 <path d="M4 12a8 8 0 0116 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>105 <rect x="3" y="12" width="4" height="7" rx="2" fill="#FFFFFF"/>106 <rect x="17" y="12" width="4" height="7" rx="2" fill="#FFFFFF"/>107 </svg>108 </div>109 <!-- Share icon -->110 <div class="icon-btn">111 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">112 <circle cx="6" cy="12" r="2" fill="#FFFFFF"/>113 <circle cx="18" cy="6" r="2" fill="#FFFFFF"/>114 <circle cx="18" cy="18" r="2" fill="#FFFFFF"/>115 <path d="M8 12l8-6M8 12l8 6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>116 </svg>117 </div>118 </div>119 </div>120 121 <div class="content">122 <!-- Tabs -->123 <div class="card tabs">124 <div class="tabs-row">125 <div class="tab">126 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">127 <rect x="3" y="9" width="18" height="6" rx="2" stroke="#44515E" stroke-width="2"/>128 <circle cx="7" cy="17" r="2" fill="#44515E"/>129 <circle cx="17" cy="17" r="2" fill="#44515E"/>130 <path d="M7 6h10" stroke="#44515E" stroke-width="2" stroke-linecap="round"/>131 </svg>132 <div class="label">All</div>133 </div>134 <div class="tab">135 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">136 <rect x="5" y="6" width="14" height="10" rx="2" stroke="#44515E" stroke-width="2"/>137 <circle cx="8" cy="18" r="2" fill="#44515E"/><circle cx="16" cy="18" r="2" fill="#44515E"/>138 </svg>139 <div class="label">Bus</div>140 </div>141 <div class="tab active">142 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">143 <rect x="6" y="5" width="12" height="11" rx="3" stroke="#15A8FF" stroke-width="2"/>144 <path d="M7 16h10" stroke="#15A8FF" stroke-width="2" stroke-linecap="round"/>145 <circle cx="9" cy="19" r="2" fill="#15A8FF"/><circle cx="15" cy="19" r="2" fill="#15A8FF"/>146 </svg>147 <div class="label">Train</div>148 </div>149 <div class="tab">150 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">151 <path d="M3 12l8-3 0 4 10 4-1 2-9-4-3 4-2-1 3-4-6-2z" fill="#44515E"/>152 </svg>153 <div class="label">Plane</div>154 </div>155 <div class="tab">156 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">157 <rect x="6" y="5" width="10" height="12" rx="2" stroke="#44515E" stroke-width="2"/>158 <rect x="9" y="2" width="4" height="3" fill="#44515E"/>159 <path d="M8 19h8" stroke="#44515E" stroke-width="2" stroke-linecap="round"/>160 </svg>161 <div class="label">Parcels</div>162 </div>163 </div>164 </div>165 166 <!-- Search card -->167 <div class="card search-card">168 <div class="field">169 <div class="arrow-tri"></div>170 <div>From</div>171 </div>172 <div class="field-divider"></div>173 <div class="field">174 <div class="arrow-tri blue"></div>175 <div>To</div>176 </div>177 <div class="field-divider"></div>178 179 <!-- swap icon -->180 <div class="swap">181 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">182 <path d="M7 4l-3 3 3 3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>183 <path d="M4 7h10" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>184 <path d="M17 14l3-3-3-3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>185 <path d="M20 11H10" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>186 </svg>187 </div>188 189 <div class="dates">190 <div class="there">191 <div>There</div>192 <div class="date">03.11.2023</div>193 </div>194 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">195 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#2F3B46" stroke-width="2"/>196 <path d="M7 3v4M17 3v4M3 10h18" stroke="#2F3B46" stroke-width="2"/>197 </svg>198 <div class="divider"></div>199 <div>Return</div>200 <div class="plus">+</div>201 </div>202 203 <div class="search-btn">Search</div>204 </div>205 206 <!-- Checkbox card -->207 <div class="card checkbox-card">208 <div class="checkbox"></div>209 <div>Including sold out routes</div>210 </div>211 212 <!-- Search history card -->213 <div class="card history-card">214 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">215 <path d="M12 5v4l3 2" stroke="#6C7A87" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>216 <path d="M21 12a9 9 0 10-3.2 6.8" stroke="#6C7A87" stroke-width="2" stroke-linecap="round"/>217 <path d="M21 16v4h-4" stroke="#6C7A87" stroke-width="2" stroke-linecap="round"/>218 </svg>219 <div>Search history</div>220 </div>221 222 <!-- Promo card -->223 <div class="card promo-card">224 <div class="promo-title">225 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">226 <path d="M12 3l8 5v6a6 6 0 01-12 0V8l8-5z" stroke="#2F3B46" stroke-width="2" fill="none"/>227 <circle cx="12" cy="17" r="2" fill="#2F3B46"/>228 </svg>229 <span>Want to travel cheaper?</span>230 </div>231 <div class="promo-text">232 Do not miss promotions, discounts and other interesting INFOBUS offers. Sign up for the newsletter and travel with us cheaper!233 </div>234 <div class="subscribe">235 <input type="text" placeholder="E-mail">236 <div class="btn">Subscribe</div>237 </div>238 </div>239 240 <!-- About card (partial) -->241 <div class="card about-card">242 <div>About the application</div>243 </div>244 </div>245 246 <!-- Bottom navigation -->247 <div class="bottom-nav">248 <div class="nav-item active">249 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">250 <circle cx="10" cy="10" r="7" stroke="#FFFFFF" stroke-width="2"/>251 <path d="M21 21l-6-6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>252 </svg>253 <div>Search</div>254 </div>255 <div class="nav-item">256 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">257 <rect x="3" y="5" width="18" height="12" rx="2" stroke="#DDE6EF" stroke-width="2"/>258 <path d="M7 8h10M7 11h7" stroke="#DDE6EF" stroke-width="2" stroke-linecap="round"/>259 </svg>260 <div>Orders</div>261 </div>262 <div class="nav-item">263 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">264 <circle cx="12" cy="12" r="8" stroke="#DDE6EF" stroke-width="2"/>265 <path d="M12 8v4l3 2" stroke="#DDE6EF" stroke-width="2" stroke-linecap="round"/>266 </svg>267 <div>Settings</div>268 </div>269 <div class="nav-item">270 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">271 <circle cx="12" cy="8" r="4" stroke="#DDE6EF" stroke-width="2"/>272 <path d="M4 20a8 8 0 0116 0" stroke="#DDE6EF" stroke-width="2" stroke-linecap="round"/>273 </svg>274 <div>Login</div>275 </div>276 </div>277 <div class="gesture"></div>278</div>279</body>280</html>