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>Maps Directions Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16    color: #2b2b2b;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #616161;27    font-size: 40px;28  }29  .status-right svg { vertical-align: middle; }30 31  /* Top search area */32  .top-panel {33    background: #fff;34    padding: 8px 28px 0 28px;35    box-sizing: border-box;36  }37  .search-stack {38    margin-top: 8px;39  }40  .search-row {41    display: flex;42    align-items: center;43    gap: 18px;44    margin: 16px 0;45  }46  .back-btn {47    width: 68px; height: 68px; display: flex; align-items: center; justify-content: center;48  }49  .pill-input {50    flex: 1;51    height: 110px;52    background: #fff;53    border: 1px solid #E0E0E0;54    border-radius: 22px;55    display: flex;56    align-items: center;57    padding: 0 28px;58    box-shadow: 0 1px 0 rgba(0,0,0,0.04);59    font-size: 42px;60    color: #616161;61  }62  .pill-input .lead-dot {63    width: 22px; height: 22px; background: #1a73e8; border-radius: 50%; margin-right: 18px;64  }65  .pill-input .pin {66    width: 26px; height: 26px; background: #EA4335; border-radius: 50%; margin-right: 18px;67  }68  .three-dots {69    width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; color: #616161;70  }71 72  /* Modes row */73  .modes {74    display: flex;75    align-items: center;76    justify-content: space-between;77    padding: 18px 36px 22px;78    border-top: 1px solid #eee;79    border-bottom: 1px solid #eee;80  }81  .mode {82    flex: 1;83    text-align: center;84    color: #757575;85    font-size: 36px;86  }87  .mode .icon {88    display: block;89    margin: 0 auto 8px;90    width: 72px; height: 72px;91  }92  .mode.active {93    color: #1a73e8;94    background: rgba(26,115,232,0.1);95    border-radius: 40px;96    padding: 20px 0;97    margin: 0 8px;98  }99 100  /* Map placeholder */101  .map-wrap {102    position: absolute;103    left: 0;104    right: 0;105    top: 420px; /* status (120) + search area (~300) */106    bottom: 440px; /* space for bottom sheet */107    padding: 0 0;108  }109  .map-placeholder {110    position: absolute;111    inset: 0;112    background: #E0E0E0;113    border-top: 1px solid #BDBDBD;114    border-bottom: 1px solid #BDBDBD;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 46px;120  }121 122  /* Floating map controls */123  .float-stack {124    position: absolute;125    right: 28px;126    top: 260px;127    display: flex;128    flex-direction: column;129    gap: 24px;130    pointer-events: none;131  }132  .fab {133    pointer-events: auto;134    width: 120px; height: 120px;135    background: #fff;136    border-radius: 60px;137    box-shadow: 0 4px 10px rgba(0,0,0,0.15);138    display: flex; align-items: center; justify-content: center;139  }140  .fab svg { width: 62px; height: 62px; fill: #424242; }141 142  /* Route badges on map */143  .badge {144    position: absolute;145    background: #fff;146    color: #424242;147    padding: 18px 24px;148    border-radius: 18px;149    font-size: 40px;150    box-shadow: 0 2px 8px rgba(0,0,0,0.18);151  }152  .badge.blue {153    background: #1a73e8;154    color: #fff;155    border-radius: 20px;156  }157 158  /* Bottom sheet */159  .sheet {160    position: absolute;161    left: 0; right: 0; bottom: 0;162    height: 440px;163    background: #fff;164    border-top-left-radius: 28px;165    border-top-right-radius: 28px;166    box-shadow: 0 -4px 18px rgba(0,0,0,0.15);167    padding: 18px 36px 36px;168    box-sizing: border-box;169  }170  .grabber {171    width: 180px; height: 10px; background: #D0D0D0; border-radius: 6px; margin: 10px auto 18px;172  }173  .summary {174    font-size: 56px;175    font-weight: 700;176    color: #2b2b2b;177  }178  .summary small { font-weight: 400; color: #757575; font-size: 48px; }179  .subline {180    color: #757575;181    font-size: 42px;182    margin-top: 10px;183  }184  .actions {185    margin-top: 36px;186    display: flex;187    gap: 28px;188  }189  .btn {190    flex: 1;191    height: 130px;192    border-radius: 80px;193    display: flex; align-items: center; justify-content: center;194    font-size: 48px; font-weight: 600;195  }196  .btn.primary {197    background: #1a73e8; color: #fff;198  }199  .btn.outline {200    background: #fff; color: #1a73e8; border: 2px solid #c7dafb;201  }202 203  /* Small helpers */204  .dot-menu { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #757575; box-shadow: 0 14px 0 #757575, 0 -14px 0 #757575; }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status bar -->211  <div class="status-bar">212    <div>3:44</div>213    <div class="status-right">214      <!-- Minimal status icons -->215      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#757575" d="M12 2a7 7 0 100 14 7 7 0 000-14zm0 12a5 5 0 110-10 5 5 0 010 10zm0 3c-4.97 0-9 2.24-9 5v2h18v-2c0-2.76-4.03-5-9-5z"/></svg>216      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#757575" d="M12 8c-2.21 0-4 1.79-4 4h2a2 2 0 114 0h2c0-2.21-1.79-4-4-4z"/></svg>217      <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#757575" d="M20 7h-3V4a1 1 0 00-1-1H8a1 1 0 00-1 1v3H4a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V8a1 1 0 00-1-1zM9 5h6v2H9V5zm10 14H5V9h14v10z"/></svg>218    </div>219  </div>220 221  <!-- Search and destination -->222  <div class="top-panel">223    <div class="search-stack">224      <div class="search-row">225        <div class="back-btn">226          <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#424242" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>227        </div>228        <div class="pill-input">229          <div class="lead-dot"></div>230          <span>Your location</span>231        </div>232        <div class="three-dots"><span class="dot-menu"></span></div>233      </div>234      <div class="search-row">235        <div class="back-btn"></div>236        <div class="pill-input">237          <div class="pin"></div>238          <span>India Gate</span>239        </div>240        <div class="three-dots">241          <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#424242" d="M7 10l5 5 5-5z"/></svg>242        </div>243      </div>244    </div>245 246    <!-- Transport modes -->247    <div class="modes">248      <div class="mode">249        <svg class="icon" viewBox="0 0 24 24"><path d="M5 11l1-3h12l1 3v5h-1a2 2 0 11-4 0H10a2 2 0 11-4 0H5v-5zm3.5 5.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm10 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/></svg>250        <div>1 hr 2</div>251      </div>252      <div class="mode">253        <svg class="icon" viewBox="0 0 24 24"><path d="M5 16h2l1-2h6l1 2h2l-3-7H8L5 16zm7-5.5l1.5 3.5h-3L11 10.5z"/></svg>254        <div>55 min</div>255      </div>256      <div class="mode">257        <svg class="icon" viewBox="0 0 24 24"><path d="M4 16V6a2 2 0 012-2h12a2 2 0 012 2v10h-2l-1 2h-2l-1-2H8l-1 2H5l-1-2H4zm2-8h12V6H6v2z"/></svg>258        <div>1 hr 16</div>259      </div>260      <div class="mode active">261        <svg class="icon" viewBox="0 0 24 24"><path d="M13.5 5.5a2.5 2.5 0 11-5.001-.001A2.5 2.5 0 0113.5 5.5zM9 22v-5l-2-2 1.5-3H12l2 3-2 2v5h-3z"/></svg>262        <div>5 hr</div>263      </div>264    </div>265  </div>266 267  <!-- Map area -->268  <div class="map-wrap">269    <div class="map-placeholder">[IMG: Map with walking route and pins]</div>270 271    <!-- Map floating controls -->272    <div class="float-stack" style="top: 560px;">273      <div class="fab">274        <!-- Magnify -->275        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1015.5 14l4.5 4.5-1.5 1.5L15.5 14zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/></svg>276      </div>277      <div class="fab">278        <!-- Layers -->279        <svg viewBox="0 0 24 24"><path d="M12 2L1 7l11 5 11-5-11-5zm0 9L1 7v2l11 5 11-5V7l-11 4zm0 6L1 13v2l11 5 11-5v-2l-11 4z"/></svg>280      </div>281    </div>282 283    <!-- Route badges -->284    <div class="badge" style="left: 80px; top: 520px;">6 hr 28 min</div>285    <div class="badge blue" style="right: 120px; top: 760px;">5 hr 8 min</div>286  </div>287 288  <!-- Bottom sheet -->289  <div class="sheet">290    <div class="grabber"></div>291    <div class="summary">5 hr 8 min <small>(25 km)</small></div>292    <div class="subline">via Faridabad Rd/Mandi Rd/Sultanpur Mandi Rd</div>293    <div class="actions">294      <div class="btn primary">295        <svg width="54" height="54" viewBox="0 0 24 24" style="margin-right:16px; fill:#fff;"><path d="M12 2L1 21l11-4 11 4L12 2z"/></svg>296        Start297      </div>298      <div class="btn outline">299        <svg width="54" height="54" viewBox="0 0 24 24" style="margin-right:16px; fill:#1a73e8;"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>300        Steps301      </div>302    </div>303  </div>304 305</div>306</body>307</html>