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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #12c6cf; /* teal background */15    border-radius: 0;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #fff;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 110px;27    background: #000;28    color: #fff;29    font-size: 40px;30    display: flex;31    align-items: center;32    padding: 0 40px;33    box-sizing: border-box;34    justify-content: space-between;35    z-index: 5;36  }37  .status-left, .status-right {38    display: flex; align-items: center; gap: 22px;39  }40  .status-right span { opacity: .9; }41 42  /* Subtle map-like overlay shapes (simple decorative blobs) */43  .blob {44    position: absolute;45    background: rgba(0, 0, 0, 0.06);46    border-radius: 50%;47    filter: blur(2px);48  }49  .blob.b1 { width: 520px; height: 420px; top: 210px; left: -80px; opacity: .08; }50  .blob.b2 { width: 680px; height: 540px; top: 120px; right: -120px; opacity: .07; }51  .blob.b3 { width: 740px; height: 600px; top: 800px; left: 220px; opacity: .05; }52 53  /* Header / Title */54  .menu-btn {55    position: absolute;56    top: 160px;57    left: 40px;58    width: 80px; height: 60px;59    display: flex; align-items: center; justify-content: center;60  }61  .title {62    position: absolute;63    top: 300px;64    left: 0; right: 0;65    text-align: center;66    font-weight: 800;67    font-size: 120px;68    letter-spacing: 1px;69    color: #fff;70  }71 72  /* Info banner */73  .info-banner {74    position: absolute;75    left: 60px;76    right: 60px;77    top: 880px;78    background: #0e9aa5;79    border-radius: 28px;80    padding: 36px 120px 36px 120px;81    box-sizing: border-box;82    color: #e9feff;83    display: flex;84    align-items: center;85    gap: 30px;86  }87  .info-text {88    display: flex;89    flex-direction: column;90    gap: 10px;91    font-size: 44px;92  }93  .info-text strong { color: #ffffff; font-weight: 700; }94  .info-close {95    position: absolute;96    right: 36px; top: 24px;97    width: 84px; height: 84px;98    display: flex; align-items: center; justify-content: center;99    border-radius: 50%;100    background: rgba(255,255,255,0.12);101  }102 103  /* Segmented control */104  .segment {105    position: absolute;106    left: 60px;107    right: 60px;108    top: 1100px;109    height: 120px;110    border: 4px solid #ffffff;111    border-radius: 28px;112    background: #ffffff;113    display: grid;114    grid-template-columns: 1fr 1fr;115    overflow: hidden;116  }117  .segment .opt {118    display: flex; align-items: center; justify-content: center;119    font-size: 44px; font-weight: 600;120    color: #16bcc5;121    background: #ffffff;122  }123  .segment .opt.selected {124    background: #16bcc5;125    color: #ffffff;126  }127 128  /* Card */129  .card {130    position: absolute;131    left: 60px;132    right: 60px;133    top: 1250px;134    background: #ffffff;135    border-radius: 28px;136    box-shadow: 0 12px 22px rgba(0,0,0,0.15);137    color: #1f3b40;138    overflow: hidden;139  }140  .row {141    display: flex;142    align-items: center;143    gap: 26px;144    padding: 40px 40px;145    height: 140px;146    border-bottom: 2px solid #e9eef2;147    box-sizing: border-box;148    font-size: 46px;149    color: #344d55;150  }151  .row:last-child { border-bottom: none; }152  .row .label { font-weight: 600; }153  .iconcircle {154    position: absolute;155    right: 26px;156    top: 26px;157    width: 140px; height: 140px;158    border-radius: 50%;159    border: 4px solid #e3ebef;160    display: flex; align-items: center; justify-content: center;161    opacity: .8;162  }163 164  /* Search button */165  .search-btn {166    position: absolute;167    left: 60px;168    right: 60px;169    top: 1700px;170    height: 150px;171    background: #f86f6b;172    border-radius: 28px;173    color: #fff;174    font-size: 54px;175    font-weight: 800;176    letter-spacing: 4px;177    display: flex; align-items: center; justify-content: center;178    text-transform: uppercase;179    box-shadow: 0 10px 18px rgba(0,0,0,0.12);180  }181 182  /* Google logo placeholder */183  .google-tag {184    position: absolute;185    left: 60px;186    bottom: 160px;187    width: 180px;188    height: 72px;189    background: #E0E0E0;190    border: 1px solid #BDBDBD;191    color: #757575;192    display: flex; align-items: center; justify-content: center;193    border-radius: 10px;194    font-size: 28px;195  }196 197  /* Bottom gesture bar area */198  .bottom-area {199    position: absolute;200    left: 0; right: 0; bottom: 0;201    height: 140px;202    background: #000000;203    display: flex; align-items: center; justify-content: center;204  }205  .gesture {206    width: 220px; height: 10px; background: #ffffff; border-radius: 6px; opacity: .9;207  }208 209  /* Small map dots */210  .dot {211    position: absolute;212    width: 22px; height: 22px; background: #fff; border-radius: 50%; opacity: .9;213  }214  .dot.dl { left: 160px; top: 700px; }215  .dot.dr { right: 200px; top: 820px; }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status bar -->222  <div class="status-bar">223    <div class="status-left">224      <span>12:39</span>225      <!-- Warning icon -->226      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">227        <path d="M1 20h22L12 2 1 20zm12-3h-2v2h2v-2zm0-6h-2v5h2V11z"/>228      </svg>229    </div>230    <div class="status-right">231      <!-- Wi-Fi -->232      <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">233        <path d="M12 20.5l2.5-2.5h-5L12 20.5zM2 8.82l2.12 2.12C6.26 8.93 9.02 8 12 8s5.74.93 7.88 3. -0-0L22 8.82C19.2 6.02 15.73 4.5 12 4.5S4.8 6.02 2 8.82z"/>234      </svg>235      <!-- Battery -->236      <svg width="46" height="46" viewBox="0 0 24 24" fill="#fff">237        <path d="M16 5h3v2h2v10h-2v2h-3V5zM3 7h11v10H3V7z"/>238      </svg>239      <span>100%</span>240    </div>241  </div>242 243  <!-- Decorative blobs -->244  <div class="blob b1"></div>245  <div class="blob b2"></div>246  <div class="blob b3"></div>247 248  <!-- Small map dots -->249  <div class="dot dl"></div>250  <div class="dot dr"></div>251 252  <!-- Menu button -->253  <div class="menu-btn">254    <svg width="64" height="46" viewBox="0 0 24 24" fill="#fff">255      <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>256    </svg>257  </div>258 259  <!-- Title -->260  <div class="title">wanderu</div>261 262  <!-- Info banner -->263  <div class="info-banner">264    <div>265      <svg width="66" height="66" viewBox="0 0 24 24" fill="#ffffff">266        <path d="M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-6h-2v5h2v-5z"/>267      </svg>268    </div>269    <div class="info-text">270      <div>COVID-19 Travel Guide</div>271      <div><strong>Learn more ›</strong></div>272    </div>273    <div class="info-close">274      <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff">275        <path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.29 10.59 10.6 16.89 4.29z"/>276      </svg>277    </div>278  </div>279 280  <!-- Segmented control -->281  <div class="segment">282    <div class="opt">One way</div>283    <div class="opt selected">Round trip</div>284  </div>285 286  <!-- Card -->287  <div class="card">288    <div class="row">289      <!-- Location pin -->290      <svg width="54" height="54" viewBox="0 0 24 24" fill="#16bcc5">291        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/>292      </svg>293      <div class="label">Ulm</div>294    </div>295    <div class="row">296      <svg width="54" height="54" viewBox="0 0 24 24" fill="#16bcc5">297        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/>298      </svg>299      <div class="label">Paris</div>300    </div>301    <div class="row">302      <svg width="54" height="54" viewBox="0 0 24 24" fill="#16bcc5">303        <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2z"/>304      </svg>305      <div class="label">Fri, Nov 3</div>306    </div>307 308    <!-- Swap icon circle -->309    <div class="iconcircle">310      <svg width="64" height="64" viewBox="0 0 24 24" fill="#a6b8c1">311        <path d="M7 7l-4 4h3v6h2V11h3L7 7zm10 10l4-4h-3V7h-2v6h-3l4 4z"/>312      </svg>313    </div>314  </div>315 316  <!-- Search button -->317  <div class="search-btn">SEARCH</div>318 319  <!-- Google logo placeholder -->320  <div class="google-tag">[IMG: Google logo]</div>321 322  <!-- Bottom gesture bar -->323  <div class="bottom-area">324    <div class="gesture"></div>325  </div>326</div>327</body>328</html>