GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Travel Route UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #212121;16  }17 18  /* Top map area */19  .map {20    position: relative;21    width: 100%;22    height: 680px;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    display: flex;26    align-items: center;27    justify-content: center;28    color: #757575;29    letter-spacing: 0.3px;30    font-size: 28px;31  }32  .map .fade {33    position: absolute;34    left: 0; top: 0; right: 0;35    height: 220px;36    background: linear-gradient(to bottom, rgba(60,70,80,0.55), rgba(60,70,80,0.25), rgba(60,70,80,0));37    pointer-events: none;38  }39  .status-bar {40    position: absolute;41    top: 20px;42    left: 24px;43    right: 24px;44    height: 60px;45    display: flex;46    align-items: center;47    justify-content: space-between;48    color: #ffffff;49    font-weight: 600;50    font-size: 34px;51  }52  .status-right {53    display: flex;54    align-items: center;55    gap: 18px;56  }57  .google-watermark {58    position: absolute;59    left: 20px;60    bottom: 12px;61    font-size: 30px;62    color: #8a8a8a;63  }64  .share-btn {65    position: absolute;66    right: 24px;67    top: 180px;68    width: 80px;69    height: 80px;70    background: rgba(255,255,255,0.95);71    border-radius: 12px;72    display: flex;73    align-items: center;74    justify-content: center;75    box-shadow: 0 2px 6px rgba(0,0,0,0.12);76  }77 78  /* Summary section */79  .summary {80    padding: 40px 48px 24px 48px;81    display: flex;82    align-items: center;83    justify-content: space-between;84    border-top: 1px solid #eeeeee;85    background: #ffffff;86  }87  .summary-left {88    display: flex;89    align-items: center;90    gap: 24px;91  }92  .tab-icons {93    display: flex;94    gap: 16px;95  }96  .tab {97    width: 120px;98    height: 96px;99    background: #7B4CB1;100    border-radius: 8px;101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .summary-title {106    font-size: 54px;107    font-weight: 600;108    color: #222;109  }110  .duration {111    font-size: 46px;112    color: #444;113  }114  .price-row {115    padding: 18px 48px;116    border-top: 1px solid #eeeeee;117    color: #888;118    font-size: 34px;119  }120 121  /* Timeline */122  .timeline {123    position: relative;124    padding: 24px 48px 40px 48px;125  }126  .timeline .line {127    position: absolute;128    left: 136px;129    top: 0;130    bottom: 140px;131    width: 16px;132    background: #7B4CB1;133    border-radius: 10px;134  }135  .stop {136    position: relative;137    padding-left: 220px;138    margin-bottom: 54px;139  }140  .stop .bullet {141    position: absolute;142    left: 120px;143    top: 4px;144    width: 44px;145    height: 44px;146    border-radius: 22px;147    border: 10px solid #7B4CB1;148    background: #ffffff;149    box-sizing: border-box;150  }151  .stop .title {152    font-size: 48px;153    font-weight: 600;154    color: #222;155    margin-bottom: 16px;156  }157  .stop .details {158    font-size: 36px;159    color: #333;160    margin-bottom: 16px;161  }162  .badge-group { display: flex; gap: 12px; margin-bottom: 12px; }163  .badge {164    background: #7B4CB1;165    color: #fff;166    font-weight: 700;167    font-size: 32px;168    padding: 8px 16px;169    border-radius: 10px;170  }171  .price-small {172    font-size: 32px;173    color: #8d8d8d;174  }175 176  /* Accommodation card */177  .ad-card {178    margin: 16px 0 0 0;179    padding: 24px 48px;180    border-top: 1px solid #eeeeee;181    background: #ffffff;182    display: flex;183    align-items: center;184    justify-content: space-between;185  }186  .ad-left {187    display: flex;188    align-items: center;189    gap: 24px;190  }191  .ad-img {192    width: 120px;193    height: 120px;194    background: #E0E0E0;195    border: 1px solid #BDBDBD;196    border-radius: 16px;197    display: flex;198    align-items: center;199    justify-content: center;200    color: #757575;201    font-size: 24px;202  }203  .ad-text .ad-title {204    font-size: 44px;205    font-weight: 600;206  }207  .ad-text .ad-sub {208    font-size: 30px;209    color: #777;210    margin-top: 6px;211  }212  .ad-right {213    width: 72px;214    height: 72px;215    border-radius: 16px;216    display: flex;217    align-items: center;218    justify-content: center;219    color: #4d4d4d;220  }221 222  /* CTA bar */223  .cta {224    position: absolute;225    left: 0;226    right: 0;227    bottom: 120px;228    height: 140px;229    background: #1FA354;230    display: flex;231    align-items: center;232    justify-content: center;233    gap: 26px;234    color: #ffffff;235    font-weight: 800;236    font-size: 42px;237    letter-spacing: 2px;238  }239  .cta .icon-box {240    position: absolute;241    left: 24px;242    width: 88px;243    height: 88px;244    border: 2px solid #ffffff;245    border-radius: 12px;246    display: flex;247    align-items: center;248    justify-content: center;249  }250 251  /* Bottom handle */252  .handle {253    position: absolute;254    bottom: 40px;255    left: 50%;256    transform: translateX(-50%);257    width: 280px;258    height: 14px;259    background: #d9d9d9;260    border-radius: 7px;261  }262</style>263</head>264<body>265<div id="render-target">266 267  <div class="map">268    <div class="fade"></div>269    <div>[IMG: Map of Germany with route]</div>270 271    <div class="status-bar">272      <div>10:39</div>273      <div class="status-right">274        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">275          <path d="M2 8c4-4 16-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>276          <path d="M5 11c3-3 11-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>277          <path d="M8 14c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>278        </svg>279        <svg width="54" height="34" viewBox="0 0 30 18" fill="none">280          <rect x="1" y="2" width="24" height="14" rx="3" stroke="#fff" stroke-width="2"/>281          <rect x="3" y="4" width="18" height="10" rx="2" fill="#fff"/>282          <rect x="26" y="6" width="3" height="6" rx="1.5" fill="#fff"/>283        </svg>284        <div style="font-size:32px; font-weight:700;">100%</div>285      </div>286    </div>287 288    <div class="share-btn">289      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">290        <circle cx="6" cy="12" r="2.5" stroke="#7B4CB1" stroke-width="2"/>291        <circle cx="18" cy="6" r="2.5" stroke="#7B4CB1" stroke-width="2"/>292        <circle cx="18" cy="18" r="2.5" stroke="#7B4CB1" stroke-width="2"/>293        <path d="M8 12l8-5M8 12l8 6" stroke="#7B4CB1" stroke-width="2" stroke-linecap="round"/>294      </svg>295    </div>296 297    <div class="google-watermark">Google</div>298  </div>299 300  <div class="summary">301    <div class="summary-left">302      <div class="tab-icons">303        <div class="tab">304          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">305            <rect x="3" y="6" width="18" height="10" rx="2" fill="#fff"/>306            <circle cx="8" cy="18" r="2" fill="#fff"/>307            <circle cx="16" cy="18" r="2" fill="#fff"/>308          </svg>309        </div>310        <div class="tab">311          <svg width="54" height="54" viewBox="0 0 24 24" fill="none">312            <rect x="3" y="6" width="18" height="10" rx="2" fill="#fff"/>313            <circle cx="8" cy="18" r="2" fill="#fff"/>314            <circle cx="16" cy="18" r="2" fill="#fff"/>315          </svg>316        </div>317      </div>318      <div class="summary-title">Train</div>319    </div>320    <div class="duration">5 hr 46 min</div>321  </div>322 323  <div class="price-row">Approx price: $70 - $95</div>324 325  <div class="timeline">326    <div class="line"></div>327 328    <div class="stop">329      <div class="bullet"></div>330      <div class="title">Berlin Hauptbahnhof</div>331      <div class="details"><span style="font-weight:800;">4 hr 14 min</span> · Train · Every 4 hours</div>332      <div class="badge-group">333        <div class="badge">18</div>334        <div class="badge">91</div>335        <div class="badge">29</div>336      </div>337      <div class="price-small">$70 - $95</div>338    </div>339 340    <div class="stop">341      <div class="bullet"></div>342      <div class="title">Donauwörth</div>343    </div>344 345    <div class="stop">346      <div class="bullet"></div>347      <div class="title">Donauwoerth</div>348    </div>349 350    <div class="stop">351      <div class="bullet"></div>352      <div class="details"><span style="font-weight:800;">1 hr 2 min</span> · Train · Hourly</div>353      <div class="badge-group">354        <div class="badge">Re</div>355      </div>356    </div>357 358    <div class="stop" style="margin-bottom: 10px;">359      <div class="bullet"></div>360      <div class="title">Neu-Ulm</div>361    </div>362  </div>363 364  <div class="ad-card">365    <div class="ad-left">366      <div class="ad-img">[IMG: Bed Icon]</div>367      <div class="ad-text">368        <div class="ad-title">Accommodation near Ulm</div>369        <div class="ad-sub">Best Price Guarantee</div>370      </div>371    </div>372    <div class="ad-right">373      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">374        <path d="M7 17l10-10M9 7h8v8" stroke="#4d4d4d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>375      </svg>376    </div>377  </div>378 379  <div class="cta">380    <div class="icon-box">381      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">382        <path d="M7 17l10-10M9 7h8v8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>383      </svg>384    </div>385    FIND TICKETS NOW386  </div>387 388  <div class="handle"></div>389</div>390</body>391</html>