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>Trip customization</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F6F9;15  }16 17  /* Status bar */18  .statusbar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #616161;25    font-size: 30px;26    background: #FFFFFF;27  }28  .status-left { display: flex; align-items: center; gap: 18px; }29  .status-right { display: flex; align-items: center; gap: 26px; }30 31  /* Header */32  .header {33    height: 120px;34    background: #FFFFFF;35    display: flex;36    align-items: center;37    padding: 0 32px;38    border-bottom: 1px solid #E7ECEF;39  }40  .header .title {41    font-size: 46px;42    font-weight: 700;43    color: #1F2933;44    margin-left: 18px;45  }46  .header-actions {47    margin-left: auto;48    display: flex;49    align-items: center;50    gap: 28px;51  }52  .icon-btn {53    width: 80px;54    height: 80px;55    display: grid;56    place-items: center;57    border-radius: 50%;58  }59 60  /* Banner */61  .banner {62    margin: 18px 0 0 0;63    background: #EDF2F5;64    border-top: 1px solid #E1E6EA;65    border-bottom: 1px solid #E1E6EA;66    display: flex;67    align-items: center;68    justify-content: space-between;69    padding: 44px 40px;70  }71  .banner h2 {72    margin: 0 0 6px 0;73    font-size: 44px;74    color: #1F2933;75    font-weight: 800;76  }77  .img-placeholder {78    width: 250px;79    height: 180px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    border-radius: 12px;83    color: #616161;84    display: flex;85    align-items: center;86    justify-content: center;87    text-align: center;88    font-size: 26px;89    padding: 8px;90    margin-left: 20px;91  }92 93  /* Content Card */94  .content {95    padding: 36px 32px 0 32px;96  }97  .card {98    background: #FFFFFF;99    border-radius: 20px;100    padding: 36px 28px 28px 28px;101    box-shadow: 0 2px 8px rgba(0,0,0,0.05);102  }103  .card h3 {104    margin: 0;105    font-size: 48px;106    color: #1F2933;107    font-weight: 800;108  }109  .provider {110    margin-top: 12px;111    color: #6C8CA3;112    font-size: 30px;113    font-weight: 600;114  }115  .desc {116    margin-top: 16px;117    color: #37424B;118    font-size: 32px;119    line-height: 1.5;120  }121  .link {122    color: #0C7D70;123    text-decoration: underline;124    font-weight: 700;125  }126  .cta {127    margin-top: 30px;128    background: #E9EEF1;129    color: #2B353D;130    height: 110px;131    border-radius: 18px;132    display: grid;133    place-items: center;134    font-size: 36px;135    font-weight: 700;136  }137 138  /* Spacer area */139  .spacer {140    height: 980px;141  }142 143  /* Bottom sheet */144  .bottom-sheet {145    position: absolute;146    left: 0;147    right: 0;148    bottom: 80px;149    background: #FFFFFF;150    border-top-left-radius: 28px;151    border-top-right-radius: 28px;152    box-shadow: 0 -6px 20px rgba(0,0,0,0.12);153    padding: 24px 26px 18px 26px;154  }155  .grabber {156    width: 160px;157    height: 16px;158    background: #E9EEF1;159    border-radius: 8px;160    margin: 6px auto 24px auto;161  }162  .total-row {163    display: flex;164    align-items: center;165    padding: 8px 10px 18px 10px;166  }167  .total-label {168    font-size: 36px;169    color: #2B353D;170    font-weight: 700;171  }172  .total-amount {173    margin-left: auto;174    font-size: 40px;175    color: #2B353D;176    font-weight: 800;177  }178  .primary-btn {179    height: 120px;180    background: #0AA387;181    border-radius: 22px;182    display: grid;183    place-items: center;184    color: #FFFFFF;185    font-size: 42px;186    font-weight: 800;187    margin: 0 8px;188  }189  .progress {190    height: 10px;191    background: #E9EEF1;192    border-radius: 6px;193    margin: 18px 8px 8px 8px;194    overflow: hidden;195  }196  .progress .bar {197    width: 72%;198    height: 100%;199    background: #0AA387;200    border-radius: 6px 0 0 6px;201  }202 203  /* Home pill */204  .home-pill {205    position: absolute;206    bottom: 18px;207    left: 50%;208    transform: translateX(-50%);209    width: 320px;210    height: 16px;211    background: #7C7C7C;212    border-radius: 10px;213    opacity: 0.8;214  }215 216  /* Utility SVG styles */217  svg { display: block; }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status bar -->224  <div class="statusbar">225    <div class="status-left">226      <span style="font-weight:700;">8:10</span>227      <span>83°</span>228      <span>229        <!-- timer icon -->230        <svg width="28" height="28" viewBox="0 0 24 24" fill="#616161">231          <path d="M15 1H9v2h6V1zM11 8h2v5h-2z"></path>232          <path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"></path>233        </svg>234      </span>235      <span>G</span>236      <span style="opacity:.6;">•</span>237    </div>238    <div class="status-right">239      <!-- wifi -->240      <svg width="36" height="36" viewBox="0 0 24 24" fill="#616161">241        <path d="M12 20.5l-1.5-1.5a2.1 2.1 0 013 0L12 20.5zM2 9a15 15 0 0120 0l-2 2a12 12 0 00-16 0L2 9zm3.5 3.5a10 10 0 0113 0l-2 2a7 7 0 00-9 0l-2-2z"/>242      </svg>243      <!-- battery -->244      <svg width="40" height="40" viewBox="0 0 24 24" fill="#616161">245        <path d="M16 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v2h-2v-2H8a2 2 0 01-2-2V9a2 2 0 012-2h8zM8 9v6h8V9H8z"/>246      </svg>247    </div>248  </div>249 250  <!-- Header -->251  <div class="header">252    <!-- back arrow -->253    <svg width="56" height="56" viewBox="0 0 24 24" fill="#202124">254      <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"></path>255    </svg>256    <div class="title">Trip customization</div>257    <div class="header-actions">258      <div class="icon-btn" title="share">259        <svg width="44" height="44" viewBox="0 0 24 24" fill="#202124">260          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.2 3.2 0 000-1.39l7.02-4.09A2.98 2.98 0 0018 7a3 3 0 10-3-3c0 .23.03.45.08.66L8.06 8.77A3 3 0 006 8a3 3 0 103 3c0-.23-.03-.45-.08-.66l7.02 4.09c.05.21.06.43.06.65a3 3 0 103-3z"/>261        </svg>262      </div>263      <div class="icon-btn" title="help">264        <svg width="44" height="44" viewBox="0 0 24 24" fill="#202124">265          <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm1.1-6.9c-.5.5-1.1.9-1.1 1.9h-2c0-1.5.7-2.3 1.3-2.8.5-.5.7-.7.7-1.1a1.5 1.5 0 10-3 0H7a3.5 3.5 0 117 0c0 1.2-.6 1.9-1.9 3z"/>266        </svg>267      </div>268    </div>269  </div>270 271  <!-- Banner -->272  <div class="banner">273    <div style="max-width: 620px;">274      <h2>Get the most out of your trip</h2>275    </div>276    <div class="img-placeholder">[IMG: Suitcases and backpack]</div>277  </div>278 279  <!-- AirHelp Plus card -->280  <div class="content">281    <div class="card">282      <h3>AirHelp Plus</h3>283      <div class="provider">Provided by AirHelp</div>284      <div class="desc">285        Up to €600 for flight delays, cancellations, or airline overbookings, and up to €6,000 for extra costs caused by a delay, including lost baggage and missed reservations (hotels, flights, etc).286        <span class="link">Learn more</span>287      </div>288      <div class="cta">Add for CHF22.52</div>289    </div>290  </div>291 292  <div class="spacer"></div>293 294  <!-- Bottom sheet -->295  <div class="bottom-sheet">296    <div class="grabber"></div>297    <div class="total-row">298      <div class="total-label">Total due</div>299      <div class="total-amount">CHF915.80</div>300    </div>301    <div class="primary-btn">Continue</div>302    <div class="progress"><div class="bar"></div></div>303  </div>304 305  <!-- Home indicator -->306  <div class="home-pill"></div>307 308</div>309</body>310</html>