GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>FAQ UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Header */16 .header {17 position: relative;18 width: 100%;19 height: 240px;20 background: #0b3d91; /* deep blue */21 color: #fff;22 }23 .statusbar {24 height: 90px;25 display: flex;26 align-items: center;27 padding: 0 34px;28 font-weight: 600;29 font-size: 34px;30 letter-spacing: 0.5px;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 18px;36 color: #ffffff;37 }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 12px;42 }43 .dot {44 width: 22px;45 height: 22px;46 border-radius: 50%;47 background: rgba(255,255,255,0.9);48 opacity: 0.8;49 }50 .status-right {51 margin-left: auto;52 display: flex;53 align-items: center;54 gap: 26px;55 }56 .titlebar {57 height: 150px;58 display: flex;59 align-items: center;60 padding: 0 34px;61 }62 .back {63 width: 64px;64 height: 64px;65 margin-right: 16px;66 }67 .page-title {68 font-size: 52px;69 font-weight: 700;70 }71 72 /* Content area */73 .content {74 position: absolute;75 top: 240px;76 left: 0;77 right: 0;78 bottom: 0;79 background: #ffffff;80 }81 .section-title {82 margin: 48px 34px 10px 34px;83 font-size: 68px;84 font-weight: 800;85 color: #222;86 }87 .list {88 margin-top: 10px;89 }90 .list-row {91 padding: 40px 34px;92 display: flex;93 align-items: center;94 justify-content: space-between;95 border-top: 1px solid #e7e7e7;96 }97 .list-row:first-child {98 border-top: none;99 }100 .row-text {101 font-size: 42px;102 line-height: 1.3;103 color: #222;104 max-width: 900px;105 }106 .chev {107 width: 40px;108 height: 40px;109 }110 111 /* More help section */112 .more-help {113 margin-top: 40px;114 border-top: 12px solid #efefef; /* subtle divider bar like screenshot */115 padding-top: 30px;116 }117 .mh-title {118 font-size: 44px;119 font-weight: 700;120 color: #333;121 margin: 0 34px 20px 34px;122 }123 .link {124 font-size: 44px;125 color: #1967d2;126 margin: 26px 34px;127 font-weight: 700;128 }129 130 /* Large light grey area at bottom */131 .filler {132 margin-top: 24px;133 height: 740px;134 background: #f1f1f1;135 border-top: 1px solid #e7e7e7;136 }137 138 /* Bottom nav bar + home indicator */139 .bottom-bar {140 position: absolute;141 bottom: 0;142 left: 0;143 width: 100%;144 height: 118px;145 background: #000000;146 display: flex;147 align-items: center;148 justify-content: center;149 }150 .home-indicator {151 width: 480px;152 height: 12px;153 border-radius: 10px;154 background: #bfbfbf;155 opacity: 0.8;156 }157 158 /* Simple icon styling */159 svg { display: block; }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Header -->166 <div class="header">167 <div class="statusbar">168 <div class="status-left">169 <div>9:09</div>170 <div class="status-icons">171 <div class="dot"></div>172 <div class="dot" style="opacity:0.6;"></div>173 <div class="dot" style="opacity:0.4;"></div>174 </div>175 </div>176 <div class="status-right">177 <!-- WiFi icon -->178 <svg width="48" height="32" viewBox="0 0 48 32">179 <path d="M3 10 C14 1 34 1 45 10" stroke="#fff" stroke-width="4" fill="none" opacity="0.8"/>180 <path d="M10 16 C18 10 30 10 38 16" stroke="#fff" stroke-width="4" fill="none" opacity="0.8"/>181 <circle cx="24" cy="22" r="4" fill="#fff"/>182 </svg>183 <!-- Battery icon -->184 <svg width="54" height="28" viewBox="0 0 54 28">185 <rect x="2" y="2" width="44" height="24" rx="4" ry="4" stroke="#fff" stroke-width="4" fill="none"/>186 <rect x="6" y="6" width="36" height="16" fill="#fff"/>187 <rect x="48" y="8" width="6" height="12" rx="2" fill="#fff"/>188 </svg>189 </div>190 </div>191 192 <div class="titlebar">193 <div class="back">194 <svg width="64" height="64" viewBox="0 0 64 64">195 <path d="M40 12 L20 32 L40 52" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196 </svg>197 </div>198 <div class="page-title">Frequently asked questions</div>199 </div>200 </div>201 202 <!-- Content -->203 <div class="content">204 <div class="section-title">Cancellations</div>205 206 <div class="list">207 <div class="list-row">208 <div class="row-text">Can I cancel my booking?</div>209 <svg class="chev" viewBox="0 0 40 40">210 <path d="M12 6 L28 20 L12 34" stroke="#777" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>211 </svg>212 </div>213 214 <div class="list-row">215 <div class="row-text">If I need to cancel my booking, will I pay a fee?</div>216 <svg class="chev" viewBox="0 0 40 40">217 <path d="M12 6 L28 20 L12 34" stroke="#777" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218 </svg>219 </div>220 221 <div class="list-row">222 <div class="row-text">Can I cancel or change my dates for a non-refundable booking?</div>223 <svg class="chev" viewBox="0 0 40 40">224 <path d="M12 6 L28 20 L12 34" stroke="#777" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 228 <div class="list-row">229 <div class="row-text">How do I know if my booking was canceled?</div>230 <svg class="chev" viewBox="0 0 40 40">231 <path d="M12 6 L28 20 L12 34" stroke="#777" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>232 </svg>233 </div>234 235 <div class="list-row">236 <div class="row-text">Where can I find my property's cancellation policy?</div>237 <svg class="chev" viewBox="0 0 40 40">238 <path d="M12 6 L28 20 L12 34" stroke="#777" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>239 </svg>240 </div>241 </div>242 243 <div class="more-help">244 <div class="mh-title">More help</div>245 <div class="link">Get help with a booking</div>246 <div class="link">I need help with something else</div>247 </div>248 249 <div class="filler"></div>250 </div>251 252 <!-- Bottom navigation bar -->253 <div class="bottom-bar">254 <div class="home-indicator"></div>255 </div>256 257</div>258</body>259</html>