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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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  .statusbar {17    position: absolute; top: 0; left: 0; width: 100%; height: 112px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px; color: #1A1A1A; font-size: 40px;20  }21  .status-right { display: flex; align-items: center; gap: 22px; }22  .icon { display: inline-flex; align-items: center; justify-content: center; }23  /* Simple icons */24  .wifi svg, .battery svg { height: 36px; width: 36px; }25  .signal {26    width: 32px; height: 32px; border-left: 4px solid #616161; border-bottom: 4px solid #616161; transform: rotate(45deg);27    margin-right: 6px;28  }29 30  /* Header */31  .topbar {32    position: absolute; top: 120px; left: 0; width: 100%;33    display: flex; align-items: center;34    padding: 0 36px;35  }36  .back-btn {37    width: 64px; height: 64px; margin-right: 24px; color: #172757;38  }39  .title {40    font-size: 72px; font-weight: 800; color: #0E225E; letter-spacing: 0.5px;41  }42 43  /* Search field */44  .search {45    position: absolute; top: 260px; left: 36px; width: 1008px; height: 128px;46    border: 2px solid #B8C3DA; background: #F3F5FA; border-radius: 26px;47    display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;48  }49  .radio {50    width: 52px; height: 52px; border-radius: 50%; border: 4px solid #A9B4D0;51    display: inline-flex; align-items: center; justify-content: center; margin-right: 20px;52  }53  .radio::after {54    content: ""; width: 14px; height: 14px; background: #A9B4D0; border-radius: 50%;55  }56  .placeholder {57    color: #96A2BF; font-size: 42px;58  }59 60  /* Use location */61  .use-location {62    position: absolute; top: 420px; left: 36px; display: flex; align-items: center; gap: 18px;63    color: #E74F4C; font-size: 42px; font-weight: 600;64  }65  .divider {66    position: absolute; top: 520px; left: 30px; width: 1020px; height: 2px; background: #D6DCE7;67  }68 69  /* Keyboard */70  .keyboard {71    position: absolute; bottom: 0; left: 0; width: 100%; height: 900px;72    background: #151515; border-top-left-radius: 24px; border-top-right-radius: 24px;73    box-shadow: 0 -6px 16px rgba(0,0,0,0.15);74    color: #EDEDED;75  }76  .kb-top {77    height: 120px; display: flex; align-items: center; gap: 60px; padding: 0 40px; color: #CFCFCF; font-size: 34px;78  }79  .kb-top .tool { display: flex; align-items: center; gap: 12px; }80  .tool-icon {81    width: 56px; height: 56px; background: #222; border-radius: 12px; display: flex; align-items: center; justify-content: center;82  }83  .keys { padding: 0 28px; }84  .row { display: flex; justify-content: center; gap: 16px; margin: 22px 0; }85  .key {86    width: 92px; height: 120px; border-radius: 18px; background: #222; color: #EDEDED;87    display: flex; align-items: center; justify-content: center; font-size: 44px; box-shadow: inset 0 -2px 0 rgba(255,255,255,0.04);88  }89  .key-wide { width: 140px; }90  .key-space { flex: 1; min-width: 520px; }91  .key-dark { background: #1D1D1D; color: #BFBFBF; }92  .key-special { background: #2A2A2A; color: #DFDFDF; }93  .key-circle {94    width: 120px; height: 120px; border-radius: 60px; background: #92F1F0; color: #0A2A2A; font-weight: 700;95  }96  .kb-bottom { display: flex; align-items: center; gap: 16px; padding: 22px 28px 34px; }97  .emoji { width: 92px; height: 120px; border-radius: 18px; background: #222; font-size: 42px; display: flex; align-items: center; justify-content: center; }98  .comma { width: 92px; height: 120px; border-radius: 18px; background: #222; font-size: 60px; display: flex; align-items: center; justify-content: center; color: #BFBFBF; }99  .kb-nav { position: absolute; bottom: 24px; left: 0; width: 100%; display: flex; justify-content: center; }100  .home-pill { width: 360px; height: 14px; background: #E6E6E6; border-radius: 8px; opacity: 0.8; }101 102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="statusbar">109    <div class="status-left">5:58</div>110    <div class="status-right">111      <div class="wifi icon">112        <svg viewBox="0 0 24 24">113          <path d="M12 18c-1.2 0-2.2.9-2.2 2s1 2 2.2 2 2.2-.9 2.2-2-1-2-2.2-2z" fill="#616161"/>114          <path d="M3 9c5.5-4.7 12.5-4.7 18 0" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>115          <path d="M6 12c3.7-3 8.3-3 12 0" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>116          <path d="M9 15c2-1.6 4.1-1.6 6 0" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"/>117        </svg>118      </div>119      <div class="battery icon">120        <svg viewBox="0 0 28 18">121          <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#616161" stroke-width="2" fill="none"/>122          <rect x="3" y="5" width="12" height="8" fill="#8BC34A"/>123          <rect x="24" y="6" width="3" height="6" rx="1" fill="#616161"/>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- Header -->130  <div class="topbar">131    <div class="back-btn">132      <svg viewBox="0 0 24 24" width="64" height="64">133        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#172757" stroke-width="3" stroke-linecap="round"/>134      </svg>135    </div>136    <div class="title">Departure</div>137  </div>138 139  <!-- Search field -->140  <div class="search">141    <div class="radio"></div>142    <div class="placeholder">City, station, airport or port</div>143  </div>144 145  <!-- Use location -->146  <div class="use-location">147    <svg width="40" height="40" viewBox="0 0 24 24">148      <path d="M3 11 L20 5 L13 22 L11 13 Z" fill="#E74F4C"/>149    </svg>150    <span>Use location</span>151  </div>152  <div class="divider"></div>153 154  <!-- Keyboard -->155  <div class="keyboard">156    <div class="kb-top">157      <div class="tool"><div class="tool-icon">⌨️</div></div>158      <div class="tool"><div class="tool-icon">🙂</div><span>GIF</span></div>159      <div class="tool"><div class="tool-icon">Gɣ</div></div>160      <div class="tool"><div class="tool-icon">⚙️</div></div>161      <div class="tool"><div class="tool-icon">🎨</div></div>162      <div class="tool"><div class="tool-icon">🎤</div></div>163    </div>164 165    <div class="keys">166      <div class="row">167        <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>168        <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>169      </div>170      <div class="row">171        <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>172        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>173      </div>174      <div class="row">175        <div class="key key-wide key-dark">⌂</div>176        <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>177        <div class="key key-wide key-special">178          <svg viewBox="0 0 24 24" width="36" height="36">179            <path d="M3 6h12l6 6-6 6H3V6z" fill="none" stroke="#DFDFDF" stroke-width="2" stroke-linejoin="round"/>180            <path d="M12 9l-3 3 3 3" stroke="#DFDFDF" stroke-width="2" fill="none" stroke-linecap="round"/>181          </svg>182        </div>183      </div>184    </div>185 186    <div class="kb-bottom">187      <div class="key key-circle" style="background:#9FB7B7;color:#0F2F2F;font-weight:600;">?123</div>188      <div class="comma">,</div>189      <div class="emoji">😊</div>190      <div class="key key-space">space</div>191      <div class="key">.</div>192      <div class="key key-circle">193        <svg viewBox="0 0 24 24" width="44" height="44">194          <path d="M6 12l4 4 8-8" stroke="#0A2A2A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195        </svg>196      </div>197    </div>198    <div class="kb-nav"><div class="home-pill"></div></div>199  </div>200 201</div>202</body>203</html>