GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Presentation Editor Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #F5F5F7;13    color: #222;14  }15 16  /* Top bars */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    background: #ffffff;24    display: flex;25    align-items: center;26    padding: 0 28px;27    box-sizing: border-box;28  }29  .status-left { font-size: 34px; color:#424242; }30  .status-right {31    margin-left:auto;32    display:flex;33    align-items:center;34    gap:18px;35    color:#424242;36  }37  .status-right span { font-size:28px; }38 39  .app-bar {40    position: absolute;41    top: 90px;42    left: 0;43    width: 1080px;44    height: 150px;45    background: #ffffff;46    border-bottom: 1px solid #E6E6E6;47    display: flex;48    align-items: center;49    padding: 0 24px;50    box-sizing: border-box;51  }52  .app-title {53    font-size: 36px;54    color:#333;55    margin-left: 16px;56  }57  .spacer { flex: 1; }58  .icon-btn {59    width: 72px;60    height: 72px;61    border-radius: 12px;62    display: flex;63    align-items: center;64    justify-content: center;65    margin-left: 6px;66  }67  .icon-btn svg { width: 40px; height: 40px; stroke:#555; }68 69  /* Workspace */70  .workspace {71    position: absolute;72    top: 240px;73    left: 0;74    right: 0;75    bottom: 420px;76    background: #EAEAEA;77  }78  .slide {79    width: 980px;80    height: 740px;81    background: #ffffff;82    margin: 80px auto 0 auto;83    border-radius: 4px;84    box-shadow: inset 0 0 0 1px #E0E0E0;85    position: relative;86  }87  .text-box {88    position: absolute;89    left: 70px;90    right: 70px;91    border: 1px dashed #BDBDBD;92    height: 200px;93    display: flex;94    align-items: center;95    justify-content: center;96    color:#111;97    text-align: center;98  }99  .title-box {100    top: 210px;101    font-size: 64px;102    font-weight: 600;103  }104  .subtitle-box {105    top: 450px;106    height: 150px;107    font-size: 34px;108    color:#333;109  }110 111  /* Notes and comments row */112  .notes-comments {113    position: absolute;114    bottom: 360px;115    left: 50px;116    display: flex;117    gap: 80px;118    align-items: center;119    color:#555;120  }121  .notes-comments .entry {122    display:flex;123    align-items:center;124    gap:16px;125    font-size:42px;126  }127  .notes-comments svg { width:44px; height:44px; stroke:#666; }128 129  /* Thumbnails strip */130  .thumb-strip {131    position: absolute;132    bottom: 210px;133    left: 0;134    right: 120px; /* leave room for right sidebar */135    height: 190px;136    padding: 22px 24px;137    box-sizing: border-box;138    display: flex;139    gap: 30px;140    align-items: flex-end;141    background: #F7F7F7;142    border-top: 1px solid #E6E6E6;143  }144  .thumb {145    width: 330px;146    height: 160px;147    background: #FFFFFF;148    border: 1px solid #DADADA;149    position: relative;150  }151  .thumb.active::after {152    content: "";153    position: absolute;154    height: 18px;155    left: 0; right: 0; bottom: 0;156    background: #A54833;157  }158  .thumb-num {159    position: absolute;160    bottom: -54px;161    left: 8px;162    font-size: 40px;163    color:#7A2E1E;164  }165  .thumb + .thumb .thumb-num { color:#222; }166 167  /* Bottom tools bar */168  .tools {169    position: absolute;170    bottom: 0;171    left: 0;172    right: 0;173    height: 210px;174    background: #FFFFFF;175    border-top: 1px solid #E6E6E6;176  }177  .tools-inner {178    height: 100%;179    display: flex;180    align-items: center;181    gap: 46px;182    padding: 0 40px;183    box-sizing: border-box;184  }185  .tool {186    width: 90px; height: 90px;187    border: 1px solid #D5D5D5;188    background:#FAFAFA;189    border-radius: 12px;190    display:flex; align-items:center; justify-content:center;191  }192  .tool svg { width: 48px; height: 48px; stroke:#4d4d4d; }193 194  /* Right slim sidebar */195  .right-rail {196    position: absolute;197    bottom: 210px;198    right: 0;199    width: 120px;200    top: calc(240px + 0px);201    background: #FAFAFA;202    border-left: 1px solid #E6E6E6;203    display: flex;204    align-items: center;205    justify-content: center;206  }207  .fab {208    width: 84px; height: 84px; border-radius: 16px;209    background: #F1592A;210    color:#fff; font-size:52px; line-height:84px; text-align:center;211    box-shadow: 0 4px 8px rgba(0,0,0,0.15);212  }213 214  /* Small bottom gesture bar */215  .gesture {216    position: absolute;217    bottom: 12px;218    left: 50%;219    transform: translateX(-50%);220    width: 320px;221    height: 10px;222    background: #111;223    border-radius: 6px;224    opacity: .9;225  }226 227  /* Utility icon styles */228  .i-fill { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:3; }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Status Bar -->235  <div class="status-bar">236    <div class="status-left">11:46</div>237    <div class="status-right">238      <!-- simple signal, wifi, battery mock -->239      <svg viewBox="0 0 24 24"><path class="i-fill" d="M2 18h3v3H2zM7 14h3v7H7zM12 10h3v11h-3zM17 6h3v15h-3z"/></svg>240      <svg viewBox="0 0 24 24"><path class="i-fill" d="M2 9c5-5 15-5 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0"/></svg>241      <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" ry="2" class="i-fill"></rect><path class="i-fill" d="M22 10v4"/></svg>242      <span>100%</span>243    </div>244  </div>245 246  <!-- App Bar -->247  <div class="app-bar">248    <div class="icon-btn" title="Done">249      <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 12l5 5L20 6"/></svg>250    </div>251    <div class="app-title">Presentation (1) - Saved</div>252    <div class="spacer"></div>253    <div class="icon-btn" title="Pen">254      <svg viewBox="0 0 24 24"><path class="i-fill" d="M3 17.2V21h3.8L19 8.8 15.2 5zM14 6l4 4"/></svg>255    </div>256    <div class="icon-btn" title="Search">257      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" class="i-fill"></circle><path class="i-fill" d="M20 20l-3.5-3.5"/></svg>258    </div>259    <div class="icon-btn" title="Present">260      <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 5h16v12H4z"/><path class="i-fill" d="M10 9l5 3-5 3z"/></svg>261    </div>262    <div class="icon-btn" title="Undo">263      <svg viewBox="0 0 24 24"><path class="i-fill" d="M9 7H4v5"/><path class="i-fill" d="M4 12c3-6 13-5 16 1"/></svg>264    </div>265    <div class="icon-btn" title="More">266      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#555"/><circle cx="12" cy="12" r="2" fill="#555"/><circle cx="19" cy="12" r="2" fill="#555"/></svg>267    </div>268  </div>269 270  <!-- Main workspace -->271  <div class="workspace">272    <div class="slide">273      <div class="text-box title-box">Double tap to add title</div>274      <div class="text-box subtitle-box">Double tap to add subtitle</div>275    </div>276 277    <div class="notes-comments">278      <div class="entry">279        <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 4h16v12H7l-3 3z"/></svg>280        <span>Notes</span>281      </div>282      <div class="entry">283        <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 5h16v10H7l-3 3z"/></svg>284        <span>Comments</span>285      </div>286    </div>287  </div>288 289  <!-- Right rail with add button -->290  <div class="right-rail">291    <div class="fab">+</div>292  </div>293 294  <!-- Thumbnails strip -->295  <div class="thumb-strip">296    <div style="display:flex; gap:30px; align-items:flex-end;">297      <div style="position:relative;">298        <div class="thumb active"></div>299        <div class="thumb-num">1</div>300      </div>301      <div style="position:relative;">302        <div class="thumb"></div>303        <div class="thumb-num">2</div>304      </div>305    </div>306  </div>307 308  <!-- Bottom tools -->309  <div class="tools">310    <div class="tools-inner">311      <div class="tool" title="Layout">312        <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" class="i-fill"></rect><path class="i-fill" d="M3 10h18M10 21V10"/></svg>313      </div>314      <div class="tool" title="Comments">315        <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 4h16v12H8l-4 4z"/></svg>316      </div>317      <div class="tool" title="Grid">318        <svg viewBox="0 0 24 24"><path class="i-fill" d="M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18"/></svg>319      </div>320      <div class="tool" title="Images">321        <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" class="i-fill"></rect><circle cx="9" cy="10" r="2" class="i-fill"></circle><path class="i-fill" d="M7 17l4-4 4 4 2-2 3 3"/></svg>322      </div>323      <div class="tool" title="Shape">324        <svg viewBox="0 0 24 24"><circle cx="8" cy="8" r="4" class="i-fill"></circle><rect x="12" y="12" width="8" height="8" class="i-fill"></rect></svg>325      </div>326      <div class="tool" title="Text">327        <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 6h16M12 6v12M6 18h12"/></svg>328      </div>329      <div class="tool" title="Camera">330        <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 7h5l2-2h6l3 3v9H4z"/><circle cx="12" cy="13" r="4" class="i-fill"></circle></svg>331      </div>332      <div class="tool" title="Indent">333        <svg viewBox="0 0 24 24"><path class="i-fill" d="M4 6h16M4 12h10M4 18h16"/><path class="i-fill" d="M18 10l4 2-4 2z"/></svg>334      </div>335    </div>336  </div>337 338  <!-- Gesture bar -->339  <div class="gesture"></div>340</div>341</body>342</html>