GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Slide Viewer Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #111316;14    color: #fff;15    font-family: Arial, Helvetica, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 120px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #EDEDED;28    font-size: 44px;29    letter-spacing: 1px;30  }31  .status-right {32    display: flex; align-items: center; gap: 28px;33  }34  .dot { width: 12px; height: 12px; background:#cfcfcf; border-radius:50%; opacity:.8; }35 36  /* Large slide preview area */37  .preview-area {38    position: absolute;39    top: 210px; left: 0; right: 0;40    padding: 0 30px;41  }42  .slide {43    width: 1020px;44    height: 560px;45    margin: 0 auto;46    background: #ffffff;47    border-radius: 6px;48    border: 1px solid #D9D9D9;49    position: relative;50    overflow: hidden;51  }52  /* faint decorative arcs */53  .slide::before {54    content: "";55    position: absolute;56    inset: -20% -10% -10% -10%;57    background:58      radial-gradient(800px 500px at -50px 120px, rgba(0,0,0,0.05) 1px, transparent 1px) 0 0/220px 220px,59      radial-gradient(1000px 600px at 900px 300px, rgba(0,0,0,0.04) 1px, transparent 1px) 0 0/300px 300px;60    opacity: .4;61    pointer-events: none;62  }63 64  /* Left red title callout */65  .title-box {66    position: absolute;67    left: 78px;68    top: 120px;69    width: 360px;70    height: 270px;71  }72  .title-head {73    height: 48px;74    background: #d9482e;75  }76  .title-body {77    position: relative;78    height: calc(100% - 48px);79    background: #d9482e;80    border: 3px dashed rgba(255,255,255,0.6);81    display: flex; align-items: center; justify-content: center;82    text-align: center;83    color: #ffffff;84    font-size: 44px;85    line-height: 1.2;86  }87  .title-body::after {88    content: "";89    position: absolute;90    bottom: -22px; left: 50%;91    transform: translateX(-50%);92    width: 0; height: 0;93    border-left: 18px solid transparent;94    border-right: 18px solid transparent;95    border-top: 22px solid #d9482e;96  }97 98  /* Right image placeholder */99  .slide-image {100    position: absolute;101    right: 72px;102    top: 120px;103    width: 540px;104    height: 300px;105    background: #E0E0E0;106    border: 1px solid #BDBDBD;107    color: #757575;108    display: flex; align-items: center; justify-content: center;109    font-size: 28px;110  }111 112  /* Notes and Comments row */113  .toolbar {114    width: 100%;115    margin-top: 28px;116    display: flex;117    align-items: center;118    justify-content: center;119    gap: 120px;120    color: #D9D9D9;121  }122  .tool {123    display: flex; align-items: center; gap: 18px;124    font-size: 36px;125  }126  .tool svg { width: 44px; height: 44px; fill: #D9D9D9; }127 128  /* Filmstrip thumbnails */129  .filmstrip {130    position: absolute;131    top: 980px; left: 0; right: 0;132    padding: 0 20px;133    display: flex; align-items: center; gap: 22px;134  }135  .thumb {136    width: 322px; height: 220px;137    background: #fff;138    border: 2px solid #2b2b2b;139    border-radius: 4px;140    position: relative;141    overflow: hidden;142  }143  .thumb .red-bar { position: absolute; left: 28px; top: 24px; width: 220px; height: 40px; background: #d9482e; }144  .thumb .red-box { position: absolute; left: 28px; top: 74px; width: 220px; height: 90px; background: #d9482e; }145  .thumb .img-mini { position: absolute; right: 22px; top: 70px; width: 120px; height: 80px; background:#E0E0E0; border:1px solid #BDBDBD; }146  .thumb .select-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; background: #c87437; color:#fff; display:flex; align-items:center; justify-content:center; font-size: 30px; }147  .thumb-index { position: absolute; left: 18px; bottom: 38px; color:#000; font-size: 26px; }148 149  .side-plus {150    width: 56px; height: 200px;151    background: #1e1e1e;152    border: 1px solid #333;153    border-radius: 6px;154    display: flex; align-items: center; justify-content: center;155    color: #999;156    font-size: 54px;157  }158 159  /* Bottom sheet */160  .bottom-sheet {161    position: absolute;162    left: 0; right: 0;163    bottom: 110px;164    top: 1280px;165    background: #151515;166    border-top: 1px solid #272727;167    padding: 24px 30px;168    color: #eee;169  }170  .sheet-header {171    display: flex; align-items: center; justify-content: space-between;172    padding: 12px 6px 24px 6px;173  }174  .sheet-title { font-size: 48px; font-weight: 600; }175  .sheet-actions { display: flex; align-items: center; gap: 22px; }176  .icon-btn { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; background:#1f1f1f; border-radius: 8px; border:1px solid #333; }177  .icon-btn svg { width: 34px; height: 34px; fill: #dcdcdc; }178 179  .sheet-item {180    display: flex; align-items: center; gap: 26px;181    padding: 28px 8px;182    border-top: 1px solid #262626;183    font-size: 40px;184    color: #E8E8E8;185  }186  .file-icon {187    width: 64px; height: 64px; border-radius: 8px; background: #2a2a2a;188    display:flex; align-items:center; justify-content:center; border:1px solid #3a3a3a;189  }190  .file-icon.ppt { background:#5a2b1d; }191  .file-icon.pdf { background:#4a1f1f; }192 193  /* Bottom navigation pill */194  .home-pill {195    position: absolute;196    left: 50%;197    bottom: 26px;198    transform: translateX(-50%);199    width: 360px;200    height: 12px;201    background: #EAEAEA;202    border-radius: 10px;203    opacity: .9;204  }205</style>206</head>207<body>208<div id="render-target">209 210  <!-- Status bar -->211  <div class="status-bar">212    <div>11:06</div>213    <div class="status-right">214      <!-- simple status glyphs -->215      <svg viewBox="0 0 24 24" width="44" height="44" fill="#e6e6e6"><path d="M2 12l6-6v12zM10 8l6-6v20zM18 4l6-4v24z"/></svg>216      <svg viewBox="0 0 24 24" width="44" height="44" fill="#e6e6e6"><path d="M12 3a9 9 0 100 18 9 9 0 000-18zm0 14a5 5 0 110-10 5 5 0 010 10z"/></svg>217      <svg viewBox="0 0 24 24" width="44" height="44" fill="#e6e6e6"><path d="M4 7h16v10a2 2 0 01-2 2H6a2 2 0 01-2-2V7zm12-3v2H8V4h8z"/></svg>218      <div class="dot"></div>219      <svg viewBox="0 0 24 24" width="44" height="44" fill="#e6e6e6"><path d="M3 18h18v2H3v-2zm2-6h14v5H5v-5zm3-7h8v6H8V5z"/></svg>220    </div>221  </div>222 223  <!-- Slide preview -->224  <div class="preview-area">225    <div class="slide">226      <div class="title-box">227        <div class="title-head"></div>228        <div class="title-body">Double tap to<br>add title</div>229      </div>230      <div class="slide-image">[IMG: Slide Illustration]</div>231    </div>232 233    <div class="toolbar">234      <div class="tool">235        <svg viewBox="0 0 24 24"><path d="M3 5h18v12H6l-3 3V5zm3 3v2h12V8H6zm0 4v2h8v-2H6z"/></svg>236        <span>Notes</span>237      </div>238      <div class="tool">239        <svg viewBox="0 0 24 24"><path d="M21 6H3v12h5l4 3 4-3h5V6zM5 8h14v8h-4.2L12 18.7 9.2 16H5V8z"/></svg>240        <span>Comments</span>241      </div>242    </div>243  </div>244 245  <!-- Filmstrip -->246  <div class="filmstrip">247    <div class="thumb">248      <div class="red-bar"></div>249      <div class="red-box"></div>250      <div class="thumb-index">1</div>251    </div>252    <div class="thumb">253      <div class="red-bar"></div>254      <div class="red-box" style="width: 180px;"></div>255      <div class="img-mini"></div>256      <div class="thumb-index">2</div>257    </div>258    <div class="thumb">259      <div class="red-bar"></div>260      <div class="img-mini" style="right: 24px; top: 58px; width: 180px; height: 100px;"></div>261      <div class="thumb-index">3</div>262      <div class="select-bar">3 ★</div>263    </div>264    <div class="side-plus">+</div>265  </div>266 267  <!-- Bottom Sheet -->268  <div class="bottom-sheet">269    <div class="sheet-header">270      <div class="sheet-actions">271        <div class="icon-btn" title="Back">272          <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10 12l7-6.5z"/></svg>273        </div>274        <div class="sheet-title">Full Document</div>275      </div>276      <div class="icon-btn" title="Close">277        <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/></svg>278      </div>279    </div>280 281    <div class="sheet-item">282      <div class="file-icon ppt">283        <svg viewBox="0 0 24 24" width="34" height="34" fill="#f2c6b7"><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm9 1v5h5"/></svg>284      </div>285      <div>Presentation</div>286    </div>287 288    <div class="sheet-item">289      <div class="file-icon pdf">290        <svg viewBox="0 0 24 24" width="34" height="34" fill="#f1b0b0"><path d="M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm9 1v5h5"/></svg>291      </div>292      <div>PDF</div>293    </div>294  </div>295 296  <!-- Bottom navigation pill -->297  <div class="home-pill"></div>298</div>299</body>300</html>