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>Ticket Options UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F3F3;15  }16 17  /* Status bar over header */18  .header {19    position: relative;20    width: 100%;21    height: 640px;22    background: linear-gradient(180deg, #F26A22 0%, #FF9152 60%, #FFA56A 100%);23  }24  .status-bar {25    position: absolute;26    top: 28px;27    left: 36px;28    right: 36px;29    height: 40px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #FFFFFF;34    font-size: 32px;35    font-weight: 600;36    opacity: 0.92;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 16px;42  }43  .status-square {44    width: 34px;45    height: 34px;46    background: #6B3B1E;47    border-radius: 6px;48  }49  .status-right {50    display: flex;51    align-items: center;52    gap: 24px;53  }54  .status-right svg { width: 44px; height: 44px; }55 56  .topbar {57    position: absolute;58    top: 110px;59    left: 24px;60    right: 24px;61    height: 64px;62    display: flex;63    align-items: center;64    justify-content: center;65    color: #FFFFFF;66  }67  .back-btn {68    position: absolute;69    left: 36px;70    width: 64px;71    height: 64px;72    display: flex;73    align-items: center;74    justify-content: center;75  }76  .top-title {77    font-size: 48px;78    font-weight: 700;79    letter-spacing: 0.3px;80  }81 82  /* Top summary card */83  .summary-card {84    position: absolute;85    left: 36px;86    right: 36px;87    bottom: -40px;88    background: #FFFFFF;89    border-radius: 36px;90    box-shadow: 0 12px 24px rgba(0,0,0,0.08);91    padding: 48px;92  }93  .summary-row {94    display: flex;95    align-items: center;96    justify-content: space-between;97    gap: 20px;98  }99  .summary-title {100    font-size: 42px;101    font-weight: 800;102    color: #1E1E1E;103    margin-bottom: 16px;104  }105  .summary-sub {106    font-size: 32px;107    color: #9A9A9A;108    line-height: 1.35;109  }110  .chevron {111    width: 52px;112    height: 52px;113  }114 115  /* Main content */116  .content {117    position: absolute;118    top: 690px;119    left: 24px;120    right: 24px;121    bottom: 180px;122    padding: 24px 12px 0 12px;123    overflow: hidden;124  }125  .section {126    background: #FFFFFF;127    border-radius: 36px;128    padding: 42px;129    box-shadow: 0 10px 20px rgba(0,0,0,0.04);130  }131  .section-title {132    font-size: 44px;133    font-weight: 800;134    color: #2D2D2D;135    margin-bottom: 36px;136  }137 138  .ticket-card {139    border: 2px solid #EFEFEF;140    border-radius: 28px;141    padding: 36px;142  }143  .ticket-top {144    display: flex;145    justify-content: space-between;146    align-items: center;147    margin-bottom: 18px;148  }149  .price-line {150    font-size: 46px;151    font-weight: 900;152    color: #F26A22;153  }154  .per-pax {155    font-size: 30px;156    color: #8E8E8E;157    margin-left: 8px;158    font-weight: 600;159  }160  .select-btn {161    background: #F26A22;162    color: #FFFFFF;163    font-size: 36px;164    font-weight: 800;165    padding: 22px 36px;166    border-radius: 18px;167  }168  .policy-row {169    display: flex;170    align-items: center;171    gap: 10px;172    color: #9A9A9A;173    font-size: 32px;174    margin-bottom: 26px;175  }176  .dashed {177    border-top: 2px dashed #E6E6E6;178    margin: 14px 0 24px;179  }180  .bullet {181    display: flex;182    align-items: flex-start;183    gap: 16px;184    font-size: 34px;185    color: #2D2D2D;186    line-height: 1.4;187    margin-bottom: 18px;188  }189  .dot {190    width: 16px;191    height: 16px;192    background: #CFCFCF;193    border-radius: 50%;194    margin-top: 14px;195    flex: 0 0 16px;196  }197  .ticket-sub {198    font-size: 34px;199    font-weight: 800;200    color: #1E1E1E;201  }202 203  /* Bottom navigation bar mimic */204  .bottom-bar {205    position: absolute;206    bottom: 0;207    left: 0;208    width: 100%;209    height: 140px;210    background: #000000;211  }212  .home-pill {213    position: absolute;214    bottom: 38px;215    left: 50%;216    transform: translateX(-50%);217    width: 360px;218    height: 16px;219    background: #CCCCCC;220    border-radius: 10px;221    opacity: 0.9;222  }223</style>224</head>225<body>226<div id="render-target">227  <div class="header">228    <div class="status-bar">229      <div class="status-left">230        <div>12:30</div>231        <div class="status-square"></div>232      </div>233      <div class="status-right">234        <!-- Do Not Disturb icon -->235        <svg viewBox="0 0 24 24" fill="none">236          <circle cx="12" cy="12" r="10" stroke="#FFFFFF" stroke-width="2"></circle>237          <rect x="6" y="11" width="12" height="2" fill="#FFFFFF"></rect>238        </svg>239        <!-- WiFi icon -->240        <svg viewBox="0 0 24 24" fill="none">241          <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>242          <path d="M5 12c3.9-3.2 10.1-3.2 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>243          <path d="M8.5 15.5c2.6-2 6.4-2 9 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>244          <circle cx="12" cy="19" r="1.8" fill="#FFFFFF"></circle>245        </svg>246        <!-- Battery icon -->247        <svg viewBox="0 0 28 24" fill="none">248          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"></rect>249          <rect x="4" y="8" width="14" height="8" rx="1" fill="#FFFFFF"></rect>250          <rect x="22" y="9" width="3" height="6" rx="1" fill="#FFFFFF"></rect>251        </svg>252      </div>253    </div>254 255    <div class="topbar">256      <div class="back-btn">257        <svg viewBox="0 0 24 24" class="chevron" fill="none">258          <path d="M15 4L7 12L15 20" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>259        </svg>260      </div>261      <div class="top-title">Ticket options</div>262    </div>263 264    <div class="summary-card">265      <div class="summary-row">266        <div class="summary-texts">267          <div class="summary-title">27 Oct 2023, 07:47–11:00</div>268          <div class="summary-sub">Amsterdam Central – London St Pancras International · Eurostar 9119</div>269        </div>270        <svg viewBox="0 0 24 24" class="chevron" fill="none">271          <path d="M9 4L17 12L9 20" stroke="#9C9C9C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>272        </svg>273      </div>274    </div>275  </div>276 277  <div class="content">278    <div class="section">279      <div class="section-title">Select tickets</div>280 281      <div class="ticket-card">282        <div class="ticket-top">283          <div>284            <span class="price-line">US$ 402.49</span>285            <span class="per-pax">/pax</span>286          </div>287          <div class="select-btn">Select</div>288        </div>289 290        <div class="policy-row">291          <span>Change &amp; refund policies</span>292          <svg viewBox="0 0 24 24" width="28" height="28" fill="none">293            <path d="M9 5l7 7-7 7" stroke="#B0B0B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>294          </svg>295        </div>296 297        <div class="dashed"></div>298 299        <div class="bullet">300          <div class="dot"></div>301          <div>Amsterdam Central – London St Pancras International</div>302        </div>303        <div class="ticket-sub">1st class, Refundable</div>304      </div>305    </div>306  </div>307 308  <div class="bottom-bar">309    <div class="home-pill"></div>310  </div>311</div>312</body>313</html>