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>Where to next?</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F6F6F8;13    border-radius: 0;14    box-shadow: none;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #1B1B1D;17  }18 19  /* Header */20  .header {21    position: relative;22    background: #1F1440;23    height: 480px;24    color: #fff;25    padding: 40px 48px 0 48px;26    box-sizing: border-box;27  }28  .status-bar {29    display: flex;30    align-items: center;31    justify-content: space-between;32    font-weight: 600;33    font-size: 36px;34    opacity: 0.95;35  }36  .status-right {37    display: flex; align-items: center; gap: 24px;38  }39  .title-row {40    margin-top: 48px;41    display: flex; align-items: center; gap: 28px;42  }43  .title-row .title {44    font-size: 60px; font-weight: 700; letter-spacing: 0.2px;45  }46  .back-icon svg { display: block; }47  .search-wrap {48    margin-top: 40px;49    background: #FFFFFF;50    border-radius: 24px;51    height: 120px;52    display: flex; align-items: center;53    padding: 0 32px;54    box-sizing: border-box;55  }56  .search-icon {57    width: 48px; height: 48px; margin-right: 24px;58  }59  .search-placeholder {60    color: #9CA3AF; font-size: 40px;61  }62 63  /* Segmented controls */64  .segmented {65    height: 130px; background: #FFF;66    display: flex; align-items: center; justify-content: space-between;67    padding: 0 48px; box-sizing: border-box;68    border-bottom: 1px solid #E5E7EB;69  }70  .seg-item {71    display: flex; align-items: center; gap: 18px;72    font-size: 38px; color: #2C2C34;73  }74  .seg-item svg { width: 44px; height: 44px; }75  .active-indicator {76    position: absolute; left: 48px; top: 610px; /* under segmented */77    width: 220px; height: 8px; background: #2D215B; border-radius: 4px;78  }79 80  /* Section banners */81  .banner {82    height: 110px; background: #ECECEC; color: #6B7280;83    display: flex; align-items: center; padding: 0 48px;84    font-size: 40px;85    box-sizing: border-box;86  }87 88  /* GPS card */89  .gps-card {90    background: #FFFFFF;91    padding: 60px 80px;92    box-sizing: border-box;93    text-align: center;94    color: #232942;95    font-size: 40px;96    line-height: 62px;97  }98  .gps-btn {99    margin: 48px auto 0;100    width: 360px; height: 96px;101    background: #F6B319;102    color: #0F172A; font-weight: 700; font-size: 40px;103    border: none; border-radius: 18px; cursor: pointer;104    box-shadow: 0 2px 0 rgba(0,0,0,0.08);105  }106 107  /* List */108  .list {109    background: #FFFFFF;110  }111  .list-item {112    display: flex; align-items: center; justify-content: space-between;113    padding: 28px 48px; box-sizing: border-box;114  }115  .left-group {116    display: flex; align-items: center; gap: 28px;117  }118  .train-badge {119    width: 88px; height: 88px;120    border-radius: 44px;121    border: 3px solid #3D346B;122    display: flex; align-items: center; justify-content: center;123    background: #EFEFF7;124  }125  .titles {126    display: flex; flex-direction: column;127  }128  .titles .title {129    font-size: 44px; color: #1F2937; font-weight: 700;130  }131  .titles .subtitle {132    font-size: 32px; color: #9CA3AF; margin-top: 6px;133  }134  .fav-btn {135    width: 88px; height: 88px; border-radius: 44px;136    border: 2px solid #D1D5DB; background: #FAFAFA;137    display: flex; align-items: center; justify-content: center;138  }139  .divider {140    height: 2px; background: #E5E7EB; margin: 0 48px;141  }142 143  /* Keyboard mock */144  .keyboard {145    position: absolute; left: 0; bottom: 0;146    width: 100%; height: 790px;147    background: #F2EDF6;148    border-top: 1px solid #E5E7EB;149    padding: 22px 24px;150    box-sizing: border-box;151  }152  .kb-top {153    display: flex; align-items: center; gap: 22px;154    margin-bottom: 16px;155  }156  .kb-top .pill {157    width: 90px; height: 90px; border-radius: 20px;158    background: #FFFFFF; border: 1px solid #E6E6EA;159    display: flex; align-items: center; justify-content: center;160    color: #6B7280; font-size: 34px; font-weight: 600;161  }162  .rows { display: flex; flex-direction: column; gap: 18px; }163  .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }164  .row.short { grid-template-columns: repeat(9, 1fr); padding: 0 36px; }165  .row.bottom { grid-template-columns: 140px 120px 120px 1fr 120px 180px; gap: 14px; }166  .key {167    height: 110px; border-radius: 24px;168    background: #FFFFFF; border: 1px solid #E6E6EA;169    display: flex; align-items: center; justify-content: center;170    font-size: 44px; color: #2D2D31; font-weight: 600;171  }172  .space { font-size: 32px; color: #9CA3AF; }173</style>174</head>175<body>176<div id="render-target">177 178  <div class="header">179    <div class="status-bar">180      <div>1:06</div>181      <div class="status-right">182        <!-- Wifi icon -->183        <svg width="52" height="40" viewBox="0 0 52 40" fill="none">184          <path d="M6 12c8-8 32-8 40 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>185          <path d="M12 18c6-6 22-6 28 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>186          <path d="M20 24c4-4 12-4 16 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>187          <circle cx="28" cy="30" r="3" fill="#fff"/>188        </svg>189        <!-- Battery icon -->190        <svg width="64" height="36" viewBox="0 0 64 36" fill="none">191          <rect x="2" y="6" width="54" height="24" rx="5" stroke="#fff" stroke-width="3"/>192          <rect x="8" y="11" width="40" height="14" rx="3" fill="#fff"/>193          <rect x="58" y="12" width="4" height="12" rx="1" fill="#fff"/>194        </svg>195      </div>196    </div>197 198    <div class="title-row">199      <div class="back-icon">200        <svg width="64" height="64" viewBox="0 0 64 64" fill="none">201          <path d="M38 14 L22 32 L38 50" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>202        </svg>203      </div>204      <div class="title">Where to next?</div>205    </div>206 207    <div class="search-wrap">208      <div class="search-icon">209        <svg viewBox="0 0 48 48">210          <circle cx="20" cy="20" r="12" stroke="#9CA3AF" stroke-width="4" fill="none"/>211          <line x1="32" y1="32" x2="46" y2="46" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>212        </svg>213      </div>214      <div class="search-placeholder">Search</div>215    </div>216  </div>217 218  <div class="segmented">219    <div class="seg-item">220      <svg viewBox="0 0 24 24">221        <rect x="3" y="5" width="18" height="2" fill="#2D215B"/>222        <rect x="3" y="11" width="14" height="2" fill="#2D215B"/>223        <rect x="3" y="17" width="10" height="2" fill="#2D215B"/>224      </svg>225      <span>View as list</span>226    </div>227    <div class="seg-item" style="color:#8A8CA0;">228      <svg viewBox="0 0 24 24">229        <path d="M12 3c3.3 0 6 2.7 6 6 0 4.5-6 12-6 12s-6-7.5-6-12c0-3.3 2.7-6 6-6z" stroke="#8A8CA0" stroke-width="2" fill="none"/>230        <circle cx="12" cy="9" r="2.5" fill="#8A8CA0"/>231      </svg>232      <span>View on map</span>233    </div>234  </div>235  <div class="active-indicator"></div>236 237  <div class="banner">Nearby stations</div>238 239  <div class="gps-card">240    <div>Please enable GPS to see nearby stations. Don't worry, we won't store your location.</div>241    <button class="gps-btn">Enable GPS</button>242  </div>243 244  <div class="banner">Recent searches</div>245 246  <div class="list">247    <div class="list-item">248      <div class="left-group">249        <div class="train-badge">250          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">251            <rect x="12" y="14" width="28" height="18" rx="3" stroke="#3D346B" stroke-width="3" fill="#FFFFFF"/>252            <rect x="16" y="18" width="8" height="6" fill="#3D346B"/>253            <rect x="28" y="18" width="8" height="6" fill="#3D346B"/>254            <circle cx="20" cy="36" r="3" fill="#3D346B"/>255            <circle cx="32" cy="36" r="3" fill="#3D346B"/>256          </svg>257        </div>258        <div class="titles">259          <div class="title">Madrid City</div>260          <div class="subtitle">Spain</div>261        </div>262      </div>263      <div class="fav-btn">264        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">265          <path d="M22 6l5.6 10.8 11.4 1.6-8.2 8 1.9 11.3L22 32.6 10.3 37.7l1.9-11.3-8.2-8 11.4-1.6L22 6z" stroke="#9CA3AF" stroke-width="2" fill="none"/>266        </svg>267      </div>268    </div>269    <div class="divider"></div>270    <div class="list-item">271      <div class="left-group">272        <div class="train-badge">273          <svg width="52" height="52" viewBox="0 0 52 52" fill="none">274            <rect x="12" y="14" width="28" height="18" rx="3" stroke="#3D346B" stroke-width="3" fill="#FFFFFF"/>275            <rect x="16" y="18" width="8" height="6" fill="#3D346B"/>276            <rect x="28" y="18" width="8" height="6" fill="#3D346B"/>277            <circle cx="20" cy="36" r="3" fill="#3D346B"/>278            <circle cx="32" cy="36" r="3" fill="#3D346B"/>279          </svg>280        </div>281        <div class="titles">282          <div class="title">Barcelona City</div>283          <div class="subtitle">Spain</div>284        </div>285      </div>286      <div class="fav-btn">287        <svg width="44" height="44" viewBox="0 0 44 44" fill="none">288          <path d="M22 6l5.6 10.8 11.4 1.6-8.2 8 1.9 11.3L22 32.6 10.3 37.7l1.9-11.3-8.2-8 11.4-1.6L22 6z" stroke="#9CA3AF" stroke-width="2" fill="none"/>289        </svg>290      </div>291    </div>292  </div>293 294  <!-- Keyboard mockup -->295  <div class="keyboard">296    <div class="kb-top">297      <div class="pill">◧</div>298      <div class="pill">☺</div>299      <div class="pill">GIF</div>300      <div class="pill">⚙</div>301      <div class="pill">Gx</div>302      <div class="pill">🎨</div>303      <div class="pill">⌁</div>304    </div>305    <div class="rows">306      <div class="row">307        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>308        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>309      </div>310      <div class="row short">311        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>312        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>313      </div>314      <div class="row short">315        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>316        <div class="key">n</div><div class="key">m</div><div class="key">⌫</div><div class="key">↵</div>317      </div>318      <div class="row bottom">319        <div class="key">?123</div>320        <div class="key">,</div>321        <div class="key">☺</div>322        <div class="key space">space</div>323        <div class="key">.</div>324        <div class="key">↩</div>325      </div>326    </div>327  </div>328 329</div>330</body>331</html>