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>Mobile Slide Share UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #ffffff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 120px;22    background: #1a1a1a;23    display: flex;24    align-items: center;25    padding: 0 36px;26    font-size: 36px;27    color: #e8e8e8;28    letter-spacing: 0.5px;29  }30  .sb-left, .sb-right {31    display: flex;32    align-items: center;33  }34  .sb-left { gap: 26px; }35  .sb-right { margin-left: auto; gap: 26px; }36 37  .icon {38    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;39  }40  .icon svg { width: 40px; height: 40px; fill: #e8e8e8; }41 42  /* Preview area with slide */43  .preview-area {44    height: 820px;45    background: #0d0d0d;46    display: flex;47    align-items: center;48    justify-content: center;49  }50  .slide-card {51    width: 1000px;52    height: 560px;53    background: #ffffff;54    border: 1px solid #d9d9d9;55    border-radius: 4px;56    position: relative;57    overflow: hidden;58  }59  /* Left red title block */60  .title-block {61    position: absolute;62    left: 60px;63    top: 120px;64    width: 360px;65    height: 300px;66    background: #d94935;67    color: #fff;68    display: flex;69    align-items: center;70    justify-content: center;71    text-align: center;72    font-size: 42px;73    line-height: 1.2;74    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.25);75  }76  .title-block::before {77    content: "";78    position: absolute;79    top: -36px;80    left: 0;81    width: 100%;82    height: 36px;83    background: #e24f3a;84  }85  .title-block::after {86    content: "";87    position: absolute;88    bottom: -18px;89    left: 40px;90    width: 0; height: 0;91    border-left: 18px solid transparent;92    border-right: 18px solid transparent;93    border-top: 18px solid #d94935;94  }95  /* Right image placeholder on slide */96  .slide-image {97    position: absolute;98    right: 60px;99    top: 120px;100    width: 500px;101    height: 320px;102    background: #E0E0E0;103    border: 1px solid #BDBDBD;104    display: flex;105    align-items: center;106    justify-content: center;107    color: #757575;108    font-size: 32px;109  }110 111  /* Notes / Comments bar */112  .notes-comments {113    height: 120px;114    border-top: 1px solid #2b2b2b;115    border-bottom: 1px solid #2b2b2b;116    display: flex;117    align-items: center;118    justify-content: center;119    gap: 80px;120    background: #111;121  }122  .tab {123    display: flex;124    align-items: center;125    gap: 16px;126    color: #eaeaea;127    font-size: 36px;128  }129  .divider-vert {130    width: 2px; height: 48px; background: #2f2f2f;131  }132  .tab svg { width: 44px; height: 44px; fill: #eaeaea; }133 134  /* Thumbnails strip */135  .thumbs {136    height: 280px;137    background: #0f0f0f;138    display: flex;139    align-items: center;140    padding: 0 28px;141    gap: 24px;142  }143  .thumb {144    width: 320px; height: 190px;145    background: #fff;146    border: 1px solid #cfcfcf;147    position: relative;148    overflow: hidden;149  }150  .thumb .mini-red {151    position: absolute; left: 20px; top: 24px; width: 170px; height: 80px; background: #d94935;152  }153  .thumb .mini-img {154    position: absolute; right: 20px; top: 24px; width: 120px; height: 80px;155    background: #E0E0E0; border: 1px solid #BDBDBD;156  }157  .thumb.selected::after {158    content: "3 ★";159    position: absolute; left: 0; right: 0; bottom: 0; height: 44px;160    background: #c8753f;161    color: #fff; font-size: 34px; display: flex; align-items: center; padding-left: 16px;162  }163 164  /* Share panel */165  .share-panel {166    background: #171717;167    border-top: 1px solid #2b2b2b;168    position: relative;169    padding: 34px 40px 180px;170    height: 960px;171    box-sizing: border-box;172  }173  .share-header {174    display: flex; align-items: center;175    font-size: 54px; font-weight: 600; color: #f5f5f5;176  }177  .share-close {178    margin-left: auto;179    width: 54px; height: 54px; position: relative;180  }181  .share-close::before, .share-close::after {182    content: ""; position: absolute; top: 26px; left: 6px; right: 6px; height: 2px; background: #e8e8e8;183  }184  .share-close::before { transform: rotate(45deg); }185  .share-close::after { transform: rotate(-45deg); }186 187  .share-sub {188    margin-top: 22px;189    color: #c7c7c7;190    font-size: 34px;191    line-height: 1.35;192  }193 194  .cta {195    margin: 40px auto 26px;196    width: 520px; height: 104px;197    border-radius: 14px;198    background: #c8753f;199    color: #fff;200    font-size: 40px; font-weight: 600;201    display: flex; align-items: center; justify-content: center;202    box-shadow: 0 6px 0 0 rgba(0,0,0,0.25) inset;203  }204 205  .option {206    margin-top: 26px;207    padding: 28px 6px;208    border-top: 1px solid #2b2b2b;209    display: flex; align-items: center;210    color: #f0f0f0;211    font-size: 38px;212  }213  .option .opt-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; margin-right: 22px; }214  .option .opt-icon svg { width: 56px; height: 56px; fill: #dcdcdc; }215  .chev {216    margin-left: auto;217  }218  .chev svg { width: 34px; height: 34px; fill: #9e9e9e; }219 220  /* Gesture bar */221  .gesture {222    position: absolute; bottom: 20px; left: 50%;223    transform: translateX(-50%);224    width: 360px; height: 12px; border-radius: 8px;225    background: #f5f5f5;226    opacity: 0.85;227  }228</style>229</head>230<body>231<div id="render-target">232 233  <!-- Status Bar -->234  <div class="status-bar">235    <div class="sb-left">236      <div>11:06</div>237      <span class="icon">238        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 3a7 7 0 110 14 7 7 0 010-14z"/></svg>239      </span>240      <span class="icon">241        <svg viewBox="0 0 24 24"><path d="M6 12a6 6 0 1012 0A6 6 0 006 12zm6-9l1.5 3h-3L12 3zm0 18l-1.5-3h3L12 21zm9-9l-3 1.5v-3L21 12zM3 12l3-1.5v3L3 12z"/></svg>242      </span>243      <span class="icon">244        <svg viewBox="0 0 24 24"><path d="M7 2h10v2H7V2zm12 5H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2zm-1 10H6v-8h12v8z"/></svg>245      </span>246      <span class="icon">247        <svg viewBox="0 0 24 24"><path d="M10 19l7-7-7-7v14z"/></svg>248      </span>249      <div style="font-size:40px;margin-left:6px;">•</div>250    </div>251    <div class="sb-right">252      <span class="icon">253        <svg viewBox="0 0 24 24"><path d="M12 20a1 1 0 01-.7-.3C9.1 17.5 5.7 16 2 16v-2c4.4 0 8.4 1.7 10 3 1.6-1.3 5.6-3 10-3v2c-3.7 0-7.1 1.5-9.3 3.7-.2.2-.5.3-.7.3z"/></svg>254      </span>255      <span class="icon">256        <svg viewBox="0 0 24 24"><path d="M16 4H7a2 2 0 00-2 2v12a2 2 0 002 2h9a3 3 0 003-3V7a3 3 0 00-3-3zm2 13a1 1 0 01-1 1H7V6h9a1 1 0 011 1v10z"/></svg>257      </span>258    </div>259  </div>260 261  <!-- Preview of current slide -->262  <div class="preview-area">263    <div class="slide-card">264      <div class="title-block">Double tap to add title</div>265      <div class="slide-image">[IMG: Workspace Diagram]</div>266    </div>267  </div>268 269  <!-- Notes / Comments -->270  <div class="notes-comments">271    <div class="tab">272      <svg viewBox="0 0 24 24"><path d="M3 4h18v12H7l-4 4V4z"/></svg>273      <span>Notes</span>274    </div>275    <div class="divider-vert"></div>276    <div class="tab">277      <svg viewBox="0 0 24 24"><path d="M4 4h16v10H5l-1 1V4zm3 12h13l1 1v3H7v-4z"/></svg>278      <span>Comments</span>279    </div>280  </div>281 282  <!-- Thumbnails strip -->283  <div class="thumbs">284    <div class="thumb">285      <div class="mini-red"></div>286      <div class="mini-img"></div>287    </div>288    <div class="thumb">289      <div class="mini-red" style="width:140px;"></div>290      <div class="mini-img" style="width:140px;"></div>291    </div>292    <div class="thumb selected">293      <div class="mini-red" style="height:70px;"></div>294      <div class="mini-img"></div>295    </div>296    <div style="margin-left:auto; width:70px; height:70px; border:1px dashed #3a3a3a; color:#8f8f8f; display:flex; align-items:center; justify-content:center; font-size:56px; border-radius:8px;">+</div>297  </div>298 299  <!-- Share panel -->300  <div class="share-panel">301    <div class="share-header">302      Share303      <div class="share-close"></div>304    </div>305    <div class="share-sub">306      To collaborate with others, please sign in and save a copy of your file to OneDrive307    </div>308    <div class="cta">Save to OneDrive</div>309 310    <div class="option">311      <div class="opt-icon">312        <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v13a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm8 1v5h5"/></svg>313      </div>314      Full Document315      <div class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg></div>316    </div>317    <div class="option">318      <div class="opt-icon">319        <svg viewBox="0 0 24 24"><path d="M4 4h10v10H4V4zm6 6h10v10H10V10z"/></svg>320      </div>321      Current Slide322      <div class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg></div>323    </div>324  </div>325 326  <!-- Gesture bar -->327  <div class="gesture"></div>328</div>329</body>330</html>