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>Planner UI</title>7<style>8  :root{9    --purple:#2A1A5C;10    --muted:#8A879A;11    --border:#E0E0E6;12    --light:#F5F5F9;13    --peach:#F5D9C5;14    --yellow:#FFC32B;15    --text:#1A1A1D;16  }17  body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }18  #render-target{19    width:1080px; height:2400px; position:relative; overflow:hidden;20    background:#ffffff;21  }22 23  /* Banner */24  .banner{25    position:relative;26    width:100%; height:560px;27    overflow:hidden;28  }29  .banner .img{30    position:absolute; inset:0;31    background:#E0E0E0; border-bottom:1px solid #BDBDBD;32    display:flex; justify-content:center; align-items:center;33    color:#757575; font-weight:600;34  }35  .banner::after{36    content:"";37    position:absolute; inset:0;38    background:linear-gradient(to bottom, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.35) 100%);39  }40  .banner h1{41    position:absolute; left:40px; bottom:36px;42    margin:0; color:#fff; font-size:72px; font-weight:800; letter-spacing:0.2px;43  }44 45  /* Tabs */46  .tabs{47    background:#fff;48    padding:26px 40px 0 40px;49    border-bottom:1px solid #eee;50  }51  .tabs-row{52    display:flex; align-items:center; justify-content:space-between;53    color:var(--muted);54    font-size:40px;55  }56  .tab{57    display:flex; align-items:center; gap:20px;58    color:var(--purple);59    font-weight:700;60  }61  .tab.inactive{62    color:#B1AFBD; font-weight:600;63  }64  .indicator{65    height:8px; width:320px; background:var(--purple); border-radius:8px;66    margin-top:24px;67  }68 69  /* Planner card */70  .content{ padding:24px 32px 0 32px; }71  .card{72    background:#fff; border:1px solid var(--border); border-radius:24px;73    box-shadow:0 2px 0 rgba(0,0,0,0.02);74    padding:32px;75    margin-top:24px;76  }77  .row{78    display:flex; align-items:center; gap:24px;79    font-size:40px; color:#2F2F36; font-weight:700;80  }81  .row .sub{82    font-weight:600; color:#9A98A9;83  }84  .line{ height:2px; background:#ECECF2; margin:26px 0; }85  .swap{86    margin-left:auto; width:96px; height:96px; border:1px solid var(--border); border-radius:50%;87    display:flex; align-items:center; justify-content:center;88    color:var(--purple);89  }90 91  /* Secondary fields */92  .fields{93    display:flex; gap:24px; margin-top:18px;94  }95  .field{96    flex:1;97    background:#fff; border:1px solid var(--border); border-radius:20px;98    padding:28px; display:flex; align-items:center; gap:20px;99    color:#6C6A7B; font-size:36px; font-weight:700;100  }101  .filters{102    width:260px;103    justify-content:center;104  }105 106  /* CTA */107  .cta{108    margin:28px 0 20px 0;109    background:var(--yellow); color:#1E1747; font-size:44px; font-weight:800;110    text-align:center; padding:34px 24px; border-radius:18px;111  }112  .link{113    text-align:center; color:var(--purple); font-size:38px; font-weight:700;114    text-decoration:underline;115    margin:20px 0 30px 0;116  }117  .divider{ height:2px; background:#EFEFF3; margin:24px -32px; }118 119  /* Information section */120  .section{121    background:var(--light);122    padding:40px 32px 0 32px;123  }124  .section h2{125    margin:0 0 24px 0; color:var(--purple);126    font-size:56px; font-weight:800;127  }128  .info-card{129    background:var(--peach); border:1px solid #F0CDB7; border-radius:26px;130    padding:36px; color:#2A2340;131  }132  .info-card h3{133    margin:0 0 12px 0; font-size:48px; font-weight:800; color:#1E1747;134  }135  .info-card p{136    margin:0 0 28px 0; font-size:36px; color:#2F2E3A; line-height:1.45;137  }138  .btn-dark{139    display:inline-flex; align-items:center; gap:18px;140    background:var(--purple); color:#fff; border-radius:16px;141    padding:26px 34px; font-size:40px; font-weight:800;142  }143 144  /* Bottom nav */145  .bottom-nav{146    position:absolute; left:0; right:0; bottom:0;147    height:190px; background:#fff; border-top:1px solid #ECECF2;148    display:flex; align-items:center; justify-content:space-around;149  }150  .nav-item{151    display:flex; flex-direction:column; align-items:center; gap:16px;152    font-size:34px; color:#B1AFBD; font-weight:700;153  }154  .nav-item.active{ color:var(--purple); }155  .icon{156    width:72px; height:72px; display:flex; align-items:center; justify-content:center;157    color:currentColor;158  }159 160  /* Simple icon styling */161  svg{ width:64px; height:64px; }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Scenic banner -->168  <div class="banner">169    <div class="img">[IMG: Scenic mountain railway banner]</div>170    <h1>Where to next?</h1>171  </div>172 173  <!-- Tabs -->174  <div class="tabs">175    <div class="tabs-row">176      <div class="tab">177        <div class="icon">178          <svg viewBox="0 0 24 24">179            <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" fill="none"/>180            <path d="M12 7v6l4 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>181          </svg>182        </div>183        <span>Planner</span>184      </div>185      <div class="tab inactive">186        <div class="icon">187          <svg viewBox="0 0 24 24">188            <rect x="5" y="6" width="14" height="10" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>189            <circle cx="9" cy="10" r="1.5" fill="currentColor"/>190            <circle cx="13" cy="10" r="1.5" fill="currentColor"/>191            <path d="M7 16h10" stroke="currentColor" stroke-width="2"/>192          </svg>193        </div>194        <span>Departures</span>195      </div>196    </div>197    <div class="indicator"></div>198  </div>199 200  <!-- Planner form -->201  <div class="content">202    <div class="card">203      <div class="row">204        <svg viewBox="0 0 24 24">205          <circle cx="12" cy="12" r="4" stroke="#B3B2BF" stroke-width="2" fill="none"/>206        </svg>207        <div>Amsterdam Centraal (Netherlands)</div>208        <div class="swap">209          <svg viewBox="0 0 24 24">210            <path d="M8 7l3-3 3 3M11 4v8" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>211            <path d="M16 17l-3 3-3-3M13 20v-8" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>212          </svg>213        </div>214      </div>215      <div class="line"></div>216      <div class="row" style="color:#6C6A7B; font-weight:700;">217        <svg viewBox="0 0 24 24">218          <path d="M12 3c3 0 5 2.3 5 5.1 0 3.6-4.7 8.2-5 8.6-.3-.4-5-5-5-8.6C7 5.3 9 3 12 3zm0 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#9A98A9"/>219        </svg>220        <div class="sub">To</div>221      </div>222    </div>223 224    <div class="fields">225      <div class="field">226        <svg viewBox="0 0 24 24">227          <rect x="3" y="5" width="18" height="15" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>228          <path d="M7 5v-2M17 5v-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>229          <path d="M4 10h16" stroke="currentColor" stroke-width="2"/>230        </svg>231        <span>Departure: Now</span>232      </div>233      <div class="field filters">234        <svg viewBox="0 0 24 24">235          <path d="M4 7h12M4 12h16M10 17h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>236          <circle cx="16" cy="7" r="2" fill="currentColor"/>237          <circle cx="8" cy="12" r="2" fill="currentColor"/>238          <circle cx="14" cy="17" r="2" fill="currentColor"/>239        </svg>240        <span>Filters</span>241      </div>242    </div>243 244    <div class="cta">Plan my journey</div>245    <div class="link">About the timetable</div>246    <div class="divider"></div>247  </div>248 249  <!-- Info section -->250  <div class="section">251    <h2>Before you go</h2>252    <div class="info-card">253      <h3>Busy trains in the summer</h3>254      <p>Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation-free routes or after the summer.</p>255      <div class="btn-dark">256        <svg viewBox="0 0 24 24">257          <rect x="5" y="9" width="9" height="7" rx="2" ry="2" fill="#fff"/>258          <path d="M16 9h3v7h-3M6 17h12" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>259        </svg>260        <span>Book seats</span>261      </div>262    </div>263  </div>264 265  <!-- Bottom navigation -->266  <div class="bottom-nav">267    <div class="nav-item active">268      <div class="icon">269        <svg viewBox="0 0 24 24">270          <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" fill="none"/>271          <path d="M12 7v6l4 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>272        </svg>273      </div>274      <div>Planner</div>275    </div>276    <div class="nav-item">277      <div class="icon">278        <svg viewBox="0 0 24 24">279          <path d="M12 3l6 6-6 6-6-6 6-6z" stroke="currentColor" stroke-width="2" fill="none"/>280          <circle cx="12" cy="9" r="2" fill="currentColor"/>281        </svg>282      </div>283      <div>My Trip</div>284    </div>285    <div class="nav-item">286      <div class="icon">287        <svg viewBox="0 0 24 24">288          <rect x="6" y="4" width="12" height="16" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>289          <circle cx="12" cy="12" r="4" stroke="currentColor" stroke-width="2" fill="none"/>290        </svg>291      </div>292      <div>My Pass</div>293    </div>294    <div class="nav-item">295      <div class="icon">296        <svg viewBox="0 0 24 24">297          <path d="M5 7h14M5 12h14M5 17h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>298        </svg>299      </div>300      <div>More</div>301    </div>302  </div>303 304</div>305</body>306</html>