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>Travel Details + Share Sheet</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: #0f1d3a; /* dark navy header area backdrop */15  }16 17  /* Header and status bar */18  .header {19    position: relative;20    height: 540px;21    background: #0f1d3a;22    color: #ffffff;23    padding: 20px 36px 0 36px;24  }25  .status-bar {26    height: 64px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #fff;31    font-weight: 600;32    font-size: 36px;33    letter-spacing: 0.2px;34    opacity: 0.95;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .status-icons svg { fill: none; stroke: #fff; }42  .dot { width: 14px; height: 14px; background: #d8d8d8; border-radius: 50%; opacity: 0.7; }43 44  .title-row {45    margin-top: 36px;46    display: flex;47    align-items: center;48    justify-content: space-between;49  }50  .title-left {51    display: flex;52    align-items: center;53    gap: 22px;54  }55  .main-title {56    font-size: 44px;57    font-weight: 800;58    letter-spacing: 0.3px;59  }60  .subtitle {61    margin-left: 64px; /* indent under title */62    margin-top: 12px;63    font-size: 28px;64    opacity: 0.8;65    font-weight: 500;66  }67 68  /* Light content background for area below header */69  .content-bg {70    position: absolute;71    left: 0;72    right: 0;73    top: 520px;74    bottom: 0;75    background: #fafafa;76  }77 78  /* Overlapping time/location card */79  .time-card {80    position: absolute;81    left: 60px;82    top: 440px;83    width: 960px;84    height: 150px;85    background: #efefef;86    border-radius: 20px;87    box-shadow: 0 8px 16px rgba(0,0,0,0.18);88    display: flex;89    align-items: center;90    padding: 0 34px;91    color: #0f1d3a;92  }93  .time {94    font-size: 40px;95    font-weight: 800;96    width: 220px;97  }98  .pin-icon {99    margin: 0 24px 0 6px;100  }101  .loc-text {102    font-size: 34px;103    font-weight: 800;104    color: #1f2b4d;105    white-space: nowrap;106    overflow: hidden;107    text-overflow: ellipsis;108  }109 110  /* Journey info card */111  .info-card {112    position: absolute;113    left: 60px;114    top: 640px;115    width: 960px;116    background: #f4f7ff;117    border: 2px solid #4a79ff;118    border-radius: 22px;119    padding: 28px;120    color: #16325c;121  }122  .info-head {123    display: flex;124    align-items: center;125    gap: 18px;126    font-size: 36px;127    font-weight: 800;128    color: #1f3f7d;129    margin-bottom: 14px;130  }131  .info-body {132    font-size: 30px;133    line-height: 1.4;134    color: #233a63;135    font-weight: 600;136    opacity: 0.95;137  }138 139  .section-title {140    position: absolute;141    left: 60px;142    top: 930px;143    font-size: 40px;144    font-weight: 800;145    color: #0f1d3a;146    opacity: 0.95;147  }148 149  /* Fare tiles preview */150  .fare-row {151    position: absolute;152    left: 60px;153    top: 1000px;154    display: flex;155    gap: 20px;156  }157  .fare-tile {158    width: 460px;159    height: 220px;160    border: 2px solid #7aa2ff;161    border-radius: 22px;162    background: #f7fbff;163    padding: 28px;164    color: #1f3f7d;165  }166  .fare-tile.dim {167    border-color: #d6d8dc;168    background: #f4f4f6;169    color: #a4a7af;170  }171  .fare-title {172    font-size: 34px;173    font-weight: 800;174    margin-bottom: 10px;175  }176 177  /* Share sheet overlay */178  .share-sheet {179    position: absolute;180    left: 0;181    right: 0;182    bottom: 0;183    height: 1180px;184    background: #1c1c1c;185    border-top-left-radius: 32px;186    border-top-right-radius: 32px;187    box-shadow: 0 -12px 20px rgba(0,0,0,0.35);188    color: #fff;189  }190  .sheet-handle {191    position: absolute;192    top: 14px;193    left: 50%;194    transform: translateX(-50%);195    width: 120px;196    height: 14px;197    border-radius: 8px;198    background: #4a4a4a;199    opacity: 0.9;200  }201  .sheet-content {202    padding: 80px 60px 40px 60px;203  }204  .share-message {205    font-size: 34px;206    line-height: 1.45;207    margin-bottom: 40px;208    color: #eaeaea;209  }210  .sheet-actions {211    display: flex;212    gap: 26px;213    margin-bottom: 80px;214  }215  .pill {216    display: inline-flex;217    align-items: center;218    gap: 18px;219    padding: 18px 26px;220    border-radius: 16px;221    border: 2px solid #9da3ad;222    color: #ffffff;223    font-size: 32px;224    font-weight: 700;225    background: transparent;226  }227  .pill svg { stroke: #ffffff; }228 229  .no-recommend {230    text-align: center;231    color: #9fa1a6;232    font-size: 30px;233    margin-bottom: 60px;234  }235 236  .app-row {237    display: flex;238    justify-content: space-around;239    padding: 0 80px;240    margin-top: 10px;241  }242  .app {243    width: 150px;244    height: 150px;245    border-radius: 75px;246    background: #2b2b2b;247    border: 1px solid #3b3b3b;248    display: flex;249    align-items: center;250    justify-content: center;251    margin-bottom: 18px;252  }253  .app-label {254    text-align: center;255    color: #d9d9d9;256    font-size: 28px;257    font-weight: 700;258  }259  /* Simple colored shapes inside app icons */260  .gmail { background: #ffffff; }261  .messages { background: #3c6df0; }262  .drive { background: #ffffff; }263  .keep { background: #ffd54f; }264 265  /* Gesture bar at very bottom */266  .gesture-bar {267    position: absolute;268    bottom: 30px;269    left: 50%;270    transform: translateX(-50%);271    width: 250px;272    height: 10px;273    background: #e9e9e9;274    border-radius: 10px;275    opacity: 0.95;276  }277</style>278</head>279<body>280<div id="render-target">281 282  <div class="header">283    <div class="status-bar">284      <div>9:26</div>285      <div class="status-icons">286        <!-- small lock icon -->287        <svg width="34" height="34" viewBox="0 0 24 24">288          <path d="M7 10V7a5 5 0 0 1 10 0v3" stroke-width="2"/>289          <rect x="5" y="10" width="14" height="10" rx="2" stroke-width="2"/>290        </svg>291        <!-- NFC icon -->292        <svg width="34" height="34" viewBox="0 0 24 24">293          <path d="M5 7h14M5 12h14M5 17h14" stroke-width="2"/>294        </svg>295        <!-- notifications bell -->296        <svg width="34" height="34" viewBox="0 0 24 24">297          <path d="M12 3c-3 0-5 2-5 5v4l-2 2h14l-2-2V8c0-3-2-5-5-5Z" stroke-width="2"/>298          <circle cx="12" cy="20" r="2" stroke-width="2"/>299        </svg>300        <div class="dot"></div>301        <!-- cellular icon -->302        <svg width="34" height="34" viewBox="0 0 24 24">303          <path d="M4 20h2M8 16h2M12 12h2M16 8h2" stroke-width="2"/>304        </svg>305        <!-- battery with percent -->306        <svg width="54" height="34" viewBox="0 0 32 20">307          <rect x="2" y="4" width="26" height="12" rx="2" stroke-width="2" />308          <rect x="28" y="8" width="2" height="4" rx="1" fill="#fff"/>309          <rect x="4" y="6" width="20" height="8" rx="1" fill="#fff"/>310        </svg>311        <span style="font-size:28px; font-weight:700;">100%</span>312      </div>313    </div>314 315    <div class="title-row">316      <div class="title-left">317        <!-- back arrow -->318        <svg width="40" height="40" viewBox="0 0 24 24" style="stroke:#fff;">319          <path d="M15 6l-6 6 6 6" stroke-width="2" fill="none" />320        </svg>321        <div class="main-title">New York, NY > New Hyde Park, NY</div>322      </div>323      <!-- share icon -->324      <svg width="40" height="40" viewBox="0 0 24 24" style="stroke:#fff;">325        <circle cx="6" cy="12" r="2" stroke-width="2"/>326        <circle cx="18" cy="6" r="2" stroke-width="2"/>327        <circle cx="18" cy="18" r="2" stroke-width="2"/>328        <path d="M8 12l8-6M8 12l8 6" stroke-width="2"/>329      </svg>330    </div>331    <div class="subtitle">Wed, Nov 22, 1 passenger</div>332  </div>333 334  <!-- Light background for rest of page -->335  <div class="content-bg"></div>336 337  <!-- Overlapping time/location card -->338  <div class="time-card">339    <div class="time">3:35 PM</div>340    <div class="pin-icon">341      <svg width="36" height="36" viewBox="0 0 24 24">342        <path d="M12 2a6 6 0 0 0-6 6c0 4.5 6 12 6 12s6-7.5 6-12a6 6 0 0 0-6-6Z" fill="#e04b3b"/>343        <circle cx="12" cy="8" r="2.5" fill="#fff"/>344      </svg>345    </div>346    <div class="loc-text">New York, Hillside Ave / 219...</div>347  </div>348 349  <!-- Journey information -->350  <div class="info-card">351    <div class="info-head">352      <svg width="36" height="36" viewBox="0 0 24 24" style="stroke:#4a79ff;">353        <circle cx="12" cy="12" r="10" stroke-width="2" fill="none"/>354        <path d="M12 7v2M12 11v6" stroke-width="2"/>355      </svg>356      Journey information357    </div>358    <div class="info-body">359      This bus arrives at New York, Hillside Ave / 219th St (Queens Village), New York, NY, about 5 km from New Hyde Park, NY.360    </div>361  </div>362 363  <div class="section-title">Fare conditions</div>364  <div class="fare-row">365    <div class="fare-tile">366      <div class="fare-title">Standard</div>367      <div style="font-size:28px; color:#385aa7;">Flexible seat selection and 1 carry-on.</div>368    </div>369    <div class="fare-tile dim">370      <div class="fare-title" style="color:#9ca3af;">There is only 1 fare available</div>371      <div style="font-size:26px;">Details unavailable in preview</div>372    </div>373  </div>374 375  <!-- Share sheet overlay -->376  <div class="share-sheet">377    <div class="sheet-handle"></div>378    <div class="sheet-content">379      <div class="share-message">380        Oh wow, look at this deal I found! I think you should lock it down before it’s gone. ...381      </div>382      <div class="sheet-actions">383        <div class="pill">384          <svg width="32" height="32" viewBox="0 0 24 24">385            <rect x="6" y="6" width="12" height="14" rx="2" stroke-width="2" fill="none"/>386            <path d="M8 4h8v4" stroke-width="2" fill="none"/>387          </svg>388          Copy389        </div>390        <div class="pill">391          <svg width="32" height="32" viewBox="0 0 24 24">392            <path d="M4 7h8l-2-3M20 17h-8l2 3" stroke-width="2" fill="none"/>393            <path d="M7 13h10" stroke-width="2" />394          </svg>395          Nearby396        </div>397      </div>398      <div class="no-recommend">No recommended people to share with</div>399 400      <div class="app-row">401        <div style="text-align:center;">402          <div class="app gmail"></div>403          <div class="app-label">Gmail</div>404        </div>405        <div style="text-align:center;">406          <div class="app messages"></div>407          <div class="app-label">Messages</div>408        </div>409        <div style="text-align:center;">410          <div class="app drive"></div>411          <div class="app-label">Drive</div>412        </div>413        <div style="text-align:center;">414          <div class="app keep"></div>415          <div class="app-label">Keep Notes</div>416        </div>417      </div>418    </div>419  </div>420 421  <div class="gesture-bar"></div>422</div>423</body>424</html>