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>Where from - Airports</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;13    color:#111;14  }15 16  /* Status bar */17  .status-bar { height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#202124; font-size:34px; }18  .status-left { display:flex; align-items:center; gap:22px; }19  .status-right { display:flex; align-items:center; gap:24px; }20  .dot { width:10px; height:10px; background:#6e6e6e; border-radius:50%; display:inline-block; }21 22  /* Cancel link */23  .top-actions { position:absolute; left:36px; right:36px; top:92px; height:72px; display:flex; align-items:center; justify-content:flex-end; }24  .cancel { color:#1a73e8; font-size:40px; font-weight:600; }25 26  /* Content */27  .content { padding:140px 36px 0 36px; }28  .title { font-size:64px; font-weight:700; margin-bottom:36px; }29  .input-box {30    border:1px solid #C7C7C7; border-radius:18px; height:120px;31    display:flex; align-items:center; padding:0 18px; gap:18px;32  }33  .chip {34    display:flex; align-items:center; gap:14px; background:#EFEFEF; border-radius:16px; padding:16px 18px;35    font-size:38px; color:#202124;36  }37  .chip .code { font-weight:800; letter-spacing:0.5px; }38  .chip .close {39    width:40px; height:40px; border-radius:50%; background:#D5D5D5; color:#333; display:flex; align-items:center; justify-content:center;40    font-size:28px; font-weight:700;41  }42  .input-placeholder { font-size:40px; color:#8A8A8A; flex:1; position:relative; }43  .input-placeholder .caret { display:inline-block; width:2px; height:48px; background:#1a73e8; margin-left:6px; vertical-align:middle; }44 45  .hint { font-size:34px; color:#6f6f6f; margin:22px 0 28px 6px; }46  .divider { height:1px; background:#E6E6E6; margin:0 -36px 18px -36px; }47 48  .section-row { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }49  .section-title { font-size:40px; font-weight:700; color:#202124; }50  .chevron svg { width:40px; height:40px; }51  .subheading { font-size:36px; color:#505050; margin:24px 0 18px 0; font-weight:600; }52 53  /* List items */54  .airport-item { display:flex; align-items:flex-start; gap:28px; padding:26px 0; }55  .icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }56  .airport-text { flex:1; }57  .airport-title { font-size:40px; color:#202124; }58  .airport-title .code { font-weight:800; }59  .airport-sub { font-size:34px; color:#6f6f6f; margin-top:8px; }60  .checkbox { width:56px; height:56px; border:2px solid #BDBDBD; border-radius:8px; }61  .checkbox.checked { border-color:#1a73e8; background:#1a73e8; position:relative; }62  .checkbox.checked:after {63    content:''; position:absolute; left:12px; top:20px; width:24px; height:14px; border-left:4px solid #fff; border-bottom:4px solid #fff; transform:rotate(-45deg);64  }65 66  /* Keyboard (mock) */67  .keyboard {68    position:absolute; left:0; bottom:0; width:1080px; height:900px; background:#121212; color:#eaeaea;69    border-top-left-radius:20px; border-top-right-radius:20px;70    box-shadow:0 -2px 0 rgba(0,0,0,0.1);71    padding:22px 24px;72  }73  .kb-toolbar { display:flex; align-items:center; gap:34px; padding:14px 0 18px 0; }74  .kb-tool { width:auto; padding:8px 16px; border-radius:12px; background:#1e1e1e; font-size:28px; color:#d0d0d0; }75  .kb-rows { display:flex; flex-direction:column; gap:22px; margin-top:6px; }76  .kb-row { display:flex; gap:18px; justify-content:center; }77  .key {78    background:#1f1f1f; color:#f2f2f2; border-radius:18px; height:120px; min-width:88px;79    display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:600;80  }81  .key.wide { min-width:140px; }82  .key.fill { background:#8cf3f0; color:#08302f; font-weight:800; border-radius:32px; }83 84  /* Simple SVG icons */85  .plane svg, .pin svg { width:56px; height:56px; fill:none; stroke:#202124; stroke-width:2.5; }86  .pin svg { stroke:#202124; }87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status bar -->93  <div class="status-bar">94    <div class="status-left">95      <div>3:27</div>96      <span class="dot"></span>97      <span class="dot"></span>98      <span class="dot"></span>99    </div>100    <div class="status-right">101      <span class="dot"></span>102      <span class="dot"></span>103      <div style="width:40px; height:20px; border:2px solid #666; border-radius:4px; position:relative;">104        <div style="position:absolute; right:-8px; top:4px; width:6px; height:12px; background:#666; border-radius:2px;"></div>105        <div style="position:absolute; left:2px; top:2px; right:2px; bottom:2px; background:#666;"></div>106      </div>107    </div>108  </div>109 110  <!-- Cancel -->111  <div class="top-actions">112    <div class="cancel">Cancel</div>113  </div>114 115  <!-- Main content -->116  <div class="content">117    <div class="title">Where from?</div>118 119    <div class="input-box">120      <div class="chip">121        <span class="code">DEL</span>122        <span>New Delhi</span>123        <span class="close">×</span>124      </div>125      <div class="input-placeholder">Add another airport<span class="caret"></span></div>126    </div>127 128    <div class="hint">Select multiple airports at once and compare flights</div>129 130    <div class="divider"></div>131 132    <div class="section-row">133      <div class="section-title">Included in your search (1)</div>134      <div class="chevron">135        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#5f6368" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>136      </div>137    </div>138 139    <div class="subheading">Airports near you</div>140 141    <!-- Airport list -->142    <div class="airport-item">143      <div class="icon plane">144        <svg viewBox="0 0 24 24"><path d="M2 13l8-2 4 2 8 3-1 2-7-2-3 4-2-1 2-4-7-2z"/></svg>145      </div>146      <div class="airport-text">147        <div class="airport-title"><span class="code">DEL</span> Delhi International Airport</div>148        <div class="airport-sub">New Delhi, Delhi NCR, India</div>149      </div>150      <div class="checkbox checked"></div>151    </div>152 153    <div class="airport-item">154      <div class="icon plane">155        <svg viewBox="0 0 24 24"><path d="M2 13l8-2 4 2 8 3-1 2-7-2-3 4-2-1 2-4-7-2z"/></svg>156      </div>157      <div class="airport-text">158        <div class="airport-title"><span class="code">LIS</span> Humberto Delgado Airport</div>159        <div class="airport-sub">Lisbon, Lisbon Region, Portugal</div>160      </div>161      <div class="checkbox"></div>162    </div>163 164    <div class="airport-item">165      <div class="icon plane">166        <svg viewBox="0 0 24 24"><path d="M2 13l8-2 4 2 8 3-1 2-7-2-3 4-2-1 2-4-7-2z"/></svg>167      </div>168      <div class="airport-text">169        <div class="airport-title"><span class="code">AGP</span> Malaga Airport</div>170        <div class="airport-sub">Málaga, Andalucía, Spain</div>171      </div>172      <div class="checkbox"></div>173    </div>174 175    <div class="airport-item">176      <div class="icon pin">177        <svg viewBox="0 0 24 24"><path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z"/><circle cx="12" cy="9" r="3"/></svg>178      </div>179      <div class="airport-text">180        <div class="airport-title">Santa Cruz de Tenerife · All airports</div>181        <div class="airport-sub">Canary Islands, Spain</div>182      </div>183      <div class="checkbox"></div>184    </div>185  </div>186 187  <!-- Keyboard mock -->188  <div class="keyboard">189    <div class="kb-toolbar">190      <div class="kb-tool">◧</div>191      <div class="kb-tool">😊</div>192      <div class="kb-tool">GIF</div>193      <div class="kb-tool">G</div>194      <div class="kb-tool">⚙︎</div>195      <div class="kb-tool">🎨</div>196      <div class="kb-tool">🎤</div>197    </div>198 199    <div class="kb-rows">200      <div class="kb-row">201        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>202      </div>203      <div class="kb-row">204        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>205      </div>206      <div class="kb-row">207        <div class="key wide">⇧</div>208        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>209        <div class="key wide">⌫</div>210      </div>211      <div class="kb-row">212        <div class="key wide">?123</div>213        <div class="key wide">,</div>214        <div class="key wide">😊</div>215        <div class="key wide">•</div>216        <div class="key fill">✓</div>217      </div>218    </div>219  </div>220 221</div>222</body>223</html>