GD-ML/AndroidCode
13.4k
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>Help Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1a1a1a; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Header */18 .topbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 180px;24 background: #ffffff;25 box-sizing: border-box;26 padding: 40px 48px 0 48px;27 }28 .topbar .row {29 display: flex;30 align-items: center;31 gap: 24px;32 margin-top: 40px;33 }34 .topbar .title {35 font-size: 48px;36 font-weight: 600;37 letter-spacing: 0.2px;38 color: #2a2a2a;39 }40 .icon-btn {41 width: 72px;42 height: 72px;43 display: inline-flex;44 align-items: center;45 justify-content: center;46 border-radius: 36px;47 background: transparent;48 }49 .icon {50 width: 48px;51 height: 48px;52 fill: none;53 stroke: #333;54 stroke-width: 6;55 stroke-linecap: round;56 stroke-linejoin: round;57 }58 59 /* Hero */60 .hero {61 position: absolute;62 top: 180px;63 left: 0;64 width: 1080px;65 height: 870px;66 background: #F1F4F6;67 box-sizing: border-box;68 padding: 40px 48px;69 }70 .hero h1 {71 margin: 40px 0 40px 0;72 font-size: 72px;73 font-weight: 700;74 text-align: center;75 color: #2c2c2c;76 }77 .search {78 width: 984px;79 height: 120px;80 margin: 0 auto;81 background: #ffffff;82 border: 1px solid #D7DDE2;83 border-radius: 20px;84 box-sizing: border-box;85 display: flex;86 align-items: center;87 padding: 0 32px;88 gap: 24px;89 }90 .search .search-icon {91 width: 48px;92 height: 48px;93 stroke: #95A1AD;94 stroke-width: 6;95 }96 .search input {97 flex: 1;98 border: none;99 outline: none;100 font-size: 40px;101 color: #495057;102 }103 .search input::placeholder { color: #8B97A3; }104 105 .suggest {106 margin: 48px 48px 0 48px;107 }108 .suggest .label {109 font-size: 38px;110 color: #50565c;111 margin-bottom: 24px;112 }113 .suggest a {114 display: block;115 font-size: 40px;116 color: #0AAE98;117 text-decoration: underline;118 margin: 20px 0;119 font-weight: 600;120 }121 122 /* Sign in card */123 .signin-section {124 position: absolute;125 top: 1050px;126 left: 0;127 width: 1080px;128 box-sizing: border-box;129 padding: 0 48px;130 }131 .signin-section h2 {132 font-size: 46px;133 font-weight: 600;134 color: #2f3337;135 margin: 0 0 28px 0;136 }137 .signin-card {138 width: 984px;139 min-height: 420px;140 border: 2px dashed #CCD4DA;141 border-radius: 24px;142 background: #ffffff;143 box-sizing: border-box;144 padding: 40px;145 }146 .signin-card p {147 font-size: 40px;148 line-height: 58px;149 color: #3a3f44;150 margin: 0 0 40px 0;151 }152 .btn {153 display: inline-block;154 background: #0AAE98;155 color: #ffffff;156 font-weight: 700;157 font-size: 42px;158 padding: 28px 40px;159 border-radius: 20px;160 text-align: center;161 width: 360px;162 }163 164 /* Solve it yourself */165 .solve-section {166 position: absolute;167 top: 1605px;168 left: 0;169 width: 1080px;170 box-sizing: border-box;171 padding: 0 48px 0 48px;172 }173 .solve-section h2 {174 font-size: 46px;175 font-weight: 600;176 color: #2f3337;177 margin: 0 0 28px 0;178 }179 .accordion {180 width: 984px;181 border-radius: 24px;182 background: #ffffff;183 box-shadow: 0 6px 18px rgba(0,0,0,0.06);184 overflow: hidden;185 }186 .acc-row {187 height: 160px;188 display: flex;189 align-items: center;190 padding: 0 32px;191 gap: 28px;192 border-top: 1px solid #EEF1F4;193 box-sizing: border-box;194 }195 .acc-row:first-child { border-top: none; }196 .acc-icon {197 width: 72px;198 height: 72px;199 border-radius: 16px;200 background: #F3F6F9;201 display: flex;202 align-items: center;203 justify-content: center;204 }205 .acc-row .text {206 font-size: 40px;207 color: #2c2f33;208 flex: 1;209 font-weight: 600;210 }211 .chev {212 width: 40px;213 height: 40px;214 stroke: #7b848c;215 stroke-width: 6;216 fill: none;217 }218 219 /* Bottom nav */220 .bottom-nav {221 position: absolute;222 bottom: 0;223 left: 0;224 width: 1080px;225 height: 200px;226 background: #ffffff;227 box-shadow: 0 -6px 14px rgba(0,0,0,0.06);228 display: flex;229 align-items: center;230 justify-content: space-around;231 }232 .nav-item {233 width: 210px;234 height: 160px;235 display: flex;236 flex-direction: column;237 align-items: center;238 justify-content: center;239 color: #6b737b;240 font-size: 32px;241 font-weight: 600;242 }243 .nav-item.active { color: #0AAE98; }244 .nav-icon {245 width: 56px;246 height: 56px;247 stroke: currentColor;248 stroke-width: 6;249 fill: none;250 margin-bottom: 14px;251 }252 253 /* Gesture bar (Android) */254 .gesture-bar {255 position: absolute;256 bottom: 210px;257 left: 50%;258 transform: translateX(-50%);259 width: 260px;260 height: 16px;261 background: #C7CDD3;262 border-radius: 10px;263 opacity: 0.8;264 }265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Header -->271 <div class="topbar">272 <div class="row">273 <div class="icon-btn" aria-label="Back">274 <svg class="icon" viewBox="0 0 24 24">275 <path d="M15 19L8 12l7-7"/>276 </svg>277 </div>278 <div class="title">Help</div>279 </div>280 </div>281 282 <!-- Hero section -->283 <div class="hero">284 <h1>How can we help?</h1>285 <div class="search">286 <svg class="search-icon" viewBox="0 0 24 24">287 <circle cx="10" cy="10" r="7"></circle>288 <path d="M21 21l-6-6"></path>289 </svg>290 <input type="text" placeholder="Search by keyword" />291 </div>292 293 <div class="suggest">294 <div class="label">Suggested topics:</div>295 <a href="#">What refund can you get?</a>296 <a href="#">How does it work with check-in?</a>297 <a href="#">What is the Kiwi.com Guarantee?</a>298 </div>299 </div>300 301 <!-- Sign in section -->302 <div class="signin-section">303 <h2>Sign in to get help with your trip</h2>304 <div class="signin-card">305 <p>You’ll be able to access our chatbot or get personalized assistance with your trip from our customer support agents.</p>306 <div class="btn">Sign in</div>307 </div>308 </div>309 310 <!-- Solve it yourself -->311 <div class="solve-section">312 <h2>Solve it yourself</h2>313 <div class="accordion">314 <div class="acc-row">315 <div class="acc-icon">316 <svg class="nav-icon" viewBox="0 0 24 24">317 <circle cx="12" cy="12" r="8"></circle>318 <path d="M8 12h8"></path>319 </svg>320 </div>321 <div class="text">Kiwi.com product & services</div>322 <svg class="chev" viewBox="0 0 24 24">323 <path d="M9 6l6 6-6 6"></path>324 </svg>325 </div>326 <div class="acc-row">327 <div class="acc-icon">328 <svg class="nav-icon" viewBox="0 0 24 24">329 <rect x="4" y="6" width="16" height="10" rx="2"></rect>330 <path d="M8 16h8"></path>331 </svg>332 </div>333 <div class="text">Payment & booking confirmation</div>334 <svg class="chev" viewBox="0 0 24 24">335 <path d="M9 6l6 6-6 6"></path>336 </svg>337 </div>338 </div>339 </div>340 341 <!-- Gesture bar -->342 <div class="gesture-bar"></div>343 344 <!-- Bottom navigation -->345 <div class="bottom-nav">346 <div class="nav-item">347 <svg class="nav-icon" viewBox="0 0 24 24">348 <circle cx="10" cy="10" r="7"></circle>349 <path d="M21 21l-6-6"></path>350 </svg>351 <div>Search</div>352 </div>353 <div class="nav-item">354 <svg class="nav-icon" viewBox="0 0 24 24">355 <path d="M12 4l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 11l6-1 3-6z"></path>356 </svg>357 <div>Deals</div>358 </div>359 <div class="nav-item">360 <svg class="nav-icon" viewBox="0 0 24 24">361 <rect x="4" y="6" width="16" height="12" rx="2"></rect>362 <path d="M8 6V3M16 6V3"></path>363 </svg>364 <div>My trips</div>365 </div>366 <div class="nav-item active">367 <svg class="nav-icon" viewBox="0 0 24 24">368 <circle cx="12" cy="8" r="4"></circle>369 <path d="M4 21c2-4 6-6 8-6s6 2 8 6"></path>370 </svg>371 <div>Profile</div>372 </div>373 </div>374 375</div>376</body>377</html>