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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -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; color: #1C274C;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: #1B263B; font-weight: 600; font-size: 42px;21  }22  .status-left { display: flex; align-items: center; gap: 20px; }23  .status-right { display: flex; align-items: center; gap: 26px; font-size: 34px; color: #1B263B; }24  .sb-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }25  .sb-icon svg { width: 46px; height: 46px; fill: none; stroke: #3A445A; stroke-width: 3; }26 27  /* Header */28  .header {29    position: absolute; top: 120px; left: 0; right: 0;30    height: 160px; padding: 0 40px; display: flex; align-items: center;31  }32  .close-btn {33    width: 96px; height: 96px; border-radius: 48px;34    display: inline-flex; align-items: center; justify-content: center;35    margin-right: 16px; cursor: default;36  }37  .close-btn svg { width: 64px; height: 64px; stroke: #1C274C; stroke-width: 10; }38  .title {39    font-size: 72px; font-weight: 800; letter-spacing: 0.5px; color: #0F1F4D;40  }41 42  /* Selected search card */43  .search-card {44    position: absolute; top: 300px; left: 40px; right: 40px;45    height: 150px; border-radius: 28px;46    background: #F4F6FB; border: 2px solid #C9D2E8;47    display: flex; align-items: center; padding: 0 40px; gap: 30px;48  }49  .radio {50    width: 56px; height: 56px; border-radius: 50%;51    border: 4px solid #C9D2E8; display: inline-flex; align-items: center; justify-content: center;52    background: #FFFFFF;53  }54  .radio-dot { width: 20px; height: 20px; border-radius: 50%; background: #C9D2E8; }55  .search-text { font-size: 54px; font-weight: 600; color: #14265A; }56 57  /* List */58  .list { position: absolute; top: 500px; left: 40px; right: 40px; }59  .item {60    display: flex; align-items: center; gap: 34px;61    font-size: 48px; color: #23345E; padding: 36px 4px;62  }63  .item .muted { color: #9AA6C1; font-weight: 600; }64  .divider {65    height: 2px; background: #E7ECF6; margin: 0 0 0 0;66  }67  .list-icon {68    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;69  }70  .pin svg, .train svg { width: 60px; height: 60px; }71  .pin svg path, .train svg path { fill: #2E57FF; }72 73  /* Keyboard overlay (approximation) */74  .keyboard {75    position: absolute; bottom: 0; left: 0; right: 0;76    height: 900px; background: #1C1C1F; color: #E8EAED;77    box-shadow: 0 -12px 30px rgba(0,0,0,0.25);78  }79  .kb-suggestions {80    height: 120px; display: flex; align-items: center; gap: 26px;81    padding: 0 32px; background: #202125; font-size: 44px;82  }83  .suggest { padding: 18px 28px; background: #2A2B2F; border-radius: 24px; color: #D9DDE4; }84  .kb-rows { padding: 26px 24px; display: grid; gap: 24px; }85  .row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; }86  .row.mid { grid-template-columns: repeat(9, 1fr); padding: 0 36px; }87  .row.bot { grid-template-columns: 1.3fr repeat(7, 1fr) 1.4fr 1.4fr; }88  .key {89    height: 120px; background: #2B2C31; border-radius: 28px;90    display: flex; align-items: center; justify-content: center; font-size: 52px;91    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);92  }93  .key.light { background: #DDE3F4; color: #1C274C; }94  .key.wide { grid-column: span 2; }95  .kb-bottom-bar {96    position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center;97  }98  .home-indicator {99    width: 360px; height: 12px; background: #D1D5DB; border-radius: 6px; opacity: 0.7;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">8:57</div>109    <div class="status-right">110      <span class="sb-icon">111        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="6" y1="12" x2="18" y2="12"></line></svg>112      </span>113      <span class="sb-icon">114        <svg viewBox="0 0 24 24"><path d="M2 12c4-4 16-4 20 0" /><path d="M5 12c2-2 12-2 14 0" /><circle cx="12" cy="12" r="2"></circle></svg>115      </span>116      <span class="sb-icon">117        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="16" height="12" rx="2" ry="2"></rect><rect x="19.5" y="9" width="2.5" height="6" rx="1"></rect></svg>118      </span>119      <span>100%</span>120    </div>121  </div>122 123  <!-- Header -->124  <div class="header">125    <div class="close-btn">126      <svg viewBox="0 0 24 24"><line x1="4" y1="4" x2="20" y2="20"></line><line x1="20" y1="4" x2="4" y2="20"></line></svg>127    </div>128    <div class="title">Departure</div>129  </div>130 131  <!-- Selected Search Card -->132  <div class="search-card">133    <div class="radio"><div class="radio-dot"></div></div>134    <div class="search-text">New York</div>135  </div>136 137  <!-- List -->138  <div class="list">139    <div class="item">140      <div class="list-icon pin">141        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>142      </div>143      <div>New York, NY <span class="muted">USA</span></div>144    </div>145    <div class="divider"></div>146 147    <div class="item">148      <div class="list-icon train">149        <svg viewBox="0 0 24 24"><path d="M7 2h10a3 3 0 0 1 3 3v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V5a3 3 0 0 1 3-3zm-2 14h14M8 20l-2 2m10-2l2 2M6 9h12M8 6h8"/></svg>150      </div>151      <div>Penn Station, NY <span class="muted">USA</span></div>152    </div>153    <div class="divider"></div>154 155    <div class="item">156      <div class="list-icon pin">157        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>158      </div>159      <div>New Rochelle, NY <span class="muted">USA</span></div>160    </div>161    <div class="divider"></div>162 163    <div class="item">164      <div class="list-icon train">165        <svg viewBox="0 0 24 24"><path d="M7 2h10a3 3 0 0 1 3 3v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V5a3 3 0 0 1 3-3zm-2 14h14M8 20l-2 2m10-2l2 2M6 9h12M8 6h8"/></svg>166      </div>167      <div>New Rochelle Station, NY <span class="muted">USA</span></div>168    </div>169    <div class="divider"></div>170 171    <div class="item">172      <div class="list-icon pin">173        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>174      </div>175      <div>New Paltz, NY <span class="muted">USA</span></div>176    </div>177    <div class="divider"></div>178 179    <div class="item">180      <div class="list-icon pin">181        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>182      </div>183      <div>West New York, NJ <span class="muted">USA</span></div>184    </div>185    <div class="divider"></div>186 187    <div class="item">188      <div class="list-icon pin">189        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>190      </div>191      <div>New City, NY <span class="muted">USA</span></div>192    </div>193    <div class="divider"></div>194  </div>195 196  <!-- Keyboard -->197  <div class="keyboard">198    <div class="kb-suggestions">199      <div class="sb-icon" style="margin-right:10px;">200        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4" ry="4" fill="#2B2C31"></rect><circle cx="8" cy="16" r="2" fill="#DDE3F4"></circle></svg>201      </div>202      <div class="suggest">York</div>203      <div class="suggest">Yorkshire</div>204      <div class="suggest">Yorker</div>205      <div style="margin-left:auto;" class="sb-icon">206        <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 1 9 9v6l-4-2-3 3-3-3-4 2v-6a9 9 0 0 1 9-9z" fill="#DDE3F4"></path></svg>207      </div>208    </div>209    <div class="kb-rows">210      <div class="row">211        <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>212      </div>213      <div class="row mid">214        <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>215      </div>216      <div class="row mid" style="grid-template-columns: repeat(9, 1fr);">217        <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">.</div>218      </div>219      <div class="row bot">220        <div class="key light">?123</div>221        <div class="key">◀</div><div class="key">🙂</div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>222        <div class="key">⌫</div>223        <div class="key light">✓</div>224      </div>225    </div>226    <div class="kb-bottom-bar"><div class="home-indicator"></div></div>227  </div>228 229</div>230</body>231</html>