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; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #24C6CC;15  }16 17  /* Subtle map-like blobs just for depth */18  .blob {19    position: absolute;20    border-radius: 50%;21    opacity: 0.22;22    background: #0E9EAB;23    filter: blur(2px);24  }25  .blob.b1 { width: 600px; height: 600px; left: -120px; top: 120px; }26  .blob.b2 { width: 520px; height: 520px; right: -60px; top: -40px; }27  .blob.b3 { width: 700px; height: 700px; right: -140px; top: 1060px; }28  .blob.b4 { width: 540px; height: 540px; left: -160px; top: 1600px; }29 30  /* Top elements */31  .hamburger {32    position: absolute;33    top: 140px;34    left: 48px;35    width: 80px;36    height: 64px;37    background: transparent;38    border: none;39    cursor: default;40  }41  .brand {42    position: absolute;43    top: 420px;44    left: 0;45    width: 100%;46    text-align: center;47    color: #FFFFFF;48    font-weight: 800;49    font-size: 120px;50    letter-spacing: 1px;51  }52 53  /* COVID banner */54  .banner {55    position: absolute;56    left: 72px;57    right: 72px;58    top: 760px;59    background: #138899;60    color: #EAF6F7;61    border-radius: 28px;62    padding: 36px 120px 36px 120px;63    box-shadow: 0 8px 16px rgba(0,0,0,0.15);64  }65  .banner .row {66    display: flex;67    align-items: center;68    gap: 28px;69  }70  .banner .title {71    font-size: 44px;72    line-height: 1.2;73  }74  .banner .link {75    font-size: 44px;76    font-weight: 800;77    color: #FFFFFF;78  }79  .banner .close {80    position: absolute;81    right: 24px;82    top: 24px;83    width: 88px;84    height: 88px;85    border-radius: 50%;86    background: rgba(255,255,255,0.15);87    display: flex;88    align-items: center;89    justify-content: center;90  }91 92  /* Segment control */93  .segment {94    position: absolute;95    left: 72px;96    right: 72px;97    top: 980px;98    height: 116px;99    border: 6px solid #E7FFFF;100    border-radius: 24px;101    display: grid;102    grid-template-columns: 1fr 1fr;103    overflow: hidden;104    background: transparent;105  }106  .segment .opt {107    display: flex;108    align-items: center;109    justify-content: center;110    font-size: 44px;111    font-weight: 700;112    color: #17A7B4;113    background: #FFFFFF;114  }115  .segment .opt.active {116    background: #20ACB8;117    color: #FFFFFF;118  }119 120  /* Search card */121  .card {122    position: absolute;123    left: 72px;124    right: 72px;125    top: 1120px;126    background: #FFFFFF;127    border-radius: 28px;128    box-shadow: 0 18px 26px rgba(0,0,0,0.18);129    overflow: hidden;130  }131  .card .row {132    display: flex;133    align-items: center;134    padding: 42px 40px;135    gap: 30px;136    border-bottom: 2px solid #E7EEF2;137  }138  .card .row:last-child { border-bottom: none; }139  .card .label {140    font-size: 48px;141    color: #3A3A3A;142  }143  .pin, .calendar {144    width: 56px;145    height: 56px;146    color: #19AFC0;147    flex: 0 0 56px;148  }149  .swap {150    position: absolute;151    right: 36px;152    top: 184px;153    width: 132px;154    height: 132px;155    border-radius: 50%;156    background: #F1F5F8;157    box-shadow: 0 6px 12px rgba(0,0,0,0.1) inset;158    display: flex;159    align-items: center;160    justify-content: center;161    border: 2px solid #D7E2EA;162  }163 164  /* Search button */165  .cta {166    position: absolute;167    left: 72px;168    right: 72px;169    bottom: 292px;170    height: 148px;171    background: #F36E6F;172    color: #FFFFFF;173    border: none;174    border-radius: 28px;175    font-size: 54px;176    font-weight: 800;177    letter-spacing: 4px;178    box-shadow: 0 14px 24px rgba(0,0,0,0.20);179  }180 181  .google-mark {182    position: absolute;183    left: 52px;184    bottom: 208px;185    color: #FFFFFF;186    text-shadow: 0 2px 0 rgba(0,0,0,0.25);187    font-weight: 800;188    font-size: 40px;189    opacity: 0.9;190  }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Decorative blobs to hint map -->197  <div class="blob b1"></div>198  <div class="blob b2"></div>199  <div class="blob b3"></div>200  <div class="blob b4"></div>201 202  <!-- Hamburger -->203  <button class="hamburger" aria-label="menu">204    <svg viewBox="0 0 24 24" width="80" height="64" fill="#FFFFFF">205      <rect x="2" y="4" width="20" height="2" rx="1"></rect>206      <rect x="2" y="11" width="20" height="2" rx="1"></rect>207      <rect x="2" y="18" width="20" height="2" rx="1"></rect>208    </svg>209  </button>210 211  <div class="brand">wanderu</div>212 213  <!-- COVID banner -->214  <div class="banner">215    <div class="row">216      <svg class="pin" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">217        <path d="M12 2l4 7H8l4-7z"></path>218        <circle cx="12" cy="15.5" r="1.5" fill="#FFFFFF"></circle>219      </svg>220      <div>221        <div class="title">COVID-19 Travel Guide</div>222        <div class="link">Learn more ›</div>223      </div>224    </div>225    <div class="close">226      <svg viewBox="0 0 24 24" width="44" height="44" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round">227        <circle cx="12" cy="12" r="10" opacity="0"></circle>228        <path d="M7 7l10 10M17 7L7 17"></path>229      </svg>230    </div>231  </div>232 233  <!-- Segment control -->234  <div class="segment" role="tablist" aria-label="trip type">235    <div class="opt">One way</div>236    <div class="opt active">Round trip</div>237  </div>238 239  <!-- Search card -->240  <div class="card">241    <div class="row">242      <svg class="pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">243        <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"></path>244        <circle cx="12" cy="10" r="2.5" fill="currentColor"></circle>245      </svg>246      <div class="label">Ulm</div>247    </div>248    <div class="row">249      <svg class="pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">250        <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"></path>251        <circle cx="12" cy="10" r="2.5" fill="currentColor"></circle>252      </svg>253      <div class="label">Berlin</div>254    </div>255    <div class="row">256      <svg class="calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">257        <rect x="3" y="4" width="18" height="16" rx="2"></rect>258        <path d="M3 9h18M8 2v4M16 2v4"></path>259      </svg>260      <div class="label">Fri, Nov 3</div>261    </div>262 263    <div class="swap" aria-hidden="true">264      <svg viewBox="0 0 24 24" width="72" height="72" stroke="#7AA0B5" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">265        <path d="M8 6v8m0 0l-3-3m3 3l3-3"></path>266        <path d="M16 18V10m0 0l-3 3m3-3l3 3"></path>267      </svg>268    </div>269  </div>270 271  <button class="cta">SEARCH</button>272 273  <div class="google-mark">Google</div>274 275</div>276</body>277</html>