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">6<title>Journey Overview UI</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;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 24px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);13  }14 15  /* Status bar */16  .status-bar {17    height: 110px; background: #1F1F1F; color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px; font-size: 42px; letter-spacing: 0.5px;20  }21  .sb-left { font-weight: 600; }22  .sb-icons { display: flex; gap: 26px; align-items: center; }23  .sb-icon {24    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.8);25  }26  .sb-signal {27    width: 46px; height: 30px; border: 3px solid rgba(255,255,255,0.8); border-radius: 6px;28  }29  .sb-battery {30    width: 40px; height: 22px; border: 3px solid rgba(255,255,255,0.9); border-radius: 4px; position: relative;31  }32  .sb-battery::after {33    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: rgba(255,255,255,0.9); border-radius: 2px;34  }35 36  /* Header */37  .header {38    height: 230px; background: #2D2931; color: #fff; position: relative;39  }40  .back-icon {41    position: absolute; left: 32px; top: 88px; width: 56px; height: 56px;42  }43  .title {44    position: absolute; left: 120px; top: 80px; font-size: 72px; font-weight: 700;45  }46 47  /* Map placeholder */48  .map {49    width: 100%; height: 560px; background: #E0E0E0;50    border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;52    position: relative;53  }54  .map .google {55    position: absolute; left: 24px; bottom: 20px; font-size: 36px; color: #7a7a7a;56  }57 58  /* Content section */59  .content {60    background: #F3F3F3; padding: 40px 48px 24px 48px; color: #333;61  }62  .depart {63    font-size: 42px; color: #666; margin-bottom: 36px;64  }65 66  .timeline-row {67    display: grid;68    grid-template-columns: 220px 60px 1fr;69    gap: 30px;70    background: #fff; border: 1px solid #E0E0E0; border-radius: 16px;71    padding: 40px 36px;72  }73  .time-col { display: flex; flex-direction: column; justify-content: space-between; }74  .time { font-size: 40px; color: #333; }75  .line-col { position: relative; }76  .vertical-line {77    position: absolute; left: 26px; top: 10px; width: 14px; height: 520px; background: #EF7D22; border-radius: 8px;78  }79  .vertical-line .dot {80    position: absolute; left: -16px; width: 46px; height: 46px; border: 8px solid #EF7D22; border-radius: 50%; background: #fff;81  }82  .vertical-line .dot.top { top: -20px; }83  .vertical-line .dot.bottom { bottom: -20px; }84 85  .details-col { display: flex; flex-direction: column; justify-content: space-between; }86  .stop { font-size: 48px; color: #333; }87  .middle { display: flex; align-items: center; gap: 24px; }88  .bus-logo, .op-logo {89    width: 72px; height: 72px; background: #E0E0E0; border: 1px solid #BDBDBD;90    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 8px;91  }92  .dur-bold { font-weight: 700; font-size: 44px; }93  .dur-sub { font-size: 36px; color: #777; margin-top: 6px; }94 95  .total {96    margin: 36px 12px 8px 12px; font-size: 48px; color: #333; font-weight: 700;97  }98  .total .label { font-weight: 600; }99  .total .val { font-weight: 700; }100 101  .note {102    font-size: 32px; color: #7a7a7a; line-height: 1.5; margin: 8px 12px 30px 12px;103  }104 105  /* Operators */106  .operators {107    background: #fff; padding: 24px 48px 180px 48px; /* space for CTA */108    border-top: 1px solid #E5E5E5;109  }110  .operators-title {111    font-size: 56px; font-weight: 700; color: #333; margin: 16px 0 30px 0;112  }113  .operator-row {114    display: flex; align-items: center; gap: 28px; padding: 16px 0;115  }116  .op-name { font-size: 46px; color: #333; }117 118  /* CTA bar */119  .cta-bar {120    position: absolute; left: 0; right: 0; bottom: 120px;121    height: 150px; background: #22A45D; display: flex; align-items: center; justify-content: center; gap: 26px;122    color: #fff;123  }124  .cta-text { font-size: 44px; font-weight: 800; letter-spacing: 2px; }125  .cta-icon { width: 64px; height: 64px; }126  .cta-icon rect { fill: none; stroke: #fff; stroke-width: 6; }127  .cta-icon path { stroke: #fff; stroke-width: 6; fill: none; }128 129  /* Bottom system bar */130  .home-indicator {131    position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #121212; display: flex; align-items: center; justify-content: center;132  }133  .pill {134    width: 360px; height: 12px; background: rgba(255,255,255,0.85); border-radius: 8px;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status bar -->142  <div class="status-bar">143    <div class="sb-left">4:01</div>144    <div class="sb-icons">145      <div class="sb-icon" title="moon"></div>146      <div class="sb-signal"></div>147      <div class="sb-battery"></div>148    </div>149  </div>150 151  <!-- Header -->152  <div class="header">153    <svg class="back-icon" viewBox="0 0 24 24">154      <path d="M15 5 L8 12 L15 19" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>155    </svg>156    <div class="title">Journey Overview</div>157  </div>158 159  <!-- Map placeholder -->160  <div class="map">161    [IMG: Google Map with route]162    <div class="google">Google</div>163  </div>164 165  <!-- Content -->166  <div class="content">167    <div class="depart">Departs Thursday, Aug 17</div>168 169    <div class="timeline-row">170      <div class="time-col">171        <div class="time">2:25 AM</div>172        <div class="time">9:40 AM</div>173      </div>174      <div class="line-col">175        <div class="vertical-line">176          <span class="dot top"></span>177          <span class="dot bottom"></span>178        </div>179      </div>180      <div class="details-col">181        <div class="stop">Barcelona (Bus Terminal Nord)</div>182        <div class="middle">183          <div class="bus-logo">[IMG]</div>184          <div>185            <div class="dur-bold">7 hr 15 min</div>186            <div class="dur-sub">N738 • FlixBus</div>187          </div>188        </div>189        <div class="stop">Madrid (South Bus Station)</div>190      </div>191    </div>192 193    <div class="total"><span class="label">Total Duration:</span> <span class="val">7 hr 15 min</span></div>194    <div class="note">195      These schedules are intended for planning purposes only. You may find that schedule changes, availability and local events may cause these results to be different to what is shown here.196    </div>197  </div>198 199  <!-- Operators -->200  <div class="operators">201    <div class="operators-title">Operators</div>202    <div class="operator-row">203      <div class="op-logo">[IMG]</div>204      <div class="op-name">FlixBus</div>205    </div>206  </div>207 208  <!-- CTA -->209  <div class="cta-bar">210    <svg class="cta-icon" viewBox="0 0 24 24">211      <rect x="4" y="4" width="16" height="16" rx="2"></rect>212      <path d="M8 16 L16 8 M12 8 H16 V12" ></path>213    </svg>214    <div class="cta-text">FIND TICKETS NOW</div>215  </div>216 217  <!-- Bottom system home indicator -->218  <div class="home-indicator">219    <div class="pill"></div>220  </div>221 222</div>223</body>224</html>