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>Outbound Trip - Departure Station</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff; border-radius:24px;13    box-shadow: 0 8px 24px rgba(0,0,0,0.15);14  }15 16  /* Top green area */17  .top-bar {18    position:absolute; left:0; top:0; width:100%; height:360px;19    background:#7CB342; color:#fff;20  }21  .status-bar {22    position:absolute; top:24px; left:32px; right:32px; height:48px;23    display:flex; align-items:center; justify-content:space-between; font-weight:500;24    font-size:36px; opacity:0.95;25  }26  .status-icons { display:flex; align-items:center; gap:28px; }27  .app-bar {28    position:absolute; top:110px; left:0; right:0; height:90px;29    display:flex; align-items:center; padding:0 32px; color:#111; font-size:48px; font-weight:700;30  }31  .app-bar .title { margin-left:24px; color:#0a0a0a; }32  .app-bar .right-act { margin-left:auto; font-size:42px; font-weight:700; letter-spacing:1px; color:#1b1b1b; }33  .icon-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }34  .tabs {35    position:absolute; top:210px; left:0; right:0; height:120px;36    display:flex; align-items:flex-end; padding:0 24px; gap:24px; color:#233; font-size:36px; font-weight:700;37  }38  .tab {39    padding:18px 24px; border-radius:12px; color:#253; opacity:0.85;40  }41  .tab.active { color:#0b0b0b; position:relative; }42  .tab.active::after {43    content:""; position:absolute; left:24px; right:24px; bottom:-6px; height:8px; background:#2c2c2c; border-radius:4px;44  }45 46  /* Content area below header */47  .content {48    position:absolute; top:360px; left:0; right:0; bottom:0; padding:24px 24px 0 24px;49    background:#f5f5f5;50  }51 52  .info-banner {53    background:#fafafa; border:1px solid #d9d9d9; border-radius:20px;54    padding:28px; display:flex; align-items:center; gap:20px; color:#333; font-size:36px; font-weight:500;55    margin-bottom:24px;56  }57  .trip-card {58    background:#ffffff; border:1px solid #dedede; border-radius:24px;59    padding:28px; margin-bottom:24px; box-shadow: 0 2px 0 rgba(0,0,0,0.05);60  }61  .trip-row { display:flex; align-items:center; gap:24px; font-size:44px; color:#262626; }62  .sub-row { display:flex; align-items:center; gap:20px; margin-top:18px; color:#666; font-size:34px; }63  .price-col { margin-left:auto; text-align:right; }64  .price { font-size:64px; font-weight:800; color:#222; }65  .fastest { color:#1B5E20; font-weight:800; font-size:34px; margin-top:8px; }66  .pill {67    display:inline-flex; align-items:center; gap:16px; padding:14px 18px; border:1px solid #cfcfcf; border-radius:24px;68    font-size:34px; color:#444; background:#ffffff;69  }70  .warning { color:#d35400; font-size:34px; margin-top:6px; }71 72  /* Bottom sheet */73  .bottom-sheet {74    position:absolute; left:0; right:0; bottom:0; height:1300px;75    background:#ffffff; border-top-left-radius:36px; border-top-right-radius:36px;76    box-shadow:0 -12px 24px rgba(0,0,0,0.25);77  }78  .sheet-header {79    display:flex; align-items:center; padding:32px; gap:20px;80  }81  .sheet-title { font-size:56px; font-weight:800; color:#1a1a1a; }82  .close-btn { margin-left:auto; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }83  .address {84    padding:0 32px; color:#333; font-size:40px; line-height:1.3; margin-top:8px; display:flex; align-items:flex-start; gap:18px;85  }86  .copy {87    margin-left:auto; width:70px; height:70px; border:1px solid #a5d6a7; border-radius:14px; display:flex; align-items:center; justify-content:center;88  }89  .note {90    margin:28px 32px 0 32px; background:#f2f2f2; border:1px solid #e0e0e0; border-radius:20px;91    padding:26px; color:#777; font-size:36px; display:flex; align-items:center; justify-content:space-between;92  }93  .map {94    margin:24px 0 0 0; padding:0 32px;95  }96  .map .img {97    width:1016px; height:800px; background:#E0E0E0; border:1px solid #BDBDBD;98    display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; border-radius:12px;99  }100 101  /* Gesture bar */102  .gesture {103    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);104    width:360px; height:14px; background:#000; border-radius:10px; opacity:0.88;105  }106 107  /* Simple icon styles */108  svg { display:block; }109  .icon { width:48px; height:48px; }110  .icon-lg { width:60px; height:60px; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Green header with status bar, app bar and tabs -->117  <div class="top-bar">118    <div class="status-bar">119      <div>8:55</div>120      <div class="status-icons">121        <!-- simple circles to hint status -->122        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/></svg>123        <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>124        <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18M3 18h18" stroke="#fff" stroke-width="2"/></svg>125        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2" fill="#fff"/></svg>126      </div>127    </div>128 129    <div class="app-bar">130      <div class="icon-btn">131        <!-- back arrow -->132        <svg class="icon-lg" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>133      </div>134      <div class="title">Outbound trip</div>135      <div class="right-act">FILTER</div>136    </div>137 138    <div class="tabs">139      <div class="tab">WED, NOV 22</div>140      <div class="tab active">THU, NOV 23</div>141      <div class="tab">FRI, NOV 24</div>142      <div class="tab">SAT, NOV 25</div>143    </div>144  </div>145 146  <!-- Main content list -->147  <div class="content">148    <div class="info-banner">149      <!-- info icon -->150      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#777" stroke-width="2"/><rect x="11" y="10" width="2" height="6" fill="#777"/><circle cx="12" cy="7" r="1.6" fill="#777"/></svg>151      <div>All transactions will incur a <strong>$3.99</strong> service fee.</div>152    </div>153 154    <div class="trip-card">155      <div class="trip-row">156        <div style="width:220px; font-weight:800;">10:30 <span style="font-size:36px;">PM</span></div>157        <div style="color:#555;">Sao Paulo (Terminal-Tiete)</div>158        <div class="price-col">159          <div class="price">$26<span style="font-size:36px;">.99</span></div>160        </div>161      </div>162      <div class="trip-row" style="margin-top:8px;">163        <div style="width:220px; font-weight:800;">4:35 <span style="font-size:36px;">AM</span> <span style="font-size:36px; color:#777;">+1</span></div>164        <div style="color:#555;">Rio de Janeiro (NovoRio)</div>165        <div style="margin-left:auto; color:#d35400; font-size:34px;">3 seats left at this price</div>166      </div>167 168      <div class="sub-row">169        <div class="pill">170          <!-- bus-like icon -->171          <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="11" rx="2" fill="none" stroke="#777" stroke-width="2"/><circle cx="7" cy="18" r="2" fill="#777"/><circle cx="17" cy="18" r="2" fill="#777"/></svg>172          Semi-bed173          <!-- dropdown chevron -->174          <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>175        </div>176        <div class="pill">6:05 Hrs.</div>177        <div class="pill">Wi‑Fi</div>178        <div class="pill">+1</div>179      </div>180      <div class="fastest">FASTEST TRIP</div>181    </div>182 183    <div class="trip-card">184      <div class="trip-row">185        <div style="width:220px; font-weight:800;">11:30 <span style="font-size:36px;">PM</span></div>186        <div style="color:#555;">Sao Paulo (Terminal-Tiete)</div>187      </div>188    </div>189  </div>190 191  <!-- Bottom sheet overlay -->192  <div class="bottom-sheet">193    <div class="sheet-header">194      <div class="icon-btn" style="margin-left:-8px;">195        <svg class="icon-lg" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>196      </div>197      <div class="sheet-title">Departure Station</div>198      <div class="close-btn">199        <!-- close icon -->200        <svg class="icon-lg" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>201      </div>202    </div>203 204    <div class="address">205      <div>206        Avenida Cruzeiro do Sul, 1800, 02030-00<br/>207        São Paulo208      </div>209      <div class="copy">210        <!-- copy icon -->211        <svg class="icon" viewBox="0 0 24 24"><rect x="9" y="9" width="10" height="10" rx="2" fill="none" stroke="#4CAF50" stroke-width="2"/><rect x="5" y="5" width="10" height="10" rx="2" fill="none" stroke="#4CAF50" stroke-width="2"/></svg>212      </div>213    </div>214 215    <div class="note">216      <div>- Please arrive at the terminal 1 hour before your departure</div>217      <svg class="icon" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>218    </div>219 220    <div class="map">221      <div class="img">[IMG: Google Map of Terminal Tietê area]</div>222    </div>223  </div>224 225  <!-- Gesture bar -->226  <div class="gesture"></div>227</div>228</body>229</html>