GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel Planner UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --purple:#1F1846;10 --purple-70:#5B5678;11 --grey:#7B7E8A;12 --light:#EFEFF4;13 --bg:#F6F7FA;14 --card:#FFFFFF;15 --yellow:#FFC533;16 --peach:#F8E1CC;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#14121F; }19 #render-target{20 width:1080px; height:2400px; position:relative; overflow:hidden;21 background: var(--bg); border-radius: 0;22 }23 /* Status bar */24 .status-bar{25 position:absolute; top:16px; left:24px; right:24px; height:40px; color:#fff; z-index:5; display:flex; align-items:center; justify-content:space-between; font-weight:600;26 }27 .status-center{ display:flex; gap:14px; align-items:center; opacity:0.9; }28 .dot{ width:14px; height:14px; border-radius:50%; background:#fff; opacity:0.7; }29 .status-right{ display:flex; gap:18px; align-items:center; }30 .status-icon svg{ width:32px; height:32px; fill:#fff; }31 /* Hero */32 .hero{33 position:relative; height:640px; color:#fff;34 }35 .hero .img-placeholder{36 position:absolute; inset:0;37 background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600; letter-spacing:0.2px;38 }39 .hero-title{40 position:absolute; bottom:40px; left:32px; right:32px;41 font-size:64px; font-weight:800; line-height:1.1; text-shadow: 0 2px 6px rgba(0,0,0,0.35);42 }43 /* Tabs */44 .tabs{45 background:#fff; padding:30px 32px 12px; border-bottom:1px solid #E6E6EA;46 }47 .tabs-row{ display:flex; align-items:center; justify-content:space-between; }48 .tab{ display:flex; align-items:center; gap:18px; font-size:40px; color:var(--grey); }49 .tab svg{ width:44px; height:44px; fill: var(--purple); opacity:0.7; }50 .tab.active{ color:var(--purple); font-weight:700; }51 .tab.active svg{ opacity:1; }52 .tab-underline{53 margin-top:26px; height:6px; width:260px; background:var(--purple); border-radius:3px;54 }55 /* Content */56 .content{ padding:24px 24px 0; }57 .card{58 background:var(--card); border:1px solid #E6E6EA; border-radius:22px; box-shadow:0 0 0 rgba(0,0,0,0);59 }60 .route-card{ padding:28px; position:relative; }61 .swap-btn{62 position:absolute; right:28px; top:28px; width:86px; height:86px; border-radius:50%; border:1px solid #E3E3E8; background:#fff; display:flex; align-items:center; justify-content:center;63 }64 .route-row{ display:flex; align-items:center; gap:22px; padding:14px 0; }65 .route-row + .route-row{ border-top:1px solid #ECECF1; margin-top:10px; }66 .route-text{ font-size:40px; color:#1A172E; font-weight:600; }67 .route-text.sub{ color:#1A172E; font-weight:700; }68 .route-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; }69 .route-icon svg{ width:48px; height:48px; fill:var(--purple); opacity:0.85; }70 /* Controls */71 .controls{ display:flex; gap:22px; margin-top:22px; }72 .control{73 flex:1; background:#fff; border:1px solid #E6E6EA; border-radius:18px; padding:26px; display:flex; align-items:center; gap:20px; font-size:36px; color:#333;74 }75 .control strong{ color:#000; font-weight:800; }76 .control svg{ width:40px; height:40px; fill:var(--purple); opacity:0.9; }77 .cta{78 margin:28px 2px 14px; background:var(--yellow); color:#231C3F; font-weight:800; font-size:42px; text-align:center; padding:34px 20px; border-radius:18px;79 box-shadow:0 6px 0 rgba(0,0,0,0.05);80 }81 .link-row{ text-align:center; margin:16px 0 32px; }82 .link-row a{ color:var(--purple); font-size:36px; text-decoration:underline; }83 /* Info section */84 .info-section{ margin-top:24px; padding:32px 24px; background:#F3F3F6; }85 .info-title{ font-size:46px; font-weight:800; color:var(--purple); margin-bottom:24px; }86 .notice-card{87 background:var(--peach); border-radius:24px; padding:28px; border:1px solid #E7CBB0;88 }89 .notice-title{ font-size:42px; font-weight:800; color:var(--purple); margin-bottom:12px; }90 .notice-text{ font-size:34px; color:#333; line-height:1.55; }91 .notice-cta{92 margin-top:26px; display:inline-flex; align-items:center; gap:16px;93 background:var(--purple); color:#fff; padding:24px 28px; border-radius:14px; font-size:38px; font-weight:800;94 }95 .notice-cta svg{ width:42px; height:42px; fill:#fff; }96 /* Bottom navigation */97 .bottom-nav{98 position:absolute; left:0; right:0; bottom:84px; height:170px; background:#fff; border-top:1px solid #E6E6EA; display:flex; align-items:center; justify-content:space-around;99 }100 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:14px; font-size:34px; color:#808296; }101 .nav-item.active{ color:var(--purple); font-weight:700; }102 .nav-item svg{ width:60px; height:60px; }103 .home-pill{104 position:absolute; left:50%; transform:translateX(-50%); bottom:26px; width:240px; height:12px; background:#fff; border-radius:8px; opacity:0.7;105 }106 .bottom-black{107 position:absolute; left:0; right:0; bottom:0; height:84px; background:#000;108 }109 /* Image placeholder utility */110 .img-label{111 padding:10px 14px; background:rgba(255,255,255,0.75); border:1px solid #BDBDBD; border-radius:10px; color:#555; font-size:28px; font-weight:600;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status-bar">120 <div class="status-left">11:33</div>121 <div class="status-center">122 <div class="dot"></div>123 <div class="dot" style="width:28px; height:28px; border-radius:6px;"></div>124 <div class="dot"></div>125 </div>126 <div class="status-right">127 <div class="status-icon">128 <!-- WiFi -->129 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/></svg>130 </div>131 <div class="status-icon">132 <!-- Battery -->133 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" fill="#fff"/><rect x="4" y="8" width="16" height="8" fill="#1F1846"/><rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/></svg>134 </div>135 </div>136 </div>137 138 <!-- Hero image -->139 <div class="hero">140 <div class="img-placeholder">141 <span class="img-label">[IMG: Scenic mountain railway]</span>142 </div>143 <div class="hero-title">Where to next?</div>144 </div>145 146 <!-- Tabs -->147 <div class="tabs">148 <div class="tabs-row">149 <div class="tab active">150 <!-- Clock icon -->151 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><rect x="11" y="6" width="2" height="6"/><rect x="12" y="12" width="6" height="2"/></svg>152 <span>Planner</span>153 </div>154 <div class="tab" style="color:#B0B2BE;">155 <!-- Train icon -->156 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="10" rx="2"/><rect x="7" y="8" width="4" height="3" fill="#fff"/><rect x="13" y="8" width="4" height="3" fill="#fff"/><circle cx="8" cy="18" r="2"/><circle cx="16" cy="18" r="2"/></svg>157 <span>Departures</span>158 </div>159 </div>160 <div class="tab-underline"></div>161 </div>162 163 <!-- Main content -->164 <div class="content">165 <!-- Route card -->166 <div class="card route-card">167 <div class="swap-btn" title="Swap">168 <!-- Up/Down arrows -->169 <svg viewBox="0 0 24 24">170 <path d="M7 15l-3-3 3-3v2h6v2H7v2z"/>171 <path d="M17 9l3 3-3 3v-2h-6v-2h6V9z"/>172 </svg>173 </div>174 175 <div class="route-row">176 <div class="route-icon">177 <!-- radio dot -->178 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#1F1846" stroke-width="2"/><circle cx="12" cy="12" r="3"/></svg>179 </div>180 <div class="route-text">Amsterdam Centraal (Netherlands)</div>181 </div>182 183 <div class="route-row">184 <div class="route-icon">185 <!-- location pin -->186 <svg viewBox="0 0 24 24"><path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>187 </div>188 <div class="route-text">Brussels Airport - Zaventem (Belgium)</div>189 </div>190 </div>191 192 <!-- Controls -->193 <div class="controls">194 <div class="control">195 <!-- Calendar -->196 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="15" rx="2"/><rect x="3" y="5" width="18" height="4" fill="#1F1846"/><rect x="7" y="2" width="2" height="4"/><rect x="15" y="2" width="2" height="4"/></svg>197 <span>Dep: <strong>25 Sep 11:45</strong></span>198 </div>199 <div class="control">200 <!-- Filters / equalizer -->201 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="2" height="16"/><rect x="11" y="4" width="2" height="16"/><rect x="17" y="4" width="2" height="16"/><rect x="3" y="9" width="6" height="4" rx="1"/><rect x="9" y="13" width="6" height="4" rx="1"/><rect x="15" y="7" width="6" height="4" rx="1"/></svg>202 <span>Filters</span>203 </div>204 </div>205 206 <div class="cta">Plan my journey</div>207 208 <div class="link-row">209 <a href="#">About the timetable</a>210 </div>211 </div>212 213 <!-- Info section -->214 <div class="info-section">215 <div class="info-title">Before you go</div>216 <div class="notice-card">217 <div class="notice-title">Busy trains in the summer</div>218 <div class="notice-text">219 Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation-free routes or after the summer.220 </div>221 <div class="notice-cta">222 <!-- Seat icon -->223 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="10" height="6" rx="2"/><rect x="6" y="12" width="12" height="6" rx="2"/><rect x="16" y="8" width="4" height="6" rx="1"/></svg>224 <span>Book seats</span>225 </div>226 </div>227 </div>228 229 <!-- Bottom navigation -->230 <div class="bottom-nav">231 <div class="nav-item active">232 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="#1F1846" stroke-width="2"/><rect x="11" y="6" width="2" height="6"/><rect x="12" y="12" width="6" height="2"/></svg>233 <div>Planner</div>234 </div>235 <div class="nav-item">236 <svg viewBox="0 0 24 24"><path d="M4 18l8-12 8 12H4z"/><circle cx="12" cy="10" r="2" fill="#fff"/></svg>237 <div>My Trip</div>238 </div>239 <div class="nav-item">240 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="7" y="7" width="10" height="6" fill="#fff"/><rect x="7" y="14" width="6" height="3" fill="#fff"/></svg>241 <div>My Pass</div>242 </div>243 <div class="nav-item">244 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="2"/><rect x="4" y="11" width="16" height="2"/><rect x="4" y="16" width="16" height="2"/></svg>245 <div>More</div>246 </div>247 </div>248 <div class="home-pill"></div>249 <div class="bottom-black"></div>250 251</div>252</body>253</html>