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>Expedia Help Article Mock</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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0b1020;15    color: #0b1020;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #ffffff;26    font-weight: 600;27    font-size: 40px;28    letter-spacing: 1px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .appbar {36    height: 120px;37    display: flex;38    align-items: center;39    padding: 0 36px;40    color: #fff;41    border-bottom: 1px solid rgba(255,255,255,0.08);42  }43  .appbar .title {44    font-size: 48px;45    font-weight: 700;46    margin-left: 24px;47  }48  .content {49    position: absolute;50    left: 0;51    right: 0;52    top: 230px; /* below status and app bar */53    bottom: 120px; /* leave space for gesture bar */54    background: #ffffff;55    border-top-left-radius: 18px;56    border-top-right-radius: 18px;57    overflow: hidden auto;58  }59  .inner {60    padding: 48px 56px 120px 56px;61    color: #1f2a44;62  }63  .heading-row {64    display: flex;65    align-items: center;66    gap: 20px;67    margin-bottom: 22px;68  }69  .heading-row .label {70    font-size: 52px;71    font-weight: 800;72    color: #1f2a44;73  }74  .subhead {75    font-size: 40px;76    font-weight: 800;77    margin: 36px 0 16px;78    color: #1f2a44;79  }80  .para {81    font-size: 34px;82    line-height: 1.6;83    color: #41516b;84    margin: 8px 0 22px;85  }86  .bullets {87    margin: 8px 0 32px 18px;88  }89  .bullets li {90    font-size: 34px;91    line-height: 1.6;92    color: #41516b;93    margin: 18px 0;94  }95  .divider {96    height: 2px;97    background: #e6ebf2;98    margin: 36px 0;99  }100  .more-about {101    font-size: 34px;102    color: #41516b;103    display: flex;104    align-items: center;105    flex-wrap: wrap;106    gap: 18px;107  }108  .chip-link {109    color: #1a73e8;110    font-weight: 700;111    display: inline-flex;112    align-items: center;113    gap: 12px;114    padding: 10px 0;115  }116  .feedback {117    margin-top: 36px;118  }119  .feedback .q {120    font-size: 44px;121    font-weight: 800;122    color: #1f2a44;123    margin-bottom: 22px;124  }125  .feedback .buttons {126    display: flex;127    gap: 28px;128  }129  .circle-btn {130    width: 140px;131    height: 140px;132    border-radius: 50%;133    border: 2px solid #d3d9e3;134    display: flex;135    align-items: center;136    justify-content: center;137    background: #fff;138  }139  /* Bottom gesture bar */140  .gesture-bar {141    position: absolute;142    left: 0;143    right: 0;144    bottom: 0;145    height: 120px;146    background: #000000;147    display: flex;148    align-items: center;149    justify-content: center;150  }151  .gesture-pill {152    width: 220px;153    height: 14px;154    background: #f2f2f2;155    opacity: 0.95;156    border-radius: 7px;157  }158 159  /* Utility */160  .icon-btn {161    width: 60px;162    height: 60px;163    display: inline-flex;164    align-items: center;165    justify-content: center;166  }167</style>168</head>169<body>170<div id="render-target">171  <!-- Status bar -->172  <div class="status-bar">173    <div>8:10</div>174    <div class="status-right">175      <!-- simple icons -->176      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">177        <rect x="2" y="8" width="20" height="8" rx="2" stroke="#fff" stroke-width="2"/>178        <rect x="4" y="10" width="8" height="4" fill="#fff"/>179      </svg>180      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">181        <path d="M3 18h18L12 6 3 18z" stroke="#fff" stroke-width="2" fill="none"/>182      </svg>183      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">184        <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"/>185        <circle cx="12" cy="12" r="2" fill="#fff"/>186      </svg>187      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">188        <circle cx="12" cy="12" r="2" fill="#fff"/>189      </svg>190      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">191        <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"/>192        <path d="M16 7v10" stroke="#fff" stroke-width="2"/>193      </svg>194      <div style="display:flex;align-items:center;gap:8px;">195        <svg width="44" height="44" viewBox="0 0 24 24" fill="none">196          <rect x="3" y="6" width="16" height="12" rx="2" stroke="#fff" stroke-width="2"/>197          <rect x="19" y="10" width="2" height="4" fill="#fff"/>198        </svg>199        <div style="font-size:36px;">100%</div>200      </div>201    </div>202  </div>203 204  <!-- App bar -->205  <div class="appbar">206    <div class="icon-btn" aria-label="Close">207      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">208        <path d="M4 4l16 16M20 4L4 20" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"/>209      </svg>210    </div>211    <div class="title">Expedia</div>212  </div>213 214  <!-- Content sheet -->215  <div class="content">216    <div class="inner">217      <div class="heading-row">218        <svg width="44" height="44" viewBox="0 0 24 24">219          <path d="M4 4l16 16M20 4L4 20" stroke="#1a73e8" stroke-width="3" stroke-linecap="round"/>220        </svg>221        <div class="label">Explore help articles</div>222      </div>223 224      <div class="para">their own changes and cancellations.</div>225 226      <div class="subhead">Roundtrip flights with 2 one-way fares</div>227      <div class="para">228        Because each ticket is considered separate, be sure to cancel each of your one‑way flights individually.229      </div>230      <div class="para">231        If one of your flights is with a low‑cost airline, like Frontier or Spirit, you’ll need to contact the airline to cancel that flight. You can cancel your other flight with us.232      </div>233 234      <div class="subhead">Vacation packages</div>235      <div class="para">236        If your flight’s part of a vacation package, please read Cancel your vacation package for more info – including how to cancel one part of a package and what to expect when you do.237      </div>238 239      <div class="subhead">Good to know</div>240      <ul class="bullets">241        <li>If you miss or skip your departure flight, the airline will cancel your return flight. Unless you booked a roundtrip flight with 2 one‑way fares, because your tickets are considered separate in that case.</li>242        <li>If the airline changed or canceled your flight, check out Airline‑initiated schedule changes to see what to do next.</li>243        <li>If you bought flight insurance, be sure to read Flight insurance for more info on when and how you can use it.</li>244        <li>If you’re curious about refund information, check out Refund timelines.</li>245      </ul>246 247      <div class="divider"></div>248 249      <div class="more-about">250        <div>More about:</div>251        <a href="#" class="chip-link">252          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">253            <rect x="4" y="6" width="16" height="2" fill="#1a73e8"/>254            <rect x="4" y="11" width="16" height="2" fill="#1a73e8"/>255            <rect x="4" y="16" width="16" height="2" fill="#1a73e8"/>256          </svg>257          Cancel258        </a>259        <a href="#" class="chip-link" style="margin-left:6px;">260          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">261            <rect x="4" y="6" width="16" height="2" fill="#1a73e8"/>262            <rect x="4" y="11" width="16" height="2" fill="#1a73e8"/>263            <rect x="4" y="16" width="16" height="2" fill="#1a73e8"/>264          </svg>265          Change266        </a>267      </div>268 269      <div class="feedback">270        <div class="q">Was this topic helpful?</div>271        <div class="buttons">272          <div class="circle-btn" title="Thumbs up">273            <svg width="58" height="58" viewBox="0 0 24 24" fill="none">274              <path d="M2 12h4v8H2v-8zm6 8h7a3 3 0 0 0 3-3v-5a2 2 0 0 0-2-2h-6l1-4-3 1-1 4v9z" stroke="#1a73e8" stroke-width="1.8" fill="none"/>275            </svg>276          </div>277          <div class="circle-btn" title="Thumbs down">278            <svg width="58" height="58" viewBox="0 0 24 24" fill="none">279              <path d="M2 4h4v8H2V4zm6 0h7a3 3 0 0 1 3 3v5a2 2 0 0 1-2 2h-6l1 4-3-1-1-4V4z" stroke="#1a73e8" stroke-width="1.8" fill="none" transform="scale(1,-1) translate(0,-24)"/>280            </svg>281          </div>282        </div>283      </div>284    </div>285  </div>286 287  <!-- Gesture bar -->288  <div class="gesture-bar">289    <div class="gesture-pill"></div>290  </div>291</div>292</body>293</html>