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>Departure Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #FFFFFF; border-radius: 24px;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px; padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #2B2B2B; font-size: 42px;21  }22  .status-left { display: flex; align-items: center; gap: 24px; }23  .status-right { display: flex; align-items: center; gap: 28px; }24  .icon-wifi svg, .icon-battery svg { display: block; }25  .icon-wifi svg path, .icon-battery svg path { fill: #4A4A4A; }26 27  /* Header */28  .header {29    position: absolute; top: 120px; left: 36px; right: 36px;30    height: 140px; display: flex; align-items: center; gap: 28px;31  }32  .back-btn {33    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;34    border-radius: 32px; color: #132B63;35  }36  .header-title {37    font-size: 72px; font-weight: 800; color: #132B63; letter-spacing: 0.3px;38  }39 40  /* Search input */41  .search-wrap {42    position: absolute; top: 280px; left: 36px; right: 36px;43  }44  .search-input {45    height: 132px; border: 3px solid #C5CEDD; border-radius: 28px;46    background: #F4F7FB; display: flex; align-items: center; padding: 0 32px; gap: 28px;47  }48  .radio-circle {49    width: 48px; height: 48px; border-radius: 50%;50    border: 4px solid #AEB7CB; box-sizing: border-box;51  }52  .search-text {53    font-size: 48px; color: #2D3B52;54  }55 56  /* Suggestion item */57  .suggestion {58    position: absolute; top: 450px; left: 36px; right: 36px;59    display: flex; align-items: center; gap: 24px;60    color: #132B63;61  }62  .pin {63    width: 48px; height: 48px; border-radius: 50%;64    background: #E7EEF9; display: flex; align-items: center; justify-content: center;65  }66  .suggestion-text { font-size: 46px; color: #2E3D5E; }67  .suggestion-text .light { color: #8FA1BF; }68 69  .divider {70    position: absolute; top: 560px; left: 36px; right: 36px;71    height: 2px; background: #D7DEE9;72  }73 74  /* Keyboard mock */75  .keyboard {76    position: absolute; left: 0; right: 0; bottom: 0;77    height: 960px; background: #151719; color: #EDEDED;78    border-top-left-radius: 24px; border-top-right-radius: 24px;79  }80  .kb-top {81    height: 120px; display: flex; align-items: center; justify-content: space-between;82    padding: 0 40px; font-size: 44px; color: #BFC5CC;83  }84  .kb-rows { padding: 24px 24px 120px; }85  .row { display: flex; gap: 16px; justify-content: center; margin-bottom: 22px; }86  .key {87    width: 92px; height: 120px; background: #2A2E33; border-radius: 18px;88    display: flex; align-items: center; justify-content: center;89    font-size: 48px; color: #EDEDED;90  }91  .key.wide { width: 160px; }92  .key.mid { width: 128px; }93  .key.action { background: #98F7F5; color: #0E2D33; font-weight: 700; }94 95  /* Home indicator */96  .home-indicator {97    position: absolute; bottom: 24px; left: 50%;98    transform: translateX(-50%);99    width: 220px; height: 10px; background: #D9D9D9; border-radius: 8px; opacity: 0.9;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status bar -->107  <div class="status-bar">108    <div class="status-left">109      <div>5:58</div>110      <div>28°</div>111      <div style="width:36px;height:36px;border-radius:8px;background:#C9C9C9;"></div>112      <div style="width:36px;height:36px;border-radius:8px;background:#C9C9C9;"></div>113    </div>114    <div class="status-right">115      <div class="icon-wifi">116        <svg width="44" height="44" viewBox="0 0 24 24">117          <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 5c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 5l2 2 2-2c-2-1-4-1-6 0z"/>118        </svg>119      </div>120      <div class="icon-battery">121        <svg width="44" height="44" viewBox="0 0 24 24">122          <path d="M18 7h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v-2h-12v2h-1a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1v2h12V7z"/>123        </svg>124      </div>125    </div>126  </div>127 128  <!-- Header -->129  <div class="header">130    <div class="back-btn" aria-label="Close">131      <svg width="44" height="44" viewBox="0 0 24 24">132        <path d="M6 6l12 12M18 6L6 18" stroke="#132B63" stroke-width="2" stroke-linecap="round"/>133      </svg>134    </div>135    <div class="header-title">Departure</div>136  </div>137 138  <!-- Search Input -->139  <div class="search-wrap">140    <div class="search-input">141      <div class="radio-circle"></div>142      <div class="search-text">Delaware</div>143    </div>144  </div>145 146  <!-- Suggestion -->147  <div class="suggestion">148    <div class="pin">149      <svg width="34" height="34" viewBox="0 0 24 24">150        <path d="M12 2c3.31 0 6 2.69 6 6 0 4.5-6 12-6 12S6 12.5 6 8c0-3.31 2.69-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#132B63"/>151      </svg>152    </div>153    <div class="suggestion-text">Delaware, OH <span class="light">USA</span></div>154  </div>155 156  <div class="divider"></div>157 158  <!-- Keyboard mock -->159  <div class="keyboard">160    <div class="kb-top">161      <div style="display:flex;align-items:center;gap:18px;">162        <div style="width:64px;height:64px;border-radius:16px;background:#2A2E33;display:flex;align-items:center;justify-content:center;">163          <svg width="36" height="36" viewBox="0 0 24 24">164            <path d="M4 4h16v16H4z M8 8h8v8H8z" fill="#BFC5CC"/>165          </svg>166        </div>167        <div>Delaware</div>168      </div>169      <div style="width:64px;height:64px;border-radius:16px;background:#2A2E33;display:flex;align-items:center;justify-content:center;">170        <svg width="36" height="36" viewBox="0 0 24 24">171          <path d="M10 3l8 9-8 9v-6H3v-6h7V3z" fill="#BFC5CC"/>172        </svg>173      </div>174    </div>175 176    <div class="kb-rows">177      <div class="row">178        <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>179        <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>180      </div>181      <div class="row">182        <div class="key mid">a</div><div class="key mid">s</div><div class="key mid">d</div><div class="key mid">f</div><div class="key mid">g</div>183        <div class="key mid">h</div><div class="key mid">j</div><div class="key mid">k</div><div class="key mid">l</div>184      </div>185      <div class="row">186        <div class="key wide">187          <svg width="38" height="38" viewBox="0 0 24 24">188            <path d="M8 12l4-4v3h7v2h-7v3l-4-4z" fill="#EDEDED"/>189          </svg>190        </div>191        <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>192        <div class="key">n</div><div class="key">m</div>193        <div class="key wide">194          <svg width="36" height="36" viewBox="0 0 24 24">195            <path d="M6 19l8-8-8-8v16zm10 0h2V3h-2v16z" fill="#EDEDED"/>196          </svg>197        </div>198      </div>199      <div class="row">200        <div class="key wide">?123</div>201        <div class="key wide">,</div>202        <div class="key" style="width:420px;">space</div>203        <div class="key wide">.</div>204        <div class="key action" style="width:140px;">✓</div>205      </div>206    </div>207  </div>208 209  <div class="home-indicator"></div>210</div>211</body>212</html>