GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>FAQ - Cancel Booking</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19  }20 21  /* Top blue bars */22  .app-top {23    background: #003580;24    color: #ffffff;25    width: 100%;26  }27  .status-bar {28    height: 90px;29    display: flex;30    align-items: center;31    padding: 0 36px;32    box-sizing: border-box;33    font-size: 34px;34    letter-spacing: 1px;35  }36  .status-right {37    margin-left: auto;38    display: flex;39    gap: 22px;40    align-items: center;41  }42  .app-bar {43    height: 160px;44    display: flex;45    align-items: center;46    padding: 0 36px;47    box-sizing: border-box;48  }49  .back-icon {50    width: 60px;51    height: 60px;52    margin-right: 20px;53  }54  .title {55    font-size: 50px;56    font-weight: 700;57    letter-spacing: 0.3px;58  }59 60  /* Content */61  .content {62    position: absolute;63    top: 250px;64    left: 0;65    right: 0;66    bottom: 0;67    overflow: hidden;68    background: #ffffff;69  }70  .section {71    padding: 40px 48px 0 48px;72  }73  h1 {74    font-size: 64px;75    margin: 10px 0 26px 0;76    color: #1b1b1b;77  }78  .text {79    font-size: 38px;80    line-height: 1.55;81    color: #4a4a4a;82  }83  .subq {84    font-size: 38px;85    color: #2a2a2a;86    margin-top: 38px;87  }88  .thumbs {89    display: flex;90    gap: 46px;91    margin-top: 30px;92  }93  .thumb {94    width: 86px;95    height: 86px;96    border-radius: 12px;97    display: flex;98    align-items: center;99    justify-content: center;100    color: #2a62d3;101  }102  .divider {103    height: 12px;104    background: #efefef;105    margin-top: 34px;106  }107  .more-help-title {108    font-size: 46px;109    font-weight: 700;110    color: #222;111    margin: 40px 0 24px 0;112  }113  .link {114    font-size: 44px;115    color: #2a62d3;116    margin: 34px 0;117  }118</style>119</head>120<body>121<div id="render-target">122  <div class="app-top">123    <div class="status-bar">124      <span>9:09</span>125      <div class="status-right">126        <!-- simple status dots -->127        <span>◦</span>128        <span>◦</span>129        <span>◦</span>130      </div>131    </div>132    <div class="app-bar">133      <svg class="back-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">134        <path d="M15 18l-6-6 6-6"/>135      </svg>136      <div class="title">Frequently asked questions</div>137    </div>138  </div>139 140  <div class="content">141    <div class="section">142      <h1>Can I cancel my booking?</h1>143      <div class="text">144        Yes – any cancellation fees are determined by the property and listed in your cancellation policy. You'll pay any additional costs to the property.145      </div>146 147      <div class="subq">Was this information helpful?</div>148      <div class="thumbs">149        <div class="thumb">150          <!-- thumbs up outline -->151          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#2a62d3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">152            <path d="M14 9V5a3 3 0 00-3-3l-1 6-4 5v8h9a3 3 0 003-3v-6a2 2 0 00-2-2h-2z"/>153            <path d="M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"/>154          </svg>155        </div>156        <div class="thumb">157          <!-- thumbs down outline -->158          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#2a62d3" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">159            <path d="M10 15v4a3 3 0 003 3l1-6 4-5V3H9a3 3 0 00-3 3v6a2 2 0 002 2h2z"/>160            <path d="M17 2h3a2 2 0 012 2v7a2 2 0 01-2 2h-3"/>161          </svg>162        </div>163      </div>164 165      <div class="divider"></div>166 167      <div class="more-help-title">More help</div>168      <div class="link">Get help with a booking</div>169      <div class="link">I need help with something else</div>170    </div>171  </div>172</div>173</body>174</html>