GD-ML/AndroidCode
13.4k
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>Presentation Editor Mock</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 font-family: "Segoe UI", Arial, sans-serif;16 color: #FFFFFF;17 }18 19 /* Top area */20 .top-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 230px;26 background: #1a1a1a;27 }28 .status-row {29 height: 70px;30 display: flex;31 align-items: center;32 padding: 0 28px;33 font-size: 32px;34 color: #e5e5e5;35 }36 .status-left { display:flex; align-items:center; gap:18px; }37 .status-right { margin-left:auto; display:flex; align-items:center; gap:26px; }38 .icon {39 width: 40px;40 height: 40px;41 stroke: #d5d5d5;42 fill: none;43 stroke-width: 2.2;44 }45 .title-row {46 height: 84px;47 display: flex;48 align-items: center;49 justify-content: center;50 color: #cc7a40;51 font-size: 44px;52 letter-spacing: 0.2px;53 }54 .tools-row {55 height: 76px;56 display: flex;57 align-items: center;58 justify-content: space-around;59 padding: 0 70px;60 color: #d8d8d8;61 }62 .tool {63 display: flex;64 align-items: center;65 justify-content: center;66 width: 60px;67 height: 60px;68 }69 .tool .icon { stroke: #cfcfcf; width: 54px; height: 54px; }70 71 /* Slide canvas area */72 .canvas {73 position: absolute;74 top: 380px;75 left: 80px;76 width: 920px;77 height: 620px;78 background: #ffffff;79 border-radius: 8px;80 box-shadow: 0 6px 20px rgba(0,0,0,0.35);81 }82 /* subtle gray corner accents to mimic design lines */83 .canvas::before, .canvas::after {84 content: "";85 position: absolute;86 border-radius: 50%;87 border: 2px dashed #eaeaea;88 opacity: 0.7;89 }90 .canvas::before { width: 820px; height: 820px; left: -420px; top: -160px; }91 .canvas::after { width: 780px; height: 780px; right: -420px; bottom: -160px; }92 93 /* Slide content */94 .red-tab {95 position: absolute;96 left: 120px;97 top: 170px;98 width: 350px;99 height: 46px;100 background: #e64a19;101 border-radius: 2px;102 }103 .title-card {104 position: absolute;105 left: 120px;106 top: 225px;107 width: 350px;108 height: 290px;109 background: #e64a19;110 display: flex;111 align-items: center;112 justify-content: center;113 color: #ffffff;114 font-size: 40px;115 text-align: center;116 border: 2px dashed #ffa78a;117 box-sizing: border-box;118 }119 .title-card .pointer {120 position: absolute;121 bottom: -22px;122 left: 50%;123 transform: translateX(-50%);124 width: 0; height: 0;125 border-left: 16px solid transparent;126 border-right: 16px solid transparent;127 border-top: 22px solid #e64a19;128 }129 130 .slide-image {131 position: absolute;132 right: 100px;133 top: 210px;134 width: 520px;135 height: 330px;136 background: #E0E0E0;137 border: 1px solid #BDBDBD;138 display: flex;139 align-items: center;140 justify-content: center;141 color: #757575;142 font-size: 28px;143 }144 145 /* Notes & comments */146 .notes-comments {147 position: absolute;148 top: 1450px;149 left: 60px;150 display: flex;151 align-items: center;152 gap: 60px;153 color: #d9d9d9;154 font-size: 36px;155 }156 .notes-comments .ic { width: 42px; height: 42px; stroke: #d9d9d9; fill: none; stroke-width: 2.2; vertical-align: middle; }157 158 /* Filmstrip */159 .filmstrip {160 position: absolute;161 top: 1520px;162 left: 0;163 width: 100%;164 height: 320px;165 background: #0f0f0f;166 border-top: 1px solid #333;167 display: flex;168 align-items: center;169 gap: 26px;170 padding: 0 30px;171 box-sizing: border-box;172 }173 .thumb {174 width: 250px;175 height: 180px;176 background: #ffffff;177 border-radius: 6px;178 position: relative;179 box-shadow: 0 4px 12px rgba(0,0,0,0.35);180 }181 .thumb .mini-red {182 position: absolute;183 left: 18px;184 top: 22px;185 width: 120px;186 height: 26px;187 background: #e64a19;188 }189 .thumb .mini-card {190 position: absolute;191 left: 18px;192 top: 54px;193 width: 120px;194 height: 78px;195 background: #e64a19;196 border: 2px dashed #ffa78a;197 }198 .thumb .mini-img {199 position: absolute;200 right: 18px;201 top: 54px;202 width: 90px;203 height: 78px;204 background: #E0E0E0;205 border: 1px solid #BDBDBD;206 }207 .thumb .label {208 position: absolute;209 left: 10px;210 bottom: -36px;211 color: #cfcfcf;212 font-size: 24px;213 }214 .thumb.selected::after {215 content: "";216 position: absolute;217 left: 0; right: 0; bottom: 0;218 height: 48px;219 background: #c7773f;220 border-bottom-left-radius: 6px;221 border-bottom-right-radius: 6px;222 }223 .thumb.selected .label { color: #f0c8aa; }224 225 /* Bottom toolbar */226 .bottom-toolbar {227 position: absolute;228 left: 0;229 bottom: 120px;230 width: 100%;231 height: 120px;232 background: #151515;233 display: flex;234 align-items: center;235 padding: 0 40px;236 gap: 48px;237 box-sizing: border-box;238 border-top: 1px solid #2a2a2a;239 }240 .bt-icon {241 width: 76px;242 height: 76px;243 display: flex;244 align-items: center;245 justify-content: center;246 background: #1e1e1e;247 border-radius: 8px;248 border: 1px solid #2b2b2b;249 }250 .bt-icon .icon { width: 46px; height: 46px; stroke: #e0e0e0; }251 252 /* Home indicator */253 .home-indicator {254 position: absolute;255 bottom: 40px;256 left: 50%;257 transform: translateX(-50%);258 width: 320px;259 height: 8px;260 background: #e6e6e6;261 border-radius: 8px;262 opacity: 0.9;263 }264</style>265</head>266<body>267<div id="render-target">268 269 <!-- Top bar -->270 <div class="top-bar">271 <div class="status-row">272 <div class="status-left">273 <div style="font-weight:600;">11:05</div>274 <!-- check-circle -->275 <svg class="icon" viewBox="0 0 24 24">276 <circle cx="12" cy="12" r="9"></circle>277 <path d="M7 12l3 3 6-6"></path>278 </svg>279 <!-- sun -->280 <svg class="icon" viewBox="0 0 24 24">281 <circle cx="12" cy="12" r="4"></circle>282 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.2 2.2M17.2 17.2l2.2 2.2M4.6 19.4l2.2-2.2M17.2 6.8l2.2-2.2"></path>283 </svg>284 <!-- square doc -->285 <svg class="icon" viewBox="0 0 24 24">286 <rect x="5" y="3" width="14" height="18" rx="2"></rect>287 <path d="M8 7h8M8 11h8M8 15h8"></path>288 </svg>289 <!-- back arrow -->290 <svg class="icon" viewBox="0 0 24 24">291 <path d="M15 18l-6-6 6-6"></path>292 </svg>293 <!-- dot -->294 <svg class="icon" viewBox="0 0 24 24">295 <circle cx="12" cy="12" r="2.5" fill="#d5d5d5" stroke="none"></circle>296 </svg>297 </div>298 <div class="status-right">299 <!-- wifi -->300 <svg class="icon" viewBox="0 0 24 24">301 <path d="M2 9c5-5 15-5 20 0"></path>302 <path d="M5 12c3.5-3.5 10.5-3.5 14 0"></path>303 <path d="M8 15c2-2 6-2 8 0"></path>304 <circle cx="12" cy="18" r="1.8" fill="#d5d5d5" stroke="none"></circle>305 </svg>306 <!-- battery -->307 <svg class="icon" viewBox="0 0 26 24">308 <rect x="3" y="6" width="18" height="12" rx="2"></rect>309 <rect x="21.5" y="10" width="2.5" height="4" rx="1" fill="none"></rect>310 <rect x="5" y="8" width="12" height="8" fill="#d5d5d5" stroke="none"></rect>311 </svg>312 </div>313 </div>314 315 <div class="title-row">Presentation - Saved</div>316 317 <div class="tools-row">318 <!-- tick -->319 <div class="tool">320 <svg class="icon" viewBox="0 0 24 24"><path d="M4 12l5 5 11-11"></path></svg>321 </div>322 <!-- pen -->323 <div class="tool">324 <svg class="icon" viewBox="0 0 24 24">325 <path d="M3 21l3-0.5 11-11-2.5-2.5-11 11L3 21z"></path>326 <path d="M14.5 4.5l2.5 2.5"></path>327 </svg>328 </div>329 <!-- cloud upload -->330 <div class="tool">331 <svg class="icon" viewBox="0 0 24 24">332 <path d="M6 16a4 4 0 010-8 5 5 0 019.5-1.5A4.5 4.5 0 1120 16H6z"></path>333 <path d="M12 13v6M9.5 15.5L12 13l2.5 2.5"></path>334 </svg>335 </div>336 <!-- search -->337 <div class="tool">338 <svg class="icon" viewBox="0 0 24 24">339 <circle cx="10.5" cy="10.5" r="6.5"></circle>340 <path d="M16 16l5 5"></path>341 </svg>342 </div>343 <!-- presentation screen -->344 <div class="tool">345 <svg class="icon" viewBox="0 0 24 24">346 <rect x="3" y="5" width="18" height="11" rx="2"></rect>347 <path d="M12 16v4M7 20h10"></path>348 </svg>349 </div>350 <!-- undo -->351 <div class="tool">352 <svg class="icon" viewBox="0 0 24 24">353 <path d="M9 7l-5 5 5 5"></path>354 <path d="M4 12h10a5 5 0 010 10"></path>355 </svg>356 </div>357 <!-- more (vertical dots) -->358 <div class="tool">359 <svg class="icon" viewBox="0 0 24 24">360 <circle cx="12" cy="5" r="2" fill="#cfcfcf" stroke="none"></circle>361 <circle cx="12" cy="12" r="2" fill="#cfcfcf" stroke="none"></circle>362 <circle cx="12" cy="19" r="2" fill="#cfcfcf" stroke="none"></circle>363 </svg>364 </div>365 </div>366 </div>367 368 <!-- Main slide canvas -->369 <div class="canvas">370 <div class="red-tab"></div>371 372 <div class="title-card">373 <div>Double tap to<br>add title</div>374 <div class="pointer"></div>375 </div>376 377 <div class="slide-image">[IMG: Secure Distributed Workspace]</div>378 </div>379 380 <!-- Notes / Comments -->381 <div class="notes-comments">382 <div style="display:flex; align-items:center; gap:14px;">383 <svg class="ic" viewBox="0 0 24 24">384 <rect x="3" y="3" width="18" height="14" rx="3"></rect>385 <path d="M7 20l4-3h10"></path>386 </svg>387 <span>Notes</span>388 </div>389 <div style="display:flex; align-items:center; gap:14px;">390 <svg class="ic" viewBox="0 0 24 24">391 <path d="M21 15a4 4 0 01-4 4H8l-5 4V6a4 4 0 014-4h10a4 4 0 014 4v9z"></path>392 </svg>393 <span>Comments</span>394 </div>395 </div>396 397 <!-- Filmstrip of slides -->398 <div class="filmstrip">399 <div class="thumb">400 <div class="mini-red"></div>401 <div class="mini-card"></div>402 <div class="label">1 ★</div>403 </div>404 <div class="thumb">405 <div class="mini-red" style="left: 24px; width: 140px;"></div>406 <div class="mini-card" style="left: 24px; width: 140px;"></div>407 <div class="label">2 ★</div>408 </div>409 <div class="thumb selected">410 <div class="mini-red"></div>411 <div class="mini-card"></div>412 <div class="mini-img"></div>413 <div class="label">3 ★</div>414 </div>415 <div class="thumb">416 <div class="mini-red" style="left: 24px; width: 140px;"></div>417 <div class="mini-card" style="left: 24px; width: 140px; height: 70px;"></div>418 <div class="mini-img" style="top: 46px;"></div>419 <div class="label">4</div>420 </div>421 </div>422 423 <!-- Bottom toolbar -->424 <div class="bottom-toolbar">425 <!-- layout/grid -->426 <div class="bt-icon">427 <svg class="icon" viewBox="0 0 24 24">428 <rect x="3" y="3" width="8" height="8"></rect>429 <rect x="13" y="3" width="8" height="8"></rect>430 <rect x="3" y="13" width="8" height="8"></rect>431 <rect x="13" y="13" width="8" height="8"></rect>432 </svg>433 </div>434 <!-- comment bubble -->435 <div class="bt-icon">436 <svg class="icon" viewBox="0 0 24 24">437 <rect x="3" y="4" width="18" height="12" rx="3"></rect>438 <path d="M7 20l4-4h7"></path>439 </svg>440 </div>441 <!-- table -->442 <div class="bt-icon">443 <svg class="icon" viewBox="0 0 24 24">444 <rect x="3" y="5" width="18" height="14"></rect>445 <path d="M3 10h18M8 5v14M16 5v14"></path>446 </svg>447 </div>448 <!-- image insert -->449 <div class="bt-icon">450 <svg class="icon" viewBox="0 0 24 24">451 <rect x="3" y="5" width="18" height="14" rx="2"></rect>452 <circle cx="9" cy="10" r="2.5"></circle>453 <path d="M3 17l5-4 4 3 3-2 6 3"></path>454 </svg>455 </div>456 <!-- shapes (circle) -->457 <div class="bt-icon">458 <svg class="icon" viewBox="0 0 24 24">459 <circle cx="12" cy="12" r="5"></circle>460 </svg>461 </div>462 <!-- text A -->463 <div class="bt-icon">464 <svg class="icon" viewBox="0 0 24 24">465 <path d="M5 19h14"></path>466 <path d="M12 5l-6 14h3l1.5-4h5L17 19h3L12 5z"></path>467 </svg>468 </div>469 <!-- camera -->470 <div class="bt-icon">471 <svg class="icon" viewBox="0 0 24 24">472 <path d="M4 7h4l2-2h4l2 2h4v12H4z"></path>473 <circle cx="12" cy="13" r="4"></circle>474 </svg>475 </div>476 <!-- crop -->477 <div class="bt-icon">478 <svg class="icon" viewBox="0 0 24 24">479 <path d="M7 3v14h14"></path>480 <path d="M3 7h14v14"></path>481 </svg>482 </div>483 </div>484 485 <div class="home-indicator"></div>486</div>487</body>488</html>