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>Airlines Filter Bottom Sheet</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:#132a57;12  }13 14  /* Status bar */15  .status-bar {16    height:120px; color:#fff; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17    font-size:38px; letter-spacing:0.2px;18  }19  .status-icons { display:flex; gap:28px; align-items:center; }20  .icon-dot { width:16px; height:16px; border-radius:50%; background:#d9d9d9; display:inline-block; }21  .icon-wifi { width:34px; height:24px; }22  .icon-battery { width:48px; height:24px; }23 24  /* Header */25  .header {26    height:160px; display:flex; align-items:center; padding:0 36px; color:#fff;27  }28  .back {29    width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-right:24px;30  }31  .header-title { font-size:46px; font-weight:600; }32 33  /* Filter chips row */34  .chips {35    display:flex; gap:18px; padding:24px 36px; background:transparent;36  }37  .chip {38    padding:18px 26px; border-radius:20px; background:#e9eef6; color:#2d3b52; font-size:34px; border:1px solid #cbd3df;39    display:flex; align-items:center; gap:14px;40  }41  .chip.active {42    background:#dce7ff; border-color:#5b83d6; color:#214b9f;43  }44  .chip svg { width:32px; height:32px; }45 46  /* Trip summary line */47  .trip-summary {48    background:#ffffff10; color:#fff; padding:12px 36px 36px 36px;49  }50  .trip-summary .row1 { font-size:40px; font-weight:700; }51  .trip-summary .row2 { font-size:30px; opacity:0.85; margin-top:10px; display:flex; align-items:center; gap:12px; }52  .edit-icon { width:40px; height:40px; margin-left:auto; }53 54  /* Bottom sheet */55  .sheet {56    position:absolute; left:0; right:0; top:520px; height:1680px; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;57    box-shadow:0 -12px 24px rgba(0,0,0,0.25);58  }59  .sheet-handle {60    position:absolute; top:20px; left:50%; transform:translateX(-50%); width:160px; height:18px; background:#cfcfcf; border-radius:12px;61  }62  .sheet-content { padding:72px 36px 0 36px; }63  .sheet-title { font-size:54px; font-weight:700; color:#212121; margin-bottom:36px; }64  .select-all {65    display:flex; align-items:center; justify-content:space-between; font-size:38px; color:#424242; margin-bottom:26px;66  }67  .switch {68    width:120px; height:56px; border-radius:28px; background:#e9e9e9; position:relative;69  }70  .switch::after {71    content:""; position:absolute; right:6px; top:6px; width:44px; height:44px; background:#757575; border-radius:50%;72  }73  .divider { height:2px; background:#e0e0e0; margin:12px 0 8px; }74 75  .list {76    margin-top:8px;77  }78  .item {79    display:flex; align-items:center; justify-content:space-between; padding:34px 8px; border-bottom:1px solid #f0f0f0;80  }81  .item:last-child { border-bottom:none; }82  .item-label { font-size:40px; color:#212121; }83  .checkbox {84    width:48px; height:48px;85  }86  .checkbox rect {87    fill:#fff; stroke:#9e9e9e; stroke-width:4;88  }89 90  /* Bottom action row inside sheet */91  .sheet-actions {92    position:absolute; bottom:120px; left:0; right:0; padding:0 36px; display:flex; align-items:center; justify-content:space-between;93  }94  .reset-link { font-size:44px; color:#1e63b6; font-weight:600; }95  .btn {96    background:#2f66bb; color:#fff; font-size:44px; padding:28px 44px; border-radius:12px; box-shadow:0 2px 0 rgba(0,0,0,0.2);97  }98 99  /* Bottom system bar */100  .bottom-bar {101    position:absolute; left:0; right:0; bottom:0; height:160px; background:#000;102  }103  .gesture {104    position:absolute; left:50%; transform:translateX(-50%); bottom:36px; width:240px; height:16px; border-radius:10px; background:#bdbdbd;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status bar with time and icons -->112  <div class="status-bar">113    <div>8:44</div>114    <div class="status-icons">115      <span class="icon-dot"></span>116      <span class="icon-dot"></span>117      <span class="icon-dot"></span>118      <svg class="icon-dot" viewBox="0 0 16 16"></svg>119      <svg class="icon-wifi" viewBox="0 0 24 24">120        <path d="M12 18a2 2 0 1 0 0.001 0z" fill="#ffffff"/>121        <path d="M2 9c5.5-5 14.5-5 20 0" stroke="#ffffff" stroke-width="2" fill="none"/>122        <path d="M5 12c4-3.5 10-3.5 14 0" stroke="#ffffff" stroke-width="2" fill="none"/>123        <path d="M8 15c2.5-2 5.5-2 8 0" stroke="#ffffff" stroke-width="2" fill="none"/>124      </svg>125      <svg class="icon-battery" viewBox="0 0 36 24">126        <rect x="2" y="4" width="28" height="16" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="2"/>127        <rect x="5" y="7" width="22" height="10" fill="#ffffff"/>128        <rect x="30" y="9" width="4" height="6" fill="#ffffff"/>129      </svg>130    </div>131  </div>132 133  <!-- Header -->134  <div class="header">135    <div class="back">136      <svg viewBox="0 0 24 24" width="52" height="52">137        <path d="M15 19L8 12l7-7" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138      </svg>139    </div>140    <div class="header-title">126 results</div>141  </div>142 143  <!-- Filter chips -->144  <div class="chips">145    <div class="chip">146      <svg viewBox="0 0 24 24">147        <path d="M7 5l-3 3h8l-3-3zm3 14l3-3H5l3 3z" fill="#415a77"/>148      </svg>149      <span>Sort by: Best</span>150    </div>151    <div class="chip active">Airlines</div>152    <div class="chip">Stops</div>153    <div class="chip">Duration</div>154    <div class="chip">Flight times</div>155  </div>156 157  <!-- Trip summary -->158  <div class="trip-summary">159    <div class="row1">LHR London → OSL Oslo</div>160    <div class="row2">161      <span>• Mon, Nov 06 · 1 adult · Economy</span>162      <svg class="edit-icon" viewBox="0 0 24 24">163        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#ffffff"/>164      </svg>165    </div>166  </div>167 168  <!-- Bottom sheet -->169  <div class="sheet">170    <div class="sheet-handle"></div>171    <div class="sheet-content">172      <div class="sheet-title">Airlines</div>173 174      <div class="select-all">175        <div>Select all</div>176        <div class="switch"></div>177      </div>178 179      <div class="divider"></div>180 181      <div class="list">182        <div class="item">183          <div class="item-label">Aer Lingus</div>184          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>185        </div>186        <div class="item">187          <div class="item-label">Air France</div>188          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>189        </div>190        <div class="item">191          <div class="item-label">Austrian Airlines</div>192          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>193        </div>194        <div class="item">195          <div class="item-label">British Airways</div>196          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>197        </div>198        <div class="item">199          <div class="item-label">Brussels Airlines</div>200          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>201        </div>202        <div class="item">203          <div class="item-label">Emirates Airline</div>204          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>205        </div>206        <div class="item">207          <div class="item-label">Eurowings</div>208          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>209        </div>210        <div class="item">211          <div class="item-label">Icelandair</div>212          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>213        </div>214        <div class="item">215          <div class="item-label">KLM</div>216          <svg class="checkbox" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="3"/></svg>217        </div>218      </div>219    </div>220 221    <div class="sheet-actions">222      <div class="reset-link">Reset</div>223      <div class="btn">Done</div>224    </div>225  </div>226 227  <!-- System bottom bar -->228  <div class="bottom-bar">229    <div class="gesture"></div>230  </div>231 232</div>233</body>234</html>