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>Wanderu Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #1cc7cf;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Subtle darker map blotches for texture */20  .map-blob {21    position: absolute;22    background: rgba(0, 120, 135, 0.18);23    border-radius: 40%;24    filter: blur(2px);25  }26  .blob1 { top: 70px; left: -120px; width: 520px; height: 340px; transform: rotate(12deg); }27  .blob2 { top: 0; right: -80px; width: 520px; height: 300px; transform: rotate(-8deg); }28  .blob3 { top: 760px; left: -60px; width: 520px; height: 260px; transform: rotate(4deg); }29  .blob4 { bottom: 320px; right: -120px; width: 640px; height: 360px; transform: rotate(-16deg); }30 31  /* Status bar */32  .status-bar {33    position: absolute;34    top: 0; left: 0; right: 0;35    height: 120px;36    background: #000;37    display: flex;38    align-items: center;39    padding: 0 36px;40    box-sizing: border-box;41    font-weight: 600;42  }43  .status-time { font-size: 40px; color: #fff; }44  .status-right {45    margin-left: auto;46    display: flex; align-items: center; gap: 28px;47    color: #fff;48    font-size: 36px;49  }50 51  /* Hamburger */52  .hamburger {53    position: absolute;54    top: 180px;55    left: 36px;56    width: 84px; height: 64px;57    display: flex; align-items: center; justify-content: center;58  }59 60  /* Brand */61  .brand {62    position: absolute;63    top: 410px;64    left: 0; right: 0;65    text-align: center;66    font-size: 140px;67    font-weight: 800;68    letter-spacing: 1px;69    color: #ffffff;70  }71 72  /* Floating map dot */73  .map-dot {74    position: absolute;75    top: 520px;76    right: 250px;77    width: 78px; height: 78px;78    background: rgba(255,255,255,0.25);79    border-radius: 50%;80    display: flex; align-items: center; justify-content: center;81  }82  .map-dot::after {83    content: "";84    width: 22px; height: 22px;85    background: #fff; border-radius: 50%;86  }87 88  /* COVID banner */89  .alert-banner {90    position: absolute;91    top: 990px; left: 70px; right: 70px;92    height: 180px;93    background: #127d8a;94    border-radius: 24px;95    display: flex; align-items: center;96    padding: 0 36px;97    box-shadow: 0 8px 20px rgba(0,0,0,0.18);98  }99  .alert-icon {100    width: 72px; height: 72px;101    margin-right: 30px;102  }103  .alert-text {104    font-size: 44px; line-height: 1.2;105  }106  .alert-text b { display: block; font-size: 50px; margin-top: 8px; }107  .alert-close {108    margin-left: auto;109    width: 72px; height: 72px;110    background: rgba(255,255,255,0.15);111    border-radius: 50%;112    display: flex; align-items: center; justify-content: center;113  }114 115  .anchor-dot {116    position: absolute;117    top: 1185px; left: 240px;118    width: 22px; height: 22px; border-radius: 50%;119    background: #fff;120  }121 122  /* Segmented control */123  .segment {124    position: absolute;125    top: 1228px; left: 70px; right: 70px;126    height: 120px;127    border-radius: 24px;128    border: 4px solid rgba(255,255,255,0.9);129    overflow: hidden;130    display: flex;131  }132  .segment button {133    flex: 1;134    font-size: 46px;135    font-weight: 700;136    border: none; outline: none;137    background: transparent;138    color: #e6ffff;139  }140  .segment button.active {141    background: rgba(0, 158, 170, 0.9);142    color: #ffffff;143  }144 145  /* Card fields */146  .card {147    position: absolute;148    top: 1440px; left: 70px; right: 70px;149    background: #ffffff;150    color: #0d7c86;151    border-radius: 26px;152    box-shadow: 0 12px 30px rgba(0,0,0,0.18);153    overflow: hidden;154  }155  .row {156    display: flex; align-items: center;157    height: 140px;158    padding: 0 36px;159    border-bottom: 2px solid #e8eef2;160    font-size: 50px;161    color: #1a8f9a;162  }163  .row:last-child { border-bottom: none; }164  .row .icon {165    width: 72px; height: 72px; margin-right: 30px;166    display: flex; align-items: center; justify-content: center;167  }168  .swap-btn {169    position: absolute;170    top: 1463px; right: 100px;171    width: 120px; height: 120px; border-radius: 60px;172    background: #ecf6f8;173    border: 4px solid #d7e7ec;174    display: flex; align-items: center; justify-content: center;175  }176 177  /* Search button */178  .search-btn {179    position: absolute;180    left: 70px; right: 70px; top: 1924px;181    height: 140px; border-radius: 24px;182    background: #ff6f6f;183    display: flex; align-items: center; justify-content: center;184    color: #fff;185    font-weight: 800; font-size: 54px; letter-spacing: 3px;186    box-shadow: 0 12px 26px rgba(255, 111, 111, 0.45);187    text-transform: uppercase;188  }189 190  /* Google logo placeholder */191  .google-ph {192    position: absolute;193    bottom: 170px; left: 34px;194    width: 200px; height: 66px;195    background: #E0E0E0;196    border: 1px solid #BDBDBD;197    display: flex; align-items: center; justify-content: center;198    color: #757575; font-size: 28px; border-radius: 10px;199  }200 201  /* Bottom navigation area */202  .bottom-black {203    position: absolute;204    bottom: 0; left: 0; right: 0;205    height: 120px; background: #000;206  }207  .home-pill {208    position: absolute;209    bottom: 40px; left: 50%; transform: translateX(-50%);210    width: 240px; height: 16px; border-radius: 8px;211    background: rgba(255,255,255,0.9);212  }213</style>214</head>215<body>216<div id="render-target">217 218  <!-- Subtle background blobs -->219  <div class="map-blob blob1"></div>220  <div class="map-blob blob2"></div>221  <div class="map-blob blob3"></div>222  <div class="map-blob blob4"></div>223 224  <!-- Status bar -->225  <div class="status-bar">226    <div class="status-time">12:41</div>227    <div class="status-right">228      <!-- Simple warning icon -->229      <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">230        <path d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2V10z"/>231      </svg>232      <!-- Battery -->233      <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">234        <path d="M16 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm5 3h-1v4h1v-4z"/>235      </svg>236      <span style="font-size:36px;">100%</span>237    </div>238  </div>239 240  <!-- Hamburger -->241  <div class="hamburger">242    <svg width="72" height="56" viewBox="0 0 24 16" fill="none" stroke="#ffffff" stroke-width="2.5">243      <path d="M1 1h22M1 8h22M1 15h22"/>244    </svg>245  </div>246 247  <!-- Brand Title -->248  <div class="brand">wanderu</div>249  <div class="map-dot"></div>250 251  <!-- COVID banner -->252  <div class="alert-banner">253    <div class="alert-icon">254      <svg viewBox="0 0 24 24" width="72" height="72" fill="#ffffff">255        <path d="M1 21h22L12 2 1 21zm11-4h-2v2h2v-2zm0-8h-2v6h2V9z"/>256      </svg>257    </div>258    <div class="alert-text">259      COVID-19 Travel Guide260      <b>Learn more ›</b>261    </div>262    <div class="alert-close">263      <svg viewBox="0 0 24 24" width="40" height="40" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round">264        <path d="M6 6l12 12M18 6L6 18"/>265      </svg>266    </div>267  </div>268 269  <div class="anchor-dot"></div>270 271  <!-- Segmented control -->272  <div class="segment">273    <button>One way</button>274    <button class="active">Round trip</button>275  </div>276 277  <!-- Fields Card -->278  <div class="card">279    <div class="row">280      <div class="icon">281        <svg width="54" height="54" viewBox="0 0 24 24" fill="#18a8b4">282          <path d="M12 2C8.7 2 6 4.7 6 8c0 4 6 12 6 12s6-8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/>283        </svg>284      </div>285      <div>Ulm</div>286    </div>287    <div class="row">288      <div class="icon">289        <svg width="54" height="54" viewBox="0 0 24 24" fill="#18a8b4">290          <path d="M12 2C8.7 2 6 4.7 6 8c0 4 6 12 6 12s6-8 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 5.5 12 5.5s2.5 1.1 2.5 2.5S13.4 10.5 12 10.5z"/>291        </svg>292      </div>293      <div>Berlin</div>294    </div>295    <div class="row" style="color:#16939f;">296      <div class="icon">297        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#18a8b4" stroke-width="2">298          <rect x="3" y="4" width="18" height="17" rx="2" />299          <path d="M16 2v4M8 2v4M3 10h18"/>300        </svg>301      </div>302      <div>Sun, Nov 5</div>303    </div>304  </div>305 306  <!-- Swap button -->307  <div class="swap-btn">308    <svg width="64" height="64" viewBox="0 0 24 24" fill="#97c8cf" stroke="#97c8cf" stroke-width="1.5">309      <path d="M7 14l-3 3 3 3v-2h6v-2H7v-2zm10-7l3-3-3-3v2H11v2h6v2z" />310    </svg>311  </div>312 313  <!-- Search Button -->314  <div class="search-btn">Search</div>315 316  <!-- Google logo placeholder -->317  <div class="google-ph">[IMG: Google logo]</div>318 319  <!-- Bottom bar -->320  <div class="bottom-black"></div>321  <div class="home-pill"></div>322</div>323</body>324</html>