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 - Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* App bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 240px;24    background: linear-gradient(180deg, #e26e1f 0%, #e97a2b 100%);25    color: #fff;26  }27  .appbar .title {28    position: absolute;29    left: 0;30    right: 0;31    top: 110px;32    text-align: center;33    font-weight: 700;34    font-size: 54px;35    letter-spacing: 0.3px;36    opacity: 0.95;37  }38  .back-btn {39    position: absolute;40    top: 110px;41    left: 30px;42    width: 64px;43    height: 64px;44    display: flex;45    align-items: center;46    justify-content: center;47  }48  .back-btn svg { width: 42px; height: 42px; fill: none; stroke: #ffffff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }49 50  /* Content cards behind overlay */51  .content {52    position: absolute;53    top: 260px;54    left: 0;55    right: 0;56    padding: 36px 48px 0 48px;57  }58  .card {59    background: #f2f2f2;60    border-radius: 28px;61    padding: 70px 60px;62    margin-bottom: 40px;63    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);64  }65  .card h3 {66    margin: 40px 0 18px 0;67    color: #6d6d6d;68    font-size: 42px;69    font-weight: 600;70  }71  .card p {72    margin: 0;73    color: #204a9a;74    font-size: 40px;75    font-weight: 700;76  }77 78  /* Overlay and modal */79  .overlay {80    position: absolute;81    inset: 0;82    background: rgba(0,0,0,0.55);83  }84 85  .modal {86    position: absolute;87    left: 60px;88    right: 60px;89    top: 560px;90    background: #ffffff;91    border-radius: 40px;92    padding: 54px 60px 56px 60px;93    box-shadow: 0 20px 60px rgba(0,0,0,0.25);94  }95  .illustration {96    width: 100%;97    height: 360px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    border-radius: 18px;101    display: flex;102    align-items: center;103    justify-content: center;104    color: #757575;105    font-size: 36px;106    margin-bottom: 20px;107  }108  .modal h1 {109    margin: 30px 24px 16px 24px;110    font-size: 58px;111    line-height: 1.2;112    text-align: center;113    color: #222222;114    font-weight: 800;115  }116  .modal .subtitle {117    margin: 4px 40px 40px 40px;118    font-size: 38px;119    line-height: 1.45;120    text-align: center;121    color: #616161;122    font-weight: 500;123  }124  .cta {125    width: 100%;126    background: #ea6b2f;127    color: #ffffff;128    text-align: center;129    border: none;130    font-size: 46px;131    font-weight: 800;132    padding: 34px 20px;133    border-radius: 28px;134    cursor: default;135    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);136  }137 138  /* Bottom system area mock */139  .system-bar {140    position: absolute;141    bottom: 0;142    left: 0;143    width: 1080px;144    height: 120px;145    background: #000;146  }147  .home-pill {148    position: absolute;149    bottom: 38px;150    left: 50%;151    transform: translateX(-50%);152    width: 220px;153    height: 10px;154    background: #e6e6e6;155    border-radius: 8px;156  }157</style>158</head>159<body>160<div id="render-target">161  <!-- App bar -->162  <div class="appbar">163    <div class="back-btn" aria-hidden="true">164      <svg viewBox="0 0 24 24">165        <path d="M14 5 L7 12 L14 19"></path>166      </svg>167    </div>168    <div class="title">Ticket options</div>169  </div>170 171  <!-- Dimmed page content behind the modal -->172  <div class="content">173    <div class="card">174      <div style="width:100%;height:160px;background:#e9e9e9;border-radius:20px;margin-bottom:26px;"></div>175      <h3>Something went wrong. Try refreshing?</h3>176      <p>Refresh</p>177    </div>178    <div class="card" style="height:520px;"></div>179  </div>180 181  <!-- Overlay -->182  <div class="overlay"></div>183 184  <!-- Modal popup -->185  <div class="modal">186    <div class="illustration">[IMG: Travel illustration]</div>187    <h1>Still want to make a booking?</h1>188    <div class="subtitle">You'll need to refresh to see the latest prices</div>189    <button class="cta">Refresh</button>190  </div>191 192  <!-- System bottom bar -->193  <div class="system-bar">194    <div class="home-pill"></div>195  </div>196</div>197</body>198</html>