GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Transit Planner Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#111418; color:#E8ECEF;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; left:0; top:0; right:0;16    height:90px; padding:0 24px;17    display:flex; align-items:center; justify-content:space-between;18    color:#EDEFF1; font-weight:600; letter-spacing:0.5px;19  }20  .sb-left{display:flex; align-items:center; gap:18px;}21  .sb-right{display:flex; align-items:center; gap:18px; font-weight:500;}22  .pill-signal{width:14px; height:14px; border-radius:50%; background:#9aa8b1;}23  .battery{24    width:46px; height:20px; border:2px solid #9aa8b1; border-radius:4px; position:relative;25  }26  .battery::after{content:""; position:absolute; right:-6px; top:5px; width:4px; height:10px; background:#9aa8b1; border-radius:1px;}27  .battery .level{position:absolute; left:3px; top:3px; height:12px; width:34px; background:#9aa8b1; border-radius:2px;}28  .back-btn{29    position:absolute; top:112px; left:28px; width:64px; height:64px; border-radius:50%;30    display:flex; align-items:center; justify-content:center; color:#D9DEE3; cursor:pointer;31  }32  .back-btn svg{width:36px; height:36px;}33 34  /* Fields */35  .fields{position:absolute; top:108px; left:120px; right:28px;}36  .field{37    background:#1b2126; border-radius:18px; height:92px; display:flex; align-items:center;38    padding:0 24px; margin-bottom:18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);39  }40  .field .left-dot{41    width:26px; height:26px; border-radius:50%; border:3px solid #C7CDD3; margin-right:18px;42  }43  .field .left-dot.red{background:#D84B58; border-color:#D84B58;}44  .field .label{font-size:34px; color:#E7EBEF; flex:1;}45  .swap{46    width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:#A6B0B8;47  }48  .swap svg{width:30px; height:30px;}49 50  /* Options row */51  .options-row{52    position:absolute; left:28px; right:28px; top:318px;53    display:flex; align-items:center; justify-content:space-between;54  }55  .depart-btn{56    display:inline-flex; align-items:center; gap:16px;57    color:#C5CDD5; padding:14px 20px; border-radius:12px;58    background:transparent; font-size:34px;59  }60  .depart-btn .chev{margin-left:8px;}61  .depart-btn svg{width:38px; height:38px;}62  .filter-btn{63    display:inline-flex; align-items:center; gap:14px; padding:14px 24px;64    background:#1b2126; border-radius:14px; color:#E7EBEF; font-size:34px;65    border:1px solid rgba(255,255,255,0.08);66  }67  .filter-btn svg{width:34px; height:34px;}68  .badge{69    margin-left:14px; background:#15b58b; color:#fff; font-weight:700;70    width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px;71    box-shadow:0 0 0 2px #0f161b inset;72  }73 74  /* Dropdown */75  .dropdown{76    position:absolute; left:28px; top:382px; width:520px;77    background:#242a30; border-radius:14px; box-shadow:0 18px 36px rgba(0,0,0,0.55);78    border:1px solid rgba(255,255,255,0.06); overflow:hidden;79  }80  .drop-item{81    padding:30px 26px; font-size:36px; color:#E9EDF1; border-bottom:1px solid rgba(255,255,255,0.06);82  }83  .drop-item:last-child{border-bottom:none;}84  /* Results list */85  .list{position:absolute; left:28px; right:28px; top:620px;}86  .result{87    padding:18px 0 26px; border-bottom:1px solid rgba(255,255,255,0.06);88  }89  .time-row{90    display:flex; align-items:center; justify-content:space-between; color:#EAEFF3;91  }92  .time-row .time{font-size:44px; font-weight:700;}93  .time-row .dur{font-size:34px; color:#A9B2BB;}94  .price{95    background:#3c4248; color:#EDEFF2; padding:14px 20px; border-radius:16px; font-size:34px;96  }97 98  .route-card{99    margin-top:22px; background:#1b2126; border-radius:14px; padding:18px 22px;100    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);101  }102  .route-track{display:flex; align-items:center; gap:18px; color:#C7CFD7; font-size:34px;}103  .sep{color:#909aa3;}104  .bus svg{width:54px; height:34px;}105  .info-dot{106    width:34px; height:34px; border-radius:50%; background:#f2c037; color:#111; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px;107  }108 109  /* Tiny helper for placeholders */110  .img-placeholder{111    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status bar -->119  <div class="status-bar">120    <div class="sb-left">121      <div class="time-text" style="font-size:34px;">8:27</div>122      <div class="pill-signal"></div>123      <div class="pill-signal"></div>124      <div class="pill-signal"></div>125      <div class="pill-signal" style="background:#fff;"></div>126    </div>127    <div class="sb-right">128      <svg width="28" height="28" viewBox="0 0 24 24" fill="#9aa8b1" aria-hidden="true">129        <circle cx="12" cy="12" r="10" opacity="0.35"></circle>130        <path d="M12 6v6l4 2" stroke="#9aa8b1" stroke-width="2" fill="none" stroke-linecap="round"></path>131      </svg>132      <div class="battery"><div class="level"></div></div>133      <div>94%</div>134    </div>135  </div>136 137  <!-- Back button -->138  <div class="back-btn" title="Back">139    <svg viewBox="0 0 32 32" fill="none" stroke="#E6EBF0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">140      <path d="M18 6 L8 16 L18 26"></path>141    </svg>142  </div>143 144  <!-- Fields -->145  <div class="fields">146    <div class="field">147      <div class="left-dot"></div>148      <div class="label">Groningen, Netherlands</div>149      <div class="swap">150        <svg viewBox="0 0 24 24" fill="none" stroke="#98A3AD" stroke-width="2" stroke-linecap="round">151          <path d="M7 4v10M7 4l-3 3m3-3l3 3"></path>152          <path d="M17 20V10m0 10l3-3m-3 3l-3-3"></path>153        </svg>154      </div>155    </div>156 157    <div class="field">158      <div class="left-dot red"></div>159      <div class="label">Amsterdam Centraal</div>160    </div>161  </div>162 163  <!-- Options Row -->164  <div class="options-row">165    <div class="depart-btn">166      <svg viewBox="0 0 24 24" fill="none" stroke="#A9B3BC" stroke-width="2" stroke-linecap="round">167        <circle cx="12" cy="12" r="9"></circle>168        <path d="M12 7v5l4 2"></path>169      </svg>170      <span>Depart now</span>171      <svg class="chev" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#A9B3BC" stroke-width="2" stroke-linecap="round">172        <path d="M8 10l4 4 4-4"></path>173      </svg>174    </div>175 176    <div class="filter-btn">177      <svg viewBox="0 0 24 24" fill="none" stroke="#E7EBEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">178        <path d="M4 6h16l-6 6v6l-4-2v-4z"></path>179      </svg>180      <span>Filter</span>181      <div class="badge">9</div>182    </div>183  </div>184 185  <!-- Dropdown under Depart now -->186  <div class="dropdown">187    <div class="drop-item">Depart Now</div>188    <div class="drop-item">Set your departure time</div>189    <div class="drop-item">Set desired arrival time</div>190    <div class="drop-item">Latest departure</div>191  </div>192 193  <!-- Results -->194  <div class="list">195    <div class="result">196      <div class="time-row">197        <div class="time">5:23 AM - 10:23 AM <span class="dur" style="margin-left:12px;">→ 5 hr</span></div>198        <div class="price">€41.82</div>199      </div>200 201      <div class="route-card">202        <div class="route-track">203          <span style="font-size:36px;">🚶</span>204          <span>15</span>205          <span class="sep">›</span>206 207          <div class="info-dot">i</div>208          <span class="sep">›</span>209 210          <div class="bus">211            <svg viewBox="0 0 48 32">212              <rect x="4" y="8" width="34" height="16" rx="3" fill="#C5CDD5"></rect>213              <circle cx="14" cy="26" r="3" fill="#C5CDD5"></circle>214              <circle cx="28" cy="26" r="3" fill="#C5CDD5"></circle>215            </svg>216          </div>217          <span class="sep">›</span>218 219          <div class="bus">220            <svg viewBox="0 0 48 32">221              <rect x="4" y="8" width="34" height="16" rx="3" fill="#C5CDD5"></rect>222              <circle cx="14" cy="26" r="3" fill="#C5CDD5"></circle>223              <circle cx="28" cy="26" r="3" fill="#C5CDD5"></circle>224            </svg>225          </div>226          <span class="sep">›</span>227 228          <div class="bus">229            <svg viewBox="0 0 48 32">230              <rect x="4" y="8" width="34" height="16" rx="3" fill="#C5CDD5"></rect>231              <circle cx="14" cy="26" r="3" fill="#C5CDD5"></circle>232              <circle cx="28" cy="26" r="3" fill="#C5CDD5"></circle>233            </svg>234          </div>235          <span class="sep">›</span>236 237          <div class="bus">238            <svg viewBox="0 0 48 32">239              <rect x="4" y="8" width="34" height="16" rx="3" fill="#C5CDD5"></rect>240              <circle cx="14" cy="26" r="3" fill="#C5CDD5"></circle>241              <circle cx="28" cy="26" r="3" fill="#C5CDD5"></circle>242            </svg>243          </div>244 245          <div class="info-dot" style="margin-left:auto;">i</div>246        </div>247      </div>248    </div>249 250    <!-- Large empty area to match screenshot spacing -->251    <div style="height:1200px;"></div>252  </div>253 254</div>255</body>256</html>