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  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff; border-radius:20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);12  }13 14  /* Colors */15  :root {16    --purple:#2C1E57;17    --purple-50:#6E5FA3;18    --muted:#8F8AA5;19    --border:#E5E6EA;20    --bg:#F6F6F9;21    --yellow:#FFBE1A;22    --peach:#F7E2D3;23    --gray-text:#767585;24  }25 26  /* Hero */27  .hero {28    position:relative; width:100%; height:540px;29    background:#E0E0E0; border-bottom:1px solid var(--border);30    display:flex; align-items:flex-end; justify-content:flex-start;31  }32  .hero .img {33    position:absolute; inset:0;34    background:#E0E0E0;35    border-bottom:1px solid #BDBDBD;36    display:flex; align-items:center; justify-content:center;37    color:#757575; font-size:28px;38  }39  .hero h1 {40    position:relative; margin:0 40px 40px 40px;41    color:#ffffff; font-size:72px; font-weight:800; letter-spacing:0.2px;42    text-shadow: 0 2px 10px rgba(0,0,0,0.40);43  }44 45  /* Tabs */46  .tabs {47    display:flex; align-items:center; justify-content:space-between;48    background:#fff; padding:28px 40px 18px; border-bottom:1px solid var(--border);49  }50  .tab {51    display:flex; align-items:center; gap:18px; font-size:40px; font-weight:700;52    color:var(--muted);53  }54  .tab svg { width:48px; height:48px; }55  .tab.active { color:var(--purple); }56  .tab-underline {57    height:6px; width:340px; background:var(--purple); border-radius:3px; margin-left:40px;58  }59 60  /* Planner card */61  .content { background:var(--bg); }62  .card {63    margin:28px 28px 0; background:#fff; border:1px solid var(--border);64    border-radius:18px; overflow:hidden;65    box-shadow:0 1px 2px rgba(0,0,0,0.03);66  }67  .row { display:flex; align-items:center; padding:30px 32px; gap:22px; font-size:42px; color:var(--purple); }68  .row + .row { border-top:1px solid #EFEFF3; color:#4b4566; }69  .radio {70    width:38px; height:38px; border:3px solid var(--muted); border-radius:50%;71  }72  .swap {73    margin-left:auto; width:88px; height:88px; border:1px solid var(--border); border-radius:50%;74    display:flex; align-items:center; justify-content:center; background:#fafafa;75  }76  .row .label-muted { color:#9a98a8; }77  .input-wrap {78    display:flex; gap:24px; padding:24px 28px;79  }80  .input {81    flex:1; background:#fff; border:1px solid var(--border); border-radius:16px;82    padding:26px 28px; display:flex; align-items:center; gap:18px; font-size:40px; color:#5b5575;83  }84  .input svg { width:48px; height:48px; }85  .filters { width:320px; }86 87  .cta {88    margin:26px 28px; height:120px; border-radius:18px; background:var(--yellow);89    display:flex; align-items:center; justify-content:center;90    color:var(--purple); font-size:46px; font-weight:800;91    box-shadow:0 4px 0 rgba(0,0,0,0.08);92  }93  .center-link {94    text-align:center; margin-top:6px; margin-bottom:34px;95  }96  .center-link a { color:var(--purple); font-size:36px; text-decoration:underline; }97 98  /* Info section */99  .section {100    margin-top:18px; padding:22px 28px 0;101  }102  .section h2 {103    margin:0 0 26px; font-size:54px; color:var(--purple); font-weight:800;104  }105  .peach-card {106    background:var(--peach); border-radius:22px; border:1px solid #EDD4C5;107    padding:34px; color:var(--purple); box-shadow:0 1px 2px rgba(0,0,0,0.02);108  }109  .peach-title { font-size:46px; font-weight:800; margin-bottom:16px; }110  .peach-text { font-size:36px; line-height:1.35; color:#40395f; }111  .peach-actions { margin-top:28px; }112  .btn-dark {113    display:inline-flex; align-items:center; gap:18px;114    background:var(--purple); color:#fff; padding:26px 34px; border-radius:16px;115    font-size:40px; font-weight:700;116  }117  .btn-dark svg { width:48px; height:48px; }118 119  /* Bottom nav */120  .bottom-nav {121    position:absolute; left:0; bottom:72px; width:100%; height:160px;122    background:#fff; border-top:1px solid var(--border);123    display:flex; align-items:center; justify-content:space-around;124  }125  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--muted); font-size:32px; }126  .nav-item.active { color:var(--purple); font-weight:700; }127  .nav-item svg { width:54px; height:54px; }128 129  /* Home indicator */130  .home-indicator {131    position:absolute; left:50%; transform:translateX(-50%);132    bottom:20px; width:240px; height:10px; background:#111; border-radius:6px; opacity:0.8;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Hero banner -->140  <div class="hero">141    <div class="img">[IMG: Mountain valley with train]</div>142    <h1>Where to next?</h1>143  </div>144 145  <!-- Tabs -->146  <div class="tabs">147    <div class="tab active">148      <!-- Clock icon -->149      <svg viewBox="0 0 24 24">150        <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>151        <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>152      </svg>153      <span>Planner</span>154    </div>155    <div class="tab">156      <!-- Train icon (simple front view) -->157      <svg viewBox="0 0 24 24">158        <rect x="5" y="5" width="14" height="12" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/>159        <circle cx="9" cy="12" r="1.6" fill="currentColor"/>160        <circle cx="15" cy="12" r="1.6" fill="currentColor"/>161        <path d="M7 19l3-2h4l3 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>162      </svg>163      <span>Departures</span>164    </div>165  </div>166  <div class="tab-underline"></div>167 168  <div class="content">169    <!-- Planner Card -->170    <div class="card">171      <div class="row">172        <div class="radio"></div>173        <div style="flex:1; font-weight:700;">Madrid City (Spain)</div>174        <div class="swap">175          <!-- Up/Down arrows -->176          <svg viewBox="0 0 24 24">177            <path d="M8 8l4-4 4 4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>178            <path d="M8 16l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179          </svg>180        </div>181      </div>182      <div class="row">183        <!-- Location pin -->184        <svg width="48" height="48" viewBox="0 0 24 24">185          <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="currentColor"/>186        </svg>187        <div class="label-muted">To</div>188      </div>189    </div>190 191    <div class="input-wrap">192      <div class="input">193        <!-- Calendar -->194        <svg viewBox="0 0 24 24">195          <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>196          <path d="M16 3v4M8 3v4M3 10h18" stroke="currentColor" stroke-width="2" fill="none"/>197        </svg>198        <span>Departure: Now</span>199      </div>200      <div class="input filters">201        <!-- Sliders icon -->202        <svg viewBox="0 0 24 24">203          <path d="M4 6h10M14 6v4M4 18h16M8 18v-4M20 10h-8M12 10v4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>204        </svg>205        <span>Filters</span>206      </div>207    </div>208 209    <div class="cta">Plan my journey</div>210 211    <div class="center-link"><a href="#">About the timetable</a></div>212 213    <!-- Info section -->214    <div class="section">215      <h2>Before you go</h2>216      <div class="peach-card">217        <div class="peach-title">Busy trains in the summer</div>218        <div class="peach-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="peach-actions">222          <a class="btn-dark" href="#">223            <!-- Seat icon -->224            <svg viewBox="0 0 24 24">225              <path d="M6 6h8a2 2 0 0 1 2 2v8H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" fill="none" stroke="#ffffff" stroke-width="2"/>226              <path d="M18 16h2v2H6" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>227            </svg>228            <span>Book seats</span>229          </a>230        </div>231      </div>232    </div>233  </div>234 235  <!-- Bottom navigation -->236  <div class="bottom-nav">237    <div class="nav-item active">238      <svg viewBox="0 0 24 24">239        <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>240        <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>241      </svg>242      <div>Planner</div>243    </div>244    <div class="nav-item">245      <svg viewBox="0 0 24 24">246        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2"/>247        <circle cx="12" cy="14" r="3" fill="currentColor"/>248      </svg>249      <div>My Trip</div>250    </div>251    <div class="nav-item">252      <svg viewBox="0 0 24 24">253        <rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>254        <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/>255      </svg>256      <div>My Pass</div>257    </div>258    <div class="nav-item">259      <svg viewBox="0 0 24 24">260        <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>261      </svg>262      <div>More</div>263    </div>264  </div>265 266  <div class="home-indicator"></div>267</div>268</body>269</html>