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>Save As - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f0f;15    color: #ffffff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    background: #1a1a1a;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    color: #eaeaea;31    font-size: 44px;32    letter-spacing: 0.5px;33  }34  .status-bar .time { font-weight: 600; }35  .status-bar .sb-icons {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .sb-icons svg { width: 48px; height: 48px; }42 43  /* App bar */44  .app-bar {45    position: absolute;46    top: 120px;47    left: 0;48    width: 100%;49    height: 140px;50    background: #121212;51    display: flex;52    align-items: center;53    padding: 0 32px;54    box-sizing: border-box;55  }56  .back-btn { width: 72px; height: 72px; margin-right: 18px; }57  .back-btn svg { width: 72px; height: 72px; }58  .title { font-size: 56px; font-weight: 600; color: #f4f4f4; }59 60  /* List / Places */61  .content {62    position: absolute;63    top: 260px;64    left: 0;65    width: 100%;66    box-sizing: border-box;67    padding: 16px 36px 0 36px;68  }69  .section-label {70    color: #9aa0a6;71    font-size: 36px;72    margin-bottom: 10px;73  }74  .list .item {75    display: flex;76    align-items: flex-start;77    gap: 32px;78    padding: 42px 0;79    border-bottom: 0;80  }81  .item .icon { width: 72px; height: 72px; flex-shrink: 0; }82  .item .icon svg { width: 72px; height: 72px; }83  .text .title-row { font-size: 46px; color: #f5f5f5; }84  .text .sub { font-size: 34px; color: #9aa0a6; margin-top: 8px; }85 86  /* Filename area */87  .filename-area {88    position: absolute;89    left: 0;90    width: 100%;91    top: 1650px;92    padding: 30px 36px;93    box-sizing: border-box;94    background: #0f0f0f;95  }96  .filename-row {97    display: flex;98    align-items: center;99    gap: 20px;100  }101  .input-box {102    flex: 1;103    height: 96px;104    border: 2px solid #ff8f00;105    border-radius: 10px;106    background: #121212;107    box-sizing: border-box;108  }109  .ext {110    font-size: 42px;111    color: #bdbdbd;112    margin-right: 8px;113  }114  .save-btn {115    background: #2c2c2c;116    color: #a9a9a9;117    padding: 22px 40px;118    border-radius: 14px;119    font-size: 44px;120  }121 122  /* Keyboard mock */123  .keyboard {124    position: absolute;125    left: 0;126    bottom: 54px;127    width: 100%;128    height: 760px;129    background: #1b1b1b;130    border-top: 1px solid #2a2a2a;131    box-sizing: border-box;132    padding: 26px 24px;133  }134  .key-row {135    display: flex;136    justify-content: center;137    gap: 16px;138    margin-top: 22px;139  }140  .key {141    width: 86px;142    height: 110px;143    background: #2a2a2a;144    border-radius: 18px;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #e0e0e0;149    font-size: 46px;150    box-shadow: inset 0 0 0 1px #222;151  }152  .key.wide { width: 140px; }153  .key.space { width: 520px; }154  .key.accent {155    background: #d6e8ff;156    color: #0f1a2b;157    font-weight: 700;158  }159  .bottom-indicator {160    position: absolute;161    bottom: 14px;162    left: 50%;163    transform: translateX(-50%);164    width: 360px;165    height: 12px;166    background: #e5e5e5;167    border-radius: 6px;168    opacity: 0.7;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status bar -->176  <div class="status-bar">177    <div class="time">1:05</div>178    <div class="sb-icons">179      <!-- simple moon/dnd as a dot -->180      <svg viewBox="0 0 24 24">181        <circle cx="12" cy="12" r="6" fill="#cfcfcf"></circle>182      </svg>183      <!-- Wi‑Fi -->184      <svg viewBox="0 0 24 24">185        <path d="M2 9c5-5 15-5 20 0" stroke="#eaeaea" stroke-width="2" fill="none" />186        <path d="M5 12c4-4 10-4 14 0" stroke="#eaeaea" stroke-width="2" fill="none" />187        <path d="M8 15c2-2 6-2 8 0" stroke="#eaeaea" stroke-width="2" fill="none" />188        <circle cx="12" cy="18" r="2" fill="#eaeaea" />189      </svg>190      <!-- Battery -->191      <svg viewBox="0 0 26 24">192        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#eaeaea" stroke-width="2" fill="none"></rect>193        <rect x="4" y="8" width="12" height="8" fill="#eaeaea"></rect>194        <rect x="21" y="9" width="3" height="6" rx="1" fill="#eaeaea"></rect>195      </svg>196    </div>197  </div>198 199  <!-- App bar -->200  <div class="app-bar">201    <div class="back-btn">202      <svg viewBox="0 0 24 24">203        <path d="M15 4 L7 12 L15 20" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>204      </svg>205    </div>206    <div class="title">Save as</div>207  </div>208 209  <!-- Content / Places -->210  <div class="content">211    <div class="section-label">Places</div>212    <div class="list">213 214      <!-- OneDrive -->215      <div class="item">216        <div class="icon">217          <svg viewBox="0 0 24 24">218            <path d="M8 15a4 4 0 0 1 4-4 4.5 4.5 0 0 1 8.5 1.5A4 4 0 0 1 20 20H9.5A3.5 3.5 0 0 1 8 15z" fill="#54a8ff"></path>219          </svg>220        </div>221        <div class="text">222          <div class="title-row">OneDrive - Personal</div>223          <div class="sub">ffionh41@gmail.com</div>224        </div>225      </div>226 227      <!-- This device -->228      <div class="item">229        <div class="icon">230          <svg viewBox="0 0 24 24">231            <rect x="5" y="3" width="14" height="18" rx="2" ry="2" fill="#bdbdbd"></rect>232            <rect x="9" y="18" width="6" height="2" fill="#8c8c8c"></rect>233          </svg>234        </div>235        <div class="text">236          <div class="title-row">This device</div>237        </div>238      </div>239 240      <!-- Browse -->241      <div class="item">242        <div class="icon">243          <svg viewBox="0 0 24 24">244            <path d="M8 15a4 4 0 0 1 4-4 4.5 4.5 0 0 1 8.5 1.5A4 4 0 0 1 20 20H9.5A3.5 3.5 0 0 1 8 15z" fill="#bdbdbd"></path>245          </svg>246        </div>247        <div class="text">248          <div class="title-row">Browse</div>249          <div class="sub">Google Drive, SD card, and more…</div>250        </div>251      </div>252 253      <!-- Add a place -->254      <div class="item">255        <div class="icon">256          <svg viewBox="0 0 24 24">257            <path d="M12 5v14M5 12h14" stroke="#bdbdbd" stroke-width="2.2" stroke-linecap="round"></path>258          </svg>259        </div>260        <div class="text">261          <div class="title-row">Add a place</div>262          <div class="sub">Connect to cloud storage</div>263        </div>264      </div>265 266    </div>267  </div>268 269  <!-- Filename input and Save -->270  <div class="filename-area">271    <div class="filename-row">272      <div class="input-box"></div>273      <div class="ext">.pptx</div>274      <div class="save-btn">Save</div>275    </div>276  </div>277 278  <!-- Keyboard mock -->279  <div class="keyboard">280    <div class="key-row">281      <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>282      <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>283    </div>284    <div class="key-row">285      <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>286      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>287    </div>288    <div class="key-row">289      <div class="key wide">⇧</div>290      <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>291      <div class="key wide">⌫</div>292    </div>293    <div class="key-row">294      <div class="key wide">?123</div>295      <div class="key">☺</div>296      <div class="key wide">GIF</div>297      <div class="key">⚙</div>298      <div class="key">G</div>299      <div class="key">🎨</div>300      <div class="key">🎙</div>301      <div class="key">.</div>302      <div class="key wide accent">✓</div>303    </div>304  </div>305 306  <!-- Home indicator -->307  <div class="bottom-indicator"></div>308</div>309</body>310</html>