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>My travel advices</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1a1a1a; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #F0F1F3;15  }16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #9A9A9A;24    color: #fff;25    font-weight: 600;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    letter-spacing: 0.2px;32    font-size: 38px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  /* Header */40  .header {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 280px;46    background: #0A6CBD;47    color: #fff;48    box-sizing: border-box;49    padding: 32px 40px 0 40px;50  }51  .header-row {52    display: flex;53    align-items: center;54    justify-content: space-between;55  }56  .header-left {57    display: flex;58    align-items: center;59    gap: 26px;60  }61  .title {62    font-size: 56px;63    font-weight: 600;64  }65  .icon-btn {66    width: 72px;67    height: 72px;68    display: inline-flex;69    align-items: center;70    justify-content: center;71  }72  /* Segmented control */73  .segment-wrap {74    margin-top: 26px;75    width: 100%;76    display: flex;77    justify-content: center;78  }79  .seg-container {80    width: 1000px;81    height: 120px;82    background: rgba(0, 0, 0, 0.15);83    border-radius: 60px;84    display: flex;85    align-items: center;86    padding: 10px;87    box-sizing: border-box;88  }89  .seg {90    flex: 1;91    height: 100px;92    border-radius: 50px;93    display: flex;94    align-items: center;95    justify-content: center;96    font-size: 44px;97    font-weight: 700;98  }99  .seg.active {100    background: #fff;101    color: #0A6CBD;102    box-shadow: 0 6px 12px rgba(0,0,0,0.25);103  }104  .seg.inactive {105    color: #fff;106    opacity: 0.95;107  }108  /* Content area */109  .content {110    position: absolute;111    top: 400px;112    left: 0;113    width: 1080px;114    padding: 30px;115    box-sizing: border-box;116  }117  .card {118    background: #fff;119    border-radius: 24px;120    box-shadow: 0 8px 22px rgba(0,0,0,0.15);121    padding: 30px 34px;122    width: 1020px;123    box-sizing: border-box;124  }125  .card-header {126    display: flex;127    align-items: center;128    justify-content: space-between;129    margin-bottom: 24px;130  }131  .card-title {132    display: flex;133    align-items: center;134    gap: 18px;135    color: #4b4b4b;136    font-size: 38px;137    font-weight: 600;138  }139  .route {140    display: flex;141    align-items: center;142    justify-content: flex-start;143    gap: 22px;144    margin: 28px 0 20px;145  }146  .station {147    font-size: 46px;148    font-weight: 800;149    line-height: 1.2;150    color: #222;151  }152  .open-link {153    display: flex;154    align-items: center;155    justify-content: flex-end;156    color: #3b3b3b;157    font-size: 40px;158    margin-top: 12px;159  }160  .open-link span {161    color: #3b3b3b;162  }163  /* Bottom navigation */164  .bottom-bar {165    position: absolute;166    bottom: 80px;167    left: 0;168    width: 1080px;169    height: 210px;170    background: #fff;171    border-top: 1px solid #E0E0E0;172    display: flex;173    align-items: center;174    justify-content: space-around;175    box-sizing: border-box;176    padding: 16px 0;177  }178  .nav-item {179    width: 180px;180    height: 160px;181    display: flex;182    align-items: center;183    justify-content: center;184    flex-direction: column;185    gap: 14px;186    color: #111;187    font-size: 32px;188  }189  .nav-item .icon {190    width: 72px;191    height: 72px;192  }193  .nav-item.more {194    background: #D9ECFF;195    border-radius: 24px;196  }197  .gesture {198    position: absolute;199    bottom: 24px;200    left: 50%;201    transform: translateX(-50%);202    width: 360px;203    height: 14px;204    background: #000;205    opacity: 0.8;206    border-radius: 12px;207  }208  /* Utility icon color */209  .icon-stroke { stroke: #fff; }210  .icon-blue { stroke: #0A6CBD; fill: none; }211  .icon-grey { stroke: #4b4b4b; }212</style>213</head>214<body>215<div id="render-target">216 217  <!-- Status Bar -->218  <div class="statusbar">219    <div>12:16</div>220    <div class="status-icons">221      <svg width="38" height="38" viewBox="0 0 24 24"><path d="M3 12l6 6V6l-6 6zm12-6v12l6-6-6-6z" fill="#fff"/></svg>222      <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 7v5l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>223      <svg width="38" height="38" viewBox="0 0 24 24"><path d="M6 18h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z" fill="none" stroke="#fff" stroke-width="2"/><path d="M18 6v-2" stroke="#fff" stroke-width="2" stroke-linecap="round"/><path d="M6 6v-2" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>224      <div style="font-weight:700;">100%</div>225    </div>226  </div>227 228  <!-- Header -->229  <div class="header">230    <div class="header-row">231      <div class="header-left">232        <div class="icon-btn">233          <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>234        </div>235        <div class="title">My travel advices</div>236      </div>237      <div class="icon-btn">238        <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2.2" fill="#fff"/><circle cx="12" cy="12" r="2.2" fill="#fff"/><circle cx="19" cy="12" r="2.2" fill="#fff"/></svg>239      </div>240    </div>241 242    <div class="segment-wrap">243      <div class="seg-container">244        <div class="seg active">Planned</div>245        <div class="seg inactive">Past</div>246      </div>247    </div>248  </div>249 250  <!-- Content -->251  <div class="content">252    <div class="card">253      <div class="card-header">254        <div class="card-title">255          <svg width="40" height="40" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="15" rx="2" fill="none" stroke="#4b4b4b" stroke-width="2"/><path d="M16 3v4M8 3v4" stroke="#4b4b4b" stroke-width="2" stroke-linecap="round"/><path d="M3 10h18" stroke="#4b4b4b" stroke-width="2"/></svg>256          <span>Wed, Aug 16 at 03:12</span>257        </div>258        <div class="icon-btn">259          <svg width="40" height="40" viewBox="0 0 24 24"><path d="M4 7h16" stroke="#6b6b6b" stroke-width="2"/><path d="M7 7l1 12h8l1-12" stroke="#6b6b6b" stroke-width="2" fill="none"/><path d="M10 11v6M14 11v6" stroke="#6b6b6b" stroke-width="2"/></svg>260        </div>261      </div>262 263      <div class="route">264        <div class="station">Amsterdam Bijlmer<br>ArenA</div>265        <svg width="240" height="44" viewBox="0 0 240 44">266          <circle cx="22" cy="22" r="12" fill="#fff" stroke="#0A6CBD" stroke-width="6"/>267          <circle cx="218" cy="22" r="12" fill="#fff" stroke="#0A6CBD" stroke-width="6"/>268          <path d="M34 22h172" stroke="#0A6CBD" stroke-width="6" stroke-linecap="round"/>269        </svg>270        <div class="station">Amstelpark</div>271      </div>272 273      <div class="open-link">274        <span>Open travel advice</span>275        <svg width="36" height="36" viewBox="0 0 24 24" style="margin-left:12px;"><path d="M9 6l6 6-6 6" stroke="#3b3b3b" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>276      </div>277    </div>278  </div>279 280  <!-- Bottom Navigation -->281  <div class="bottom-bar">282    <div class="nav-item">283      <svg class="icon" viewBox="0 0 24 24">284        <path d="M12 3l6 6-6 6-6-6 6-6z" fill="none" stroke="#000" stroke-width="1.8"/>285        <path d="M7 18c0-2.2 5-2.2 5 0 0 2.2-5 2.2-5 0z" fill="none" stroke="#000" stroke-width="1.8"/>286      </svg>287      <div>Travel advice</div>288    </div>289    <div class="nav-item">290      <svg class="icon" viewBox="0 0 24 24">291        <path d="M12 3l10 18H2L12 3z" fill="none" stroke="#000" stroke-width="1.8"/>292        <path d="M12 10v5" stroke="#000" stroke-width="2" stroke-linecap="round"/>293      </svg>294      <div>Disruptions</div>295    </div>296    <div class="nav-item">297      <svg class="icon" viewBox="0 0 24 24">298        <circle cx="12" cy="12" r="8" fill="none" stroke="#000" stroke-width="1.8"/>299        <path d="M12 7v5l3 2" stroke="#000" stroke-width="1.8" fill="none" stroke-linecap="round"/>300      </svg>301      <div>Departures</div>302    </div>303    <div class="nav-item">304      <svg class="icon" viewBox="0 0 24 24">305        <path d="M6 6h15l-2 8H8L6 6z" fill="none" stroke="#000" stroke-width="1.8"/>306        <circle cx="9" cy="19" r="1.8" fill="none" stroke="#000" stroke-width="1.6"/>307        <circle cx="17" cy="19" r="1.8" fill="none" stroke="#000" stroke-width="1.6"/>308      </svg>309      <div>Shop</div>310    </div>311    <div class="nav-item more">312      <svg class="icon" viewBox="0 0 24 24">313        <path d="M5 7h14M5 12h14M5 17h14" stroke="#0A6CBD" stroke-width="2" stroke-linecap="round"/>314      </svg>315      <div style="color:#0A6CBD; font-weight:700;">More</div>316    </div>317  </div>318 319  <!-- Gesture bar -->320  <div class="gesture"></div>321</div>322</body>323</html>