GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</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: #1d1b21;13    color: #eaeaea;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    background: #1d1b21;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 30px;28    box-sizing: border-box;29    font-weight: 600;30    letter-spacing: 0.5px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 22px;36  }37 38  /* Top toolbar */39  .toolbar {40    position: absolute;41    top: 110px;42    left: 0;43    width: 1080px;44    height: 140px;45    background: #221f26;46    display: flex;47    align-items: center;48    gap: 36px;49    padding: 0 40px;50    box-sizing: border-box;51  }52  .icon {53    width: 56px;54    height: 56px;55  }56  .icon svg { width: 100%; height: 100%; }57  .icon path, .icon circle, .icon polyline, .icon rect {58    stroke: #cfcfcf;59    fill: none;60    stroke-width: 3;61    stroke-linecap: round;62    stroke-linejoin: round;63  }64 65  /* Canvas area */66  .editor {67    position: absolute;68    top: 250px;69    left: 0;70    width: 1080px;71    height: 1550px;72    background: #25232a;73  }74 75  /* Slide preview in the middle */76  .slide {77    position: absolute;78    top: 760px;79    left: 60px;80    width: 960px;81    height: 560px;82    background: #2fb2d4;83    border-radius: 6px;84    box-shadow: 0 6px 0 rgba(0,0,0,0.35);85  }86  .slide .handle {87    position: absolute;88    top: -8px;89    width: 90px;90    height: 10px;91    background: #ffffff;92    border-radius: 4px;93  }94  .slide .handle.left { left: 16px; }95  .slide .handle.right { right: 16px; }96 97  .slide .overlay-img {98    position: absolute;99    left: 95px;100    top: 20px;101    width: 770px;102    height: 520px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    display: flex;106    justify-content: center;107    align-items: center;108    color: #757575;109    font-weight: 600;110  }111 112  .slide .title {113    position: absolute;114    left: 36px;115    top: 130px;116    font-size: 86px;117    color: #ffffff;118    font-weight: 700;119  }120  .slide .subtitle {121    position: absolute;122    left: 36px;123    top: 220px;124    font-size: 36px;125    color: #ffffff;126  }127  .slide .byline {128    position: absolute;129    left: 36px;130    bottom: 40px;131    font-size: 34px;132    color: #ffe42b;133    font-weight: 600;134  }135 136  /* Snackbar */137  .snackbar {138    position: absolute;139    left: 100px;140    top: 1960px;141    width: 880px;142    height: 160px;143    background: #2a2a30;144    border-radius: 90px;145    display: flex;146    align-items: center;147    padding: 0 42px;148    box-sizing: border-box;149    gap: 28px;150    box-shadow: 0 10px 24px rgba(0,0,0,0.5);151  }152  .drive-icon {153    width: 74px;154    height: 74px;155    border-radius: 14px;156    background: #f3c739;157    display: flex;158    align-items: center;159    justify-content: center;160    color: #1d1b21;161    font-weight: 800;162  }163  .snackbar .msg {164    font-size: 38px;165    line-height: 44px;166    color: #ffffff;167  }168 169  /* Bottom thumbnails strip */170  .thumbs {171    position: absolute;172    left: 0;173    bottom: 0;174    width: 1080px;175    height: 260px;176    background: #241f27;177    display: flex;178    align-items: flex-end;179    gap: 26px;180    padding: 26px 26px 28px;181    box-sizing: border-box;182  }183  .thumb {184    width: 170px;185    height: 120px;186    background: #151418;187    border-radius: 10px;188    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);189    position: relative;190  }191  .thumb.turquoise { background: #39b7d6; }192  .thumb .mini {193    position: absolute;194    left: 10px;195    bottom: 10px;196    right: 10px;197    top: 10px;198    border: 1px dashed rgba(255,255,255,0.25);199  }200  .thumb-number {201    text-align: center;202    margin-top: 10px;203    color: #cfcfcf;204    font-size: 30px;205  }206 207  /* Floating button on the right */208  .floating {209    position: absolute;210    right: 24px;211    bottom: 150px;212    width: 120px;213    height: 120px;214    background: #34323a;215    border-radius: 22px;216    display: flex;217    align-items: center;218    justify-content: center;219    box-shadow: 0 12px 24px rgba(0,0,0,0.45);220  }221  .floating svg { width: 60px; height: 60px; }222  .floating path { stroke: #eaeaea; stroke-width: 6; }223 224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Status Bar -->230  <div class="status-bar">231    <div>4:01</div>232    <div class="status-right">233      <!-- simple wifi -->234      <svg width="34" height="24" viewBox="0 0 34 24">235        <path d="M2 8 C10 2,24 2,32 8"></path>236        <path d="M6 12 C12 8,22 8,28 12"></path>237        <path d="M12 16 C16 14,18 14,22 16"></path>238        <circle cx="17" cy="20" r="2" fill="#cfcfcf" stroke="none"></circle>239      </svg>240      <!-- battery -->241      <svg width="44" height="24" viewBox="0 0 44 24">242        <rect x="2" y="4" width="36" height="16" rx="3"></rect>243        <rect x="40" y="8" width="3" height="8" rx="1"></rect>244        <rect x="6" y="8" width="26" height="8" fill="#cfcfcf" stroke="none"></rect>245      </svg>246    </div>247  </div>248 249  <!-- Toolbar -->250  <div class="toolbar">251    <!-- Back -->252    <div class="icon">253      <svg viewBox="0 0 24 24"><polyline points="14,4 6,12 14,20"></polyline><line x1="6" y1="12" x2="22" y2="12"></line></svg>254    </div>255    <!-- Undo -->256    <div class="icon">257      <svg viewBox="0 0 24 24"><path d="M8 7 L4 11 L8 15"></path><path d="M6 11 H14 C18 11 20 14 20 18"></path></svg>258    </div>259    <!-- Redo -->260    <div class="icon">261      <svg viewBox="0 0 24 24"><path d="M16 7 L20 11 L16 15"></path><path d="M18 11 H10 C6 11 4 14 4 18"></path></svg>262    </div>263    <!-- Present -->264    <div class="icon">265      <svg viewBox="0 0 24 24"><polygon points="5,4 19,12 5,20" fill="#cfcfcf" stroke="none"></polygon></svg>266    </div>267    <!-- Add -->268    <div class="icon">269      <svg viewBox="0 0 24 24"><line x1="12" y1="4" x2="12" y2="20"></line><line x1="4" y1="12" x2="20" y2="12"></line></svg>270    </div>271    <!-- Comment -->272    <div class="icon">273      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="3"></rect><polyline points="10,18 8,22 14,18"></polyline></svg>274    </div>275    <!-- Menu -->276    <div class="icon">277      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#cfcfcf" stroke="none"></circle><circle cx="12" cy="12" r="2" fill="#cfcfcf" stroke="none"></circle><circle cx="12" cy="19" r="2" fill="#cfcfcf" stroke="none"></circle></svg>278    </div>279  </div>280 281  <!-- Editor dark area -->282  <div class="editor"></div>283 284  <!-- Slide in editor -->285  <div class="slide">286    <div class="handle left"></div>287    <div class="handle right"></div>288 289    <div class="title">MG</div>290    <div class="subtitle">Climatech presentation</div>291    <div class="byline">By Team</div>292 293    <div class="overlay-img">[IMG: White board texture covering slide]</div>294  </div>295 296  <!-- Snackbar uploading -->297  <div class="snackbar">298    <div class="drive-icon">G</div>299    <div class="msg">Your 1 file is being uploaded to: My Drive</div>300  </div>301 302  <!-- Bottom thumbnails -->303  <div class="thumbs">304    <div>305      <div class="thumb">306        <div class="mini"></div>307      </div>308      <div class="thumb-number">1</div>309    </div>310    <div>311      <div class="thumb turquoise">312        <div class="mini"></div>313      </div>314      <div class="thumb-number">2</div>315    </div>316    <div>317      <div class="thumb turquoise">318        <div class="mini"></div>319      </div>320      <div class="thumb-number">3</div>321    </div>322    <div>323      <div class="thumb turquoise">324        <div class="mini"></div>325      </div>326      <div class="thumb-number">4</div>327    </div>328  </div>329 330  <!-- Floating action button -->331  <div class="floating">332    <svg viewBox="0 0 24 24"><path d="M12 5 V19 M5 12 H19"></path></svg>333  </div>334 335</div>336</body>337</html>