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>Transit Directions UI</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff; border-radius:28px; box-shadow:0 10px 30px rgba(0,0,0,0.12);12    color:#2c2c2c;13  }14  /* Status bar */15  .status-bar {16    position:absolute; top:20px; left:24px; right:24px;17    height:48px; display:flex; align-items:center; justify-content:space-between; pointer-events:none;18    color:#1f1f1f; font-weight:600; font-size:32px;19  }20  .status-left { display:flex; align-items:center; gap:14px; }21  .mini-chip {22    font-size:20px; font-weight:700; color:#202020; background:#eaeaea; border-radius:6px; padding:4px 8px;23  }24  .status-right { display:flex; align-items:center; gap:10px; font-size:28px; }25  /* Map area */26  #map {27    position:absolute; top:0; left:0; width:1080px; height:1180px;28  }29  .map-placeholder {30    width:100%; height:100%;31    background:#E0E0E0; border:1px solid #BDBDBD;32    display:flex; align-items:center; justify-content:center;33    color:#757575; font-size:34px; font-weight:600;34  }35  /* Floating elements on map */36  .back-fab {37    position:absolute; top:140px; left:32px; width:104px; height:104px;38    background:#ffffff; border-radius:52px; box-shadow:0 6px 16px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center;39  }40  .right-stack { position:absolute; top:260px; right:32px; display:flex; flex-direction:column; gap:24px; }41  .round-btn {42    width:104px; height:104px; background:#ffffff; border-radius:52px; box-shadow:0 6px 16px rgba(0,0,0,0.18);43    display:flex; align-items:center; justify-content:center;44  }45  .pill-next {46    position:absolute; top:86px; right:28px;47    background:#ffffff; padding:18px 26px; border-radius:26px; box-shadow:0 6px 16px rgba(0,0,0,0.18);48    font-size:28px; font-weight:700; color:#333;49  }50  .go-btn {51    position:absolute; bottom:140px; right:40px;52    background:#25a744; color:#fff; height:160px; min-width:300px; padding:0 40px;53    display:flex; align-items:center; justify-content:center; gap:20px;54    border-radius:80px; box-shadow:0 12px 24px rgba(37,167,68,0.35); font-size:56px; font-weight:800;55  }56  /* Summary strip */57  #summary {58    position:absolute; top:1180px; left:0; width:100%; background:#ffffff;59    border-top:1px solid #e5e5e5;60    box-shadow:0 -8px 24px rgba(0,0,0,0.08);61  }62  .summary-inner { padding:34px 36px; }63  .mode-row { display:flex; align-items:center; gap:18px; color:#5a5a5a; font-size:30px; }64  .mode-chip {65    display:flex; align-items:center; gap:12px; background:#f4f6f8; border:1px solid #d8d8d8; padding:10px 14px; border-radius:10px; font-weight:700; color:#2e3a4f;66  }67  .summary-top { display:flex; align-items:flex-end; justify-content:space-between; margin-top:22px; }68  .price-time { text-align:right; }69  .price { color:#1E88E5; font-weight:800; font-size:36px; }70  .duration { font-size:52px; font-weight:800; color:#131313; }71  .leave-arrive { margin-top:16px; font-size:32px; color:#3c3c3c; }72  .leave-arrive b { font-weight:800; color:#111; }73  /* Step blocks */74  .step {75    display:flex; align-items:center; justify-content:space-between;76    background:#f7fbff; border-top:1px solid #e9eef5; border-bottom:1px solid #e9eef5;77    padding:28px 36px; font-size:36px; color:#0d3b66; font-weight:700;78  }79  .step-left { display:flex; align-items:center; gap:18px; }80  .divider { height:16px; background:#e9eaec; }81  /* Bus section */82  .section { background:#ffffff; }83  .bus-header {84    display:flex; align-items:center; justify-content:space-between; padding:28px 36px; font-size:40px; border-bottom:1px solid #ececec;85  }86  .bus-left { display:flex; align-items:center; gap:22px; }87  .chev { color:#9aa3aa; }88  .options-card {89    margin:24px 36px; background:#ffffff; border-radius:26px; box-shadow:0 8px 24px rgba(0,0,0,0.12);90    padding:12px 0;91  }92  .opt {93    display:flex; align-items:center; justify-content:space-between;94    padding:26px 28px; font-size:36px; color:#39404a;95  }96  .radio { width:36px; height:36px; border-radius:18px; border:3px solid #c7cbd1; margin-right:18px; }97  .opt-label { display:flex; align-items:center; }98  .opt.secondary { color:#979EA6; }99  .opt.active {100    background:#f8fbff; box-shadow:inset 0 0 0 2px #d9eaff;101    border-radius:18px;102  }103  .radio.active { border-color:#1E88E5; box-shadow:inset 0 0 0 10px #1E88E5; }104  /* Small helpers */105  .muted { color:#7b8b9b; }106  .time { font-weight:800; }107  /* Simple icon styles */108  svg { display:block; }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status-bar">116    <div class="status-left">117      <div>9:51</div>118      <div class="mini-chip">LR</div>119      <div class="mini-chip">N</div>120      <div class="mini-chip">•</div>121    </div>122    <div class="status-right">123      <span>100%</span>124    </div>125  </div>126 127  <!-- Map area -->128  <div id="map">129    <div class="map-placeholder">[IMG: Google Map with transit route]</div>130 131    <div class="pill-next">Next · 1:43 PM, 2:43 PM</div>132 133    <div class="back-fab">134      <svg width="48" height="48" viewBox="0 0 24 24">135        <path d="M15 6l-6 6 6 6" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>136      </svg>137    </div>138 139    <div class="right-stack">140      <div class="round-btn">141        <svg width="42" height="42" viewBox="0 0 24 24">142          <path d="M12 17.3l-6.18 3.25 1.18-6.88L2 8.75l6.91-1L12 1.5l3.09 6.25 6.91 1-5 4.92 1.18 6.88z" fill="#48627c"/>143        </svg>144      </div>145      <div class="round-btn">146        <svg width="42" height="42" viewBox="0 0 24 24">147          <path d="M14 3h7v7h-2V6.41l-7.29 7.3-1.41-1.42L17.59 5H14V3z" fill="#48627c"/>148          <rect x="3" y="14" width="8" height="8" rx="2" fill="#48627c"/>149        </svg>150      </div>151      <div class="round-btn">152        <svg width="42" height="42" viewBox="0 0 24 24">153          <path d="M4 6h12v2H4zm0 5h16v2H4zm0 5h10v2H4z" fill="#48627c"/>154        </svg>155      </div>156    </div>157 158    <div class="go-btn">159      <span>GO</span>160      <svg width="56" height="56" viewBox="0 0 24 24">161        <path d="M5 12h14M13 5l7 7-7 7" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>162      </svg>163    </div>164  </div>165 166  <!-- Summary strip -->167  <div id="summary">168    <div class="summary-inner">169      <div class="mode-row">170        <div class="mode-chip">171          <svg width="28" height="28" viewBox="0 0 24 24">172            <path d="M6 18l2-5 3-3 3 3 2 5" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>173          </svg>174          <span>Walk</span>175        </div>176        <div class="mode-chip">177          <svg width="28" height="28" viewBox="0 0 24 24">178            <rect x="3" y="6" width="18" height="10" rx="2" fill="#1E88E5"></rect>179            <circle cx="7" cy="18" r="2" fill="#1E88E5"></circle>180            <circle cx="17" cy="18" r="2" fill="#1E88E5"></circle>181          </svg>182          <span>M2</span>183        </div>184        <div class="mode-chip">185          <svg width="28" height="28" viewBox="0 0 24 24">186            <path d="M6 18l2-5 3-3 3 3 2 5" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>187          </svg>188          <span>Walk</span>189        </div>190        <span class="muted">11</span>191      </div>192 193      <div cla