GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Map UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f7f9fb;14    border-radius: 28px;15    box-shadow: 0 10px 40px rgba(0,0,0,0.12);16  }17 18  /* Map placeholder */19  .map {20    position: absolute;21    inset: 0;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex;26    align-items: center;27    justify-content: center;28    font-weight: 600;29    letter-spacing: 0.3px;30  }31  .map .label {32    padding: 12px 18px;33    background: rgba(255,255,255,0.65);34    border-radius: 20px;35    border: 1px solid #d0d0d0;36  }37 38  /* Status bar (simulated) */39  .status-bar {40    position: absolute;41    top: 30px;42    left: 36px;43    display: flex;44    align-items: center;45    gap: 14px;46    color: #263238;47    font-size: 38px;48    font-weight: 600;49    mix-blend-mode: multiply;50  }51  .status-tag {52    font-size: 26px;53    background: rgba(38,50,56,0.15);54    color: #263238;55    padding: 8px 12px;56    border-radius: 10px;57  }58  .dot { width: 10px; height: 10px; background: #263238; border-radius: 50%; display: inline-block; margin-left: 6px; }59 60  /* Back button */61  .back-btn {62    position: absolute;63    top: 180px;64    left: 28px;65    width: 112px;66    height: 112px;67    border: none;68    border-radius: 56px;69    background: #ffffff;70    box-shadow: 0 8px 20px rgba(0,0,0,0.18);71    display: flex;72    align-items: center;73    justify-content: center;74    cursor: pointer;75  }76  .back-btn svg { width: 50px; height: 50px; }77 78  /* Route line */79  .route-line {80    position: absolute;81    top: 540px;82    left: 660px;83    height: 980px;84    border-left: 10px dashed #9EA5AB;85    opacity: 0.95;86  }87 88  /* Bubble above route */89  .leave-bubble {90    position: absolute;91    top: 460px;92    left: 530px;93    background: #385D74;94    color: #ffffff;95    border-radius: 30px;96    padding: 22px 30px 22px 26px;97    display: flex;98    align-items: center;99    gap: 18px;100    font-size: 42px;101    font-weight: 700;102    box-shadow: 0 10px 24px rgba(0,0,0,0.25);103  }104  .leave-bubble::after {105    content: "";106    position: absolute;107    left: 50%;108    top: 100%;109    transform: translateX(-40%);110    width: 0;111    height: 0;112    border-left: 18px solid transparent;113    border-right: 18px solid transparent;114    border-top: 24px solid #385D74;115    filter: drop-shadow(0 6px 6px rgba(0,0,0,0.15));116  }117  .clock-icon {118    width: 62px;119    height: 62px;120    border-radius: 31px;121    background: rgba(255,255,255,0.18);122    border: 2px solid rgba(255,255,255,0.45);123    display: flex;124    align-items: center;125    justify-content: center;126  }127  .clock-icon svg { width: 40px; height: 40px; }128 129  /* End pin */130  .end-pin {131    position: absolute;132    top: 1330px;133    left: 460px;134    background: #27B04B;135    color: #ffffff;136    font-weight: 800;137    font-size: 40px;138    padding: 14px 28px;139    border-radius: 16px;140    box-shadow: 0 10px 20px rgba(39,176,75,0.45);141  }142  .end-pin::after {143    content: "";144    position: absolute;145    left: 48%;146    top: 100%;147    transform: translateX(-50%);148    width: 0;149    height: 0;150    border-left: 20px solid transparent;151    border-right: 20px solid transparent;152    border-top: 28px solid #27B04B;153  }154 155  /* Google watermark */156  .google-watermark {157    position: absolute;158    left: 36px;159    bottom: 660px;160    color: #ffffff;161    font-weight: 600;162    font-size: 36px;163    text-shadow: 0 1px 3px rgba(0,0,0,0.35);164    opacity: 0.9;165  }166 167  /* Floating action button */168  .fab {169    position: absolute;170    right: 48px;171    bottom: 520px;172    width: 176px;173    height: 176px;174    border-radius: 88px;175    background: #2CC159;176    box-shadow: 0 18px 32px rgba(0,0,0,0.35);177    display: flex;178    align-items: center;179    justify-content: center;180  }181  .fab svg { width: 80px; height: 80px; }182 183  /* Bottom sheet */184  .bottom-sheet {185    position: absolute;186    left: 0;187    bottom: 0;188    width: 100%;189    height: 720px;190    background: #335F75;191    border-radius: 40px 40px 0 0;192    box-shadow: 0 -20px 40px rgba(0,0,0,0.25);193  }194  .sheet-content {195    padding: 48px 48px 36px;196    color: #EFF7FA;197  }198  .sheet-title { font-size: 46px; font-weight: 800; margin-bottom: 22px; }199 200  .card {201    background: rgba(255,255,255,0.08);202    border-radius: 28px;203    padding: 26px 28px;204    display: flex;205    align-items: center;206    justify-content: space-between;207    margin-bottom: 28px;208  }209  .left {210    display: flex;211    align-items: center;212    gap: 28px;213  }214  .icon-circle {215    width: 92px;216    height: 92px;217    border-radius: 46px;218    background: #111;219    color: #fff;220    display: flex;221    align-items: center;222    justify-content: center;223  }224  .icon-circle.light {225    background: #e9edf0;226    color: #335F75;227    border: 2px solid rgba(0,0,0,0.06);228  }229  .titles { display: flex; flex-direction: column; }230  .muted { opacity: 0.7; font-weight: 700; font-size: 36px; }231  .main { font-size: 44px; font-weight: 800; }232  .sub { font-size: 32px; opacity: 0.8; margin-top: 6px; }233 234  .clear-btn {235    width: 84px;236    height: 84px;237    border-radius: 42px;238    background: rgba(255,255,255,0.1);239    display: flex;240    align-items: center;241    justify-content: center;242    border: 2px solid rgba(255,255,255,0.25);243    cursor: pointer;244  }245  .clear-btn svg { width: 40px; height: 40px; opacity: 0.9; }246 247  /* Home bar indicator */248  .home-bar {249    position: absolute;250    left: 50%;251    transform: translateX(-50%);252    bottom: 28px;253    width: 300px;254    height: 12px;255    background: rgba(255,255,255,0.65);256    border-radius: 10px;257  }258</style>259</head>260<body>261<div id="render-target">262  <div class="map">263    <div class="label">[IMG: Google Map - Upper Manhattan route]</div>264  </div>265 266  <div class="status-bar">267    <div>9:10</div>268    <div class="status-tag">LR</div>269    <div class="status-tag">N</div>270    <div class="status-tag">•</div>271  </div>272 273  <button class="back-btn" aria-label="Back">274    <svg viewBox="0 0 24 24">275      <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#335F75" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>276    </svg>277  </button>278 279  <div class="route-line"></div>280 281  <div class="leave-bubble">282    <div class="clock-icon">283      <svg viewBox="0 0 24 24">284        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"/>285        <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>286      </svg>287    </div>288    <div>Leave: Nov 8, 3:30 AM</div>289  </div>290 291  <div class="end-pin">End</div>292 293  <div class="google-watermark">Google</div>294 295  <div class="fab" aria-label="Go">296    <svg viewBox="0 0 24 24">297      <path d="M6 4l12 8-12 8" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>298    </svg>299  </div>300 301  <div class="bottom-sheet">302    <div class="sheet-content">303      <div class="card">304        <div class="left">305          <div class="icon-circle">306            <svg viewBox="0 0 24 24">307              <rect x="5" y="6" width="14" height="10" rx="2" fill="#fff"/>308              <rect x="7" y="9" width="10" height="4" rx="1" fill="#111"/>309              <circle cx="8" cy="19" r="1.5" fill="#fff"/>310              <circle cx="16" cy="19" r="1.5" fill="#fff"/>311            </svg>312          </div>313          <div class="titles">314            <div class="muted">Start</div>315            <div class="main">163 St - Amsterdam Av</div>316          </div>317        </div>318        <div class="clear-btn" aria-label="Clear start">319          <svg viewBox="0 0 24 24">320            <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>321          </svg>322        </div>323      </div>324 325      <div class="card">326        <div class="left">327          <div class="icon-circle light">328            <svg viewBox="0 0 24 24">329              <circle cx="12" cy="12" r="9" fill="none" stroke="#335F75" stroke-width="2"/>330              <path d="M12 7v6l4 2" stroke="#335F75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>331            </svg>332          </div>333          <div class="titles">334            <div class="muted">End</div>335            <div class="main">La Scuola d' Italia</div>336            <div class="sub">12 E 96th St, New York, NY 10128, USA</div>337          </div>338        </div>339        <div class="clear-btn" aria-label="Clear end">340          <svg viewBox="0 0 24 24">341            <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/>342          </svg>343        </div>344      </div>345    </div>346  </div>347 348  <div class="home-bar"></div>349</div>350</body>351</html>