GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Save As 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    border-radius: 24px;14    box-shadow: 0 8px 24px rgba(0,0,0,0.15);15  }16 17  /* App Bar */18  .appbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 170px;24    background: #2E6FF2;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30  }31  .appbar .title {32    font-size: 56px;33    font-weight: 600;34    margin-left: 24px;35  }36  .appbar .right-actions {37    margin-left: auto;38    display: flex;39    align-items: center;40    gap: 28px;41  }42  .icon-btn {43    width: 72px;44    height: 72px;45    display: flex;46    justify-content: center;47    align-items: center;48  }49 50  /* File name input */51  .filename-wrap {52    position: absolute;53    top: 190px;54    left: 18px;55    width: 1044px;56    height: 120px;57    background: #fff;58    border: 2px solid #e0e0e0;59    border-radius: 8px;60    display: flex;61    align-items: center;62    padding: 0 26px;63    box-sizing: border-box;64  }65  .filename-text {66    font-size: 48px;67    color: #222;68  }69  .ext {70    margin-left: auto;71    font-size: 48px;72    color: #777;73  }74 75  /* Storage rows */76  .list-row {77    position: absolute;78    left: 0;79    width: 1080px;80    height: 120px;81    display: flex;82    align-items: center;83    box-sizing: border-box;84    padding: 0 36px;85    border-bottom: 1px solid #eee;86    background: #fff;87  }88  .list-row .label {89    font-size: 42px;90    color: #222;91    margin-left: 22px;92  }93  .list-row .chev {94    margin-left: auto;95  }96 97  /* Content area */98  .content-area {99    position: absolute;100    top: 550px;101    left: 0;102    width: 1080px;103    height: 850px;104    display: flex;105    flex-direction: column;106    align-items: center;107    justify-content: center;108    color: #9e9e9e;109  }110  .placeholder-img {111    width: 220px;112    height: 260px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    display: flex;116    justify-content: center;117    align-items: center;118    color: #757575;119    border-radius: 12px;120    margin-bottom: 34px;121    font-size: 32px;122    text-align: center;123  }124  .empty-text {125    font-size: 56px;126    color: #9e9e9e;127  }128 129  /* Buttons */130  .actions {131    position: absolute;132    bottom: 910px;133    left: 0;134    width: 1080px;135    height: 110px;136    display: flex;137    align-items: center;138    justify-content: center;139    gap: 140px;140  }141  .link-btn {142    font-size: 48px;143    color: #2E6FF2;144  }145 146  /* Keyboard */147  .keyboard {148    position: absolute;149    bottom: 0;150    left: 0;151    width: 1080px;152    height: 900px;153    background: #F3F1F7;154    border-top: 1px solid #ddd;155    box-sizing: border-box;156  }157  .kb-suggestions {158    height: 120px;159    display: flex;160    align-items: center;161    padding: 0 24px;162    gap: 36px;163    color: #333;164    font-size: 40px;165    border-bottom: 1px solid #e5e5e5;166  }167  .kb-suggestions .pill {168    padding: 10px 22px;169    background: #fff;170    border: 1px solid #e5e5e5;171    border-radius: 24px;172  }173  .kb-grid {174    padding: 22px 24px;175    box-sizing: border-box;176    display: grid;177    grid-template-columns: repeat(10, 1fr);178    grid-gap: 16px;179  }180  .key {181    background: #ffffff;182    border-radius: 18px;183    height: 110px;184    box-shadow: 0 2px 0 rgba(0,0,0,0.06);185    display: flex;186    align-items: center;187    justify-content: center;188    font-size: 48px;189    color: #222;190  }191  .key.small { height: 100px; }192  .key.wide { grid-column: span 3; }193  .key.return { grid-column: span 4; }194  .key.space { grid-column: span 4; }195  .key.actions { background: #e9e9f2; }196  .kb-row {197    display: grid;198    grid-template-columns: repeat(10, 1fr);199    grid-gap: 16px;200    padding: 12px 24px;201    box-sizing: border-box;202  }203 204  /* Minor top status indicators for realism */205  .status-icons {206    position: absolute;207    top: 16px;208    right: 22px;209    display: flex;210    gap: 24px;211    opacity: 0.9;212  }213  .status-dot {214    width: 24px;215    height: 24px;216    background: #fff;217    border-radius: 50%;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- App bar -->225  <div class="appbar">226    <div class="icon-btn">227      <!-- Back arrow -->228      <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">229        <path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12l8.5-8.5L15.5 5z"/>230      </svg>231    </div>232    <div class="title">Save As</div>233    <div class="right-actions">234      <div class="icon-btn">235        <!-- File with plus -->236        <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">237          <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM13 9V3.5L18.5 9H13z"/>238          <path d="M12 13h-3v2h3v3h2v-3h3v-2h-3V10h-2v3z"/>239        </svg>240      </div>241    </div>242  </div>243 244  <!-- minor status icons -->245  <div class="status-icons">246    <div class="status-dot"></div>247    <div class="status-dot"></div>248    <div class="status-dot"></div>249  </div>250 251  <!-- Filename input -->252  <div class="filename-wrap">253    <div class="filename-text">Dinner Plan</div>254    <div class="ext">.docx</div>255  </div>256 257  <!-- Storage selection rows -->258  <div class="list-row" style="top: 340px;">259    <!-- stack papers icon -->260    <svg width="64" height="64" viewBox="0 0 24 24" fill="#607D8B">261      <path d="M3 7h14v10H3z" opacity="0.6"/>262      <path d="M5 5h14v10H5z"/>263    </svg>264    <div class="label">Polaris Drive</div>265    <div class="chev">266      <svg width="44" height="44" viewBox="0 0 24 24" fill="#606d90">267        <path d="M7 10l5 5 5-5z"/>268      </svg>269    </div>270  </div>271 272  <div class="list-row" style="top: 460px;">273    <!-- multicolor stack icon simulated -->274    <svg width="64" height="64" viewBox="0 0 24 24">275      <rect x="3" y="5" width="18" height="4" fill="#F44336"/>276      <rect x="3" y="10" width="18" height="4" fill="#FF9800"/>277      <rect x="3" y="15" width="18" height="4" fill="#4CAF50"/>278    </svg>279    <div class="label" style="color:#666;"> </div>280  </div>281 282  <!-- Center content -->283  <div class="content-area">284    <div class="placeholder-img">[IMG: Document Icon]</div>285    <div class="empty-text">No content</div>286  </div>287 288  <!-- Action buttons -->289  <div class="actions">290    <div class="link-btn">Cancel</div>291    <div class="link-btn">Save</div>292  </div>293 294  <!-- Keyboard -->295  <div class="keyboard">296    <div class="kb-suggestions">297      <div class="pill">Plan</div>298      <div class="pill">Plans</div>299      <div class="pill">Planning</div>300      <div style="margin-left:auto; display:flex; align-items:center; gap:18px;">301        <!-- mic icon -->302        <svg width="48" height="48" viewBox="0 0 24 24" fill="#666">303          <path d="M12 14c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v5c0 1.66 1.34 3 3 3z"/>304          <path d="M19 11h-2c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92z"/>305        </svg>306      </div>307    </div>308 309    <!-- Row 1 -->310    <div class="kb-row" style="margin-top:8px;">311      <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>312      <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>313    </div>314    <!-- Row 2 -->315    <div class="kb-row">316      <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>317      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key actions">⌫</div>318    </div>319    <!-- Row 3 -->320    <div class="kb-row">321      <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>322      <div class="key">n</div><div class="key">m</div><div class="key actions">,</div><div class="key actions">.</div><div class="key actions">✓</div>323    </div>324    <!-- Row 4 -->325    <div class="kb-row">326      <div class="key wide actions">?123</div>327      <div class="key wide actions">🙂</div>328      <div class="key return"> </div>329      <div class="key wide actions">.</div>330      <div class="key wide actions">✓</div>331    </div>332  </div>333 334</div>335</body>336</html>