GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Departure UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    padding: 0 40px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #1A1A1A;23    font-weight: 600;24    font-size: 42px;25  }26  .status-icons {27    display: flex;28    align-items: center;29    gap: 24px;30  }31  .dot {32    width: 20px; height: 20px; border-radius: 50%; background: #1A1A1A; opacity: 0.7;33  }34  .wifi {35    width: 42px; height: 30px;36    position: relative;37  }38  .wifi::before, .wifi::after {39    content: ""; position: absolute; border: 3px solid #1A1A1A; border-radius: 50%; left: 0; right: 0; margin: auto;40  }41  .wifi::before { width: 40px; height: 20px; top: 0; border-bottom: none; }42  .wifi::after { width: 24px; height: 12px; top: 8px; border-bottom: none; }43  .battery {44    width: 44px; height: 24px; border: 3px solid #1A1A1A; border-radius: 5px; position: relative;45  }46  .battery::after {47    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #1A1A1A; border-radius: 2px;48  }49 50  /* Header */51  .header {52    display: flex;53    align-items: center;54    gap: 28px;55    padding: 10px 48px 0 48px;56  }57  .close-btn {58    width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;59  }60  .close-btn svg { width: 44px; height: 44px; stroke: #263159; stroke-width: 8; }61  .title {62    font-size: 72px; font-weight: 800; color: #13285D; letter-spacing: 0.5px;63  }64 65  /* Input field */66  .search-area {67    margin: 40px 48px 0 48px;68  }69  .input {70    height: 140px;71    background: #F0F2F7;72    border: 3px solid #C3CBD9;73    border-radius: 34px;74    display: flex; align-items: center;75    padding: 0 40px;76  }77  .radio {78    width: 46px; height: 46px; border-radius: 50%; border: 4px solid #B8C1D3; margin-right: 28px; box-sizing: border-box;79    background: #FFFFFF;80  }81  .placeholder {82    font-size: 44px; color: #8FA0BF;83  }84 85  /* Use location */86  .use-location {87    margin: 36px 48px;88    display: flex; align-items: center; gap: 22px;89    color: #D9534F; font-size: 44px; font-weight: 600;90  }91  .use-location svg { width: 42px; height: 42px; fill: #D9534F; }92  .divider {93    height: 2px; background: #E5E9EF; margin: 22px 30px 0 30px;94  }95 96  /* Keyboard mock */97  .keyboard {98    position: absolute;99    left: 0; right: 0; bottom: 80px;100    height: 900px;101    background: #1F1B1A;102    border-top-left-radius: 26px;103    border-top-right-radius: 26px;104    box-shadow: 0 -6px 12px rgba(0,0,0,0.15);105    padding: 38px 32px;106    color: #FFFFFF;107  }108  .kb-top {109    display: flex; gap: 42px; align-items: center; padding-bottom: 24px;110  }111  .kb-icon {112    width: 76px; height: 76px; border-radius: 20px; background: #2A2524;113    display: flex; align-items: center; justify-content: center; border: 1px solid #3A3331;114  }115  .kb-icon svg { width: 40px; height: 40px; fill: #FFFFFF; opacity: 0.9; }116 117  .kb-row {118    display: flex; justify-content: space-between; margin-top: 24px;119  }120  .key {121    width: 90px; height: 110px; background: #2A2524; border: 1px solid #3A3331; border-radius: 22px;122    display: flex; align-items: center; justify-content: center; font-size: 48px; color: #FFFFFF;123  }124  .key-wide { width: 180px; }125  .spacebar { flex: 1; height: 120px; background: #2A2524; border: 1px solid #3A3331; border-radius: 22px; margin: 0 18px; }126  .action {127    width: 160px; height: 120px; background: #EBD0BF; color: #2B1F1A; border-radius: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 44px;128  }129  .check {130    width: 160px; height: 120px; background: #F6DCC8; color: #2B1F1A; border-radius: 36px; display: flex; align-items: center; justify-content: center; font-size: 56px; font-weight: 800;131  }132 133  /* Gesture bar */134  .gesture-bar {135    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);136    width: 500px; height: 10px; background: #E6E6E6; border-radius: 6px;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div>9:56</div>146    <div class="status-icons">147      <div class="dot"></div>148      <div class="dot"></div>149      <div class="dot"></div>150      <div class="wifi"></div>151      <div class="battery"></div>152    </div>153  </div>154 155  <!-- Header -->156  <div class="header">157    <div class="close-btn">158      <svg viewBox="0 0 24 24">159        <line x1="5" y1="5" x2="19" y2="19"></line>160        <line x1="19" y1="5" x2="5" y2="19"></line>161      </svg>162    </div>163    <div class="title">Departure</div>164  </div>165 166  <!-- Search/Input -->167  <div class="search-area">168    <div class="input">169      <div class="radio"></div>170      <div class="placeholder">City, station, airport or port</div>171    </div>172  </div>173 174  <!-- Use location -->175  <div class="use-location">176    <svg viewBox="0 0 24 24">177      <path d="M12 2l3 8-8 3 8 3-3 8 9-14z"></path>178    </svg>179    <div>Use location</div>180  </div>181 182  <div class="divider"></div>183 184  <!-- Keyboard mock -->185  <div class="keyboard">186    <div class="kb-top">187      <div class="kb-icon">188        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle></svg>189      </div>190      <div class="kb-icon">191        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"></rect></svg>192      </div>193      <div class="kb-icon">194        <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="white" stroke-width="2" fill="none"></path></svg>195      </div>196      <div class="kb-icon">197        <svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 016 6c0 4.5-6 12-6 12s-6-7.5-6-12a6 6 0 016-6z" fill="#fff"></path></svg>198      </div>199    </div>200 201    <!-- Letter rows -->202    <div class="kb-row">203      <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>204    </div>205    <div class="kb-row">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>207    </div>208    <div class="kb-row">209      <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>210      <div class="key-wide">⌫</div>211    </div>212    <div class="kb-row">213      <div class="action">?123</div>214      <div class="key">,</div>215      <div class="key">🙂</div>216      <div class="spacebar"></div>217      <div class="key">.</div>218      <div class="check">✓</div>219    </div>220  </div>221 222  <div class="gesture-bar"></div>223</div>224</body>225</html>