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:#2D214F;10    --purple-light:#7A728E;11    --grey:#E6E6EB;12    --soft-grey:#F4F5F8;13    --text:#1E1E24;14    --yellow:#F7B81C;15    --peach:#F7E0D0;16  }17  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--text); }18  #render-target{19    width:1080px; height:2400px; position:relative; overflow:hidden;20    background:#FFFFFF; border-radius:0; box-shadow:none;21  }22 23  /* Top banner */24  .banner{25    width:1080px; height:520px; position:relative; overflow:hidden;26  }27  .banner .img{28    width:100%; height:100%;29    background:#E0E0E0; border-bottom:1px solid #BDBDBD;30    display:flex; align-items:flex-end; justify-content:flex-start;31    padding:40px;32    box-sizing:border-box;33  }34  .banner .img span{ color:#757575; font-size:40px; }35  .banner h1{36    position:absolute; left:40px; bottom:30px;37    margin:0; color:#FFFFFF; font-weight:800; font-size:92px; letter-spacing:0.5px;38    text-shadow:0 2px 6px rgba(0,0,0,0.35);39  }40 41  /* Tabs */42  .tabs{43    display:flex; align-items:center; justify-content:space-between;44    padding:28px 40px 10px 40px; box-sizing:border-box;45    border-bottom:1px solid var(--grey); background:#fff;46  }47  .tab{48    display:flex; align-items:center; gap:18px; font-size:46px; font-weight:600;49  }50  .tab svg{ width:52px; height:52px; }51  .tab.inactive{ color:#A1A1B3; }52  .tab.active{ color:var(--purple); }53  .underline{54    width:320px; height:8px; background:var(--purple);55    margin-left:40px; margin-top:-8px; border-radius:6px;56  }57 58  /* Planner card */59  .planner-card{60    width:1000px; margin:30px auto 22px auto;61    background:#fff; border:2px solid var(--grey); border-radius:28px;62    box-shadow:0 1px 0 rgba(0,0,0,0.02);63    position:relative;64  }65  .row{66    display:flex; align-items:center; gap:24px;67    padding:38px 40px; font-size:44px; color:var(--purple); font-weight:700;68  }69  .row .sub{ font-weight:700; }70  .divider{ height:2px; background:#E3E3EA; margin:0 40px; }71  .swap{72    position:absolute; right:22px; top:50%; transform:translateY(-50%);73    width:116px; height:116px; border:2px solid var(--grey); background:#fff; border-radius:58px;74    display:flex; align-items:center; justify-content:center;75  }76  .swap svg{ width:64px; height:64px; }77 78  /* Chips line */79  .chips{80    display:flex; gap:26px; width:1000px; margin:18px auto 24px auto;81  }82  .chip{83    flex:1; background:#fff; border:2px solid var(--grey); border-radius:20px;84    height:120px; display:flex; align-items:center; gap:22px; padding:0 34px;85    font-size:42px; color:#6B6B7A; box-sizing:border-box;86  }87  .chip svg{ width:52px; height:52px; }88 89  /* CTA */90  .primary-btn{91    width:1000px; height:128px; margin:18px auto;92    background:var(--yellow); color:#2A1C00; font-weight:800; font-size:46px;93    border:none; border-radius:22px; display:flex; align-items:center; justify-content:center;94  }95 96  .link{97    text-align:center; margin-top:22px; font-size:40px; color:var(--purple);98    text-decoration:underline;99  }100 101  /* Info section */102  .section{103    margin-top:34px; background:var(--soft-grey); padding:40px 0 220px 0;104    border-top:1px solid var(--grey);105  }106  .section h2{107    margin:20px 40px 24px 40px; font-size:58px; color:var(--purple); font-weight:800;108  }109  .card-info{110    width:1000px; margin:0 auto; background:var(--peach); border-radius:26px;111    padding:36px; box-sizing:border-box;112  }113  .card-info h3{114    margin:0 0 16px 0; font-size:50px; color:var(--purple); font-weight:800;115  }116  .card-info p{117    margin:0 0 30px 0; font-size:38px; color:#3E3E49; line-height:1.4;118  }119  .secondary-btn{120    display:inline-flex; align-items:center; gap:18px;121    background:var(--purple); color:#fff; font-size:44px; font-weight:700;122    padding:26px 34px; border-radius:18px;123  }124  .secondary-btn svg{ width:50px; height:50px; }125 126  /* Bottom nav */127  .bottom-nav{128    position:absolute; bottom:0; left:0; width:100%; height:200px;129    background:#fff; border-top:1px solid var(--grey);130    display:flex; align-items:center; justify-content:space-around;131  }132  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:18px; color:#9C9CAA; }133  .nav-item.active{ color:var(--purple); }134  .nav-item svg{ width:60px; height:60px; }135  .nav-item span{ font-size:34px; font-weight:700; }136 137  .home-bar{138    position:absolute; bottom:22px; left:50%; transform:translateX(-50%);139    width:300px; height:12px; border-radius:6px; background:#000;140    opacity:0.8;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Scenic banner -->148  <div class="banner">149    <div class="img"><span>[IMG: Scenic mountain train]</span></div>150    <h1>Where to next?</h1>151  </div>152 153  <!-- Tabs -->154  <div class="tabs">155    <div class="tab active">156      <svg viewBox="0 0 24 24">157        <circle cx="12" cy="12" r="9" fill="none" stroke="#2D214F" stroke-width="2"/>158        <path d="M12 6v6l4 2" stroke="#2D214F" stroke-width="2" fill="none" stroke-linecap="round"/>159      </svg>160      <span>Planner</span>161    </div>162    <div class="tab inactive">163      <svg viewBox="0 0 24 24">164        <rect x="4" y="7" width="16" height="9" rx="2" fill="none" stroke="#A1A1B3" stroke-width="2"/>165        <circle cx="8" cy="17" r="1.5" fill="#A1A1B3"/>166        <circle cx="16" cy="17" r="1.5" fill="#A1A1B3"/>167      </svg>168      <span>Departures</span>169    </div>170  </div>171  <div class="underline"></div>172 173  <!-- Planner card -->174  <div class="planner-card">175    <div class="row">176      <svg viewBox="0 0 24 24">177        <circle cx="12" cy="12" r="7.5" fill="none" stroke="#B5B5C6" stroke-width="2"/>178      </svg>179      <div class="sub">Madrid City (Spain)</div>180    </div>181    <div class="divider"></div>182    <div class="row" style="color:#2D214F;">183      <svg viewBox="0 0 24 24">184        <path d="M12 3c3.1 0 5.5 2.4 5.5 5.5 0 4.2-5.5 11-5.5 11S6.5 12.7 6.5 8.5C6.5 5.4 8.9 3 12 3z" fill="none" stroke="#2D214F" stroke-width="2"/>185        <circle cx="12" cy="8.5" r="2.2" fill="none" stroke="#2D214F" stroke-width="2"/>186      </svg>187      <div class="sub">Barcelona City (Spain)</div>188    </div>189    <div class="swap">190      <svg viewBox="0 0 24 24">191        <path d="M8 17l-3-3 3-3" fill="none" stroke="#7A728E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>192        <path d="M16 7l3 3-3 3" fill="none" stroke="#7A728E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193      </svg>194    </div>195  </div>196 197  <!-- Chips -->198  <div class="chips">199    <div class="chip">200      <svg viewBox="0 0 24 24">201        <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#9B96AA" stroke-width="2"/>202        <path d="M7 5v-2M17 5v-2" stroke="#9B96AA" stroke-width="2" stroke-linecap="round"/>203      </svg>204      <span>Departure: Now</span>205    </div>206    <div class="chip">207      <svg viewBox="0 0 24 24">208        <path d="M4 7h14M7 12h10M10 17h8" stroke="#9B96AA" stroke-width="2" stroke-linecap="round"/>209        <circle cx="12" cy="7" r="1.5" fill="#9B96AA"/>210        <circle cx="15" cy="12" r="1.5" fill="#9B96AA"/>211        <circle cx="18" cy="17" r="1.5" fill="#9B96AA"/>212      </svg>213      <span>Filters</span>214    </div>215  </div>216 217  <!-- Primary CTA -->218  <div class="primary-btn">Plan my journey</div>219 220  <div class="link">About the timetable</div>221 222  <!-- Info section -->223  <div class="section">224    <h2>Before you go</h2>225    <div class="card-info">226      <h3>Busy trains in the summer</h3>227      <p>Reserve your seats early to secure your plans. Prefer a less busy trip? Travel on reservation-free routes or after the summer.</p>228      <div class="secondary-btn">229        <svg viewBox="0 0 24 24">230          <rect x="4" y="6" width="14" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/>231          <path d="M6 16v2h10v-2" stroke="#fff" stroke-width="2" fill="none"/>232          <circle cx="7" cy="9" r="1.2" fill="#fff"/>233        </svg>234        <span>Book seats</span>235      </div>236    </div>237  </div>238 239  <!-- Bottom navigation -->240  <div class="bottom-nav">241    <div class="nav-item active">242      <svg viewBox="0 0 24 24">243        <circle cx="12" cy="12" r="9" fill="none" stroke="#2D214F" stroke-width="2"/>244        <path d="M12 6v6l4 2" stroke="#2D214F" stroke-width="2" fill="none" stroke-linecap="round"/>245      </svg>246      <span>Planner</span>247    </div>248    <div class="nav-item">249      <svg viewBox="0 0 24 24">250        <path d="M4 10l8-5 8 5-8 5-8-5z" fill="none" stroke="#9C9CAA" stroke-width="2"/>251        <path d="M12 15v6" stroke="#9C9CAA" stroke-width="2" stroke-linecap="round"/>252      </svg>253      <span>My Trip</span>254    </div>255    <div class="nav-item">256      <svg viewBox="0 0 24 24">257        <rect x="5" y="6" width="14" height="12" rx="2" fill="none" stroke="#9C9CAA" stroke-width="2"/>258        <path d="M8 10h8M8 13h8" stroke="#9C9CAA" stroke-width="2"/>259      </svg>260      <span>My Pass</span>261    </div>262    <div class="nav-item">263      <svg viewBox="0 0 24 24">264        <path d="M4 7h16M4 12h16M4 17h16" stroke="#9C9CAA" stroke-width="2" stroke-linecap="round"/>265      </svg>266      <span>More</span>267    </div>268  </div>269  <div class="home-bar"></div>270 271</div>272</body>273</html>