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">6<title>FAQ - Can I cancel my booking?</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top app bar */18  .appbar {19    background: #0A459F;20    color: #fff;21    height: 260px;22    box-sizing: border-box;23    width: 100%;24  }25  .status-row {26    height: 84px;27    display: flex;28    align-items: center;29    padding: 0 36px;30    font-size: 32px;31    opacity: 0.95;32  }33  .status-row .right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .titlebar {40    height: 176px;41    display: flex;42    align-items: center;43    padding: 0 36px;44    gap: 24px;45  }46  .titlebar h1 {47    margin: 0;48    color: #fff;49    font-size: 46px;50    font-weight: 700;51    letter-spacing: 0.2px;52  }53  .icon-back {54    width: 60px;55    height: 60px;56    flex: 0 0 60px;57  }58 59  /* Main content */60  .content {61    background: #fff;62    padding: 48px 56px 36px;63  }64  .question {65    font-size: 56px;66    line-height: 1.2;67    color: #222;68    margin: 10px 0 26px;69    font-weight: 700;70  }71  .answer {72    font-size: 34px;73    line-height: 1.6;74    color: #5f6368;75    margin: 0 0 40px;76  }77  .label {78    font-size: 34px;79    color: #5f6368;80    margin: 10px 0 28px;81  }82 83  .thumbs {84    display: flex;85    gap: 44px;86    padding: 8px 0 36px;87  }88  .thumb-btn {89    width: 88px;90    height: 88px;91  }92 93  .divider {94    height: 16px;95    background: #eeeeee;96    width: 100%;97  }98 99  .help-section {100    background: #fff;101    padding: 40px 56px 52px;102  }103  .help-title {104    margin: 12px 0 30px;105    font-size: 40px;106    color: #222;107    font-weight: 700;108  }109  .help-link {110    display: block;111    color: #1976d2;112    font-size: 44px;113    line-height: 1.4;114    text-decoration: none;115    margin: 26px 0 36px;116    font-weight: 600;117  }118 119  .filler {120    background: #f1f2f4;121    height: 800px;122    width: 100%;123  }124 125  /* Bottom gesture bar */126  .nav-bar {127    position: absolute;128    left: 0;129    bottom: 0;130    width: 100%;131    height: 120px;132    background: #000;133  }134  .gesture-pill {135    position: absolute;136    left: 50%;137    transform: translateX(-50%);138    bottom: 40px;139    width: 240px;140    height: 14px;141    background: #cfcfcf;142    border-radius: 10px;143    opacity: 0.9;144  }145</style>146</head>147<body>148<div id="render-target">149  <div class="appbar">150    <div class="status-row">151      <div>6:22</div>152      <div class="right">153        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>154        <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><path d="M20 8h-2V6a6 6 0 10-12 0v2H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V10a2 2 0 00-2-2zm-6 8.73V19h-4v-2.27A3 3 0 019 14a3 3 0 016 0 3 3 0 01-1 2.73zM8 8V6a4 4 0 118 0v2H8z"/></svg>155        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><path d="M3 12h18"/></svg>156        <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="12" r="3"/></svg>157        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><rect x="2" y="7" width="18" height="12" rx="2"/><path d="M22 11v4"/></svg>158        <div style="font-size:30px;">100%</div>159      </div>160    </div>161    <div class="titlebar">162      <svg class="icon-back" viewBox="0 0 60 60" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">163        <path d="M38 12 L16 30 L38 48"/>164      </svg>165      <h1>Frequently asked questions</h1>166    </div>167  </div>168 169  <div class="content">170    <div class="question">Can I cancel my booking?</div>171    <div class="answer">172      Yes – any cancellation fees are determined by the property and listed in your cancellation policy.173      You'll pay any additional costs to the property.174    </div>175    <div class="label">Was this information helpful?</div>176    <div class="thumbs">177      <svg class="thumb-btn" viewBox="0 0 64 64" fill="none" stroke="#1976d2" stroke-width="4" stroke-linejoin="round">178        <rect x="6" y="28" width="12" height="28" rx="3"></rect>179        <path d="M22 28l10-18c3-5 10-2 9 3l-2 11h12c4 0 6 3 4 7l-7 18c-1 3-3 5-6 5H22V28z"></path>180      </svg>181      <svg class="thumb-btn" viewBox="0 0 64 64" fill="none" stroke="#1976d2" stroke-width="4" stroke-linejoin="round">182        <rect x="46" y="8" width="12" height="28" rx="3"></rect>183        <path d="M42 36l-10 18c-3 5-10 2-9-3l2-11H13c-4 0-6-3-4-7l7-18c1-3 3-5 6-5h20v26z"></path>184      </svg>185    </div>186  </div>187 188  <div class="divider"></div>189 190  <div class="help-section">191    <div class="help-title">More help</div>192    <a href="#" class="help-link">Get help with a booking</a>193    <a href="#" class="help-link">I need help with something else</a>194  </div>195 196  <div class="filler"></div>197 198  <div class="nav-bar">199    <div class="gesture-pill"></div>200  </div>201</div>202</body>203</html>