GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Travel Results</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff;10  }11 12  /* Header */13  .header {14    position: absolute; left: 0; top: 0; width: 100%; height: 320px;15    background: #0e2557; color: #fff;16  }17  .status-bar {18    height: 70px; display: flex; align-items: center; justify-content: space-between;19    padding: 0 40px; font-size: 34px; opacity: 0.95;20  }21  .status-right { display: flex; align-items: center; gap: 24px; }22  .title-row {23    display: flex; align-items: center; justify-content: space-between;24    padding: 16px 40px 6px 40px;25  }26  .title-left { display: flex; align-items: center; gap: 24px; }27  .page-title {28    font-size: 44px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 820px;29  }30  .subtitle {31    padding-left: 104px; color: #dbe3f6; font-size: 30px;32  }33 34  /* Transport mode summary row */35  .mode-summary {36    position: absolute; left: 0; top: 320px; width: 100%; height: 170px;37    background: #f5f6f8; border-top: 1px solid rgba(0,0,0,0.06);38    display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;39  }40  .mode {41    text-align: center; color: #9aa3b7;42  }43  .mode .price { color: #25325f; font-weight: 700; font-size: 40px; }44  .mode .duration { color: #7a8399; font-size: 30px; }45  .mode svg { margin-bottom: 8px; }46 47  /* Filters (chips) */48  .filters {49    position: absolute; left: 0; top: 490px; width: 100%;50    display: flex; gap: 24px; padding: 24px 40px;51  }52  .chip {53    display: flex; align-items: center; gap: 20px; background: #ffffff;54    border: 1px solid #e6e8ee; border-radius: 40px; padding: 18px 28px; color: #475070; font-weight: 600; font-size: 34px;55    box-shadow: 0 1px 0 rgba(0,0,0,0.03);56  }57  .chip.disabled { color: #aab0bf; background: #f1f3f7; }58 59  /* Result card */60  .result-card {61    position: absolute; left: 40px; top: 680px; width: 1000px;62    background: #fff; border-radius: 24px; box-shadow: 0 10px 18px rgba(0,0,0,0.08);63    padding: 34px;64  }65  .tag {66    color: #16a36b; font-weight: 700; font-size: 30px; letter-spacing: 0.5px;67  }68  .logo-box {69    width: 200px; height: 70px; margin-top: 14px; margin-bottom: 10px;70    background: #E0E0E0; border: 1px solid #BDBDBD;71    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 8px;72  }73  .times-row {74    display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; margin-top: 16px; margin-bottom: 14px;75  }76  .big-time { font-size: 64px; font-weight: 800; color: #0f1f4e; }77  .middle-duration { text-align: center; color: #7a8399; font-size: 32px; }78  .moon { display: inline-block; vertical-align: middle; margin-left: 8px; }79  .loc-row {80    display: grid; grid-template-columns: 1fr 1fr; gap: 30px; color: #2e385d; font-size: 34px;81  }82  .transfer-row {83    margin-top: 24px; display: flex; align-items: center; justify-content: space-between;84  }85  .pill {86    background: #dbe8ff; color: #2f4c8f; font-weight: 700; border-radius: 26px; padding: 16px 24px; font-size: 32px; display: inline-flex; align-items: center; gap: 14px;87  }88  .price-info { text-align: right; }89  .price { font-size: 54px; font-weight: 800; color: #0f1f4e; }90  .passengers { margin-top: 8px; color: #4b567a; font-size: 32px; display: inline-flex; align-items: center; gap: 10px; }91 92  /* Footer small print */93  .small-print {94    position: absolute; left: 0; top: 1280px; width: 100%; text-align: center; color: #2e385d; font-size: 36px; font-weight: 700;95  }96  .small-print span { font-weight: 400; color: #7781a0; }97  .small-print a { color: #2e385d; text-decoration: none; font-weight: 800; }98 99  /* Bottom home indicator area */100  .home-bar {101    position: absolute; left: 0; bottom: 0; width: 100%; height: 130px; background: #0e2557;102  }103  .home-indicator {104    position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);105    width: 300px; height: 12px; background: #e9edf7; border-radius: 10px;106  }107 108  /* Simple helper icon styling */109  .icon { width: 44px; height: 44px; }110  .icon-lg { width: 64px; height: 64px; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Header -->117  <div class="header">118    <div class="status-bar">119      <div>6:13</div>120      <div class="status-right">121        <!-- simple dots to mimic notifications -->122        <svg class="icon" viewBox="0 0 40 40"><circle cx="20" cy="20" r="6" fill="#c6d1ef"/></svg>123        <svg class="icon" viewBox="0 0 40 40"><path d="M6 24h28l-3 6H9zM8 10h24v10H8z" fill="#c6d1ef"/></svg>124        <svg class="icon" viewBox="0 0 40 40"><path d="M6 12h28M6 20h28M6 28h28" stroke="#c6d1ef" stroke-width="3" /></svg>125        <!-- wifi -->126        <svg class="icon" viewBox="0 0 40 40">127          <path d="M8 15c7-6 17-6 24 0" stroke="#fff" stroke-width="3" fill="none" />128          <path d="M12 20c5-4 11-4 16 0" stroke="#fff" stroke-width="3" fill="none" />129          <circle cx="20" cy="26" r="3" fill="#fff"/>130        </svg>131        <!-- battery -->132        <svg class="icon" viewBox="0 0 50 40">133          <rect x="4" y="10" width="36" height="20" rx="4" stroke="#fff" stroke-width="3" fill="none"/>134          <rect x="7" y="13" width="25" height="14" rx="2" fill="#fff"/>135          <rect x="42" y="16" width="4" height="8" fill="#fff"/>136        </svg>137      </div>138    </div>139 140    <div class="title-row">141      <div class="title-left">142        <!-- back arrow -->143        <svg class="icon-lg" viewBox="0 0 48 48">144          <path d="M30 10 L16 24 L30 38" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>145        </svg>146        <div class="page-title">Toronto, ON › Rice Lak...</div>147      </div>148      <!-- share icon -->149      <svg class="icon-lg" viewBox="0 0 48 48">150        <circle cx="14" cy="24" r="5" fill="#c6d1ef"/>151        <circle cx="34" cy="12" r="5" fill="#c6d1ef"/>152        <circle cx="34" cy="36" r="5" fill="#c6d1ef"/>153        <path d="M18 23 L29 14 M18 25 L29 34" stroke="#c6d1ef" stroke-width="3" fill="none" stroke-linecap="round"/>154      </svg>155    </div>156    <div class="subtitle">Sun, Oct 22, 3 passengers</div>157  </div>158 159  <!-- Transport modes summary -->160  <div class="mode-summary">161    <div class="mode">162      <!-- Train icon -->163      <svg class="icon-lg" viewBox="0 0 64 64">164        <rect x="12" y="16" width="40" height="28" rx="6" fill="#63729a"/>165        <rect x="18" y="22" width="28" height="10" rx="2" fill="#cdd4e6"/>166        <circle cx="22" cy="48" r="4" fill="#63729a"/>167        <circle cx="42" cy="48" r="4" fill="#63729a"/>168      </svg>169      <div class="price">$629</div>170      <div class="duration">31h17m</div>171    </div>172    <div class="mode">173      <!-- Bus icon -->174      <svg class="icon-lg" viewBox="0 0 64 64">175        <rect x="10" y="22" width="44" height="20" rx="4" fill="#cdd4e6"/>176        <circle cx="20" cy="46" r="4" fill="#cdd4e6"/>177        <circle cx="44" cy="46" r="4" fill="#cdd4e6"/>178      </svg>179      <div style="font-size:40px;">-</div>180    </div>181    <div class="mode">182      <!-- Plane icon -->183      <svg class="icon-lg" viewBox="0 0 64 64">184        <path d="M8 28 L56 16 L40 32 L56 48 L8 36" fill="#cdd4e6"/>185      </svg>186      <div style="font-size:40px;">-</div>187    </div>188  </div>189 190  <!-- Filters -->191  <div class="filters">192    <div class="chip">193      <svg class="icon" viewBox="0 0 48 48">194        <path d="M8 16h26M8 24h18M8 32h30" stroke="#5b6a94" stroke-width="4" stroke-linecap="round"/>195        <path d="M36 16v-6M26 24v-6M40 32v-6" stroke="#5b6a94" stroke-width="4" stroke-linecap="round"/>196      </svg>197      <div>Departure time</div>198    </div>199    <div class="chip">Stops</div>200    <div class="chip">Arrival</div>201    <div class="chip disabled">Departure</div>202  </div>203 204  <!-- Result Card -->205  <div class="result-card">206    <div class="tag">CHEAPEST, FASTEST</div>207    <div class="logo-box">[IMG: VIA Rail Canada Logo]</div>208 209    <div class="times-row">210      <div class="big-time">9:55 AM</div>211      <div class="middle-duration">31h17m</div>212      <div class="big-time">4:12 PM213        <svg class="moon" width="28" height="28" viewBox="0 0 28 28">214          <path d="M20 14a8 8 0 1 1-8-8c-2 3 0 13 8 8z" fill="#f2b84c"/>215        </svg>216      </div>217    </div>218 219    <div class="loc-row">220      <div>Toronto (Union Station), Toronto, ON</div>221      <div>Rice Lake, Winnitoba, MB</div>222    </div>223 224    <div class="transfer-row">225      <div class="pill">226        <span>0 Transfers</span>227        <svg width="28" height="28" viewBox="0 0 28 28">228          <path d="M6 10l8 8 8-8" fill="none" stroke="#2f4c8f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>229        </svg>230      </div>231      <div class="price-info">232        <div class="price">$629</div>233        <div class="passengers">234          <svg width="30" height="30" viewBox="0 0 32 32">235            <circle cx="16" cy="10" r="6" fill="#7a8399"/>236            <path d="M6 28c0-6 20-6 20 0" fill="#7a8399"/>237          </svg>238          <span>3 • One-way</span>239        </div>240      </div>241    </div>242  </div>243 244  <!-- Small print -->245  <div class="small-print">246    Our small print, <a href="#">Terms of use</a> <span>and</span> <a href="#">Privacy Policy</a>247  </div>248 249  <!-- Bottom home indicator -->250  <div class="home-bar">251    <div class="home-indicator"></div>252  </div>253 254</div>255</body>256</html>