GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Review and pay - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0d2226;14  }15 16  /* Top status and browser chrome */17  .status-bar {18    height: 80px;19    background: #0c1f22;20    color: #e6f2f2;21    display: flex;22    align-items: center;23    padding: 0 28px;24    font-size: 34px;25    letter-spacing: 0.2px;26  }27  .status-right {28    margin-left: auto;29    display: flex;30    align-items: center;31    gap: 22px;32  }33  .chrome-bar {34    height: 110px;35    background: #0c1f22;36    color: #c8d6d6;37    display: flex;38    align-items: center;39    padding: 0 24px;40    border-bottom: 1px solid rgba(255,255,255,0.1);41  }42  .url-pill {43    margin-left: 18px;44    background: #1b4b4f;45    color: #cde6e6;46    border-radius: 48px;47    padding: 18px 26px;48    font-size: 34px;49  }50  .chrome-right { margin-left: auto; display: flex; align-items: center; gap: 26px; color: #c8d6d6; }51  .icon {52    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;53  }54  .tab-count {55    width: 64px; height: 64px; border-radius: 14px; border: 2px solid #c8d6d6; display: flex; align-items: center; justify-content: center; font-size: 30px;56  }57 58  /* App header */59  .app-header {60    height: 120px;61    background: #2a2528;62    color: #fff;63    display: flex;64    align-items: center;65    padding: 0 28px;66    font-weight: 700;67    font-size: 44px;68  }69  .back {70    width: 60px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; margin-right: 24px;71  }72  .content-area {73    position: absolute;74    top: 310px; /* below top bars */75    left: 0;76    right: 0;77    bottom: 0;78    background: #f5f5f7;79    padding-bottom: 120px;80  }81 82  /* Trip card */83  .card {84    background: #fff;85    border-radius: 20px;86    margin: 24px 28px;87    padding: 28px;88    box-shadow: 0 2px 0 rgba(0,0,0,0.04);89  }90  .label-row {91    display: flex; align-items: center; gap: 16px; color: #e91e63; font-weight: 700; font-size: 30px; letter-spacing: 0.5px;92  }93  .title-row {94    display: flex; align-items: center; margin-top: 16px;95  }96  .trip-title { font-size: 46px; font-weight: 800; color: #000; }97  .chev-down { margin-left: auto; width: 48px; height: 48px; }98  .sub-row {99    display: flex; align-items: center; margin-top: 12px; color: #666; font-size: 32px;100  }101  .sub-right { margin-left: auto; color: #777; }102  .db-badge {103    display: inline-flex; align-items: center; justify-content: center;104    margin-top: 24px;105    background: #e53935; color: #fff; font-weight: 800; border-radius: 10px; font-size: 30px;106    width: 90px; height: 56px;107  }108 109  /* Section headers */110  .section-header {111    background: #fff;112    padding: 34px 28px;113    font-size: 44px;114    font-weight: 800;115    color: #1b1b1d;116    border-top: 1px solid #eee;117    border-bottom: 1px solid #eee;118    display: flex;119    align-items: center;120  }121  .section-header .img-placeholder {122    margin-left: auto;123  }124 125  .passenger-card {126    background: #fff;127    margin: 0 28px 28px 28px;128    border-radius: 20px;129    padding: 30px;130    box-shadow: 0 2px 0 rgba(0,0,0,0.04);131  }132  .row { display: flex; align-items: center; }133  .name { font-size: 38px; font-weight: 700; color: #1b1b1d; }134  .tag { margin-left: auto; font-size: 28px; color: #aaa; letter-spacing: 1px; }135  .mail-box {136    margin-top: 22px;137    border: 2px solid #f8b6c9;138    background: #fde7ef;139    border-radius: 16px;140    padding: 22px;141    display: flex;142    align-items: center;143    gap: 16px;144    color: #333;145    font-size: 34px;146  }147  .ticket-icon { width: 44px; height: 44px; }148  .mail-text { line-height: 1.3; }149  .mail-text b { font-weight: 700; }150 151  /* Protection options */152  .option {153    background: #fff;154    margin: 0 28px;155    padding: 32px 28px;156    border-bottom: 1px solid #e6e6e8;157  }158  .opt-head {159    display: flex; align-items: center;160  }161  .radio {162    width: 52px; height: 52px; margin-right: 22px;163  }164  .opt-title { font-size: 40px; font-weight: 800; color: #333; }165  .price {166    margin-left: auto; font-size: 38px; font-weight: 800; color: #e91e63;167  }168  .opt-desc { margin-top: 14px; color: #666; font-size: 32px; line-height: 1.4; max-width: 760px; }169  .subprice { color: #999; font-size: 28px; margin-top: 6px; text-align: right; }170  .details-btn {171    margin-top: 22px;172    background: #fde1ec;173    color: #333;174    border-radius: 16px;175    padding: 18px 26px;176    display: inline-flex; align-items: center; gap: 12px;177    font-size: 32px; font-weight: 700;178  }179  .divider-spacer { height: 26px; background: #f5f5f7; }180 181  /* Image placeholder rule */182  .img-placeholder {183    width: 180px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;184    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 10px;185  }186 187  /* Bottom gesture bar */188  .bottom-bar {189    position: absolute; left: 0; right: 0; bottom: 0;190    height: 110px; background: #0c1f22; display: flex; align-items: center; justify-content: center;191  }192  .gesture-pill {193    width: 300px; height: 12px; background: #e9e9ea; border-radius: 8px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar">202    10:38203    <div class="status-right">204      <!-- warning icon -->205      <svg class="icon" viewBox="0 0 24 24">206        <path fill="#e6f2f2" d="M12 3l9 16H3z"></path>207      </svg>208      <!-- wifi -->209      <svg class="icon" viewBox="0 0 24 24">210        <path fill="#e6f2f2" d="M12 18a2 2 0 110 4 2 2 0 010-4zm-6-6l2 2a8 8 0 0112 0l2-2A12 12 0 006 12z"></path>211      </svg>212      <!-- battery -->213      <div style="display:flex;align-items:center;gap:10px;">214        <svg width="56" height="28" viewBox="0 0 56 28">215          <rect x="1" y="4" width="46" height="20" rx="4" fill="none" stroke="#e6f2f2" stroke-width="2"></rect>216          <rect x="4" y="7" width="40" height="14" fill="#e6f2f2"></rect>217          <rect x="48" y="10" width="6" height="8" rx="2" fill="#e6f2f2"></rect>218        </svg>219        <span style="font-size:30px;">100%</span>220      </div>221    </div>222  </div>223 224  <!-- Browser chrome -->225  <div class="chrome-bar">226    <!-- Home icon -->227    <svg class="icon" viewBox="0 0 24 24">228      <path fill="#c8d6d6" d="M12 3l9 8h-3v10H6V11H3z"></path>229    </svg>230    <div class="url-pill">rome2rio.omio.com/app...</div>231    <div class="chrome-right">232      <!-- plus -->233      <svg class="icon" viewBox="0 0 24 24">234        <path fill="#c8d6d6" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"></path>235      </svg>236      <div class="tab-count">5</div>237      <!-- kebab -->238      <svg class="icon" viewBox="0 0 24 24">239        <circle cx="12" cy="5" r="2" fill="#c8d6d6"></circle>240        <circle cx="12" cy="12" r="2" fill="#c8d6d6"></circle>241        <circle cx="12" cy="19" r="2" fill="#c8d6d6"></circle>242      </svg>243    </div>244  </div>245 246  <!-- App header -->247  <div class="app-header">248    <div class="back">249      <svg width="48" height="48" viewBox="0 0 24 24">250        <path fill="#fff" d="M15 19l-7-7 7-7v14z"></path>251      </svg>252    </div>253    Review and pay254  </div>255 256  <div class="content-area">257 258    <!-- Trip card -->259    <div class="card">260      <div class="label-row">261        <svg class="icon" viewBox="0 0 24 24">262          <circle cx="12" cy="12" r="10" fill="none" stroke="#e91e63" stroke-width="3"></circle>263          <circle cx="12" cy="12" r="5" fill="#e91e63"></circle>264        </svg>265        OUTBOUND266      </div>267      <div class="title-row">268        <div class="trip-title">Fri, Nov 03   8:04 AM – 1:53 PM</div>269        <svg class="chev-down" viewBox="0 0 24 24">270          <path fill="#999" d="M7 10l5 5 5-5z"></path>271        </svg>272      </div>273      <div class="sub-row">274        <div>Berlin Hbf  -  Neu-Ulm station</div>275        <div class="sub-right">5h49m • 2 transfers</div>276      </div>277      <div class="db-badge">DB</div>278    </div>279 280    <!-- Passenger details header -->281    <div class="section-header">Passenger details</div>282 283    <!-- Passenger details card -->284    <div class="passenger-card">285      <div class="row">286        <div class="name">Richard Wagner</div>287        <div class="tag">ADULT</div>288      </div>289      <div class="mail-box">290        <svg class="ticket-icon" viewBox="0 0 24 24">291          <path fill="#e91e63" d="M4 6h16v12H4z"></path>292          <circle cx="8" cy="12" r="2" fill="#fff"></circle>293          <rect x="11" y="9" width="7" height="6" fill="#fff"></rect>294        </svg>295        <div class="mail-text">296          Your ticket will be sent to:<br>297          <b>richardwegnar@gmail.com</b>298        </div>299      </div>300    </div>301 302    <!-- Peace of mind header with illustration -->303    <div class="section-header">304      Travel with peace of mind305      <div class="img-placeholder">[IMG: Shield & Tickets]</div>306    </div>307 308    <!-- Option 1 -->309    <div class="option">310      <div class="opt-head">311        <svg class="radio" viewBox="0 0 24 24">312          <circle cx="12" cy="12" r="10" fill="#fff" stroke="#e91e63" stroke-width="3"></circle>313        </svg>314        <div class="opt-title">Cancellation Protection</div>315        <div class="price">+₹821.75</div>316      </div>317      <div class="opt-desc">You’ll receive a refund in the event of delays, cancellations or COVID-19.</div>318      <div class="subprice">For 1 passenger</div>319      <div class="details-btn">320        Details321        <svg width="28" height="28" viewBox="0 0 24 24">322          <path fill="#333" d="M7 10l5 5 5-5z"></path>323        </svg>324      </div>325    </div>326 327    <div class="option">328      <div class="opt-head">329        <svg class="radio" viewBox="0 0 24 24">330          <circle cx="12" cy="12" r="10" fill="#fff" stroke="#e91e63" stroke-width="3"></circle>331        </svg>332        <div class="opt-title">Comprehensive Protection</div>333        <div class="price">+₹1,067.45</div>334      </div>335      <div class="opt-desc">You’re covered in the event of delays, cancellations, COVID-19, medical expenses, lost luggage and more.</div>336      <div class="subprice">For 1 passenger</div>337      <div class="details-btn">338        Details339        <svg width="28" height="28" viewBox="0 0 24 24">340          <path fill="#333" d="M7 10l5 5 5-5z"></path>341        </svg>342      </div>343    </div>344 345  </div>346 347  <!-- Bottom gesture bar -->348  <div class="bottom-bar">349    <div class="gesture-pill"></div>350  </div>351</div>352</body>353</html>