GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Ticket Summary UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #121212; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #08262A;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 90px; background: #08262A; color: #E9F3F2;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 36px; font-size: 34px;21  }22  .status-left { display: flex; align-items: center; gap: 16px; }23  .status-right { display: flex; align-items: center; gap: 24px; }24  .icon { width: 40px; height: 40px; fill: none; stroke: #E9F3F2; stroke-width: 3; }25  .icon.fill { fill: #E9F3F2; stroke: none; }26 27  /* Browser toolbar */28  .toolbar {29    position: absolute; top: 90px; left: 0; right: 0;30    height: 120px; background: #08262A; display: flex; align-items: center;31    padding: 0 24px; color: #E9F3F2;32  }33  .toolbar .home { margin-right: 18px; }34  .url-pill {35    background: #1E4E43; border-radius: 48px; padding: 18px 28px;36    color: #DFF2E9; font-size: 34px; flex: 1;37    display: flex; align-items: center; gap: 18px;38  }39  .toolbar-actions { display: flex; align-items: center; gap: 26px; margin-left: 22px; }40  .tab-count {41    background: #1E4E43; color: #DFF2E9; border-radius: 16px; padding: 8px 16px; font-size: 28px;42  }43 44  /* Header section */45  .header {46    position: absolute; top: 210px; left: 0; right: 0;47    background: #3E3E3E; color: #FFFFFF;48    padding: 36px 36px 30px 36px;49  }50  .title {51    font-size: 56px; font-weight: 700; margin-bottom: 26px;52  }53  .chips { display: flex; gap: 18px; align-items: center; }54  .chip {55    background: #595959; color: #FFFFFF; border-radius: 14px;56    padding: 16px 22px; font-size: 32px;57  }58  .edit-pencil { position: absolute; right: 36px; top: 44px; }59 60  /* Content area background */61  .content-bg {62    position: absolute; top: 360px; left: 0; right: 0; bottom: 110px;63    background: #F5F6F7;64  }65 66  /* Ticket card */67  .card {68    position: absolute; top: 410px; left: 24px; width: 1032px;69    background: #FFFFFF; border-radius: 18px;70    box-shadow: 0 4px 8px rgba(0,0,0,0.12);71    overflow: hidden;72  }73  .card-topbar {74    border-top: 7px solid #19A15B; /* green rim */75  }76  .card-header {77    display: flex; align-items: center; justify-content: space-between;78    padding: 26px 28px; font-size: 34px; color: #14A44D; font-weight: 700;79  }80  .remove-pill {81    background: #EEEEEE; color: #6E6E6E; border-radius: 24px; padding: 12px 22px; font-size: 32px; font-weight: 600;82  }83 84  .rail-row {85    display: flex; align-items: center; gap: 18px; padding: 10px 28px 0 28px;86  }87  .img-placeholder {88    width: 80px; height: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;89    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;90    border-radius: 6px;91  }92  .provider { color: #8A8A8A; font-size: 30px; }93  .times {94    padding: 12px 28px; font-size: 72px; font-weight: 700; color: #1B1B1B;95    display: flex; align-items: center; gap: 22px;96  }97  .arrow-mid {98    width: 52px; height: 52px;99  }100  .route {101    padding: 6px 28px; font-size: 36px; color: #2A2A2A;102  }103  .meta-pill {104    margin: 20px 28px; display: inline-flex; align-items: center; gap: 14px;105    background: #F0F0F0; color: #5A5A5A; border-radius: 28px; padding: 16px 22px; font-size: 32px; border: 1px solid #E2E2E2;106  }107  .divider { height: 1px; background: #E8E8E8; margin: 18px 28px; }108 109  .row-between {110    display: flex; align-items: center; justify-content: space-between;111    padding: 12px 28px; font-size: 38px;112  }113  .bold { font-weight: 700; color: #1B1B1B; }114  .sub { font-size: 32px; color: #6A6A6A; }115  .price { font-size: 44px; font-weight: 700; color: #1B1B1B; }116 117  .cta-area { padding: 24px 28px 32px 28px; }118  .cta-btn {119    width: 100%; height: 120px; border-radius: 60px; background: #0F3B28; color: #FFFFFF;120    display: flex; align-items: center; justify-content: space-between; padding: 0 42px; font-size: 40px; font-weight: 600;121  }122  .cta-btn .right {123    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;124  }125 126  /* Bottom gesture bar */127  .gesture {128    position: absolute; bottom: 0; left: 0; right: 0; height: 110px; background: #08262A;129    display: flex; align-items: center; justify-content: center;130  }131  .gesture-line {132    width: 320px; height: 10px; background: #C9D2D3; border-radius: 6px;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status bar -->140  <div class="status-bar">141    <div class="status-left">142      <span>10:38</span>143      <!-- Warning triangle -->144      <svg class="icon fill" viewBox="0 0 24 24">145        <path d="M12 3L2 21h20L12 3z"></path>146        <rect x="11" y="9" width="2" height="6" fill="#08262A"></rect>147        <circle cx="12" cy="17.5" r="1.5" fill="#08262A"></circle>148      </svg>149    </div>150    <div class="status-right">151      <!-- WiFi icon -->152      <svg class="icon" viewBox="0 0 24 24">153        <path d="M2 8c5-5 15-5 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0"></path>154        <circle cx="12" cy="19" r="1.5" fill="#E9F3F2" stroke="none"></circle>155      </svg>156      <!-- Battery icon -->157      <svg class="icon" viewBox="0 0 26 24">158        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#E9F3F2" stroke-width="3"></rect>159        <rect x="21" y="9" width="3" height="6" fill="#E9F3F2" stroke="none"></rect>160      </svg>161      <span>100%</span>162    </div>163  </div>164 165  <!-- Browser toolbar -->166  <div class="toolbar">167    <div class="home">168      <svg class="icon" viewBox="0 0 24 24">169        <path d="M3 10l9-7 9 7M5 10v10h14V10"></path>170      </svg>171    </div>172    <div class="url-pill">173      <svg class="icon" viewBox="0 0 24 24" style="stroke:#DFF2E9;">174        <path d="M4 12a4 4 0 0 1 4-4h4M20 12a4 4 0 0 1-4 4h-4"></path>175      </svg>176      <span>rome2rio.com/tickets/Be...</span>177    </div>178    <div class="toolbar-actions">179      <!-- Plus -->180      <svg class="icon" viewBox="0 0 24 24">181        <path d="M12 5v14M5 12h14"></path>182      </svg>183      <div class="tab-count">4</div>184      <!-- Kebab -->185      <svg class="icon" viewBox="0 0 24 24">186        <circle cx="12" cy="5" r="2" fill="#E9F3F2" stroke="none"></circle>187        <circle cx="12" cy="12" r="2" fill="#E9F3F2" stroke="none"></circle>188        <circle cx="12" cy="19" r="2" fill="#E9F3F2" stroke="none"></circle>189      </svg>190    </div>191  </div>192 193  <!-- Header section -->194  <div class="header">195    <div class="title">Berlin Hauptbahnhof to Neu-Ulm</div>196    <div class="chips">197      <div class="chip">Fri, 3 Nov</div>198      <div class="chip">1 passenger</div>199    </div>200    <div class="edit-pencil">201      <svg class="icon" viewBox="0 0 24 24" style="stroke:#FFFFFF;">202        <path d="M3 17l3 4 15-15-4-4L3 17zM3 17l6-2"></path>203      </svg>204    </div>205  </div>206 207  <!-- Background below header -->208  <div class="content-bg"></div>209 210  <!-- Ticket Card -->211  <div class="card">212    <div class="card-topbar"></div>213 214    <div class="card-header">215      <div>Departing Fri, 3 Nov 2023</div>216      <div class="remove-pill">Remove</div>217    </div>218 219    <div class="rail-row">220      <div class="img-placeholder">[IMG: DB logo]</div>221      <div class="provider">Deutsche Bahn</div>222    </div>223 224    <div class="times">225      <span>08:04</span>226      <svg class="arrow-mid" viewBox="0 0 24 24">227        <path d="M3 12h16M14 6l6 6-6 6" fill="none" stroke="#8A8A8A" stroke-width="2.5"></path>228      </svg>229      <span>13:53</span>230    </div>231 232    <div class="route">Berlin Hbf to Neu-Ulm station</div>233 234    <div class="meta-pill">235      <span>5h 49m - 2 Changes</span>236      <svg class="icon" viewBox="0 0 24 24" style="width:30px;height:30px;stroke:#6A6A6A;">237        <path d="M6 9l6 6 6-6" fill="none" stroke-width="3"></path>238      </svg>239    </div>240 241    <div class="divider"></div>242 243    <div class="row-between">244      <div class="bold">1 x Passenger</div>245      <div class="price">₹13,260.34</div>246    </div>247    <div style="padding: 0 28px 6px 28px;" class="sub">Faretype: <span style="color:#1B1B1B; font-weight:600;">Cheapest Price</span></div>248 249    <div class="divider" style="margin-top: 26px;"></div>250 251    <div class="row-between" style="align-items: flex-end;">252      <div class="sub">via Omio</div>253      <div class="price">₹13,260.34</div>254    </div>255 256    <div class="cta-area">257      <div class="cta-btn">258        <span>Proceed to payment</span>259        <div class="right">260          <svg viewBox="0 0 24 24" width="64" height="64">261            <path d="M5 12h12M11 6l6 6-6 6" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>262          </svg>263        </div>264      </div>265    </div>266  </div>267 268  <!-- Bottom gesture bar -->269  <div class="gesture"><div class="gesture-line"></div></div>270 271</div>272</body>273</html>