GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile Editor 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: #121212;14 font-family: "Roboto", Arial, Helvetica, sans-serif;15 color: #ffffff;16 }17 18 /* Top status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0; right: 0;23 height: 96px;24 background: #1b1b1b;25 display: flex;26 align-items: center;27 padding: 0 32px;28 box-sizing: border-box;29 font-size: 34px;30 }31 .status-bar .left { flex: 0 0 auto; }32 .status-bar .right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .icon {39 width: 40px; height: 40px;40 display: inline-block;41 }42 .icon svg { width: 100%; height: 100%; fill: #ffffff; }43 44 /* App toolbar */45 .toolbar {46 position: absolute;47 top: 96px;48 left: 0; right: 0;49 height: 120px;50 background: #1b1b1b;51 border-top: 1px solid #232323;52 border-bottom: 1px solid #232323;53 display: flex;54 align-items: center;55 padding: 0 28px;56 box-sizing: border-box;57 }58 .toolbar .actions {59 display: flex;60 align-items: center;61 gap: 44px;62 margin-left: 8px;63 }64 .toolbar .title-area {65 position: absolute;66 bottom: -54px;67 left: 28px;68 font-size: 36px;69 color: #d0d0d0;70 display: flex;71 align-items: center;72 gap: 12px;73 }74 .toolbar .modified {75 position: absolute;76 bottom: -54px;77 right: 28px;78 font-size: 28px;79 color: #8b8b8b;80 }81 82 /* Workspace main area */83 .workspace {84 position: absolute;85 top: 216px;86 left: 0; right: 0; bottom: 0;87 }88 89 /* Slide strip (visible portion of the slide) */90 .slide-strip {91 position: absolute;92 top: 540px;93 left: 0;94 width: 1080px;95 height: 520px;96 background:97 radial-gradient(900px 420px at 82% 20%, rgba(76,148,255,0.45), rgba(2,18,52,0.15) 60%, rgba(0,0,0,0) 80%),98 radial-gradient(800px 260px at 18% 80%, rgba(32,74,177,0.35), rgba(12,24,64,0.2) 60%, rgba(0,0,0,0) 85%),99 linear-gradient(90deg, #0c1430 0%, #0b1330 60%, #152b5d 100%);100 overflow: visible;101 border-top: 1px solid #0a0f22;102 border-bottom: 1px solid #0a0f22;103 }104 105 /* Title dashed box and text */106 .title-box {107 position: absolute;108 left: 60px;109 top: 110px;110 width: 580px;111 height: 190px;112 border: 2px dashed rgba(255,255,255,0.28);113 border-radius: 6px;114 }115 .title-text {116 position: absolute;117 left: 80px;118 top: 130px;119 font-weight: 800;120 font-size: 82px;121 letter-spacing: 1px;122 color: #ffbf1b;123 white-space: nowrap;124 }125 .title-underline {126 position: absolute;127 left: 76px;128 top: 230px;129 width: 140px;130 height: 6px;131 background: #ffbf1b;132 border-radius: 3px;133 }134 135 /* Subtitle dashed box */136 .subtitle-box {137 position: absolute;138 left: 60px;139 top: 280px;140 width: 440px;141 height: 100px;142 border: 2px dashed rgba(255,255,255,0.28);143 border-radius: 6px;144 }145 .subtitle-text {146 position: absolute;147 left: 80px;148 top: 306px;149 font-size: 36px;150 color: #d7d7d7;151 }152 153 /* Video selection box on slide */154 .video-box {155 position: absolute;156 right: 210px;157 top: 40px;158 width: 300px;159 height: 440px;160 border: 2px dashed rgba(255,255,255,0.55);161 border-radius: 4px;162 }163 .video-thumb {164 position: absolute;165 left: 0; top: 0; right: 0; bottom: 0;166 margin: 0;167 background: #E0E0E0;168 border: 1px solid #BDBDBD;169 display: flex;170 justify-content: center;171 align-items: center;172 color: #757575;173 font-weight: 600;174 }175 .video-bar {176 position: absolute;177 left: 12px; right: 12px;178 bottom: 72px;179 height: 8px;180 background: #efefef;181 border-radius: 4px;182 }183 .play-circle {184 position: absolute;185 left: 50%; top: 50%;186 transform: translate(-50%, -50%);187 width: 120px; height: 120px;188 background: #ffffff;189 border-radius: 50%;190 display: flex; align-items: center; justify-content: center;191 }192 .play-circle svg { width: 54px; height: 54px; fill: #111; }193 194 /* Selection handles */195 .handle { position: absolute; width: 22px; height: 22px; background: #ffffff; border-radius: 50%; }196 .handle.square { border-radius: 3px; }197 .h-tl { left: -12px; top: -12px; }198 .h-tr { right: -12px; top: -12px; }199 .h-bl { left: -12px; bottom: -12px; }200 .h-br { right: -12px; bottom: -12px; }201 .h-tm { left: 50%; transform: translateX(-50%); top: -12px; }202 .h-bm { left: 50%; transform: translateX(-50%); bottom: -12px; }203 .h-ml { top: 50%; transform: translateY(-50%); left: -12px; }204 .h-mr { top: 50%; transform: translateY(-50%); right: -12px; }205 206 /* Play button on right side */207 .big-play {208 position: absolute;209 right: 60px;210 top: 1060px;211 width: 210px;212 height: 110px;213 background: #0e0e0e;214 border-radius: 14px;215 box-shadow: 0 0 0 1px #2a2a2a inset;216 display: flex; align-items: center; justify-content: center;217 gap: 18px;218 font-size: 44px;219 }220 .big-play .triangle {221 width: 0; height: 0;222 border-left: 36px solid #e53b3b;223 border-top: 24px solid transparent;224 border-bottom: 24px solid transparent;225 }226 227 /* Filmstrip */228 .filmstrip {229 position: absolute;230 left: 0; right: 0;231 bottom: 340px;232 height: 260px;233 background: #181818;234 border-top: 1px solid #232323;235 display: flex;236 align-items: center;237 padding: 0 24px;238 box-sizing: border-box;239 gap: 24px;240 }241 .thumb {242 position: relative;243 width: 280px;244 height: 170px;245 background:246 linear-gradient(90deg, #0c1430 0%, #0b1330 60%, #152b5d 100%);247 border: 2px solid #2a2a2a;248 border-radius: 8px;249 overflow: hidden;250 }251 .thumb::after {252 content: "";253 position: absolute;254 left: 16px; bottom: 16px;255 width: 60px; height: 6px; background: #ffbf1b; border-radius: 3px;256 }257 .thumb .num {258 position: absolute;259 top: 10px; left: 10px;260 width: 40px; height: 40px;261 background: rgba(0,0,0,0.65);262 color: #fff; border-radius: 50%;263 display: flex; align-items: center; justify-content: center;264 font-weight: 700;265 }266 .thumb.selected { border: 4px solid #ff7e2d; }267 268 /* Right panel with screen icon and plus */269 .right-strip {270 margin-left: auto;271 width: 120px; height: 200px;272 display: flex; align-items: center; justify-content: center;273 gap: 26px; flex-direction: column;274 }275 .screen-icon {276 width: 92px; height: 66px;277 border: 3px solid #bdbdbd; border-radius: 10px;278 position: relative;279 }280 .screen-icon::after {281 content: ""; position: absolute; right: 10px; bottom: -12px;282 width: 30px; height: 6px; background: #bdbdbd; border-radius: 3px;283 }284 .plus-box {285 width: 64px; height: 64px;286 border-radius: 10px; background: #2b2b2b;287 display: flex; align-items: center; justify-content: center;288 }289 .plus-box svg { width: 40px; height: 40px; fill: #dcdcdc; }290 291 /* Bottom tools bar */292 .bottom-tools {293 position: absolute;294 left: 0; right: 0;295 bottom: 168px;296 height: 120px;297 background: #121212;298 display: flex;299 align-items: center;300 justify-content: space-around;301 color: #dcdcdc;302 font-size: 30px;303 }304 .tool {305 display: flex; flex-direction: column; align-items: center; gap: 10px;306 color: #cfcfcf;307 }308 .tool svg { width: 48px; height: 48px; fill: #cfcfcf; }309 310 /* Home indicator */311 .home-indicator {312 position: absolute;313 left: 50%; transform: translateX(-50%);314 bottom: 70px;315 width: 380px; height: 8px; border-radius: 6px; background: #ffffff;316 opacity: 0.85;317 }318</style>319</head>320<body>321<div id="render-target">322 323 <!-- Status bar -->324 <div class="status-bar">325 <div class="left">7:54</div>326 <div class="right">327 <span class="icon">328 <svg viewBox="0 0 24 24"><path d="M2 8h2v8H2zM6 6h2v12H6zM10 10h2v8h-2zM14 4h2v16h-2zM18 12h2v8h-2z"/></svg>329 </span>330 <span class="icon">331 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z" opacity=".35"/><path d="M5 8h14v8H5z"/></svg>332 </span>333 <span class="icon">334 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2l-2-2z"/></svg>335 </span>336 </div>337 </div>338 339 <!-- App toolbar -->340 <div class="toolbar">341 <div class="actions">342 <span class="icon">343 <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>344 </span>345 <span class="icon" style="opacity:.6">346 <svg viewBox="0 0 24 24"><path d="M12 5V1L6 7l6 6V9c3.3 0 6 2.7 6 6 0 1-.3 2-.8 2.8l1.5 1.5C20.6 18.1 21 16.6 21 15c0-4.4-3.6-8-9-8z"/></svg>347 </span>348 <span class="icon" style="opacity:.6">349 <svg viewBox="0 0 24 24"><path d="M12 5V1l6 6-6 6V9C8.7 9 6 11.7 6 15c0 1 .3 2 .8 2.8L5.3 19.3C3.4 17.9 3 16.4 3 15c0-4.4 3.6-8 9-8z"/></svg>350 </span>351 <span class="icon">352 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>353 </span>354 <span class="icon">355 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>356 </span>357 <span class="icon">358 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H9.8a3 3 0 1 0 0 2h5.4A3 3 0 0 0 18 8zM6 14a3 3 0 1 0 2.8 4h5.4a3 3 0 1 0 0-2H8.8A3 3 0 0 0 6 14z"/></svg>359 </span>360 </div>361 362 <div class="title-area">363 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#d0d0d0" d="M3 19h2V5H3v14zm4 0h2V5H7v14zm10 0h2V5h-2v14zm-6 0h2V5h-2v14z"/></svg>364 <span>Untitled Presentation</span>365 </div>366 <div class="modified">Last modified on 7:53:20 AM</div>367 </div>368 369 <div class="workspace">370 <!-- Slide area (visible strip) -->371 <div class="slide-strip">372 <div class="title-box"></div>373 <div class="title-text">Double tap to a</div>374 <div class="title-underline"></div>375 376 <div class="subtitle-box"></div>377 <div class="subtitle-text">Double tap to add text</div>378 379 <div class="video-box">380 <div class="video-thumb">[IMG: Keyboard Video]</div>381 <div class="video-bar"></div>382 <div class="play-circle">383 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>384 </div>385 386 <!-- selection handles -->387 <div class="handle h-tl"></div>388 <div class="handle h-tr"></div>389 <div class="handle h-bl"></div>390 <div class="handle h-br"></div>391 <div class="handle square h-tm"></div>392 <div class="handle square h-bm"></div>393 <div class="handle square h-ml"></div>394 <div class="handle square h-mr"></div>395 </div>396 </div>397 398 <!-- Large Play button to the right -->399 <div class="big-play">400 <div class="triangle"></div>401 <div>Play</div>402 </div>403 404 <!-- Filmstrip -->405 <div class="filmstrip">406 <div class="thumb">407 <div class="num">1</div>408 </div>409 <div class="thumb">410 <div class="num">2</div>411 </div>412 <div class="thumb selected">413 <div class="num">3</div>414 </div>415 416 <div class="right-strip">417 <div class="screen-icon"></div>418 <div class="plus-box">419 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>420 </div>421 </div>422 </div>423 424 <!-- Bottom tool bar -->425 <div class="bottom-tools">426 <div class="tool">427 <svg viewBox="0 0 24 24"><path d="M3 12h6l3 3 6-6 3 3-9 9-6-6H3z"/></svg>428 <div>Animate</div>429 </div>430 <div class="tool">431 <svg viewBox="0 0 24 24"><path d="M4 4h16v3H4zM4 10h16v3H4zM4 16h16v3H4z"/></svg>432 <div>Format</div>433 </div>434 <div class="tool">435 <svg viewBox="0 0 24 24"><path d="M4 6h16v12H4z" opacity=".25"/><path d="M7 9h10v2H7zm0 4h6v2H7z"/></svg>436 <div>Review</div>437 </div>438 </div>439 </div>440 441 <!-- Home indicator -->442 <div class="home-indicator"></div>443</div>444</body>445</html>