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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF; border-radius: 0; box-shadow: none;12    color: #111;13  }14 15  /* Top status bar */16  .status-bar {17    height: 120px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    padding: 0 40px;22    color: #2E2E2E;23    font-weight: 600;24    font-size: 34px;25  }26  .status-icons { display: flex; align-items: center; gap: 22px; color: #757575; }27  .dot { width: 10px; height: 10px; background: #757575; border-radius: 50%; display: inline-block; }28  .cancel-link { color: #1a73e8; font-size: 38px; font-weight: 600; }29 30  /* Title and search */31  .content-wrap { padding: 20px 60px; }32  .title { font-size: 70px; font-weight: 800; margin: 30px 0 30px; letter-spacing: -0.5px; }33  .search-box {34    border: 2px solid #BDBDBD; border-radius: 18px; height: 120px;35    display: flex; align-items: center; padding: 0 28px; font-size: 38px; color: #222;36  }37  .search-box input {38    border: none; outline: none; font-size: 38px; width: 100%; color: #222; background: transparent;39  }40  .hint { margin-top: 24px; color: #6E6E6E; font-size: 30px; }41  .divider { height: 1px; background: #E5E5E5; margin: 36px 0; }42 43  /* List section */44  .section-title { font-size: 38px; font-weight: 700; color: #3B3B3B; margin-bottom: 14px; }45  .list { display: flex; flex-direction: column; gap: 16px; }46  .item {47    display: grid; grid-template-columns: 90px 1fr 70px; align-items: center;48    padding: 22px 0; border-bottom: 1px solid #EEEEEE;49  }50  .icon-wrap { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }51  .primary {52    font-size: 36px; font-weight: 700; color: #121212;53  }54  .secondary { font-size: 30px; color: #6F6F6F; margin-top: 6px; }55  .checkbox {56    width: 48px; height: 48px; border: 3px solid #BDBDBD; border-radius: 6px; justify-self: end;57  }58 59  /* Keyboard placeholder */60  .keyboard {61    position: absolute; bottom: 0; left: 0; width: 100%; height: 900px;62    background: #151515; border-top: 1px solid #2A2A2A; padding: 26px 30px;63    box-sizing: border-box;64  }65  .kb-top { display: flex; gap: 22px; margin-bottom: 24px; }66  .kb-suggestion {67    height: 70px; padding: 0 24px; border-radius: 14px; background: #242424; color: #CFCFCF;68    display: flex; align-items: center; font-size: 30px;69  }70  .keys {71    display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 120px;72    gap: 16px; margin-top: 10px;73  }74  .key {75    background: #222; border-radius: 18px; color: #ECECEC; display: flex; align-items: center; justify-content: center;76    font-size: 34px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);77  }78  .key.wide { grid-column: span 2; }79  .key.enter {80    background: #89f0ea; color: #0c3b38; font-weight: 700; border-radius: 28px;81  }82  .kb-bottom { display: flex; align-items: center; gap: 18px; margin-top: 18px; }83  .key.tool { height: 120px; width: 120px; border-radius: 30px; }84  .space { flex: 1; height: 120px; background: #222; border-radius: 22px; }85 86  /* SVG icon coloring */87  .icon { width: 50px; height: 50px; }88  .icon path { stroke: #666; stroke-width: 1.7; fill: none; }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status-bar">96    <div style="display:flex; align-items:center; gap:18px;">97      <div>3:30</div>98      <div class="status-icons">99        <span class="dot"></span>100        <span class="dot"></span>101        <span class="dot"></span>102        <span class="dot"></span>103      </div>104    </div>105    <div class="cancel-link">Cancel</div>106  </div>107 108  <div class="content-wrap">109    <div class="title">Where from?</div>110 111    <div class="search-box">112      <input type="text" placeholder="Airport or city" />113    </div>114    <div class="hint">Select multiple airports at once and compare flights</div>115 116    <div class="divider"></div>117 118    <div class="section-title">Airports near you</div>119 120    <div class="list">121      <!-- Item 1 -->122      <div class="item">123        <div class="icon-wrap">124          <svg class="icon" viewBox="0 0 24 24">125            <path d="M2 12l10 2 4-9 2 1-4 9 6 2-1 2-7-2-6 3-2-1 5-4-7-3z"></path>126          </svg>127        </div>128        <div>129          <div class="primary"><span style="font-weight:800;">DEL</span> Delhi International Airport</div>130          <div class="secondary">New Delhi, Delhi NCR, India</div>131        </div>132        <div class="checkbox"></div>133      </div>134 135      <!-- Item 2 -->136      <div class="item">137        <div class="icon-wrap">138          <svg class="icon" viewBox="0 0 24 24">139            <path d="M2 12l10 2 4-9 2 1-4 9 6 2-1 2-7-2-6 3-2-1 5-4-7-3z"></path>140          </svg>141        </div>142        <div>143          <div class="primary"><span style="font-weight:800;">LIS</span> Humberto Delgado Airport</div>144          <div class="secondary">Lisbon, Lisbon Region, Portugal</div>145        </div>146        <div class="checkbox"></div>147      </div>148 149      <!-- Item 3 -->150      <div class="item">151        <div class="icon-wrap">152          <svg class="icon" viewBox="0 0 24 24">153            <path d="M2 12l10 2 4-9 2 1-4 9 6 2-1 2-7-2-6 3-2-1 5-4-7-3z"></path>154          </svg>155        </div>156        <div>157          <div class="primary"><span style="font-weight:800;">AGP</span> Malaga Airport</div>158          <div class="secondary">Málaga, Andalucía, Spain</div>159        </div>160        <div class="checkbox"></div>161      </div>162 163      <!-- Item 4 (location pin for all airports) -->164      <div class="item">165        <div class="icon-wrap">166          <svg class="icon" viewBox="0 0 24 24">167            <path d="M12 2c-4.4 0-8 3.6-8 8 0 5.3 8 12 8 12s8-6.7 8-12c0-4.4-3.6-8-8-8z"></path>168            <path d="M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path>169          </svg>170        </div>171        <div>172          <div class="primary">Santa Cruz de Tenerife · All airports</div>173          <div class="secondary">Canary Islands, Spain</div>174        </div>175        <div class="checkbox"></div>176      </div>177 178      <!-- Item 5 -->179      <div class="item">180        <div class="icon-wrap">181          <svg class="icon" viewBox="0 0 24 24">182            <path d="M2 12l10 2 4-9 2 1-4 9 6 2-1 2-7-2-6 3-2-1 5-4-7-3z"></path>183          </svg>184        </div>185        <div>186          <div class="primary"><span style="font-weight:800;">TFN</span> Tenerife North–Ciudad de La Laguna Airport</div>187          <div class="secondary">Canary Islands, Spain</div>188        </div>189        <div class="checkbox"></div>190      </div>191    </div>192  </div>193 194  <!-- Keyboard placeholder -->195  <div class="keyboard">196    <div class="kb-top">197      <div class="kb-suggestion">qwerty</div>198      <div class="kb-suggestion">suggestion</div>199      <div class="kb-suggestion">GIF</div>200      <div class="kb-suggestion">settings</div>201    </div>202    <div class="keys">203      <!-- Row 1 -->204      <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>205      <!-- Row 2 -->206      <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><div class="key wide">⌫</div>207      <!-- Row 3 -->208      <div class="key wide">⇧</div><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><div class="key">.</div><div class="key enter">✓</div>209    </div>210    <div class="kb-bottom">211      <div class="key tool">?123</div>212      <div class="key tool">,</div>213      <div class="key tool">☺</div>214      <div class="space"></div>215      <div class="key tool">🎤</div>216    </div>217  </div>218 219</div>220</body>221</html>