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 Route 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; height: 2400px; position: relative; overflow: hidden;11    background: #f6f7f9; border-radius: 36px; box-shadow: 0 10px 30px rgba(0,0,0,0.18);12  }13  /* Map area */14  .map-wrap {15    position: relative; width: 100%; height: 1180px;16  }17  .map-img {18    position: absolute; inset: 0;19    background: #E0E0E0; border: 1px solid #BDBDBD;20    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600; font-size: 36px;21  }22  .fab {23    position: absolute; right: 24px; width: 120px; height: 120px;24    background: #fff; border-radius: 60px; box-shadow: 0 10px 20px rgba(0,0,0,0.15);25    display: flex; align-items: center; justify-content: center;26  }27  .fab svg { width: 56px; height: 56px; stroke: #5f6c7b; fill: none; stroke-width: 6; }28  .fab.star { top: 300px; }29  .fab.share { top: 450px; }30  .fab.settings { top: 600px; }31  .fab.car { top: 750px; }32  .back-btn {33    position: absolute; left: 26px; top: 330px; width: 130px; height: 130px;34    background: #fff; border-radius: 65px; box-shadow: 0 10px 20px rgba(0,0,0,0.15);35    display: flex; align-items: center; justify-content: center;36  }37  .back-btn svg { width: 60px; height: 60px; stroke: #2c6cd4; stroke-width: 12; fill: none; }38  .go-btn {39    position: absolute; right: 40px; bottom: 40px;40    background: #22c061; color: #fff; font-weight: 700; font-size: 56px;41    padding: 36px 80px; border-radius: 80px; box-shadow: 0 14px 28px rgba(0,0,0,0.22);42    display: flex; align-items: center; gap: 26px;43  }44  .go-btn svg { width: 54px; height: 54px; fill: #fff; }45  .google-badge {46    position: absolute; left: 26px; bottom: 28px;47    display: inline-flex; align-items: center; gap: 16px; color: #606060; font-size: 34px; background: rgba(255,255,255,0.9);48    border-radius: 12px; padding: 12px 18px; box-shadow: 0 6px 16px rgba(0,0,0,0.12);49  }50 51  /* Summary card */52  .summary {53    position: relative; width: 100%; background: #fff; border-top-left-radius: 30px; border-top-right-radius: 30px;54    padding: 36px 40px 24px; box-shadow: 0 -10px 20px rgba(0,0,0,0.06);55  }56  .summary .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }57  .route-chips { display: flex; align-items: center; gap: 18px; color: #4b596a; }58  .chip {59    display: inline-flex; align-items: center; gap: 12px; background: #eef4ff; color: #2b5fc7; border-radius: 14px; padding: 10px 16px; font-weight: 600; font-size: 34px;60    border: 1px solid #cfe0ff;61  }62  .route-chips .count { color: #7a8795; font-weight: 700; font-size: 34px; }63  .cost-time { display: flex; align-items: baseline; gap: 26px; }64  .cost { color: #2b8bd9; font-weight: 800; font-size: 38px; }65  .time { color: #2a2f36; font-weight: 800; font-size: 46px; }66  .schedule { display: flex; align-items: center; justify-content: space-between; color: #434c58; font-size: 36px; }67  .schedule .bold { font-weight: 800; color: #21262d; }68 69  /* Step banner */70  .step-banner {71    margin: 22px 40px; background: #2a79c9; border-radius: 18px;72    padding: 28px 30px; color: #fff; display: flex; align-items: center; justify-content: space-between;73  }74  .step-left { display: flex; align-items: center; gap: 18px; }75  .step-icon {76    width: 72px; height: 72px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3);77    display: flex; align-items: center; justify-content: center; border-radius: 12px;78  }79  .step-title { font-size: 38px; font-weight: 700; }80  .step-time { font-size: 38px; font-weight: 700; }81 82  /* Main card */83  .card {84    margin: 24px 40px; background: #fff; border-radius: 22px; box-shadow: 0 10px 22px rgba(0,0,0,0.08);85    overflow: hidden;86  }87  .card-header {88    padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e9edf3;89  }90  .head-left { display: flex; align-items: center; gap: 18px; color: #2a313a; font-size: 40px; font-weight: 800; }91  .head-left .sub { font-weight: 600; color: #5a6573; }92  .head-right { display: flex; align-items: center; gap: 20px; }93  .head-time { font-weight: 800; font-size: 40px; color: #2a313a; }94  .chev { width: 32px; height: 32px; }95  .option-list { padding: 26px 20px 30px; display: flex; flex-direction: column; gap: 22px; }96  .option {97    background: #fafbfc; border: 1px solid #e5e9ef; border-radius: 16px;98    padding: 26px 26px; display: flex; align-items: center; justify-content: space-between;99  }100  .option.selected { background: #f1f5fb; border-color: #cddaf2; box-shadow: inset 0 0 0 2px #cddaf2; }101  .opt-left { display: flex; align-items: center; gap: 24px; color: #2c343e; font-size: 38px; font-weight: 700; }102  .radio {103    width: 42px; height: 42px; border-radius: 21px; border: 3px solid #c5cfdb; background: #fff;104    display: inline-flex; align-items: center; justify-content: center;105  }106  .radio .dot {107    width: 20px; height: 20px; border-radius: 10px; background: #2b5fc7; display: none;108  }109  .selected .radio .dot { display: block; }110  .opt-right { display: flex; align-items: center; gap: 14px; color: #2a313a; font-size: 38px; font-weight: 800; }111  .timer svg { width: 42px; height: 42px; stroke: #8894a4; stroke-width: 6; fill: none; }112  .progress {113    height: 8px; background: #e6ecf4; border-radius: 6px; margin-top: 16px;114  }115  .progress .bar { width: 60%; height: 100%; background: #9fb8ff; border-radius: 6px; }116  /* Small bus icon for header */117  .bus-icon svg { width: 54px; height: 54px; stroke: #2b5fc7; fill: none; stroke-width: 6; }118  /* generic small icons */119  .tiny svg { width: 40px; height: 40px; stroke: #2b5fc7; fill: none; stroke-width: 6; }120</style>121</head>122<body>123<div id="render-target">124  <div class="map-wrap">125    <div class="map-img">[IMG: Google Map with route]</div>126 127    <div class="back-btn">128      <svg viewBox="0 0 24 24">129        <path d="M15 4 L7 12 L15 20" />130      </svg>131    </div>132 133    <div class="fab star">134      <svg viewBox="0 0 24 24">135        <path d="M12 3 L14.5 9 H21 L16 12.5 L18.5 19 L12 15.5 L5.5 19 L8 12.5 L3 9 H9.5 Z"/>136      </svg>137    </div>138    <div class="fab share">139      <svg viewBox="0 0 24 24">140        <circle cx="6" cy="12" r="3"/>141        <circle cx="18" cy="6" r="3"/>142        <circle cx="18" cy="18" r="3"/>143        <path d="M8.8 10.8 L15.2 7.2 M8.8 13.2 L15.2 16.8"/>144      </svg>145    </div>146    <div class="fab settings">147      <svg viewBox="0 0 24 24">148        <circle cx="12" cy="12" r="5"/>149        <path d="M12 1 L12 5 M12 19 L12 23 M1 12 L5 12 M19 12 L23 12 M4 4 L6.5 6.5 M17.5 17.5 L20 20 M4 20 L6.5 17.5 M17.5 6.5 L20 4"/>150      </svg>151    </div>152    <div class="fab car">153      <svg viewBox="0 0 24 24">154        <rect x="4" y="8" width="16" height="7" rx="2"/>155        <path d="M6 8 L8 5 H16 L18 8"/>156        <circle cx="7" cy="17" r="2"/>157        <circle cx="17" cy="17" r="2"/>158      </svg>159    </div>160 161    <div class="go-btn">162      GO163      <svg viewBox="0 0 24 24">164        <path d="M5 12 H19 M12 5 L19 12 L12 19" />165      </svg>166    </div>167 168    <div class="google-badge">Google</div>169  </div>170 171  <div class="summary">172    <div class="row">173      <div class="route-chips">174        <span class="count">2</span>175        <div class="chip">176          <span class="tiny">177            <svg viewBox="0 0 24 24">178              <path d="M6 19 L9 12 L11 14 L13 9 L17 9" />179              <circle cx="7" cy="6" r="3"/>180            </svg>181          </span>182          Walk183        </div>184        <div class="chip">185          <span class="bus-icon">186            <svg viewBox="0 0 24 24">187              <rect x="4" y="5" width="16" height="10" rx="2"/>188              <circle cx="8" cy="16" r="2"/>189              <circle cx="16" cy="16" r="2"/>190            </svg>191          </span>192          M101193        </div>194        <span class="count">6</span>195      </div>196      <div class="cost-time">197        <div class="cost">$2.90</div>198        <div class="time">26 min</div>199      </div>200    </div>201    <div class="schedule">202      <div>Leave <span class="bold">Wed 3:33 AM</span></div>203      <div>Arrive <span class="bold">4:00 AM</span></div>204    </div>205  </div>206 207  <div class="step-banner">208    <div class="step-left">209      <div class="step-icon">210        <svg viewBox="0 0 24 24">211          <path d="M6 19 L9 12 L11 14 L13 9 L17 9" stroke="#fff" fill="none" stroke-width="2"/>212          <circle cx="7" cy="6" r="3" stroke="#fff" fill="none" stroke-width="2"/>213        </svg>214      </div>215      <div class="step-title">Walk to <span style="background:#2269b1;border-radius:10px;padding:6px 10px;margin:0 10px;display:inline-flex;align-items:center;gap:8px;">216        <svg viewBox="0 0 24 24" style="width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;">217          <rect x="4" y="5" width="16" height="10" rx="2"/>218          <circle cx="8" cy="16" r="2"/>219          <circle cx="16" cy="16" r="2"/>220        </svg>221        </span> W 125 St/Amsterdam Av</div>222    </div>223    <div class="step-time">2 min</div>224  </div>225 226  <div class="card">227    <div class="card-header">228      <div class="head-left">229        <span class="bus-icon">230          <svg viewBox="0 0 24 24">231            <rect x="4" y="5" width="16" height="10" rx="2"/>232            <circle cx="8" cy="16" r="2"/>233            <circle cx="16" cy="16" r="2"/>234          </svg>235        </span>236        <div>M101 - <span class="sub">3 Av/Astor Pl</span></div>237      </div>238      <div class="head-right">239        <div class="head-time">2:05 PM</div>240        <svg class="chev" viewBox="0 0 24 24">241          <path d="M9 6 L15 12 L9 18" stroke="#8b97a6" stroke-width="3" fill="none"/>242        </svg>243      </div>244    </div>245 246    <div class="option-list">247      <div class="option">248        <div class="opt-left">249          <div class="radio"></div>250          3 Av/Astor Pl251        </div>252        <div class="opt-right">253          <span class="timer">254            <svg viewBox="0 0 24 24">255              <circle cx="12" cy="12" r="8"/>256              <path d="M12 12 L15 9 M9 4 L15 4"/>257            </svg>258          </span>259          1:05 PM260        </div>261      </div>262 263      <div class="option selected">264        <div class="opt-left">265          <div class="radio"><div class="dot"></div></div>266          3 Av/Astor Pl267        </div>268        <div class="opt-right">2:05 PM</div>269      </div>270 271      <div class="option">272        <div style="width:100%">273          <div style="display:flex;align-items:center;justify-content:space-between;">274            <div class="opt-left">275              <div class="radio"></div>276              3 Av/Astor Pl277            </div>278            <div class="opt-right">3:05 PM</div>279          </div>280          <div class="progress"><div class="bar"></div></div>281        </div>282      </div>283    </div>284  </div>285</div>286</body>287</html>