GD-ML/AndroidCode
13.4k
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:#24164E;10 --purple-60:#6E6587;11 --grey:#9E9EA7;12 --border:#E5E6EA;13 --chip:#F3F4F7;14 --cta:#FFC20D;15 --peach:#F8E3D1;16 --text:#1A1A1A;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color:var(--text); }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:#FFFFFF; border-radius:20px;23 box-shadow:0 6px 20px rgba(0,0,0,0.08);24 }25 /* Hero */26 .hero{ position:relative; width:100%; height:620px; }27 .hero .img{28 position:absolute; inset:0;29 background:#E0E0E0; border-bottom:1px solid #BDBDBD;30 display:flex; align-items:center; justify-content:center;31 color:#757575; font-size:36px;32 }33 .status-bar{34 position:absolute; top:18px; left:30px; right:30px;35 display:flex; align-items:center; justify-content:space-between;36 color:#FFFFFF; font-weight:600; font-size:30px;37 opacity:0.95;38 }39 .status-right{ display:flex; gap:22px; align-items:center; }40 .hero-title{41 position:absolute; left:40px; bottom:40px;42 margin:0; font-size:74px; line-height:1.1; font-weight:800;43 color:#FFFFFF; text-shadow:0 3px 8px rgba(0,0,0,0.35);44 }45 46 /* Content */47 .content{ background:#FFF; }48 .tabs{49 display:flex; align-items:center; justify-content:space-between;50 padding:26px 40px 0 40px; height:140px;51 border-top-left-radius:24px; border-top-right-radius:24px;52 background:#FFFFFF;53 }54 .tab{ display:flex; align-items:center; gap:18px; font-size:44px; font-weight:700; }55 .tab svg{ width:46px; height:46px; }56 .tab.active{ color:var(--purple); }57 .tab.inactive{ color:#B6B6BD; }58 .tab-indicator{59 height:6px; width:260px; background:var(--purple);60 margin-left:40px; border-radius:6px;61 }62 63 /* Route card */64 .card{65 margin:26px 30px 0 30px; background:#FFF; border:1px solid var(--border);66 border-radius:18px; box-sizing:border-box;67 box-shadow:0 1px 0 rgba(0,0,0,0.02);68 }69 .route-card{ position:relative; }70 .route-row{71 display:flex; align-items:center; gap:24px;72 padding:28px 30px; font-size:40px; font-weight:700; color:var(--purple);73 }74 .route-divider{ height:1px; background:#E8E8EE; margin:0 30px; }75 .swap-btn{76 position:absolute; right:24px; top:50%;77 transform:translateY(-50%);78 width:108px; height:108px; border-radius:54px;79 border:1px solid var(--border); background:#FFFFFF;80 display:flex; align-items:center; justify-content:center; cursor:pointer;81 box-shadow:0 2px 4px rgba(0,0,0,0.06);82 }83 .swap-btn svg{ width:56px; height:56px; }84 .subtext{ font-weight:600; color:#6C6C77; }85 86 /* Chips */87 .inline-row{ display:flex; gap:24px; padding:22px 30px; }88 .chip{89 flex:1; background:var(--chip); border:1px solid var(--border);90 border-radius:16px; height:120px; display:flex; align-items:center; gap:20px;91 padding:0 26px; font-size:36px; color:#666679; box-sizing:border-box;92 }93 .chip svg{ width:46px; height:46px; }94 95 /* CTA */96 .cta{97 margin:18px 30px; height:122px; border-radius:16px;98 background:var(--cta); border:none; color:#1E1A3A;99 font-size:44px; font-weight:800; cursor:pointer;100 box-shadow:0 2px 0 rgba(0,0,0,0.05);101 }102 .center-link{ text-align:center; padding:12px 0 28px; }103 .center-link a{ color:var(--purple); font-size:36px; font-weight:600; text-decoration:underline; }104 105 /* Info section */106 .section{ border-top:1px solid #EEEFF4; margin-top:20px; padding-top:24px; }107 .section-title{ font-size:52px; font-weight:800; color:var(--purple); padding:24px 30px; }108 .notice{109 margin:0 30px 24px 30px; background:var(--peach);110 border-radius:22px; padding:34px; border:1px solid #F1D6C3;111 }112 .notice h3{ margin:0 0 18px 0; font-size:46px; color:var(--purple); }113 .notice p{ margin:0 0 26px 0; font-size:34px; color:#3C3C46; line-height:1.42; }114 .notice .btn{115 background:var(--purple); color:#FFFFFF; border:none;116 height:100px; border-radius:14px; padding:0 34px;117 display:inline-flex; align-items:center; gap:18px;118 font-size:40px; font-weight:800; cursor:pointer;119 }120 .notice .btn svg{ width:44px; height:44px; }121 122 /* Bottom nav */123 .bottom-nav{124 position:absolute; left:0; right:0; bottom:0;125 height:210px; background:#FFFFFF; border-top:1px solid #EEEFF4;126 display:flex; align-items:center; justify-content:space-around;127 }128 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:14px; color:#A0A0AF; }129 .nav-item svg{ width:60px; height:60px; }130 .nav-item span{ font-size:32px; font-weight:700; }131 .nav-item.active{ color:var(--purple); }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Hero -->138 <div class="hero">139 <div class="img">[IMG: Mountain landscape with train]</div>140 <div class="status-bar">141 <div>11:27</div>142 <div class="status-right">143 <!-- simple status icons -->144 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="9" opacity="0.25"/></svg>145 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">146 <path d="M3 8h18M3 12h18M3 16h18"/>147 </svg>148 <svg viewBox="0 0 24 24" fill="#fff"><path d="M4 17h16v3H4zM6 4h12l-1 9H7z"/></svg>149 </div>150 </div>151 <h1 class="hero-title">Where to next?</h1>152 </div>153 154 <!-- Tabs -->155 <div class="content">156 <div class="tabs">157 <div class="tab active">158 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">159 <circle cx="12" cy="12" r="9"/>160 <path d="M12 12V7M12 12l4 2"/>161 </svg>162 <span>Planner</span>163 </div>164 <div class="tab inactive">165 <svg viewBox="0 0 24 24" fill="currentColor">166 <rect x="4" y="7" width="16" height="9" rx="2"/>167 <circle cx="8" cy="17" r="1.5"/><circle cx="16" cy="17" r="1.5"/>168 </svg>169 <span>Departures</span>170 </div>171 </div>172 <div class="tab-indicator"></div>173 174 <!-- Route Card -->175 <div class="card route-card">176 <div class="route-row">177 <!-- origin -->178 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#766A90;">179 <circle cx="12" cy="12" r="7"/>180 </svg>181 <div>Amsterdam Centraal (Netherlands)</div>182 </div>183 <div class="route-divider"></div>184 <div class="route-row">185 <!-- destination -->186 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#766A90;">187 <path d="M12 3C8.7 3 6 5.7 6 9c0 5.25 6 12 6 12s6-6.75 6-12c0-3.3-2.7-6-6-6z"/>188 <circle cx="12" cy="9" r="2.8"/>189 </svg>190 <div>Brussels Airport - Zaventem (Belgium)</div>191 </div>192 193 <!-- Swap Button -->194 <button class="swap-btn" aria-label="Swap origin/destination">195 <svg viewBox="0 0 24 24" fill="none" stroke="var(--purple)" stroke-width="2">196 <path d="M8 5l-3 3 3 3M5 8h8"/>197 <path d="M16 19l3-3-3-3M11 16h8"/>198 </svg>199 </button>200 </div>201 202 <!-- Chips -->203 <div class="inline-row">204 <div class="chip">205 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">206 <rect x="3" y="5" width="18" height="16" rx="2"/>207 <path d="M3 9h18M8 3v4M16 3v4"/>208 </svg>209 <span>Departure: Now</span>210 </div>211 <div class="chip" style="max-width:480px;">212 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">213 <path d="M5 7h14M9 12h10M13 17h6"/>214 <circle cx="8" cy="7" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="16" cy="17" r="1.5"/>215 </svg>216 <span>Filters</span>217 </div>218 </div>219 220 <!-- CTA -->221 <button class="cta">Plan my journey</button>222 223 <!-- Link -->224 <div class="center-link"><a href="#">About the timetable</a></div>225 226 <!-- Info section -->227 <div class="section">228 <div class="section-title">Before you go</div>229 <div class="notice">230 <h3>Busy trains in the summer</h3>231 <p>Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation‑free routes or after the summer.</p>232 <button class="btn">233 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">234 <rect x="5" y="12" width="14" height="6" rx="2"/>235 <path d="M7 12V7h10v5"/>236 </svg>237 <span>Book seats</span>238 </button>239 </div>240 </div>241 </div>242 243 <!-- Bottom navigation -->244 <div class="bottom-nav">245 <div class="nav-item active">246 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">247 <circle cx="12" cy="12" r="9"/>248 <path d="M12 12V7M12 12l4 2"/>249 </svg>250 <span>Planner</span>251 </div>252 <div class="nav-item">253 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">254 <path d="M3 11l9-7 9 7-9 7-9-7z"/><path d="M12 18v3"/>255 </svg>256 <span>My Trip</span>257 </div>258 <div class="nav-item">259 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">260 <rect x="5" y="3" width="14" height="18" rx="2"/>261 <path d="M9 7h6M9 11h6M9 15h6"/>262 </svg>263 <span>My Pass</span>264 </div>265 <div class="nav-item">266 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">267 <path d="M4 6h16M4 12h16M4 18h16"/>268 </svg>269 <span>More</span>270 </div>271 </div>272 273</div>274</body>275</html>