GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>New list - Mobile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top app bar */16  .app-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 220px;22    background: #15376F; /* navy */23    color: #ffffff;24  }25  .status-row {26    height: 60px;27    display: flex;28    align-items: center;29    padding: 0 30px;30    font-size: 34px;31    opacity: 0.95;32  }33  .status-left { flex: 1; }34  .status-right {35    display: flex;36    gap: 24px;37    align-items: center;38  }39  .status-icon {40    width: 26px; height: 26px;41    border-radius: 50%;42    border: 2px solid rgba(255,255,255,0.7);43    opacity: 0.9;44  }45 46  .title-row {47    display: flex;48    align-items: center;49    padding: 14px 30px;50    gap: 26px;51  }52  .title-row h1 {53    margin: 0;54    font-size: 64px;55    font-weight: 700;56    letter-spacing: 0.5px;57  }58  .back-icon {59    width: 64px; height: 64px;60  }61  .back-icon svg { width: 100%; height: 100%; }62 63  /* Content area */64  .content {65    position: absolute;66    top: 220px;67    left: 0;68    right: 0;69    bottom: 980px; /* space for keyboard */70    padding: 40px 30px;71    background: #ffffff;72  }73  .label-row {74    display: flex;75    justify-content: space-between;76    align-items: center;77    color: #1f2a37;78    margin-bottom: 24px;79  }80  .label-row .label {81    font-size: 42px;82    font-weight: 600;83  }84  .label-row .count {85    font-size: 36px;86    color: #6b7280;87  }88 89  .input-field {90    width: 1020px;91    height: 140px;92    border: 3px solid #2F6FCD;93    border-radius: 10px;94    display: flex;95    align-items: center;96    padding: 0 24px;97    box-sizing: border-box;98    font-size: 50px;99    color: #111827;100  }101  .input-text {102    flex: 1;103  }104  .clear-btn {105    width: 80px; height: 80px;106    border-radius: 40px;107    border: 2px solid #cfd8dc;108    display: flex; justify-content: center; align-items: center;109    color: #374151;110    background: #ffffff;111  }112 113  .save-area {114    position: absolute;115    left: 0; right: 0;116    bottom: 1000px;117    padding: 0 30px;118  }119  .primary-btn {120    width: 1020px;121    height: 120px;122    background: #2F6FCD;123    color: #ffffff;124    border-radius: 12px;125    display: flex; justify-content: center; align-items: center;126    font-size: 48px; font-weight: 700;127    box-shadow: 0 6px 12px rgba(47,111,205,0.35);128  }129 130  /* Keyboard mock */131  .keyboard {132    position: absolute;133    left: 0; right: 0; bottom: 48px;134    height: 930px;135    background: #121418;136    color: #e5e7eb;137    border-top-left-radius: 24px;138    border-top-right-radius: 24px;139    box-shadow: 0 -10px 20px rgba(0,0,0,0.25);140  }141 142  .suggestions {143    height: 110px;144    display: flex;145    align-items: center;146    padding: 0 30px;147    gap: 28px;148    color: #cbd5e1;149    font-size: 42px;150    border-bottom: 1px solid rgba(255,255,255,0.08);151  }152  .suggestions .divider {153    width: 2px; height: 40px; background: rgba(255,255,255,0.12);154  }155  .suggestions .mic {156    margin-left: auto;157    width: 72px; height: 72px;158    border-radius: 36px;159    background: #1b1e24;160    display: flex; justify-content: center; align-items: center;161    border: 1px solid rgba(255,255,255,0.15);162  }163  .mic svg { width: 38px; height: 38px; fill: #cbd5e1; }164 165  .keys {166    padding: 26px 22px;167    display: grid;168    grid-template-columns: repeat(10, 1fr);169    grid-row-gap: 20px;170    grid-column-gap: 16px;171  }172  .key {173    height: 112px;174    border-radius: 16px;175    background: #1b1e24;176    display: flex; justify-content: center; align-items: center;177    font-size: 44px;178    color: #e5e7eb;179    border: 1px solid rgba(255,255,255,0.08);180  }181  .keys .wide { grid-column: span 3; }182  .keys .space { grid-column: span 5; }183  .keys .enter {184    background: #aaf0c8;185    color: #0b2820;186    border: none;187  }188  .enter svg { width: 48px; height: 48px; }189 190  /* Bottom gesture bar */191  .gesture {192    position: absolute;193    bottom: 12px;194    left: 390px;195    width: 300px;196    height: 10px;197    background: #dadada;198    border-radius: 5px;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- App Bar -->206  <div class="app-bar">207    <div class="status-row">208      <div class="status-left">2:48</div>209      <div class="status-right">210        <div class="status-icon"></div>211        <div style="font-size:28px; opacity:0.9;">100%</div>212        <div class="status-icon"></div>213      </div>214    </div>215    <div class="title-row">216      <div class="back-icon">217        <svg viewBox="0 0 24 24" fill="#ffffff">218          <path d="M15.5 5l-7 7 7 7-1.5 1.5L5 12l9-8.5z"/>219        </svg>220      </div>221      <h1>New list</h1>222    </div>223  </div>224 225  <!-- Content -->226  <div class="content">227    <div class="label-row">228      <div class="label">List name</div>229      <div class="count">11/40</div>230    </div>231    <div class="input-field">232      <div class="input-text">Berlin trip</div>233      <div class="clear-btn">234        <svg viewBox="0 0 24 24" width="42" height="42" fill="#374151">235          <circle cx="12" cy="12" r="0" fill="none"></circle>236          <path d="M18 6L6 18M6 6l12 12" stroke="#374151" stroke-width="2" stroke-linecap="round"/>237        </svg>238      </div>239    </div>240 241    <div class="save-area">242      <div class="primary-btn">Save to new list</div>243    </div>244  </div>245 246  <!-- Keyboard -->247  <div class="keyboard">248    <div class="suggestions">249      <div>trip</div>250      <div class="divider"></div>251      <div>triple</div>252      <div class="divider"></div>253      <div>trup</div>254      <div class="mic">255        <svg viewBox="0 0 24 24">256          <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3s-3 1.3-3 3v5c0 1.7 1.3 3 3 3zm5-3c0 2.8-2.2 5-5 5s-5-2.2-5-5H5c0 3.4 2.7 6.2 6 6.7V20h2v-2.3c3.3-.5 6-3.3 6-6.7h-2z"/>257        </svg>258      </div>259    </div>260 261    <div class="keys">262      <!-- row 1 -->263      <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>264      <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>265      <!-- row 2 -->266      <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>267      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>268      <!-- row 3 -->269      <div class="wide key">?123</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>270      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div>271      <div class="enter key">272        <svg viewBox="0 0 24 24">273          <path d="M9 16l-4-4 4-4v3h7v2H9v3z" fill="#0b2820"></path>274        </svg>275      </div>276      <!-- space row -->277      <div class="key">,</div>278      <div class="space key"></div>279      <div class="key">.</div>280      <div class="enter key">281        <svg viewBox="0 0 24 24">282          <path d="M9 16l-4-4 4-4v3h7v2H9v3z" fill="#0b2820"></path>283        </svg>284      </div>285    </div>286  </div>287 288  <div class="gesture"></div>289</div>290</body>291</html>