GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Ticket Options UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #eef4f7;11  }12 13  /* Header */14  .header { background: #2f0b8f; color: #ffffff; }15  .status {16    height: 88px; padding: 0 40px;17    display: flex; align-items: center; justify-content: space-between;18    font-size: 36px;19  }20  .status .left, .status .right { display: flex; align-items: center; gap: 22px; color: #fff; }21  .appbar { height: 156px; display: flex; align-items: center; padding: 0 40px; }22  .appbar .back {23    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 24px;24  }25  .appbar h1 { margin: 0; font-size: 56px; font-weight: 600; }26 27  /* Trip details section */28  .card-section { background: #ffffff; padding: 40px; border-bottom: 1px solid #e4e9ee; }29  .details .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }30  .details .label { color: #738090; font-size: 38px; }31  .view-link { color: #6d7785; font-size: 38px; display: flex; align-items: center; }32  .view-link svg { margin-left: 12px; }33  .time { font-weight: 700; color: #111; font-size: 56px; display: flex; align-items: center; }34  .arrow-mid { width: 40px; height: 40px; fill: none; stroke: #8a96a6; stroke-width: 6; margin: 0 18px; }35  .sub { color: #71808f; font-size: 34px; margin-top: 12px; }36 37  /* Ticket card */38  .main { padding: 40px; }39  .ticket-card {40    background: #ffffff; border: 1px solid #dfe7ea; border-radius: 22px;41    box-shadow: 0 2px 0 rgba(0,0,0,0.04); padding: 34px; position: relative;42  }43  .ticket-top { display: flex; align-items: center; justify-content: space-between; }44  .ticket-title { display: flex; align-items: center; font-size: 46px; font-weight: 700; color: #111; }45  .radio {46    width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box;47    border: 6px solid #3255e6; margin-right: 20px; display: flex; align-items: center; justify-content: center;48    background: #ffffff;49  }50  .radio::after { content: ''; width: 20px; height: 20px; background: #ffffff; border-radius: 50%; }51  .price-box { text-align: right; }52  .pill {53    display: inline-block; background: #0ec0a8; color: #fff; border-radius: 12px;54    padding: 12px 18px; font-size: 32px; font-weight: 700; margin-bottom: 8px;55  }56  .price { font-size: 60px; font-weight: 800; color: #111; }57  .divider { height: 1px; background: #e5edf0; margin: 28px 0; }58  .desc { font-size: 36px; line-height: 1.45; color: #667381; }59  .info {60    position: absolute; right: 24px; bottom: 24px; width: 48px; height: 48px;61    border: 2px solid #cdd6dc; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #7b8a97;62  }63  .info svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }64 65  /* Bottom bar */66  .bottom-bar {67    position: absolute; left: 0; right: 0; bottom: 0; height: 220px;68    background: #ffffff; border-top: 1px solid #dfe7ea;69    display: flex; align-items: center; justify-content: space-between; padding: 0 40px;70  }71  .summary { color: #667381; font-size: 40px; }72  .summary .amount { font-size: 64px; color: #111; font-weight: 800; margin-top: 8px; }73  .cta {74    background: #0ec0a8; color: #fff; border: none; border-radius: 18px;75    padding: 34px 60px; font-size: 46px; font-weight: 800; box-shadow: 0 6px 0 rgba(0,0,0,0.1);76  }77 78  /* Android home indicator */79  .android-home {80    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);81    width: 280px; height: 14px; background: #000000; border-radius: 7px; opacity: 0.25;82  }83 84  /* Icon sizes */85  .back svg { width: 56px; height: 56px; fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }86</style>87</head>88<body>89<div id="render-target">90 91  <div class="header">92    <div class="status">93      <div class="left">94        <span>10:26</span>95        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>96        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M4 12h16"/></svg>97        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="4" y="4" width="16" height="16"/></svg>98        <svg width="6" height="6"><circle cx="3" cy="3" r="3" fill="#fff"/></svg>99      </div>100      <div class="right">101        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6"/></svg>102        <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M6 18h12l-1-8H7z"/></svg>103        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 1v4M5 7l-3 3v9a3 3 0 003 3h14a3 3 0 003-3v-9l-3-3H5z"/></svg>104      </div>105    </div>106 107    <div class="appbar">108      <div class="back">109        <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" /></svg>110      </div>111      <h1>Ticket options</h1>112    </div>113  </div>114 115  <div class="card-section">116    <div class="details">117      <div class="row">118        <div class="label">Outbound: Thu, Oct 26</div>119        <div class="view-link">view details120          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a96a6" stroke-width="3"><path d="M9 6l6 6-6 6"/></svg>121        </div>122      </div>123      <div class="time">124        <span>10:36 AM</span>125        <svg class="arrow-mid" viewBox="0 0 24 24"><path d="M4 12h12l-3-3M16 12l-3 3" stroke-linecap="round" stroke-linejoin="round"/></svg>126        <span>3:57 PM</span>127      </div>128      <div class="sub">6h 21m, 2 changes</div>129    </div>130  </div>131 132  <div class="main">133    <div class="ticket-card">134      <div class="ticket-top">135        <div class="ticket-title">136          <div class="radio"></div>137          <span>Standard</span>138        </div>139        <div class="price-box">140          <span class="pill">Cheapest</span>141          <div class="price">$7.79</div>142        </div>143      </div>144 145      <div class="divider"></div>146 147      <div class="desc">148        Exchangeable and refundable for free until midnight before departure. Strictly non-refundable and non-exchangeable on the day of departure.149      </div>150 151      <div class="info">152        <svg viewBox="0 0 24 24">153          <circle cx="12" cy="12"