GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Presentation Editor UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15  }16 17  /* Status bar */18  .statusbar {19    height: 100px;20    padding: 0 28px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #fff;25    font-size: 40px;26  }27  .status-left {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .chip {33    width: 48px; height: 48px; border-radius: 24px; background: #2A2A2A; border: 1px solid #3a3a3a;34    display: flex; align-items: center; justify-content: center; font-size: 26px;35  }36  .status-right { display: flex; align-items: center; gap: 20px; }37  .icon { width: 42px; height: 42px; }38  .battery { width: 58px; height: 32px; }39 40  /* Top toolbar */41  .toolbar {42    height: 150px;43    padding: 0 26px;44    display: flex;45    align-items: center;46    gap: 26px;47    border-bottom: 1px solid #1f1f1f;48  }49  .title {50    color: #CC7A3A;51    font-size: 44px;52    margin-right: auto;53  }54  .tool-icon {55    width: 56px; height: 56px;56    stroke: #D0D0D0; fill: none; stroke-width: 3;57  }58  .check-wrap { margin-right: 12px; }59  .check {60    width: 56px; height: 56px; stroke: #D0D0D0; fill: none; stroke-width: 4;61  }62 63  /* Workspace (slide area) */64  .workspace {65    height: 1480px;66    background: #0C0C0C;67    position: relative;68  }69  .slide-frame {70    position: absolute;71    left: 52px;72    top: 360px;73    width: 976px;74    height: 560px;75    border: 2px solid #BFBFBF;76    background: #1f2a28;77    display: flex;78  }79  .slide-left {80    position: relative;81    width: calc(100% - 230px);82    background: linear-gradient(180deg, #243532 0%, #1f2a28 100%);83    overflow: hidden;84  }85  .accent-line {86    position: absolute; left: 26px; top: 20px; bottom: 20px;87    width: 6px; background: #6ED0DB;88  }89  .accent-triangle {90    position: absolute; left: 62px; top: 210px;91    width: 0; height: 0; border-left: 12px solid #6ED0DB; border-top: 12px solid transparent; border-bottom: 12px solid transparent;92  }93  .title-box {94    position: absolute;95    left: 170px; right: 140px; top: 210px;96    height: 180px;97    border: 2px dashed rgba(255,255,255,0.5);98    display: flex; align-items: center; justify-content: center;99    color: #FFFFFF;100    font-size: 64px; font-weight: 600; text-align: center; line-height: 1.15;101  }102  .subtitle {103    position: absolute; right: 160px; top: 180px;104    color: #DADADA; font-size: 28px;105  }106  .slide-right {107    width: 230px;108    background: linear-gradient(180deg, #CFE9B9 0%, #B5E09F 100%);109  }110 111  /* Notes & comments row */112  .notes-row {113    position: absolute;114    left: 26px; right: 26px; bottom: 430px;115    height: 92px;116    display: flex; align-items: center; gap: 34px;117    color: #D8D8D8; font-size: 36px;118  }119  .notes-item { display: flex; align-items: center; gap: 16px; }120 121  /* Filmstrip area */122  .filmstrip {123    position: absolute;124    left: 0; right: 0; bottom: 260px;125    height: 160px;126    padding: 0 26px;127    display: flex; align-items: center; gap: 20px;128    background: #0F0F0F;129  }130  .thumb {131    width: 260px; height: 160px; border: 2px solid #3a3a3a; background: #E0E0E0;132    display: flex; align-items: flex-end; justify-content: center; color: #757575; font-size: 26px;133    position: relative;134  }135  .thumb::after {136    content: "1";137    position: absolute; left: 0; right: 0; bottom: 0;138    height: 36px; background: #C0602A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px;139  }140 141  /* Bottom toolbar */142  .bottom-toolbar {143    position: absolute; left: 0; right: 0; bottom: 70px;144    height: 160px; background: #1A1A1A; border-top: 1px solid #232323;145    display: flex; align-items: center; justify-content: space-around;146    padding: 0 24px;147  }148  .bt-icon {149    width: 72px; height: 72px; stroke: #BDBDBD; fill: none; stroke-width: 3;150  }151 152  /* Home/gesture bar */153  .gesture {154    position: absolute; left: 50%; transform: translateX(-50%);155    bottom: 18px; width: 360px; height: 10px; background: #ffffff; border-radius: 6px; opacity: 0.8;156  }157</style>158</head>159<body>160<div id="render-target">161  <!-- Status bar -->162  <div class="statusbar">163    <div class="status-left">164      <div>9:42</div>165      <div class="chip">B</div>166      <div class="chip">ib</div>167      <div class="chip">T</div>168      <div style="width:10px;height:10px;background:#CFCFCF;border-radius:5px;"></div>169    </div>170    <div class="status-right">171      <!-- WiFi -->172      <svg class="icon" viewBox="0 0 24 24">173        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"/>174        <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"/>175        <path d="M9 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" fill="none"/>176        <circle cx="12" cy="19" r="1.6" fill="#fff"/>177      </svg>178      <!-- Battery -->179      <svg class="battery" viewBox="0 0 26 14">180        <rect x="1" y="1" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"/>181        <rect x="3" y="3" width="16" height="8" fill="#fff"/>182        <rect x="23" y="4" width="3" height="6" fill="#fff"/>183      </svg>184    </div>185  </div>186 187  <!-- Toolbar -->188  <div class="toolbar">189    <svg class="check" viewBox="0 0 24 24" class="check-wrap">190      <path d="M4 13l5 5 11-13" />191    </svg>192    <div class="title">Presentation</div>193    <!-- Pen -->194    <svg class="tool-icon" viewBox="0 0 24 24">195      <path d="M3 21l5-2 11-11-4-4L4 15l-1 6z"/>196    </svg>197    <!-- Cloud upload -->198    <svg class="tool-icon" viewBox="0 0 24 24">199      <path d="M7 18h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9-2 4 4 0 0 0 0 10z"/>200      <path d="M12 8v7m0 0l-3-3m3 3l3-3"/>201    </svg>202    <!-- Search -->203    <svg class="tool-icon" viewBox="0 0 24 24">204      <circle cx="10" cy="10" r="6"/>205      <path d="M15 15l5 5"/>206    </svg>207    <!-- Slide icon -->208    <svg class="tool-icon" viewBox="0 0 24 24">209      <rect x="3" y="4" width="18" height="12" rx="1"/>210      <path d="M12 16v4M8 20h8"/>211    </svg>212    <!-- Undo -->213    <svg class="tool-icon" viewBox="0 0 24 24">214      <path d="M8 9H4l4-4"/>215      <path d="M20 20c0-6-6-9-12-9"/>216    </svg>217    <!-- Kebab -->218    <svg class="tool-icon" viewBox="0 0 24 24">219      <circle cx="12" cy="5" r="1.6"/>220      <circle cx="12" cy="12" r="1.6"/>221      <circle cx="12" cy="19" r="1.6"/>222    </svg>223  </div>224 225  <!-- Workspace -->226  <div class="workspace">227    <!-- Slide preview -->228    <div class="slide-frame">229      <div class="slide-left">230        <div class="accent-line"></div>231        <div class="accent-triangle"></div>232        <div class="subtitle">Double tap to add subtitle</div>233        <div class="title-box">234          Double tap to<br>add title235        </div>236      </div>237      <div class="slide-right"></div>238    </div>239 240    <!-- Notes & Comments -->241    <div class="notes-row">242      <div class="notes-item">243        <svg class="icon" viewBox="0 0 24 24">244          <rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#D0D0D0" stroke-width="2"/>245          <path d="M7 8h10M7 12h10M7 16h6" stroke="#D0D0D0" stroke-width="2"/>246        </svg>247        <div>Notes</div>248      </div>249      <div class="notes-item">250        <svg class="icon" viewBox="0 0 24 24">251          <path d="M4 6h16v10H8l-4 4V6z" fill="none" stroke="#D0D0D0" stroke-width="2"/>252        </svg>253        <div>Comments</div>254      </div>255    </div>256 257    <!-- Filmstrip thumbnails -->258    <div class="filmstrip">259      <div class="thumb">[IMG: Slide thumbnail]</div>260      <div style="flex:1; height: 100%; border: 1px solid #303030;"></div>261      <div style="width:60px; height:60px; border:1px solid #3a3a3a; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#8f8f8f;">+</div>262    </div>263 264    <!-- Bottom toolbar -->265    <div class="bottom-toolbar">266      <!-- Layout -->267      <svg class="bt-icon" viewBox="0 0 24 24">268        <rect x="3" y="3" width="18" height="18" rx="2"/>269        <rect x="6" y="6" width="6" height="12"/>270        <rect x="13" y="6" width="5" height="12"/>271      </svg>272      <!-- Comment bubble -->273      <svg class="bt-icon" viewBox="0 0 24 24">274        <path d="M4 5h16v11H9l-5 5V5z"/>275      </svg>276      <!-- Table -->277      <svg class="bt-icon" viewBox="0 0 24 24">278        <rect x="4" y="4" width="16" height="16"/>279        <path d="M4 10h16M4 16h16M10 4v16M16 4v16"/>280      </svg>281      <!-- Image -->282      <svg class="bt-icon" viewBox="0 0 24 24">283        <rect x="4" y="5" width="16" height="14"/>284        <circle cx="9" cy="10" r="2"/>285        <path d="M4 16l5-4 3 3 2-2 6 5"/>286      </svg>287      <!-- Shape (circle) -->288      <svg class="bt-icon" viewBox="0 0 24 24">289        <circle cx="12" cy="12" r="6"/>290      </svg>291      <!-- Text -->292      <svg class="bt-icon" viewBox="0 0 24 24">293        <path d="M4 6h16M10 6v12M14 6v12"/>294      </svg>295      <!-- Camera -->296      <svg class="bt-icon" viewBox="0 0 24 24">297        <rect x="3" y="7" width="18" height="14"/>298        <path d="M8 7l2-3h4l2 3"/>299        <circle cx="12" cy="14" r="4"/>300      </svg>301      <!-- Crop -->302      <svg class="bt-icon" viewBox="0 0 24 24">303        <path d="M6 3v12h12M3 6h12v12"/>304      </svg>305    </div>306 307    <!-- Gesture bar -->308    <div class="gesture"></div>309  </div>310</div>311</body>312</html>