GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Planner UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #201841; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #F5F5F8; border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);12 }13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; color: #fff; z-index: 5;16 }17 .status-right { display: flex; gap: 24px; align-items: center; }18 /* Hero */19 .hero {20 position: relative; height: 560px; width: 100%;21 }22 .hero .img {23 position: absolute; inset: 0;24 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;25 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600;26 }27 .hero .overlay {28 position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.15), rgba(0,0,0,0.0));29 }30 .hero .title {31 position: absolute; bottom: 40px; left: 40px; right: 40px; font-size: 72px; font-weight: 800; color: #ffffff; letter-spacing: 0.5px;32 }33 34 /* Tabs */35 .tabs {36 background: #fff; height: 140px; border-top: 1px solid #E6E6EC; border-bottom: 1px solid #E6E6EC;37 display: flex; align-items: center; justify-content: space-between; padding: 0 40px; position: relative;38 }39 .tab {40 display: flex; align-items: center; gap: 18px; font-size: 42px; font-weight: 700;41 }42 .tab.inactive { color: #9A98A8; font-weight: 600; }43 .active-underline {44 position: absolute; left: 40px; bottom: 0; width: 420px; height: 8px; background: #2A1C5A; border-radius: 4px;45 }46 47 /* Content */48 .content { padding: 34px 32px 0 32px; }49 .card {50 background: #fff; border: 1px solid #E6E6EC; border-radius: 24px; box-shadow: 0 6px 12px rgba(0,0,0,0.05);51 padding: 32px 28px; position: relative; margin-bottom: 28px;52 }53 .row { display: flex; align-items: center; gap: 22px; padding: 18px 0; }54 .row + .row { border-top: 1px solid #ECECF2; }55 .label { font-size: 44px; font-weight: 800; color: #271C55; }56 .swap {57 position: absolute; right: 22px; top: 50%; transform: translateY(-50%);58 width: 120px; height: 120px; border-radius: 60px; background: #F5F5FA; border: 1px solid #DFDFE6;59 display: flex; align-items: center; justify-content: center;60 }61 62 /* Chips */63 .chips { display: flex; gap: 24px; margin: 12px 0 32px; }64 .chip {65 flex: 1; background: #fff; border: 1px solid #E6E6EC; border-radius: 18px; height: 120px;66 display: flex; align-items: center; gap: 20px; padding: 0 26px; font-size: 40px; font-weight: 700; color: #2A1C5A;67 box-shadow: 0 4px 8px rgba(0,0,0,0.03);68 }69 70 /* Primary button */71 .primary-btn {72 height: 120px; border-radius: 16px; background: #F6B71E; color: #2A1C5A;73 display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 800; margin: 18px 8px 26px;74 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);75 }76 77 .link-center { text-align: center; color: #2A1C5A; font-size: 36px; font-weight: 700; text-decoration: underline; margin-top: 22px; }78 79 /* Info section */80 .section {81 margin-top: 48px; background: #F7F7FB; border-top: 1px solid #E6E6EC;82 }83 .section .title {84 padding: 36px 32px 16px; font-size: 54px; font-weight: 800; color: #2A1C5A;85 }86 .info-card {87 margin: 0 32px 36px; background: #F6E2CF; border-radius: 26px; border: 1px solid #E9D2C1; padding: 30px;88 box-shadow: 0 4px 8px rgba(0,0,0,0.04);89 }90 .info-card h3 { margin: 0 0 12px; font-size: 48px; color: #231A50; }91 .info-card p { margin: 0 0 24px; font-size: 34px; line-height: 1.45; color: #3A335F; }92 .secondary-btn {93 display: inline-flex; align-items: center; gap: 16px; background: #231A50; color: #fff; font-size: 40px; font-weight: 800;94 padding: 24px 32px; border-radius: 16px;95 }96 97 /* Bottom nav */98 .bottom-nav {99 position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: #fff; border-top: 1px solid #E6E6EC;100 display: flex; align-items: center; justify-content: space-around; color: #8D8A9B;101 }102 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 32px; }103 .nav-item.active { color: #231A50; font-weight: 800; }104 .gesture {105 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);106 width: 200px; height: 10px; background: #DADAE0; border-radius: 6px;107 }108 109 /* Simple icon styles */110 .icon { width: 48px; height: 48px; }111 .icon-lg { width: 64px; height: 64px; }112 .icon-xl { width: 80px; height: 80px; }113 .icon-light path, .icon-light rect, .icon-light circle { stroke: #ffffff; fill: none; }114 .icon-purple path, .icon-purple rect, .icon-purple circle { stroke: #2A1C5A; fill: none; }115 .icon-grey path, .icon-grey rect, .icon-grey circle { stroke: #9A98A8; fill: none; }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status Bar -->122 <div class="status-bar">123 <div style="display:flex; align-items:center; gap:16px;">124 <span style="font-size:34px; font-weight:700;">1:12</span>125 <svg class="icon-light icon" viewBox="0 0 24 24"><rect x="2" y="7" width="16" height="10" rx="2" stroke-width="2"/></svg>126 <svg class="icon-light icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2"/></svg>127 <span style="font-weight:700;">ovo</span>128 </div>129 <div class="status-right">130 <svg class="icon-light icon" viewBox="0 0 24 24"><path d="M3 18c4-4 14-4 18 0" stroke-width="2"/><path d="M6 15c3-3 9-3 12 0" stroke-width="2"/><path d="M9 12c2-2 4-2 6 0" stroke-width="2"/></svg>131 <svg class="icon-light icon" viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" stroke-width="2"/><rect x="20" y="10" width="2" height="4" stroke-width="2"/></svg>132 </div>133 </div>134 135 <!-- Hero -->136 <div class="hero">137 <div class="img">[IMG: Scenic mountains with train]</div>138 <div class="overlay"></div>139 <div class="title">Where to next?</div>140 </div>141 142 <!-- Tabs -->143 <div class="tabs">144 <div class="tab">145 <svg class="icon-purple icon-lg" viewBox="0 0 24 24">146 <circle cx="12" cy="12" r="9" stroke-width="2"></circle>147 <path d="M12 6v6l4 2" stroke-width="2"></path>148 </svg>149 <span>Planner</span>150 </div>151 <div class="tab inactive">152 <svg class="icon-grey icon-lg" viewBox="0 0 24 24">153 <rect x="3" y="6" width="18" height="12" rx="2" stroke-width="2"></rect>154 <path d="M7 10h10M7 14h6" stroke-width="2"></path>155 </svg>156 <span>Departures</span>157 </div>158 <div class="active-underline"></div>159 </div>160 161 <!-- Main content -->162 <div class="content">163 164 <!-- From/To card -->165 <div class="card">166 <div class="row">167 <svg class="icon-purple icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" stroke-width="2"/></svg>168 <div class="label">Madrid City (Spain)</div>169 </div>170 <div class="row">171 <svg class="icon-purple icon" viewBox="0 0 24 24">172 <path d="M12 3c-3 0-5 2-5 5 0 4 5 10 5 10s5-6 5-10c0-3-2-5-5-5z" stroke-width="2" fill="none"></path>173 <circle cx="12" cy="8" r="2" stroke-width="2"></circle>174 </svg>175 <div class="label">Barcelona City (Spain)</div>176 </div>177 178 <div class="swap">179 <svg class="icon-purple icon-xl" viewBox="0 0 24 24">180 <path d="M8 16V8l-3 3" stroke-width="2"></path>181 <path d="M16 8v8l3-3" stroke-width="2"></path>182 </svg>183 </div>184 </div>185 186 <!-- Chips -->187 <div class="chips">188 <div class="chip">189 <svg class="icon-purple icon-lg" viewBox="0 0 24 24">190 <rect x="3" y="6" width="18" height="14" rx="2" stroke-width="2"></rect>191 <path d="M3 10h18" stroke-width="2"></path>192 <path d="M8 3v6M16 3v6" stroke-width="2"></path>193 </svg>194 <div><span style="color:#9A98A8; font-weight:700;">Dep:</span> 27 Aug 08:00</div>195 </div>196 <div class="chip">197 <svg class="icon-purple icon-lg" viewBox="0 0 24 24">198 <path d="M4 7h12M4 12h16M4 17h8" stroke-width="2"></path>199 <circle cx="18" cy="7" r="2" stroke-width="2"></circle>200 <circle cx="12" cy="12" r="2" stroke-width="2"></circle>201 <circle cx="14" cy="17" r="2" stroke-width="2"></circle>202 </svg>203 <div>Filters</div>204 </div>205 </div>206 207 <!-- CTA -->208 <div class="primary-btn">Plan my journey</div>209 210 <div class="link-center">About the timetable</div>211 212 </div>213 214 <!-- Info section -->215 <div class="section">216 <div class="title">Before you go</div>217 <div class="info-card">218 <h3>Busy trains in the summer</h3>219 <p>Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation-free routes or after the summer.</p>220 <div class="secondary-btn">221 <svg class="icon" viewBox="0 0 24 24">222 <rect x="4" y="10" width="16" height="8" rx="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>223 <path d="M6 10V8h12v2" stroke="#ffffff" stroke-width="2"></path>224 <circle cx="7" cy="18" r="1.5" fill="#ffffff"></circle>225 <circle cx="17" cy="18" r="1.5" fill="#ffffff"></circle>226 </svg>227 <span>Book seats</span>228 </div>229 </div>230 </div>231 232 <!-- Bottom navigation -->233 <div class="bottom-nav">234 <div class="nav-item active">235 <svg class="icon-purple icon-lg" viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="9" stroke-width="2"></circle>237 <path d="M12 6v6l4 2" stroke-width="2"></path>238 </svg>239 <div>Planner</div>240 </div>241 <div class="nav-item">242 <svg class="icon-grey icon-lg" viewBox="0 0 24 24">243 <path d="M12 3l8 8-8 8-8-8 8-8z" stroke-width="2" fill="none"></path>244 </svg>245 <div>My Trip</div>246 </div>247 <div class="nav-item">248 <svg class="icon-grey icon-lg" viewBox="0 0 24 24">249 <rect x="6" y="4" width="12" height="16" rx="2" stroke-width="2"></rect>250 <path d="M9 8h6M9 12h6M9 16h6" stroke-width="2"></path>251 </svg>252 <div>My Pass</div>253 </div>254 <div class="nav-item">255 <svg class="icon-grey icon-lg" viewBox="0 0 24 24">256 <path d="M4 6h16M4 12h16M4 18h16" stroke-width="2"></path>257 </svg>258 <div>More</div>259 </div>260 <div class="gesture"></div>261 </div>262 263</div>264</body>265</html>