GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Slide Editor Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0e0e0f;13 font-family: "Segoe UI", Roboto, Arial, sans-serif;14 color: #ffffff;15 }16 17 /* Top system status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 70px;24 color: #d6d6d6;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 28px;29 font-size: 30px;30 letter-spacing: 0.5px;31 opacity: 0.95;32 }33 34 /* App toolbar */35 .app-bar {36 position: absolute;37 top: 70px;38 left: 0;39 width: 1080px;40 height: 130px;41 border-bottom: 1px solid #1f1f1f;42 display: flex;43 align-items: center;44 padding: 0 26px;45 }46 .left-tools {47 display: flex;48 align-items: center;49 gap: 24px;50 }51 .title {52 color: #f29a52;53 font-size: 40px;54 margin-left: 24px;55 }56 .right-tools {57 margin-left: auto;58 display: flex;59 align-items: center;60 gap: 40px;61 }62 .icon {63 width: 46px;64 height: 46px;65 fill: none;66 stroke: #cfcfcf;67 stroke-width: 3;68 }69 .icon.filled { fill: #cfcfcf; stroke: none; }70 .kebab { width: 10px; height: 44px; }71 72 /* Workspace */73 .workspace {74 position: absolute;75 top: 200px;76 bottom: 430px; /* keeps space for thumbnails + bottom toolbar */77 left: 0;78 right: 0;79 background: #000;80 }81 82 /* Center slide canvas */83 .slide-wrapper {84 position: absolute;85 left: 50%;86 top: 140px;87 transform: translateX(-50%);88 width: 920px; /* 16:9 appearance */89 height: 518px;90 border: 1px solid #7bcbe3; /* subtle cyan selection outline */91 background: #22312e;92 box-shadow: 0 0 0 2px rgba(0,0,0,0.3) inset;93 }94 95 .slide-bg {96 position: absolute;97 inset: 0;98 background: linear-gradient(180deg, #253a35, #172926);99 }100 .slide-right-panel {101 position: absolute;102 top: 0;103 right: 0;104 width: 280px;105 height: 100%;106 background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.08) 45%, rgba(255,255,255,0) 60%) , 107 linear-gradient(180deg, #d1f0c6, #a9dc9a 60%, #9fd490);108 opacity: 0.95;109 }110 111 /* Title box */112 .text-box {113 position: absolute;114 left: 170px;115 right: 220px;116 top: 175px;117 padding: 22px;118 border: 1px dashed #8fd1da;119 color: #ffffff;120 text-align: center;121 }122 .title-big {123 font-size: 64px;124 font-weight: 700;125 letter-spacing: 1px;126 line-height: 1.15;127 }128 .subtitle {129 position: absolute;130 top: 120px;131 left: 210px;132 right: 260px;133 text-align: center;134 font-size: 24px;135 color: #d7e6e8;136 }137 138 /* Notes/Comments bar */139 .notes-bar {140 position: absolute;141 bottom: 350px;142 left: 0;143 width: 1080px;144 height: 80px;145 display: flex;146 align-items: center;147 padding: 0 36px;148 gap: 40px;149 color: #e7e7e7;150 background: transparent;151 }152 .notes-item {153 display: flex;154 align-items: center;155 gap: 16px;156 font-size: 34px;157 }158 .notes-icon {159 width: 42px;160 height: 42px;161 stroke: #e7e7e7;162 fill: none;163 stroke-width: 3;164 }165 166 /* Thumbnail strip */167 .thumb-strip {168 position: absolute;169 bottom: 150px;170 left: 0;171 width: 1080px;172 height: 200px;173 background: #0a0a0a;174 border-top: 1px solid #1a1a1a;175 display: flex;176 align-items: center;177 padding: 0 24px;178 gap: 26px;179 }180 .thumb {181 width: 230px;182 height: 150px;183 background: #1f2c28;184 border: 1px solid #2f3f3b;185 position: relative;186 display: flex;187 overflow: hidden;188 }189 .thumb .thumb-right {190 width: 60px;191 height: 100%;192 background: #b7e3b2;193 margin-left: auto;194 }195 .thumb .active-bar {196 position: absolute;197 bottom: 0;198 left: 0;199 height: 26px;200 width: 100%;201 background: #cc6e2f;202 }203 .thumb .index {204 position: absolute;205 bottom: 0;206 left: 12px;207 font-size: 30px;208 color: #fff;209 font-weight: 600;210 line-height: 26px;211 }212 213 /* Bottom toolbar */214 .bottom-toolbar {215 position: absolute;216 bottom: 0;217 left: 0;218 width: 1080px;219 height: 150px;220 background: #1a1a1a;221 border-top: 1px solid #222;222 display: flex;223 align-items: center;224 justify-content: space-between;225 padding: 0 36px;226 }227 .tool {228 width: 110px;229 height: 110px;230 border-radius: 10px;231 display: flex;232 align-items: center;233 justify-content: center;234 }235 .tool svg { width: 60px; height: 60px; stroke: #cfcfcf; fill: none; stroke-width: 3; }236 .tool .solid { fill: #cfcfcf; stroke: none; }237 238 /* Home indicator */239 .home-indicator {240 position: absolute;241 bottom: 10px;242 left: 50%;243 transform: translateX(-50%);244 width: 360px;245 height: 8px;246 background: #e5e5e5;247 border-radius: 6px;248 opacity: 0.85;249 }250</style>251</head>252<body>253<div id="render-target">254 255 <!-- Status Bar -->256 <div class="status-bar">257 <div style="display:flex; align-items:center; gap:18px;">258 <span>8:35</span>259 <!-- download icon -->260 <svg class="icon" viewBox="0 0 24 24">261 <path d="M12 3v10"></path>262 <path d="M7 10l5 5 5-5"></path>263 <path d="M4 20h16"></path>264 </svg>265 </div>266 <div style="display:flex; align-items:center; gap:10px;">267 <!-- battery -->268 <svg width="54" height="28" viewBox="0 0 54 28">269 <rect x="1" y="4" width="46" height="20" rx="3" ry="3" fill="none" stroke="#d6d6d6" stroke-width="3"/>270 <rect x="5" y="7" width="38" height="14" fill="#d6d6d6"/>271 <rect x="48" y="10" width="5" height="8" fill="#d6d6d6"/>272 </svg>273 </div>274 </div>275 276 <!-- App Bar -->277 <div class="app-bar">278 <div class="left-tools">279 <!-- check/tick -->280 <svg class="icon" viewBox="0 0 24 24">281 <path d="M3 12l6 6 12-12" stroke-linecap="round" stroke-linejoin="round"></path>282 </svg>283 <div class="title">Presentation (1)</div>284 </div>285 286 <div class="right-tools">287 <!-- pencil -->288 <svg class="icon" viewBox="0 0 24 24">289 <path d="M3 17l4 4 13-13-4-4L3 17z"></path>290 <path d="M14 5l4 4"></path>291 </svg>292 <!-- cloud -->293 <svg class="icon" viewBox="0 0 24 24">294 <path d="M6 18h11a4 4 0 0 0 0-8 5 5 0 0 0-9.8-1A4 4 0 1 0 6 18z"></path>295 </svg>296 <!-- search -->297 <svg class="icon" viewBox="0 0 24 24">298 <circle cx="11" cy="11" r="7"></circle>299 <path d="M20 20l-4-4"></path>300 </svg>301 <!-- slideshow screen -->302 <svg class="icon" viewBox="0 0 24 24">303 <rect x="3" y="4" width="18" height="12"></rect>304 <path d="M12 16v4M8 20h8"></path>305 </svg>306 <!-- undo curve -->307 <svg class="icon" viewBox="0 0 24 24">308 <path d="M9 7H4v5"></path>309 <path d="M4 12a8 8 0 1 0 4-7"></path>310 </svg>311 <!-- kebab -->312 <svg class="kebab" viewBox="0 0 6 24">313 <circle cx="3" cy="4" r="2" fill="#cfcfcf"></circle>314 <circle cx="3" cy="12" r="2" fill="#cfcfcf"></circle>315 <circle cx="3" cy="20" r="2" fill="#cfcfcf"></circle>316 </svg>317 </div>318 </div>319 320 <!-- Workspace -->321 <div class="workspace">322 <div class="slide-wrapper">323 <div class="slide-bg"></div>324 <div class="slide-right-panel"></div>325 326 <div class="subtitle">Double tap to add subtitle</div>327 <div class="text-box">328 <div class="title-big">Double tap to<br>add title</div>329 </div>330 </div>331 </div>332 333 <!-- Notes / Comments bar -->334 <div class="notes-bar">335 <div class="notes-item">336 <svg class="notes-icon" viewBox="0 0 24 24">337 <rect x="4" y="3" width="16" height="18" rx="2" ry="2"></rect>338 <path d="M8 7h8M8 11h8M8 15h6"></path>339 </svg>340 <span>Notes</span>341 </div>342 <div class="notes-item">343 <svg class="notes-icon" viewBox="0 0 24 24">344 <path d="M4 18l4-4h12V4H4z"></path>345 </svg>346 <span>Comments</span>347 </div>348 </div>349 350 <!-- Thumbnail strip -->351 <div class="thumb-strip">352 <div class="thumb">353 <div class="thumb-right"></div>354 <div class="active-bar"></div>355 <div class="index">1</div>356 </div>357 </div>358 359 <!-- Bottom toolbar -->360 <div class="bottom-toolbar">361 <div class="tool">362 <!-- layout/panels icon -->363 <svg viewBox="0 0 24 24">364 <rect x="3" y="4" width="18" height="16"></rect>365 <path d="M9 4v16M3 12h18"></path>366 </svg>367 </div>368 <div class="tool">369 <!-- add icon -->370 <svg viewBox="0 0 24 24">371 <path d="M12 5v14M5 12h14"></path>372 </svg>373 </div>374 <div class="tool">375 <!-- table/grid -->376 <svg viewBox="0 0 24 24">377 <rect x="3" y="4" width="18" height="16"></rect>378 <path d="M3 10h18M3 16h18M9 4v16M15 4v16"></path>379 </svg>380 </div>381 <div class="tool">382 <!-- image -->383 <svg viewBox="0 0 24 24">384 <rect x="3" y="4" width="18" height="16"></rect>385 <circle cx="9" cy="9" r="2"></circle>386 <path d="M3 16l6-4 4 3 5-5 3 3v7H3z"></path>387 </svg>388 </div>389 <div class="tool">390 <!-- circle/shape -->391 <svg viewBox="0 0 24 24">392 <circle cx="12" cy="12" r="7"></circle>393 </svg>394 </div>395 <div class="tool">396 <!-- text A -->397 <svg viewBox="0 0 24 24">398 <path d="M12 5l6 14h-3l-1.2-3H10.2L9 19H6l6-14zM11 13h2"></path>399 </svg>400 </div>401 <div class="tool">402 <!-- camera -->403 <svg viewBox="0 0 24 24">404 <rect x="3" y="6" width="18" height="14" rx="2" ry="2"></rect>405 <path d="M9 6l2-2h2l2 2"></path>406 <circle cx="12" cy="13" r="4"></circle>407 </svg>408 </div>409 <div class="tool">410 <!-- align/arrange -->411 <svg viewBox="0 0 24 24">412 <path d="M4 6h16M8 12h12M4 18h10"></path>413 </svg>414 </div>415 <div class="tool">416 <!-- play -->417 <svg viewBox="0 0 24 24">418 <polygon class="solid" points="8,5 20,12 8,19"></polygon>419 </svg>420 </div>421 </div>422 423 <div class="home-indicator"></div>424</div>425</body>426</html>