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>Booking Flights - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Header */15  .header {16    position: absolute; top: 0; left: 0; width: 100%; height: 540px;17    background: #0B4DB3; color: #fff;18  }19  .header-top {20    height: 100px; display: flex; align-items: center; justify-content: flex-end;21    padding: 0 40px; box-sizing: border-box;22  }23  .header-top .icon { margin-left: 28px; }24  .header-title {25    text-align: center; font-weight: 700; font-size: 64px; margin-top: 10px;26  }27  .nav-tabs {28    display: flex; justify-content: space-around; align-items: center;29    padding: 36px 60px 0; box-sizing: border-box;30    color: #fff;31  }32  .tab {33    display: flex; flex-direction: column; align-items: center; gap: 14px;34    font-size: 34px;35  }36  .tab svg { width: 72px; height: 48px; }37  .tab-pill {38    border: 2px solid #DDE7FF; border-radius: 36px; padding: 16px 40px; display: flex; align-items: center; gap: 18px;39    font-size: 38px; font-weight: 600; color: #fff;40  }41 42  /* Search Card */43  .search-card {44    position: absolute; top: 410px; left: 48px; width: 984px;45    background: #fff; border: 8px solid #F6B600; border-radius: 24px;46    box-shadow: 0 14px 28px rgba(0,0,0,0.22);47  }48  .search-inner { padding: 28px 32px; }49  .trip-types { display: flex; align-items: center; gap: 40px; margin-bottom: 22px; }50  .radio {51    display: flex; align-items: center; gap: 18px; font-size: 36px; color: #222;52  }53  .radio .circle {54    width: 40px; height: 40px; border-radius: 50%; border: 6px solid #0B4DB3; box-sizing: border-box;55    display: inline-block; position: relative;56  }57  .radio.active .circle::after {58    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);59    width: 18px; height: 18px; background: #0B4DB3; border-radius: 50%;60  }61  .section { border-top: 1px solid #E5E5E5; padding: 26px 0; }62  .row { display: flex; align-items: center; gap: 26px; font-size: 36px; color: #222; }63  .row svg { width: 44px; height: 44px; flex-shrink: 0; }64  .airports { position: relative; }65  .airports .swap {66    margin-left: auto;67    width: 40px; height: 80px; display: flex; align-items: center; justify-content: center;68  }69  .airports .divider {70    width: 2px; height: 72px; background: #D9D9D9; margin: 0 20px 0 70px;71  }72  .search-btn {73    background: #0B4DB3; color: #fff; font-size: 42px; font-weight: 700;74    text-align: center; padding: 30px 0; border-radius: 0 0 16px 16px;75  }76 77  /* Toggle */78  .toggle-row {79    position: absolute; top: 920px; left: 48px; width: 984px;80    display: flex; align-items: center; justify-content: space-between;81    font-size: 38px; color: #333;82  }83  .toggle {84    width: 132px; height: 72px; background: #C9C9C9; border-radius: 36px; position: relative;85  }86  .toggle::after {87    content: ""; width: 60px; height: 60px; background: #8E8E8E; border-radius: 50%;88    position: absolute; top: 6px; right: 6px;89  }90 91  /* Nearby options */92  .nearby-title {93    position: absolute; top: 1060px; left: 48px; font-size: 56px; font-weight: 800; color: #111;94  }95  .nearby-grid {96    position: absolute; top: 1180px; left: 48px; right: 48px;97    display: flex; gap: 30px;98  }99  .card {100    width: 486px; border-radius: 20px; overflow: hidden; border: 1px solid #E0E0E0; background: #fff;101    box-shadow: 0 4px 12px rgba(0,0,0,0.06);102  }103  .card .img {104    width: 100%; height: 320px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;105    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;106  }107  .card .info { padding: 24px; font-size: 32px; color: #333; }108 109  /* Bottom nav */110  .bottom-nav {111    position: absolute; bottom: 0; left: 0; width: 100%; height: 210px; background: #ffffff; border-top: 1px solid #E6E6E6;112    display: flex; justify-content: space-around; align-items: center;113  }114  .bottom-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #333; font-size: 30px; }115  .bottom-item svg { width: 64px; height: 64px; }116  .bottom-item.active { color: #0B4DB3; }117  .home-indicator {118    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);119    width: 300px; height: 10px; background: #000; opacity: 0.1; border-radius: 5px;120  }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Header -->127  <div class="header">128    <div class="header-top">129      <!-- Chat icon -->130      <svg class="icon" viewBox="0 0 24 24" fill="#fff">131        <path d="M4 4h16v11H9l-5 5V4z"></path>132      </svg>133      <!-- Bell icon -->134      <svg class="icon" viewBox="0 0 24 24" fill="#fff">135        <path d="M12 2a5 5 0 015 5v5l2 3H5l2-3V7a5 5 0 015-5zm0 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>136      </svg>137    </div>138    <div class="header-title">Booking.com</div>139 140    <div class="nav-tabs">141      <div class="tab">142        <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 9h18v9H3V9zm2-3h14v3H5V6z"></path></svg>143        <div>Stays</div>144      </div>145      <div class="tab-pill">146        <svg viewBox="0 0 24 24" fill="#fff"><path d="M2 13l20 5-1 2-6-2-6 2-7-7zM3 8l3 4h6l-2-3-7-3z"></path></svg>147        <div>Flights</div>148      </div>149      <div class="tab">150        <svg viewBox="0 0 24 24" fill="#fff"><path d="M3 16l2-5h14l2 5H3zm3-7a4 4 0 018 0H6z"></path></svg>151        <div>Car rental</div>152      </div>153      <div class="tab">154        <div style="font-weight:700; font-size:36px;">TAXI</div>155        <div>Taxi</div>156      </div>157    </div>158  </div>159 160  <!-- Search Card -->161  <div class="search-card">162    <div class="search-inner">163      <div class="trip-types">164        <div class="radio active">165          <span class="circle"></span>166          <span>Round-trip</span>167        </div>168        <div class="radio">169          <span class="circle" style="border-color:#C7C7C7;"></span>170          <span>One-way</span>171        </div>172        <div class="radio">173          <span class="circle" style="border-color:#C7C7C7;"></span>174          <span>Multi-city</span>175        </div>176      </div>177 178      <div class="section airports">179        <div class="row" style="padding-bottom:18px;">180          <svg viewBox="0 0 24 24" fill="#333"><path d="M2 13l20 5-1 2-6-2-6 2-7-7z"></path></svg>181          <div>New York · All airports</div>182          <div class="swap">183            <svg viewBox="0 0 24 24" fill="#0B4DB3"><path d="M7 4l5 5H8v6H6V9H2l5-5zm10 16l-5-5h4V9h2v6h4l-5 5z"/></svg>184          </div>185        </div>186        <div class="divider"></div>187        <div class="row" style="padding-top:18px;">188          <svg viewBox="0 0 24 24" fill="#333"><path d="M22 11L2 6l1-2 6 2 6-2 7 7z"></path></svg>189          <div>Paris · All airports</div>190        </div>191      </div>192 193      <div class="section">194        <div class="row">195          <svg viewBox="0 0 24 24" fill="#333"><path d="M7 2h10v4H7V2zM4 8h16v12H4V8zm4 3h2v2H8v-2zm4 0h2v2h-2v-2z"></path></svg>196          <div>Sat, Sep 30 - Sat, Oct 07</div>197        </div>198      </div>199 200      <div class="section">201        <div class="row">202          <svg viewBox="0 0 24 24" fill="#333"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4 4-7 8-7s8 3 8 7H4z"></path></svg>203          <div>1 adult, Economy</div>204        </div>205      </div>206    </div>207    <div class="search-btn">Search</div>208  </div>209 210  <!-- Toggle Direct flights -->211  <div class="toggle-row">212    <div>Direct flights only</div>213    <div class="toggle"></div>214  </div>215 216  <!-- Nearby options -->217  <div class="nearby-title">Nearby options for tonight</div>218  <div class="nearby-grid">219    <div class="card">220      <div class="img">[IMG: Hotel room interior]</div>221      <div class="info">Cozy room near city center · Great reviews</div>222    </div>223    <div class="card">224      <div class="img">[IMG: Hotel room interior]</div>225      <div class="info">Bright suite with balcony · Free breakfast</div>226    </div>227  </div>228 229  <!-- Bottom Navigation -->230  <div class="bottom-nav">231    <div class="bottom-item active">232      <svg viewBox="0 0 24 24" fill="#0B4DB3"><path d="M10 20v-6H6l6-10 6 10h-4v6h-4z"></path></svg>233      <div>Search</div>234    </div>235    <div class="bottom-item">236      <svg viewBox="0 0 24 24" fill="#333"><path d="M12 21.35l-1.45-1.32C5 15 2 12.36 2 8.5A4.5 4.5 0 016.5 4c1.74 0 3.41.81 4.5 2.09A6 6 0 0115 4a4.5 4.5 0 014.5 4.5c0 3.86-3 6.5-8.05 11.54L12 21.35z"></path></svg>237      <div>Saved</div>238    </div>239    <div class="bottom-item">240      <svg viewBox="0 0 24 24" fill="#333"><path d="M7 4h10l2 6H5l2-6zm-2 8h14v8H5v-8z"></path></svg>241      <div>Trips</div>242    </div>243    <div class="bottom-item">244      <svg viewBox="0 0 24 24" fill="#333"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-7 8-7s8 3 8 7H4z"></path></svg>245      <div>Profile</div>246    </div>247    <div class="home-indicator"></div>248  </div>249 250</div>251</body>252</html>