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>Directions UI 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: #181A1F;15    color: #ECEFF1;16  }17 18  /* Status bar */19  .status-bar {20    height: 100px;21    padding: 0 28px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ffffff;26    font-weight: 600;27    font-size: 40px;28  }29  .status-icons {30    display: inline-flex;31    gap: 22px;32    align-items: center;33  }34  .icon-dot {35    width: 14px; height: 14px; background: #C7CDD1; border-radius: 50%;36    display: inline-block;37  }38 39  /* Controls panel */40  .panel {41    padding: 20px 32px 0;42  }43  .top-nav {44    display: flex;45    align-items: center;46    gap: 18px;47    padding: 16px 0 8px;48  }49  .top-nav .title {50    font-size: 34px;51    opacity: 0.9;52  }53  .input-box {54    background: #2A2E34;55    border-radius: 22px;56    padding: 28px 28px;57    display: flex;58    align-items: center;59    gap: 22px;60    margin: 12px 0;61    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);62  }63  .input-text {64    flex: 1;65    font-size: 36px;66    color: #DADFE3;67    white-space: nowrap;68    overflow: hidden;69    text-overflow: ellipsis;70  }71  .swap {72    padding: 6px 10px;73    border-radius: 14px;74    background: rgba(255,255,255,0.06);75  }76 77  /* Row: Depart & Preferences */78  .row-between {79    display: flex;80    align-items: center;81    justify-content: space-between;82    padding: 22px 0 10px;83  }84  .depart {85    display: inline-flex;86    align-items: center;87    gap: 14px;88    color: #C9D1D6;89    font-size: 34px;90  }91  .prefs {92    position: relative;93    display: inline-flex;94    align-items: center;95    gap: 12px;96    border: 2px solid #6A7CE8;97    color: #E7ECFF;98    border-radius: 14px;99    padding: 12px 18px;100    font-size: 30px;101    background: rgba(106,124,232,0.08);102  }103  .badge {104    position: absolute;105    top: -14px;106    right: -14px;107    width: 32px; height: 32px; background: #4EA3FF; color: #fff; border-radius: 50%;108    display: flex; align-items: center; justify-content: center;109    font-size: 22px; font-weight: bold;110    box-shadow: 0 2px 0 rgba(0,0,0,0.2);111  }112 113  /* Time row */114  .time-row {115    background: #20242A;116    border-radius: 18px;117    padding: 22px 28px;118    display: flex;119    align-items: center;120    justify-content: space-between;121    margin: 10px 0 18px;122  }123  .time-center {124    font-size: 38px;125    font-weight: 600;126  }127  .time-edge {128    color: #9AA3AA;129    font-size: 30px;130    display: flex;131    align-items: center;132    gap: 10px;133  }134 135  /* CTA button */136  .cta {137    background: #FF6A00;138    color: #111;139    font-weight: 700;140    text-align: center;141    padding: 30px 20px;142    font-size: 40px;143    border-radius: 18px;144    margin: 18px 0 22px;145  }146 147  /* Map placeholder */148  .map-wrap {149    position: absolute;150    top: 620px; /* below controls */151    left: 0;152    right: 0;153    bottom: 120px; /* room for gesture bar */154    padding-top: 12px;155  }156  .map {157    margin: 0 0 0;158    width: 100%;159    height: 100%;160    background: #E0E0E0;161    border: 1px solid #BDBDBD;162    border-top: none;163    display: flex; align-items: center; justify-content: center;164    color: #555; font-size: 40px; letter-spacing: 0.5px;165  }166 167  /* Floating control on map */168  .float-ctrl {169    position: absolute;170    left: 32px;171    top: 140px;172    width: 98px; height: 98px;173    background: #2A2E34;174    border-radius: 50%;175    box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.06);176    display: flex; align-items: center; justify-content: center;177  }178 179  /* Google watermark */180  .watermark {181    position: absolute;182    left: 26px;183    bottom: 160px;184    font-size: 34px;185    color: #fff;186    opacity: 0.9;187    font-weight: 600;188    text-shadow: 0 2px 0 rgba(0,0,0,0.4);189  }190 191  /* Gesture bar */192  .gesture {193    position: absolute;194    height: 120px;195    left: 0; right: 0; bottom: 0;196    background: #101217;197    display: flex; align-items: center; justify-content: center;198  }199  .pill {200    width: 250px; height: 12px; border-radius: 10px; background: #fff;201    opacity: 0.9;202  }203 204  /* Simple icon styles (SVG holders) */205  .icon {206    display: inline-flex; width: 42px; height: 42px;207    align-items: center; justify-content: center;208  }209  .left-icon {210    width: 44px; height: 44px; border: 3px solid #C8D0D6; border-radius: 50%;211  }212  .left-icon.orange { background: #FF6A00; border: none; width: 28px; height: 28px; border-radius: 50%; }213</style>214</head>215<body>216<div id="render-target">217  <!-- Status bar -->218  <div class="status-bar">219    <div>4:18</div>220    <div class="status-icons">221      <span class="icon-dot"></span>222      <span class="icon-dot"></span>223      <span class="icon-dot"></span>224      <span class="icon-dot"></span>225    </div>226  </div>227 228  <!-- Controls -->229  <div class="panel">230    <div class="top-nav">231      <!-- Back Arrow -->232      <svg width="46" height="46" viewBox="0 0 24 24" fill="none">233        <path d="M15 18l-6-6 6-6" stroke="#E2E6EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>234      </svg>235      <div class="title"></div>236    </div>237 238    <div class="input-box">239      <div class="left-icon"></div>240      <div class="input-text">Pacific Mall Tagore Garden, Najafga...</div>241      <div class="swap">242        <!-- Swap vertical icon -->243        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">244          <path d="M8 3v14M8 3l-3 3M8 3l3 3" stroke="#D5DADF" stroke-width="2" stroke-linecap="round"/>245          <path d="M16 21V7M16 21l-3-3M16 21l3-3" stroke="#D5DADF" stroke-width="2" stroke-linecap="round"/>246        </svg>247      </div>248    </div>249 250    <div class="input-box">251      <div class="left-icon orange"></div>252      <div class="input-text">Rajiv Chowk Flyover, Shanti Nagar, Shivaji ...</div>253    </div>254 255    <div class="row-between">256      <div class="depart">257        <!-- clock -->258        <svg class="icon" viewBox="0 0 24 24" fill="none">259          <circle cx="12" cy="12" r="9" stroke="#B7C0C7" stroke-width="2"/>260          <path d="M12 7v6l4 2" stroke="#B7C0C7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>261        </svg>262        <span>Depart now</span>263        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">264          <path d="M6 9l6 6 6-6" stroke="#B7C0C7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>265        </svg>266      </div>267 268      <div class="prefs">269        <!-- sliders icon -->270        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">271          <path d="M4 6h10M4 12h16M10 18h10" stroke="#E7ECFF" stroke-width="2" stroke-linecap="round"/>272          <circle cx="16" cy="6" r="2" fill="#E7ECFF"/>273          <circle cx="8" cy="12" r="2" fill="#E7ECFF"/>274          <circle cx="14" cy="18" r="2" fill="#E7ECFF"/>275        </svg>276        <span>Preferences</span>277        <div class="badge">3</div>278      </div>279    </div>280 281    <div class="time-row">282      <div class="time-edge">283        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">284          <path d="M15 5l-6 7 6 7" stroke="#9AA3AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>285        </svg>286        <span>- 15 min</span>287      </div>288      <div class="time-center">4:17 pm</div>289      <div class="time-edge">290        <span>+ 15 min</span>291        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">292          <path d="M9 5l6 7-6 7" stroke="#9AA3AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>293        </svg>294      </div>295    </div>296 297    <div class="cta">Find routes</div>298  </div>299 300  <!-- Map area -->301  <div class="map-wrap">302    <div class="float-ctrl">303      <!-- target/crosshair -->304      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">305        <circle cx="12" cy="12" r="6" stroke="#E6EBEF" stroke-width="2"/>306        <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#E6EBEF" stroke-width="2" stroke-linecap="round"/>307      </svg>308    </div>309    <div class="map">[IMG: Dark map with route from Rajouri Garden to Gurugram]</div>310  </div>311 312  <div class="watermark">Google</div>313 314  <!-- Gesture bar -->315  <div class="gesture">316    <div class="pill"></div>317  </div>318</div>319</body>320</html>