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>Route Planner Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121417;15    color: #FFF;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 90px;25    padding: 0 32px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #EAEAEA;31    font-size: 32px;32    letter-spacing: 0.2px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-icon { width: 32px; height: 32px; opacity: 0.9; }40 41  /* Top controls panel */42  .panel {43    position: absolute;44    top: 90px;45    left: 0;46    width: 1080px;47    background: #1C2024;48    padding: 28px 32px 24px;49    box-sizing: border-box;50  }51  .panel .row {52    display: flex;53    align-items: center;54    gap: 20px;55  }56  .back {57    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;58  }59  .input-card {60    flex: 1;61    background: #2A2F36;62    border-radius: 24px;63    height: 120px;64    box-sizing: border-box;65    padding: 0 28px;66    display: flex;67    align-items: center;68    gap: 24px;69    color: #DADADA;70    font-size: 36px;71  }72  .radio {73    width: 34px; height: 34px; border: 3px solid #B0B6BD; border-radius: 50%;74  }75  .dot-orange {76    width: 34px; height: 34px; border-radius: 50%; background: #FF6A00;77  }78  .swap-icon {79    margin-left: auto;80    width: 44px; height: 44px; opacity: 0.7;81  }82 83  /* Depart and preferences */84  .depart-row {85    margin-top: 26px;86    display: flex;87    align-items: center;88    justify-content: space-between;89  }90  .depart-left {91    display: flex; align-items: center; gap: 18px; color: #BCC2C9; font-size: 34px;92  }93  .dropdown {94    display: inline-flex; align-items: center; gap: 8px;95  }96  .prefs-btn {97    position: relative;98    display: inline-flex;99    align-items: center;100    gap: 14px;101    padding: 18px 28px;102    border: 2px solid #4B5056;103    border-radius: 16px;104    color: #DCE1E6;105    font-size: 34px;106    background: #2A2F36;107  }108  .prefs-icon { width: 48px; height: 48px; }109  .badge {110    position: absolute;111    top: -12px;112    right: -12px;113    background: #3BA0FF;114    color: white;115    width: 44px; height: 44px;116    border-radius: 50%;117    display: flex; align-items: center; justify-content: center;118    font-size: 30px; font-weight: bold;119    border: 3px solid #CFE6FF;120  }121 122  /* Time row */123  .time-row {124    margin-top: 26px;125    padding: 24px 0;126    display: flex;127    align-items: center;128    justify-content: space-between;129    color: #DADADA;130    font-size: 36px;131  }132  .time-center { font-size: 44px; font-weight: 600; }133 134  /* Find routes button */135  .cta {136    margin-top: 10px;137    background: #FF6A00;138    color: #1C2024;139    font-weight: bold;140    font-size: 44px;141    text-align: center;142    border-radius: 18px;143    height: 140px;144    display: flex;145    align-items: center;146    justify-content: center;147  }148 149  /* Map placeholder section */150  .map-wrap {151    position: absolute;152    left: 0;153    top: 700px;154    width: 1080px;155    height: 1500px;156    overflow: hidden;157    background: #151A1E;158  }159  .map-placeholder {160    position: absolute;161    left: 0;162    top: 0;163    width: 1080px;164    height: 1500px;165    background: #E0E0E0; /* mandated placeholder color */166    border-top: 1px solid #BDBDBD;167    border-bottom: 1px solid #BDBDBD;168    display: flex;169    justify-content: center;170    align-items: center;171    color: #757575;172    font-size: 36px;173    letter-spacing: 0.4px;174  }175 176  /* Route overlay (for visual feel) */177  .route-overlay {178    position: absolute;179    left: 0; top: 0;180    width: 1080px; height: 1500px;181    pointer-events: none;182  }183  .marker-start {184    position: absolute;185    left: 170px; top: 970px;186    width: 48px; height: 48px;187    background: #FF6A00;188    border-radius: 50%;189    border: 6px solid #262626;190    box-shadow: 0 0 0 6px rgba(0,0,0,0.3);191  }192  .marker-end {193    position: absolute;194    right: 150px; top: 790px;195    width: 42px; height: 42px;196    border-radius: 50%;197    border: 6px solid #8FA2B0;198    background: transparent;199  }200 201  /* Floating locate button */202  .locate-btn {203    position: absolute;204    left: 40px; top: 820px;205    width: 88px; height: 88px;206    border-radius: 50%;207    background: #2A2F36;208    display: flex; align-items: center; justify-content: center;209    box-shadow: 0 4px 12px rgba(0,0,0,0.4);210  }211 212  /* Google label and home indicator */213  .google-tag {214    position: absolute;215    left: 28px; bottom: 56px;216    color: #F1F1F1; font-size: 36px; opacity: 0.85;217  }218  .home-indicator {219    position: absolute;220    left: 50%;221    transform: translateX(-50%);222    bottom: 18px;223    width: 240px; height: 10px;224    background: #FFFFFF;225    border-radius: 10px;226    opacity: 0.85;227  }228 229  /* SVG helper icons */230  .chev { width: 36px; height: 36px; opacity: 0.8; }231</style>232</head>233<body>234<div id="render-target">235 236  <!-- Status bar -->237  <div class="statusbar">238    <div>4:17</div>239    <div class="status-icons">240      <!-- simple service icons -->241      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#EAEAEA"/></svg>242      <svg class="status-icon" viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2" fill="#EAEAEA"/></svg>243      <svg class="status-icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#EAEAEA" stroke-width="3"/></svg>244      <svg class="status-icon" viewBox="0 0 24 24"><circle cx="3" cy="12" r="3" fill="#EAEAEA"/><circle cx="12" cy="12" r="3" fill="#EAEAEA"/><circle cx="21" cy="12" r="3" fill="#EAEAEA"/></svg>245      <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 3l8 18H4L12 3z" fill="#EAEAEA"/></svg>246      <svg class="status-icon" viewBox="0 0 24 24"><path d="M12 2l5 9-5 11-5-11 5-9z" fill="#EAEAEA"/></svg>247    </div>248  </div>249 250  <!-- Top controls panel -->251  <div class="panel">252    <div class="row">253      <div class="back">254        <svg viewBox="0 0 24 24" width="44" height="44">255          <path d="M15 6L9 12l6 6" stroke="#EAEAEA" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>256        </svg>257      </div>258      <div class="input-card">259        <div class="radio"></div>260        <div>Your current location</div>261        <svg class="swap-icon" viewBox="0 0 24 24">262          <path d="M7 5l-3 3h10M17 19l3-3H10" stroke="#B8BEC5" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>263        </svg>264      </div>265    </div>266 267    <div class="row" style="margin-top:18px;">268      <div class="back" style="visibility:hidden;"></div>269      <div class="input-card" style="color:#F5F5F5;">270        <div class="dot-orange"></div>271        <div>Rajiv Chowk Flyover, Shanti Nagar, Shivaji ...</div>272      </div>273    </div>274 275    <div class="depart-row">276      <div class="depart-left">277        <svg viewBox="0 0 24 24" width="40" height="40">278          <circle cx="12" cy="12" r="9" stroke="#BCC2C9" stroke-width="2" fill="none"/>279          <path d="M12 7v5l3 2" stroke="#BCC2C9" stroke-width="2" fill="none" stroke-linecap="round"/>280        </svg>281        <div class="dropdown">Depart now282          <svg class="chev" viewBox="0 0 24 24">283            <path d="M7 10l5 5 5-5" stroke="#BCC2C9" stroke-width="2" fill="none" stroke-linecap="round"/>284          </svg>285        </div>286      </div>287      <button class="prefs-btn">288        <svg class="prefs-icon" viewBox="0 0 24 24">289          <path d="M4 6h12M10 12h10M2 18h12" stroke="#DCE1E6" stroke-width="2" fill="none" stroke-linecap="round"/>290        </svg>291        <span>Preferences</span>292        <div class="badge">3</div>293      </button>294    </div>295 296    <div class="time-row">297      <div class="row" style="gap:10px; color:#AEB5BC;">298        <svg class="chev" viewBox="0 0 24 24"><path d="M14 6l-6 6 6 6" stroke="#AEB5BC" stroke-width="2" fill="none" stroke-linecap="round"/></svg>299        <span>- 15 min</span>300      </div>301      <div class="time-center">4:17 pm</div>302      <div class="row" style="gap:10px; color:#AEB5BC;">303        <span>+ 15 min</span>304        <svg class="chev" viewBox="0 0 24 24"><path d="M10 6l6 6-6 6" stroke="#AEB5BC" stroke-width="2" fill="none" stroke-linecap="round"/></svg>305      </div>306    </div>307 308    <div class="cta">Find routes</div>309  </div>310 311  <!-- Map area -->312  <div class="map-wrap">313    <div class="map-placeholder">[IMG: Dark Map of Gurugram with route]</div>314 315    <!-- Route overlay purely decorative -->316    <svg class="route-overlay" viewBox="0 0 1080 1500">317      <path d="M180 980 C 380 950, 680 900, 920 820" stroke="#E7EEF7" stroke-width="12" fill="none" stroke-linecap="round" opacity="0.85"/>318    </svg>319    <div class="marker-start"></div>320    <div class="marker-end"></div>321 322    <!-- Floating locate button -->323    <div class="locate-btn">324      <svg viewBox="0 0 24 24" width="48" height="48">325        <circle cx="12" cy="12" r="10" stroke="#FFFFFF" stroke-width="2" fill="none"/>326        <circle cx="12" cy="12" r="3" fill="#FFFFFF"/>327      </svg>328    </div>329 330    <div class="google-tag">Google</div>331  </div>332 333  <!-- Home indicator -->334  <div class="home-indicator"></div>335</div>336</body>337</html>