GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Transit Directions UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #EDEDED; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #14171a;15    border-radius: 0px;16  }17 18  /* Status bar */19  .status-bar {20    height: 92px;21    background: #0f1113;22    display: flex;23    align-items: center;24    padding: 0 28px;25    box-sizing: border-box;26    font-weight: 600;27    color: #ffffff;28  }29  .status-time {30    font-size: 40px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 22px;38    opacity: 0.95;39  }40  .icon {41    width: 34px;42    height: 34px;43    display: inline-block;44  }45 46  /* Header controls area */47  .controls {48    background: #1c1f23;49    padding: 24px 28px 26px;50    box-sizing: border-box;51    border-bottom: 1px solid rgba(255,255,255,0.06);52  }53  .top-row {54    display: flex;55    align-items: center;56    gap: 18px;57    margin-bottom: 18px;58  }59  .back-btn {60    width: 72px;61    height: 72px;62    border-radius: 50%;63    display: grid;64    place-items: center;65    color: #eaeaea;66  }67  .chip {68    flex: 1;69    background: #272b30;70    border-radius: 22px;71    padding: 22px 24px;72    box-sizing: border-box;73    display: flex;74    align-items: center;75    gap: 18px;76    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);77    min-height: 92px;78  }79  .chip + .chip {80    margin-top: 16px;81  }82  .chip .label {83    flex: 1;84    font-size: 32px;85    color: #e7e7e7;86    white-space: nowrap;87    overflow: hidden;88    text-overflow: ellipsis;89  }90  .bullet {91    width: 28px; height: 28px; border-radius: 50%;92    border: 3px solid #b9c0c7;93    box-sizing: border-box;94  }95  .bullet.orange { background: #ff6a00; border: none; }96  .swap-ico {97    width: 48px; height: 48px; opacity: 0.9;98  }99 100  .pref-pill {101    position: absolute;102    right: 28px;103    top: 236px;104    background: #2b3036;105    border: 2px solid #7f8a96;106    border-radius: 16px;107    padding: 12px 18px;108    display: inline-flex;109    align-items: center;110    gap: 12px;111    font-size: 28px;112    color: #dfe5ea;113    box-shadow: 0 2px 0 rgba(0,0,0,0.2);114  }115  .pref-pill .badge {116    position: absolute;117    top: -10px; right: -10px;118    background: #2f7de7;119    width: 32px; height: 32px;120    border-radius: 50%;121    display: grid; place-items: center;122    font-size: 22px;123    color: #fff;124    font-weight: 700;125  }126 127  .depart-row {128    display: flex;129    align-items: center;130    gap: 16px;131    padding: 18px 8px 8px 8px;132    color: #c9ced3;133    font-size: 30px;134  }135  .depart-row .caret {136    margin-left: 8px;137    font-size: 30px;138    opacity: 0.9;139  }140 141  .time-row {142    display: flex;143    align-items: center;144    justify-content: space-between;145    color: #cfd5db;146    font-size: 32px;147    padding: 22px 8px 18px 8px;148  }149  .time-row .center-time {150    font-size: 40px;151    font-weight: 700;152    color: #ffffff;153  }154  .time-row .side {155    display: flex; align-items: center; gap: 12px; opacity: 0.85;156  }157 158  .cta {159    margin-top: 8px;160    background: #ff6a00;161    height: 120px;162    border-radius: 14px;163    display: grid;164    place-items: center;165    font-size: 40px;166    font-weight: 700;167    color: #1a1a1a;168  }169 170  /* Map placeholder area */171  .map-area {172    position: absolute;173    left: 0; right: 0;174    top: 520px; /* below controls block height sum approx */175    bottom: 0;176    background: #10151a;177  }178  .map-placeholder {179    position: absolute;180    left: 0; right: 0; top: 0; bottom: 0;181    margin-top: 0;182    background: #E0E0E0;183    border-top: 1px solid #BDBDBD;184    border-bottom: 1px solid #BDBDBD;185    display: flex;186    justify-content: center;187    align-items: center;188    color: #555;189    font-size: 40px;190    text-align: center;191  }192 193  /* Floating controls on map */194  .recenter {195    position: absolute;196    left: 28px; top: 180px;197    width: 96px; height: 96px;198    background: #24292e;199    border-radius: 50%;200    display: grid; place-items: center;201    box-shadow: 0 4px 12px rgba(0,0,0,0.6);202    border: 1px solid rgba(255,255,255,0.08);203  }204  .google-mark {205    position: absolute;206    left: 24px; bottom: 80px;207    color: #ffffff;208    opacity: 0.85;209    font-size: 30px;210    text-shadow: 0 2px 0 rgba(0,0,0,0.4);211  }212  .home-indicator {213    position: absolute;214    bottom: 24px; left: 50%;215    transform: translateX(-50%);216    width: 356px; height: 10px;217    border-radius: 8px;218    background: #ffffff;219    opacity: 0.9;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status bar -->227  <div class="status-bar">228    <div class="status-time">4:20</div>229    <div class="status-icons">230      <!-- Simple placeholders for status icons -->231      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>232      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M3 12h18M7 16h10M10 20h4"/></svg>233      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M18 6v12"/></svg>234      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M6 20h12l1-6H5z"/><path d="M7 9h10v7H7z"/></svg>235    </div>236  </div>237 238  <!-- Controls area -->239  <div class="controls">240    <div class="top-row">241      <div class="back-btn">242        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">243          <path d="M15 18l-6-6 6-6"/>244        </svg>245      </div>246      <div style="flex:1">247        <div class="chip">248          <span class="bullet"></span>249          <div class="label">Pacific Mall Tagore Garden, Najafga...</div>250          <svg class="swap-ico" viewBox="0 0 24 24" fill="none" stroke="#cfd5db" stroke-width="2" stroke-linecap="round">251            <path d="M7 4v8m0-8l-3 3m3-3l3 3"/>252            <path d="M17 20v-8m0 8l3-3m-3 3l-3-3"/>253          </svg>254        </div>255        <div class="chip" style="position: relative;">256          <span class="bullet orange"></span>257          <div class="label">Rajiv Chowk Flyover, Shanti Nagar, Shivaji ...</div>258        </div>259      </div>260    </div>261 262    <div class="pref-pill">263      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#dfe5ea" stroke-width="2" width="28" height="28">264        <path d="M4 7h12M16 7l3-3v6z"/>265        <path d="M4 17h12M16 17l3-3v6z"/>266      </svg>267      <span>Preferences</span>268      <div class="badge">2</div>269    </div>270 271    <div class="depart-row">272      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#c9ced3" stroke-width="2">273        <circle cx="12" cy="12" r="9"></circle>274        <path d="M12 7v6l4 2"></path>275      </svg>276      <span>Depart now</span>277      <span class="caret">▼</span>278    </div>279 280    <div class="time-row">281      <div class="side">282        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#c9ced3" stroke-width="2" stroke-linecap="round"><path d="M15 6l-6 6 6 6"/></svg>283        <span>- 15 min</span>284      </div>285      <div class="center-time">4:20 pm</div>286      <div class="side">287        <span>+ 15 min</span>288        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#c9ced3" stroke-width="2" stroke-linecap="round"><path d="M9 6l6 6-6 6"/></svg>289      </div>290    </div>291 292    <div class="cta">Find routes</div>293  </div>294 295  <!-- Map content -->296  <div class="map-area">297    <div class="map-placeholder">[IMG: Dark Map with route from Rajouri Garden to Gurugram]</div>298 299    <div class="recenter">300      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#e6ebf0" stroke-width="2">301        <circle cx="12" cy="12" r="3"></circle>302        <path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>303        <circle cx="12" cy="12" r="8" stroke-opacity="0.5"></circle>304      </svg>305    </div>306 307    <div class="google-mark">Google</div>308  </div>309 310  <div class="home-indicator"></div>311</div>312</body>313</html>