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>Mobile Presentation Editor Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #101010;15 color: #fff;16 }17 18 /* Top status bar */19 .status-bar {20 height: 90px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #eaeaea;26 background: #121212;27 font-size: 34px;28 letter-spacing: 0.5px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .ico {36 width: 44px;37 height: 44px;38 fill: #eaeaea;39 }40 41 /* Top tool bar */42 .toolbar {43 height: 120px;44 display: flex;45 align-items: center;46 gap: 44px;47 padding: 0 36px;48 background: #1a1a1a;49 border-bottom: 1px solid #222;50 }51 .tool {52 width: 72px;53 height: 72px;54 display: flex;55 align-items: center;56 justify-content: center;57 background: transparent;58 }59 .tool svg { width: 64px; height: 64px; fill: #d6d6d6; }60 61 /* Title row */62 .title-row {63 height: 100px;64 display: flex;65 align-items: center;66 padding: 0 36px;67 justify-content: space-between;68 background: #141414;69 color: #cfcfcf;70 font-size: 40px;71 border-bottom: 1px solid #222;72 }73 .title-left {74 display: flex;75 gap: 16px;76 align-items: center;77 color: #dedede;78 }79 .title-right {80 font-size: 28px;81 color: #9b9b9b;82 }83 84 /* Main editor area */85 .editor {86 position: absolute;87 top: 310px; /* 90 + 120 + 100 */88 bottom: 540px; /* thumbnails + bottom nav combined approx */89 left: 0;90 right: 0;91 background: #0f0f0f;92 }93 /* Simulated slide area strip */94 .slide-strip {95 position: absolute;96 left: 0;97 right: 0;98 top: 370px;99 height: 640px;100 background: radial-gradient(1200px 600px at 85% 10%, #204c9e 0%, #0e2a60 40%, #09162e 70%, #081326 100%);101 border-top: 1px solid #283452;102 border-bottom: 1px solid #283452;103 overflow: visible;104 }105 106 /* Slide text block */107 .headline-wrap {108 position: absolute;109 left: 54px;110 top: 180px;111 width: 600px;112 }113 .headline {114 font-size: 88px;115 font-weight: 800;116 color: #ffc107;117 letter-spacing: 0.5px;118 line-height: 1.05;119 white-space: nowrap;120 }121 .underline {122 width: 140px;123 height: 6px;124 background: #ffc107;125 margin: 18px 0 22px 0;126 opacity: 0.85;127 }128 .subtext {129 font-size: 38px;130 color: #d7d7d7;131 opacity: 0.92;132 }133 .dashed-text-box {134 position: absolute;135 left: 36px;136 top: 150px;137 width: 640px;138 height: 280px;139 border: 2px dashed rgba(255,255,255,0.18);140 border-radius: 6px;141 }142 143 /* Video placeholder with selection handles */144 .video-box {145 position: absolute;146 right: 140px;147 top: 70px;148 width: 320px;149 height: 460px;150 border: 2px dashed rgba(255,255,255,0.5);151 border-radius: 4px;152 box-sizing: border-box;153 }154 .video-img {155 position: absolute;156 left: 0; top: 0; right: 0; bottom: 0;157 background: #E0E0E0;158 border: 1px solid #BDBDBD;159 display: flex;160 align-items: center;161 justify-content: center;162 color: #757575;163 font-size: 28px;164 }165 .play-overlay {166 position: absolute;167 width: 120px; height: 120px;168 left: 50%; top: 50%;169 transform: translate(-50%, -50%);170 border-radius: 50%;171 background: #ffffff;172 display: flex; align-items: center; justify-content: center;173 }174 .play-overlay svg { width: 60px; height: 60px; fill: #111; margin-left: 6px; }175 176 .handle {177 position: absolute;178 width: 34px; height: 34px;179 border-radius: 50%;180 background: #e6e6e6;181 border: 3px solid #1a1a1a;182 }183 .handle.mid { border-radius: 6px; width: 24px; height: 24px; background: #dcdcdc; border-color: #222; }184 185 .h-tl { left: -17px; top: -17px; }186 .h-tr { right: -17px; top: -17px; }187 .h-bl { left: -17px; bottom: -17px; }188 .h-br { right: -17px; bottom: -17px; }189 .h-tm { left: 50%; top: -12px; transform: translateX(-50%); }190 .h-bm { left: 50%; bottom: -12px; transform: translateX(-50%); }191 .h-ml { left: -12px; top: 50%; transform: translateY(-50%); }192 .h-mr { right: -12px; top: 50%; transform: translateY(-50%); }193 194 /* Thumbnails strip */195 .thumbs {196 position: absolute;197 left: 0; right: 0; bottom: 180px;198 height: 360px;199 background: #151515;200 border-top: 1px solid #222;201 display: flex;202 align-items: center;203 padding: 0 24px;204 gap: 24px;205 }206 .thumb {207 width: 300px;208 height: 180px;209 background: #202020;210 border: 2px solid #2c2c2c;211 border-radius: 8px;212 position: relative;213 overflow: hidden;214 }215 .thumb .mini-slide {216 position: absolute; inset: 8px;217 background: radial-gradient(400px 200px at 80% 20%, #2a60c3 0%, #102b64 50%, #0a1731 100%);218 border-radius: 4px;219 }220 .thumb .mini-line {221 position: absolute; left: 24px; bottom: 24px; width: 60px; height: 6px; background: #e0a400; border-radius: 3px;222 }223 .thumb .index {224 position: absolute; left: 8px; top: 8px; width: 40px; height: 40px;225 border-radius: 50%; background: rgba(0,0,0,0.6);226 display: flex; align-items: center; justify-content: center;227 font-size: 26px;228 }229 .thumb.selected { border-color: #e45d3c; box-shadow: 0 0 0 3px rgba(228,93,60,0.4) inset; }230 231 /* Side play button within strip */232 .big-play {233 margin-left: auto;234 width: 240px; height: 130px;235 background: #0d0d0d;236 border: 1px solid #2b2b2b;237 border-radius: 18px;238 display: flex; align-items: center; justify-content: center;239 gap: 18px;240 }241 .big-play .tri { width: 0; height: 0; border-left: 36px solid #e53935; border-top: 24px solid transparent; border-bottom: 24px solid transparent; }242 .big-play span { font-size: 42px; color: #ffffff; }243 244 /* Bottom nav */245 .bottom-nav {246 position: absolute;247 left: 0; right: 0; bottom: 56px;248 height: 124px;249 background: #111;250 border-top: 1px solid #222;251 display: flex;252 align-items: center;253 justify-content: space-around;254 color: #cfcfcf;255 font-size: 30px;256 }257 .nav-item {258 display: flex; flex-direction: column; align-items: center; gap: 8px;259 opacity: 0.85;260 }261 .nav-item svg { width: 52px; height: 52px; fill: #d9d9d9; }262 .nav-item.active { opacity: 1; }263 .home-indicator {264 position: absolute;265 left: 50%; transform: translateX(-50%);266 bottom: 14px;267 width: 380px; height: 10px; background: #6b6b6b; border-radius: 6px; opacity: 0.65;268 }269</style>270</head>271<body>272<div id="render-target">273 274 <!-- Status bar -->275 <div class="status-bar">276 <div class="status-left">7:53</div>277 <div class="status-right">278 <!-- Download/sync icon substitute -->279 <svg class="ico" viewBox="0 0 24 24"><path d="M12 3v9l3-3 1.4 1.4L12 15.8 7.6 10.4 9 9l3 3V3h0zM5 19h14v2H5z"/></svg>280 <!-- Cloud -->281 <svg class="ico" viewBox="0 0 24 24"><path d="M6 18h11a4 4 0 0 0 0-8 5 5 0 0 0-9.7-1.6A4 4 0 0 0 6 18z"/></svg>282 <!-- WiFi -->283 <svg class="ico" viewBox="0 0 24 24"><path d="M12 18.5l2.5 2.5L12 23l-2.5-2 2.5-2.5zM2 9l2 2a12 12 0 0 1 16 0l2-2a15 15 0 0 0-20 0zm4 4l2 2a7.5 7.5 0 0 1 10 0l2-2a10.5 10.5 0 0 0-14 0z"/></svg>284 <!-- Battery -->285 <svg class="ico" viewBox="0 0 24 24"><path d="M2 9h15a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H2V9zm18 2h2v4h-2v-4z"/></svg>286 </div>287 </div>288 289 <!-- Toolbar -->290 <div class="toolbar">291 <!-- Check -->292 <div class="tool">293 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.5-1.5z"/></svg>294 </div>295 <!-- Undo -->296 <div class="tool">297 <svg viewBox="0 0 24 24"><path d="M7 7V3L1 9l6 6v-4h5a6 6 0 0 1 6 6h3a9 9 0 0 0-9-9H7z"/></svg>298 </div>299 <!-- Redo -->300 <div class="tool">301 <svg viewBox="0 0 24 24"><path d="M17 7V3l6 6-6 6v-4h-5a6 6 0 0 0-6 6H3a9 9 0 0 1 9-9h5z"/></svg>302 </div>303 <!-- Add -->304 <div class="tool">305 <svg viewBox="0 0 24 24"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>306 </div>307 <!-- Play -->308 <div class="tool">309 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>310 </div>311 <!-- Share -->312 <div class="tool">313 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.4 1.2L8.9 14a3 3 0 0 0 0-4l6.7-3.2a3 3 0 1 0-.7-1.8l-6.8 3.2a3 3 0 1 0 0 6l6.8 3.2A3 3 0 1 0 18 16z"/></svg>314 </div>315 </div>316 317 <!-- Title row -->318 <div class="title-row">319 <div class="title-left">320 <svg class="ico" viewBox="0 0 24 24"><path d="M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM20.7 7.0c.4-.4.4-1 0-1.4l-2.3-2.3a1 1 0 0 0-1.4 0l-1.6 1.6 3.8 3.8 1.5-1.7z"/></svg>321 <span>Untitled Presentation</span>322 </div>323 <div class="title-right">Last modified on 7:53:20 AM</div>324 </div>325 326 <!-- Editor area -->327 <div class="editor">328 <div class="slide-strip">329 <!-- Dotted text placeholder box -->330 <div class="dashed-text-box"></div>331 332 <!-- Headline and subtext -->333 <div class="headline-wrap">334 <div class="headline">Double tap to a</div>335 <div class="underline"></div>336 <div class="subtext">Double tap to add text</div>337 </div>338 339 <!-- Video placeholder -->340 <div class="video-box">341 <div class="video-img">[IMG: Video Thumbnail]</div>342 <div class="play-overlay">343 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>344 </div>345 <div class="handle h-tl"></div>346 <div class="handle h-tr"></div>347 <div class="handle h-bl"></div>348 <div class="handle h-br"></div>349 <div class="handle mid h-tm"></div>350 <div class="handle mid h-bm"></div>351 <div class="handle mid h-ml"></div>352 <div class="handle mid h-mr"></div>353 </div>354 </div>355 </div>356 357 <!-- Thumbnails strip -->358 <div class="thumbs">359 <div class="thumb">360 <div class="index">1</div>361 <div class="mini-slide"></div>362 <div class="mini-line"></div>363 </div>364 <div class="thumb">365 <div class="index">2</div>366 <div class="mini-slide"></div>367 <div class="mini-line"></div>368 </div>369 <div class="thumb selected">370 <div class="index">3</div>371 <div class="mini-slide"></div>372 <div class="mini-line"></div>373 </div>374 375 <div class="big-play">376 <div class="tri"></div>377 <span>Play</span>378 </div>379 </div>380 381 <!-- Bottom navigation -->382 <div class="bottom-nav">383 <div class="nav-item">384 <svg viewBox="0 0 24 24"><path d="M4 12l6 6v-4h10v-4H10V6z"/></svg>385 <div>Animate</div>386 </div>387 <div class="nav-item active">388 <svg viewBox="0 0 24 24"><path d="M9 4h6v3H9zM5 10h14v2H5zm0 6h14v2H5z"/></svg>389 <div>Format</div>390 </div>391 <div class="nav-item">392 <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4zM7 15l2.5-3 2.5 3 3.5-5L19 15H7z"/></svg>393 <div>Review</div>394 </div>395 </div>396 397 <div class="home-indicator"></div>398</div>399</body>400</html>