GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Presentation UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111;14    color: #fff;15  }16  /* Top status bar */17  .status-bar {18    height: 90px;19    background: #1a1a1a;20    display: flex;21    align-items: center;22    padding: 0 24px;23    font-weight: 500;24    font-size: 32px;25    letter-spacing: 0.2px;26  }27  .status-left { display: flex; align-items: center; gap: 22px; }28  .status-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }29  .status-icon { width: 34px; height: 34px; opacity: 0.85; }30  /* App bar */31  .app-bar {32    height: 110px;33    background: #202020;34    display: flex;35    align-items: center;36    padding: 0 24px;37    border-bottom: 1px solid #2b2b2b;38  }39  .app-title {40    font-size: 36px;41    margin-left: 18px;42    opacity: 0.95;43  }44  .spacer { flex: 1; }45  .icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }46  /* Slide preview (top) */47  .slide-preview {48    width: 1040px;49    margin: 20px;50    border: 3px solid #000;51    background: #3f2f20;52  }53  .preview-header {54    display: grid;55    grid-template-columns: 1fr 1fr 1fr 1fr;56    height: 240px;57  }58  .panel {59    position: relative;60    overflow: hidden;61  }62  .panel.brown { background: #7a4b45; }63  .panel.brown-dark { background: #6a3f3a; }64  .panel.pink { background: #cda09d; }65  .bow-svg { position: absolute; inset: 0; }66  .placeholder-img {67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    color: #757575;70    display: flex; align-items: center; justify-content: center;71    font-size: 28px; font-weight: 600;72    width: 100%; height: 100%;73  }74  .dotted-circle {75    position: absolute; width: 170px; height: 170px;76    border: 2px dashed rgba(255,255,255,0.35);77    border-radius: 50%;78    top: 35px; left: 60px;79  }80  .preview-body {81    background: #5a452e;82    padding: 40px 48px 32px 48px;83  }84  .title-text {85    font-size: 66px;86    font-weight: 600;87    color: #fff;88    margin-bottom: 40px;89  }90  .action-row { display: flex; gap: 16px; }91  .chip {92    background: #2b2b2b;93    border: 1px solid #1c1c1c;94    padding: 18px 28px;95    font-size: 34px;96    border-radius: 4px;97  }98  /* Main slide editor (second block) */99  .slide-editor {100    width: 1040px;101    margin: 20px;102    border: 4px solid #d8643a;103    display: grid;104    grid-template-columns: 1fr 300px;105    height: 900px;106  }107  .editor-left {108    background: #5a452e;109    position: relative;110  }111  .placeholder-box {112    position: absolute;113    left: 36px;114    right: 330px;115    border: 2px dashed rgba(255,255,255,0.5);116    padding: 22px;117    color: #fff;118  }119  .placeholder-title {120    top: 80px;121    font-size: 50px;122    font-weight: 600;123  }124  .placeholder-text {125    top: 280px;126    height: 360px;127    font-size: 28px;128  }129  .editor-right {130    background: transparent;131    position: relative;132    display: grid;133    grid-template-rows: 1fr 1fr;134  }135  .right-top { background: #7a4b45; position: relative; }136  .right-bottom { background: #cda09d; position: relative; }137  /* Bottom filler area */138  .filler {139    width: 100%;140    height: 930px;141    background: #000;142  }143  /* Bottom toolbar */144  .bottom-bar {145    position: absolute;146    bottom: 0;147    left: 0;148    width: 1080px;149    height: 180px;150    background: #262626;151    border-top: 1px solid #2f2f2f;152    display: flex;153    align-items: center;154    justify-content: space-around;155    color: #cfcfcf;156  }157  .bar-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }158  .bar-item svg { width: 52px; height: 52px; opacity: 0.9; }159  .bar-label { font-size: 28px; }160  .home-indicator {161    position: absolute;162    bottom: 200px;163    left: 50%;164    transform: translateX(-50%);165    width: 320px; height: 10px; border-radius: 6px; background: #fff; opacity: 0.8;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status Bar -->173  <div class="status-bar">174    <div class="status-left">175      <div>12:29</div>176      <!-- Moon icon -->177      <svg class="status-icon" viewBox="0 0 48 48">178        <path d="M28 6c-7 3-12 10-12 18 0 8 5 15 12 18-9 1-18-7-18-18S19 5 28 6z" fill="#fff"/>179      </svg>180      <!-- Play icon -->181      <svg class="status-icon" viewBox="0 0 48 48">182        <path d="M16 12v24l20-12-20-12z" fill="#fff"/>183      </svg>184      <!-- Cast icon -->185      <svg class="status-icon" viewBox="0 0 48 48">186        <path d="M6 12h36v18h-6v-12H12v6H6V12zM6 30c8 0 12 4 12 12H14c0-4-4-8-8-8v-4z" fill="#fff"/>187      </svg>188      <svg class="status-icon" viewBox="0 0 48 48"><circle cx="24" cy="24" r="4" fill="#fff"/></svg>189    </div>190    <div class="status-right">191      <!-- WiFi -->192      <svg class="status-icon" viewBox="0 0 48 48">193        <path d="M24 34l4 4-4 4-4-4 4-4zm-12-8c7-7 19-7 26 0l-4 4c-5-5-13-5-18 0l-4-4zm-8-8c11-11 33-11 44 0l-4 4c-9-9-27-9-36 0l-4-4z" fill="#fff"/>194      </svg>195      <!-- Battery -->196      <svg class="status-icon" viewBox="0 0 48 48">197        <rect x="6" y="14" width="32" height="20" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"/>198        <rect x="10" y="18" width="24" height="12" fill="#fff"/>199        <rect x="38" y="18" width="4" height="12" fill="#fff"/>200      </svg>201    </div>202  </div>203 204  <!-- App Bar -->205  <div class="app-bar">206    <!-- Back arrow -->207    <div class="icon-btn">208      <svg viewBox="0 0 48 48" width="42" height="42">209        <path d="M28 10L14 24l14 14" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>210      </svg>211    </div>212    <div class="app-title">Presentation.pptx - Saved</div>213    <div class="spacer"></div>214    <!-- More (vertical dots) -->215    <div class="icon-btn">216      <svg viewBox="0 0 48 48" width="38" height="38">217        <circle cx="24" cy="12" r="3" fill="#fff"/>218        <circle cx="24" cy="24" r="3" fill="#fff"/>219        <circle cx="24" cy="36" r="3" fill="#fff"/>220      </svg>221    </div>222  </div>223 224  <!-- Top Slide Preview -->225  <div class="slide-preview">226    <div class="preview-header">227      <!-- Panel 1: ribbon motif -->228      <div class="panel brown">229        <svg class="bow-svg" viewBox="0 0 300 240">230          <!-- cross lines -->231          <rect x="145" y="0" width="10" height="240" fill="#d9c9b8" opacity="0.6"/>232          <rect x="0" y="115" width="300" height="10" fill="#d9c9b8" opacity="0.6"/>233          <!-- bow loops -->234          <path d="M115 120c-30-40-70-40-90 0 20 40 60 40 90 0z" fill="none" stroke="#e9dccb" stroke-width="9" stroke-linecap="round"/>235          <path d="M185 120c30-40 70-40 90 0-20 40-60 40-90 0z" fill="none" stroke="#e9dccb" stroke-width="9" stroke-linecap="round"/>236        </svg>237      </div>238      <!-- Panel 2: image placeholder -->239      <div class="panel">240        <div class="placeholder-img">[IMG: Hiking gear flatlay]</div>241      </div>242      <!-- Panel 3: brown with bow and vertical band -->243      <div class="panel brown-dark">244        <svg class="bow-svg" viewBox="0 0 300 240">245          <rect x="150" y="0" width="16" height="240" fill="#d9c9b8" opacity="0.5"/>246          <path d="M92 120c-24-34-52-34-70 0 16 34 46 34 70 0z" fill="none" stroke="#e9dccb" stroke-width="9" stroke-linecap="round"/>247          <path d="M208 120c24-34 52-34 70 0-16 34-46 34-70 0z" fill="none" stroke="#e9dccb" stroke-width="9" stroke-linecap="round"/>248        </svg>249      </div>250      <!-- Panel 4: pink with dotted circle -->251      <div class="panel pink">252        <div class="dotted-circle"></div>253      </div>254    </div>255    <div class="preview-body">256      <div class="title-text">Importance of Hiking</div>257      <div class="action-row">258        <div class="chip">Edit</div>259        <div class="chip">Copy</div>260        <div class="chip">New Comment</div>261        <div class="chip">Share</div>262      </div>263    </div>264  </div>265 266  <!-- Main Slide Editor -->267  <div class="slide-editor">268    <div class="editor-left">269      <div class="placeholder-box placeholder-title">Double tap to add title</div>270      <div class="placeholder-box placeholder-text">Double tap to add text</div>271    </div>272    <div class="editor-right">273      <div class="right-top">274        <svg class="bow-svg" viewBox="0 0 300 450">275          <rect x="146" y="0" width="10" height="450" fill="#d9c9b8" opacity="0.6"/>276          <rect x="0" y="210" width="300" height="10" fill="#d9c9b8" opacity="0.6"/>277          <path d="M110 220c-30-40-70-40-90 0 20 40 60 40 90 0z" fill="none" stroke="#e9dccb" stroke-width="9" stroke-linecap="round"/>278          <path d="M190 220c30-40 70-40 90 0-20 40-60 40-90 0z" fill="none" stroke="#e9dccb" stroke-width="9" stroke-linecap="round"/>279        </svg>280      </div>281      <div class="right-bottom">282        <div class="dotted-circle" style="top: 100px; left: 60px;"></div>283      </div>284    </div>285  </div>286 287  <!-- Filler below slides -->288  <div class="filler"></div>289 290  <!-- Home indicator pill -->291  <div class="home-indicator"></div>292 293  <!-- Bottom Toolbar -->294  <div class="bottom-bar">295    <div class="bar-item">296      <svg viewBox="0 0 64 64">297        <rect x="8" y="12" width="48" height="34" rx="4" fill="none" stroke="#cfcfcf" stroke-width="3"/>298        <path d="M26 24l14 8-14 8V24z" fill="#cfcfcf"/>299      </svg>300      <div class="bar-label">Present</div>301    </div>302    <div class="bar-item">303      <svg viewBox="0 0 64 64">304        <rect x="12" y="10" width="40" height="44" rx="4" fill="none" stroke="#cfcfcf" stroke-width="3"/>305        <line x1="18" y1="22" x2="46" y2="22" stroke="#cfcfcf" stroke-width="3"/>306        <line x1="18" y1="30" x2="46" y2="30" stroke="#cfcfcf" stroke-width="3"/>307        <line x1="18" y1="38" x2="38" y2="38" stroke="#cfcfcf" stroke-width="3"/>308      </svg>309      <div class="bar-label">Notes</div>310    </div>311    <div class="bar-item">312      <svg viewBox="0 0 64 64">313        <path d="M14 42l20-20 12 12-20 20H14v-12z" fill="none" stroke="#cfcfcf" stroke-width="3"/>314        <path d="M42 18l4-4 8 8-4 4-8-8z" fill="#cfcfcf"/>315      </svg>316      <div class="bar-label">Edit</div>317    </div>318    <div class="bar-item">319      <svg viewBox="0 0 64 64">320        <circle cx="28" cy="28" r="16" fill="none" stroke="#cfcfcf" stroke-width="3"/>321        <line x1="40" y1="40" x2="52" y2="52" stroke="#cfcfcf" stroke-width="4" stroke-linecap="round"/>322      </svg>323      <div class="bar-label">Find</div>324    </div>325    <div class="bar-item">326      <svg viewBox="0 0 64 64">327        <circle cx="16" cy="42" r="6" fill="none" stroke="#cfcfcf" stroke-width="3"/>328        <circle cx="48" cy="22" r="6" fill="none" stroke="#cfcfcf" stroke-width="3"/>329        <circle cx="48" cy="50" r="6" fill="none" stroke="#cfcfcf" stroke-width="3"/>330        <line x1="22" y1="38" x2="42" y2="26" stroke="#cfcfcf" stroke-width="3"/>331        <line x1="22" y1="46" x2="42" y2="46" stroke="#cfcfcf" stroke-width="3"/>332      </svg>333      <div class="bar-label">Share</div>334    </div>335  </div>336 337</div>338</body>339</html>