GD-ML/AndroidCode

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: "Roboto", Arial, sans-serif; color: #2b3a48; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #dfeef9;12  }13  /* Top app bar */14  .appbar {15    height: 180px; background: #2e3c49; color: #fff;16    padding: 36px 40px 20px 40px;17  }18  .brand {19    font-weight: 700; font-size: 56px; letter-spacing: 8px;20    text-align: center;21  }22  .appbar-icons {23    position: absolute; right: 36px; top: 42px; display: flex; gap: 28px;24    align-items: center;25  }26  .icon { display: inline-flex; width: 44px; height: 44px; }27  .icon svg { width: 100%; height: 100%; }28  /* Tabs */29  .tabs {30    margin: 18px 32px; padding: 22px 26px; background: #e8f3ff;31    border-radius: 28px;32    display: flex; gap: 80px; align-items: center;33  }34  .tab {35    display: flex; flex-direction: column; align-items: center; gap: 10px;36    color: #556577; font-size: 36px;37  }38  .tab.active { color: #1495ff; }39  .tab svg { width: 66px; height: 66px; }40  /* Card base */41  .card {42    background: #fff; border-radius: 30px; margin: 22px 32px; padding: 28px 32px;43    box-sizing: border-box;44  }45  /* Form rows */46  .row {47    display: flex; align-items: center; gap: 22px; padding: 26px 0;48    border-bottom: 1px solid #e6eef6;49  }50  .row:last-child { border-bottom: none; }51  .bullet {52    width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent;53    border-left: 22px solid #333;54  }55  .bullet.blue { border-left-color: #18a3ff; }56  .field-label { font-size: 42px; color: #42505e; }57  .swap-circle {58    margin-left: auto; width: 72px; height: 72px; background: #2f3e4b; border-radius: 50%;59    display: flex; align-items: center; justify-content: center;60  }61  /* Date row */62  .date-row { display: flex; align-items: center; gap: 26px; color: #6a7786; font-size: 36px; padding: 26px 0; }63  .date-col { display: flex; flex-direction: column; gap: 6px; }64  .date-value { color: #18a3ff; font-size: 40px; }65  .divider { width: 2px; height: 48px; background: #d7e2ec; margin: 0 16px; }66  .muted { color: #8a97a6; }67  .plus { margin-left: auto; color: #18a3ff; font-size: 64px; line-height: 64px; }68  /* Search button */69  .search-btn {70    margin-top: 22px; width: 100%; height: 140px; background: #19a8ff; color: #fff; font-size: 50px; font-weight: 700;71    border: none; border-radius: 30px;72  }73  .check-row { display: flex; align-items: center; gap: 22px; font-size: 40px; color: #2b3a48; }74  .checkbox {75    width: 60px; height: 60px; border: 3px solid #9fb0c1; border-radius: 12px; box-sizing: border-box; background: #fff;76  }77  /* Search history header */78  .history-row { display: flex; align-items: center; gap: 22px; font-size: 42px; color: #556577; }79  /* Promo */80  .promo-title { display: flex; align-items: center; gap: 22px; font-size: 42px; color: #2b3a48; }81  .promo-text { margin-top: 16px; font-size: 36px; color: #506070; line-height: 1.4; }82  .subscribe {83    margin-top: 26px; display: flex; border: 2px solid #cfe0ef; border-radius: 28px; overflow: hidden;84  }85  .subscribe input {86    flex: 1; font-size: 40px; padding: 26px; border: none; outline: none; color: #2b3a48;87  }88  .subscribe button {89    width: 360px; background: #19a8ff; color: #fff; border: none; font-size: 42px; font-weight: 600;90  }91  /* Bottom navigation */92  .bottom-bar {93    position: absolute; bottom: 0; left: 0; right: 0; height: 190px; background: #2e3c49; color: #cfe0ef;94    display: flex; justify-content: space-around; align-items: center;95    padding-bottom: 20px;96  }97  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 34px; }98  .nav-item svg { width: 66px; height: 66px; }99  /* Gesture bar mock */100  .gesture {101    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);102    width: 300px; height: 14px; background: #e9edf1; border-radius: 8px; opacity: 0.9;103  }104</style>105</head>106<body>107<div id="render-target">108  <div class="appbar">109    <div class="brand">INFOBUS</div>110    <div class="appbar-icons">111      <!-- Headphones -->112      <div class="icon">113        <svg viewBox="0 0 24 24" fill="none">114          <path d="M4 12a8 8 0 0 1 16 0" stroke="#cfe0ef" stroke-width="2"/>115          <rect x="3" y="12" width="5" height="7" rx="2" fill="#cfe0ef"/>116          <rect x="16" y="12" width="5" height="7" rx="2" fill="#cfe0ef"/>117        </svg>118      </div>119      <!-- Share -->120      <div class="icon">121        <svg viewBox="0 0 24 24" fill="none">122          <circle cx="6" cy="12" r="3" stroke="#cfe0ef" stroke-width="2"/>123          <circle cx="18" cy="6" r="3" stroke="#cfe0ef" stroke-width="2"/>124          <circle cx="18" cy="18" r="3" stroke="#cfe0ef" stroke-width="2"/>125          <path d="M9 12l6-6M9 12l6 6" stroke="#cfe0ef" stroke-width="2"/>126        </svg>127      </div>128    </div>129  </div>130 131  <!-- Tabs -->132  <div class="tabs">133    <div class="tab active">134      <svg viewBox="0 0 24 24" fill="none">135        <path d="M12 2l6 6-6 6-6-6 6-6z" fill="#19a8ff" opacity="0.15"/>136        <rect x="8" y="8" width="8" height="5" rx="1" fill="#19a8ff"/>137        <circle cx="10" cy="14" r="1" fill="#19a8ff"/>138        <circle cx="14" cy="14" r="1" fill="#19a8ff"/>139      </svg>140      <div>All</div>141    </div>142    <div class="tab">143      <svg viewBox="0 0 24 24" fill="none">144        <rect x="3" y="7" width="18" height="9" rx="2" stroke="#2e3c49" stroke-width="2"/>145        <circle cx="8" cy="17" r="2" fill="#2e3c49"/>146        <circle cx="16" cy="17" r="2" fill="#2e3c49"/>147        <rect x="6" y="9" width="12" height="3" fill="#2e3c49"/>148      </svg>149      <div>Bus</div>150    </div>151    <div class="tab">152      <svg viewBox="0 0 24 24" fill="none">153        <rect x="5" y="8" width="14" height="8" rx="2" stroke="#2e3c49" stroke-width="2"/>154        <path d="M7 16l-2 3M17 16l2 3" stroke="#2e3c49" stroke-width="2"/>155        <circle cx="9" cy="18" r="1.5" fill="#2e3c49"/>156        <circle cx="15" cy="18" r="1.5" fill="#2e3c49"/>157      </svg>158      <div>Train</div>159    </div>160    <div class="tab">161      <svg viewBox="0 0 24 24" fill="none">162        <path d="M3 12l18-6-6 6 6 6-18-6z" fill="#2e3c49"/>163      </svg>164      <div>Plane</div>165    </div>166    <div class="tab">167      <svg viewBox="0 0 24 24" fill="none">168        <rect x="6" y="6" width="12" height="12" rx="2" stroke="#2e3c49" stroke-width="2"/>169        <rect x="10" y="3" width="4" height="3" fill="#2e3c49"/>170        <path d="M9 10h6" stroke="#2e3c49" stroke-width="2"/>171      </svg>172      <div>Parcels</div>173    </div>174  </div>175 176  <!-- Search card -->177  <div class="card">178    <div class="row">179      <div class="bullet"></div>180      <div class="field-label">From</div>181      <div class="swap-circle">182        <svg viewBox="0 0 24 24" fill="none">183          <path d="M7 7h10l-3-3M17 17H7l3 3" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>184        </svg>185      </div>186    </div>187    <div class="row">188      <div class="bullet blue"></div>189      <div class="field-label">To</div>190    </div>191 192    <div class="date-row">193      <div class="date-col">194        <div class="muted">There</div>195        <div class="date-value">03.11.2023</div>196      </div>197      <svg class="icon" viewBox="0 0 24 24" fill="none">198        <rect x="3" y="5" width="18" height="16" rx="2" stroke="#2e3c49" stroke-width="2"/>199        <path d="M7 3v4M17 3v4M3 10h18" stroke="#2e3c49" stroke-width="2"/>200      </svg>201      <div class="divider"></div>202      <div class="muted" style="font-size:40px;">Return</div>203      <div class="plus">+</div>204    </div>205 206    <button class="search-btn">Search</button>207  </div>208 209  <!-- Checkbox card -->210  <div class="card" style="padding: 24px 32px;">211    <div class="check-row">212      <div class="checkbox"></div>213      <div>Including sold out routes</div>214    </div>215  </div>216 217  <!-- Search history card -->218  <div class="card" style="padding: 24px 32px;">219    <div class="history-row">220      <svg viewBox="0 0 24 24" class="icon" fill="none">221        <path d="M12 4a8 8 0 1 0 8 8" stroke="#2e3c49" stroke-width="2"/>222        <path d="M12 8v5l3 2" stroke="#2e3c49" stroke-width="2" stroke-linecap="round"/>223      </svg>224      <div>Search history</div>225    </div>226  </div>227 228  <!-- Promo card -->229  <div class="card">230    <div class="promo-title">231      <svg viewBox="0 0 24 24" class="icon" fill="none">232        <path d="M12 4a6 6 0 0 1 6 6v4h2v2H4v-2h2v-4a6 6 0 0 1 6-6z" stroke="#2e3c49" stroke-width="2"/>233        <circle cx="12" cy="20" r="1.8" fill="#2e3c49"/>234      </svg>235      <div>Want to travel cheaper?</div>236    </div>237    <div class="promo-text">238      Do not miss promotions, discounts and other interesting INFOBUS offers. Sign up for the newsletter and travel with us cheaper!239    </div>240    <div class="subscribe">241      <input type="text" placeholder="E-mail">242      <button>Subscribe</button>243    </div>244  </div>245 246  <!-- About card (partial) -->247  <div class="card" style="padding: 26px 32px;">248    <div style="display:flex;align-items:center;gap:22px;font-size:40px;color:#2b3a48;">249      <svg viewBox="0 0 24 24" class="icon" fill="none">250        <circle cx="12" cy="12" r="9" stroke="#2e3c49" stroke-width="2"/>251        <path d="M12 7v6M12 15v2" stroke="#2e3c49" stroke-width="2" stroke-linecap="round"/>252      </svg>253      <div>About the application</div>254    </div>255  </div>256 257  <!-- Bottom navigation -->258  <div class="bottom-bar">259    <div class="nav-item">260      <svg viewBox="0 0 24 24" fill="none">261        <circle cx="11" cy="11" r="7" stroke="#cfe0ef" stroke-width="2"/>262        <path d="M16 16l5 5" stroke="#cfe0ef" stroke-width="2" stroke-linecap="round"/>263      </svg>264      <div>Search</div>265    </div>266    <div class="nav-item">267      <svg viewBox="0 0 24 24" fill="none">268        <rect x="3" y="8" width="18" height="10" rx="2" stroke="#cfe0ef" stroke-width="2"/>269        <path d="M7 8l2-3h6l2 3" stroke="#cfe0ef" stroke-width="2"/>270        <path d="M7 12h10" stroke="#cfe0ef" stroke-width="2"/>271      </svg>272      <div>Orders</div>273    </div>274    <div class="nav-item">275      <svg viewBox="0 0 24 24" fill="none">276        <circle cx="12" cy="12" r="5" stroke="#cfe0ef" stroke-width="2"/>277        <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5" stroke="#cfe0ef" stroke-width="2"/>278      </svg>279      <div>Settings</div>280    </div>281    <div class="nav-item">282      <svg viewBox="0 0 24 24" fill="none">283        <circle cx="12" cy="8" r="4" stroke="#cfe0ef" stroke-width="2"/>284        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#cfe0ef" stroke-width="2"/>285      </svg>286      <div>Login</div>287    </div>288  </div>289  <div class="gesture"></div>290</div>291</body>292</html>