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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EDEDED;16 }17 18 /* Generic helpers */19 .row { display: flex; align-items: center; }20 .space-between { justify-content: space-between; }21 .center { justify-content: center; }22 .muted { color: #B5B5B5; }23 .tiny { font-size: 22px; letter-spacing: 0.5px; }24 .pill { width: 200px; height: 8px; background: #FFFFFF; opacity: 0.9; border-radius: 8px; margin: 0 auto; }25 26 /* Status bar */27 .status-bar {28 height: 110px;29 padding: 0 36px;30 font-size: 42px;31 color: #EDEDED;32 }33 .status-left, .status-right { gap: 22px; }34 .icon-sq { width: 30px; height: 20px; border-radius: 3px; background: #EDEDED22; border: 1px solid #999; }35 .dot { width: 10px; height: 10px; background: #EDEDED88; border-radius: 50%; }36 37 /* Title and top toolbar */38 .title-area {39 height: 90px;40 display: flex;41 align-items: center;42 justify-content: center;43 color: #D47C3A;44 font-size: 44px;45 font-weight: 600;46 }47 .top-tools {48 height: 120px;49 padding: 0 40px;50 gap: 44px;51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .tool-btn { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: #EDEDED; }56 .tool-btn svg { width: 54px; height: 54px; stroke: #EDEDED; fill: none; stroke-width: 3; }57 58 /* Workspace */59 .workspace {60 height: 1560px; /* computed to fit full 2400 total height */61 position: relative;62 background: #0E0E0E;63 }64 65 /* Slide canvas shown near bottom of workspace */66 .slide-wrap {67 position: absolute;68 left: 50%;69 transform: translateX(-50%);70 bottom: 40px;71 width: 1000px;72 height: 562px; /* 16:9 ratio */73 background: #2A2A2A;74 border: 1px solid #5A5A5A;75 }76 .slide {77 position: relative;78 width: 100%;79 height: 100%;80 background: linear-gradient(90deg, #21342D 0%, #21342D 82%, #BFE5B9 100%);81 box-shadow: inset 0 0 0 2px #2F4A41;82 }83 .slide .left-accent {84 position: absolute;85 left: 28px;86 top: 20px;87 bottom: 20px;88 width: 6px;89 background: #58B3A5;90 opacity: 0.9;91 border-radius: 3px;92 }93 .slide .tiny-triangle {94 position: absolute;95 left: 20px;96 top: 54px;97 width: 0; height: 0;98 border-left: 10px solid transparent;99 border-right: 10px solid transparent;100 border-bottom: 10px solid #58B3A5;101 transform: rotate(-90deg);102 opacity: 0.9;103 }104 .title-placeholder {105 position: absolute;106 left: 160px;107 top: 70px;108 right: 160px;109 height: 86px;110 border: 2px dashed #9FB1A8;111 color: #FFFFFF;112 display: flex; align-items: center; padding-left: 18px;113 font-size: 40px;114 opacity: 0.9;115 }116 117 /* Image placeholder with resize handles */118 .img-holder {119 position: absolute;120 left: 360px;121 top: 140px;122 width: 280px;123 height: 420px;124 background: #E0E0E0;125 border: 1px solid #BDBDBD;126 color: #666;127 display: flex; align-items: center; justify-content: center;128 text-align: center;129 font-size: 24px;130 }131 .handle {132 position: absolute; width: 22px; height: 22px;133 background: #FFFFFF; border: 3px solid #9FA3A7; border-radius: 50%;134 }135 .h-tl { top: -12px; left: -12px; }136 .h-tm { top: -12px; left: 50%; transform: translateX(-50%); }137 .h-tr { top: -12px; right: -12px; }138 .h-ml { top: 50%; left: -12px; transform: translateY(-50%); }139 .h-mr { top: 50%; right: -12px; transform: translateY(-50%); }140 .h-bl { bottom: -12px; left: -12px; }141 .h-bm { bottom: -12px; left: 50%; transform: translateX(-50%); }142 .h-br { bottom: -12px; right: -12px; }143 144 /* Notes / Comments header */145 .meta-row {146 height: 80px;147 padding: 0 40px;148 display: flex; align-items: center; justify-content: flex-end;149 gap: 40px;150 background: #121212;151 border-top: 1px solid #1F1F1F;152 }153 .meta-btn {154 display: inline-flex; align-items: center; gap: 10px; color: #D7D7D7; font-size: 34px;155 }156 .meta-btn svg { width: 34px; height: 34px; stroke: #D7D7D7; fill: none; stroke-width: 3; }157 158 /* Filmstrip */159 .filmstrip {160 height: 240px;161 display: flex; align-items: center;162 gap: 26px; padding: 0 28px;163 background: #101010;164 border-top: 1px solid #1E1E1E;165 }166 .thumb {167 width: 300px; height: 180px; background: #2B3B36; position: relative; border: 1px solid #7BA392;168 }169 .thumb .slide-mini {170 width: 100%; height: 100%;171 background: linear-gradient(90deg, #21342D 0%, #21342D 82%, #BFE5B9 100%);172 }173 .thumb .label {174 position: absolute; left: 10px; bottom: 10px; color: #EAEAEA; font-size: 22px;175 }176 .thumb.active { outline: 6px solid #C76828; }177 .thumb.active::after {178 content: "";179 position: absolute; left: 0; right: 0; bottom: -16px; height: 16px; background: #C76828;180 }181 182 /* Bottom toolbar */183 .bottom-bar {184 height: 180px;185 background: #161616;186 border-top: 1px solid #222;187 display: flex; align-items: center; justify-content: center; gap: 40px;188 }189 .bottom-btn {190 width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;191 border-radius: 14px; color: #EDEDED;192 }193 .bottom-btn svg { width: 60px; height: 60px; stroke: #EDEDED; fill: none; stroke-width: 3; }194 195 /* Gesture bar */196 .gesture {197 height: 20px; display: flex; align-items: center; justify-content: center; background: #121212;198 }199</style>200</head>201<body>202<div id="render-target">203 204 <!-- STATUS BAR -->205 <div class="status-bar row space-between">206 <div class="status-left row">207 <div>8:57</div>208 <div class="icon-sq"></div>209 <div class="icon-sq"></div>210 <div class="icon-sq"></div>211 <div class="dot"></div>212 </div>213 <div class="status-right row">214 <!-- Wi‑Fi -->215 <svg width="38" height="38" viewBox="0 0 24 24" stroke="#EDEDED" fill="none" stroke-width="2">216 <path d="M2 8c5-4 15-4 20 0"></path>217 <path d="M5 12c4-3 10-3 14 0"></path>218 <path d="M8 16c3-2 5-2 8 0"></path>219 <circle cx="12" cy="19" r="1.5" fill="#EDEDED"></circle>220 </svg>221 <!-- Battery -->222 <svg width="46" height="38" viewBox="0 0 28 18" stroke="#EDEDED" fill="none" stroke-width="2">223 <rect x="1" y="3" width="22" height="12" rx="2"></rect>224 <rect x="3" y="5" width="14" height="8" fill="#EDEDED"></rect>225 <rect x="23" y="7" width="3" height="6" fill="#EDEDED"></rect>226 </svg>227 </div>228 </div>229 230 <!-- TITLE -->231 <div class="title-area">Presentation</div>232 233 <!-- TOP TOOLS -->234 <div class="top-tools">235 <!-- Check -->236 <div class="tool-btn" title="Done">237 <svg viewBox="0 0 24 24">238 <path d="M4 12l5 5 11-11"></path>239 </svg>240 </div>241 <!-- Pencil/Text -->242 <div class="tool-btn" title="Edit">243 <svg viewBox="0 0 24 24">244 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"></path>245 <path d="M14.06 4.69l3.75 3.75"></path>246 </svg>247 </div>248 <!-- Cloud Upload -->249 <div class="tool-btn" title="Sync">250 <svg viewBox="0 0 24 24">251 <path d="M7 18H6a4 4 0 010-8 5 5 0 019.9-1.5A4 4 0 1118 18h-1"></path>252 <path d="M12 13v6"></path>253 <path d="M9.5 15.5L12 13l2.5 2.5"></path>254 </svg>255 </div>256 <!-- Search -->257 <div class="tool-btn" title="Search">258 <svg viewBox="0 0 24 24">259 <circle cx="11" cy="11" r="7"></circle>260 <path d="M21 21l-4.3-4.3"></path>261 </svg>262 </div>263 <!-- Slideshow -->264 <div class="tool-btn" title="Slideshow">265 <svg viewBox="0 0 24 24">266 <rect x="3" y="4" width="18" height="12" rx="2"></rect>267 <path d="M10 9l5 3-5 3z" fill="#EDEDED"></path>268 </svg>269 </div>270 <!-- Undo -->271 <div class="tool-btn" title="Undo">272 <svg viewBox="0 0 24 24">273 <path d="M7 7l-4 4 4 4"></path>274 <path d="M3 11h9a5 5 0 110 10"></path>275 </svg>276 </div>277 <!-- More (vertical dots) -->278 <div class="tool-btn" title="More">279 <svg viewBox="0 0 24 24">280 <circle cx="12" cy="5" r="2" fill="#EDEDED"></circle>281 <circle cx="12" cy="12" r="2" fill="#EDEDED"></circle>282 <circle cx="12" cy="19" r="2" fill="#EDEDED"></circle>283 </svg>284 </div>285 </div>286 287 <!-- WORKSPACE -->288 <div class="workspace">289 <div class="slide-wrap">290 <div class="slide">291 <div class="left-accent"></div>292 <div class="tiny-triangle"></div>293 <div class="title-placeholder">Double tap to add title</div>294 295 <div class="img-holder">296 [IMG: Office desk photo]297 <div class="handle h-tl"></div>298 <div class="handle h-tm"></div>299 <div class="handle h-tr"></div>300 <div class="handle h-ml"></div>301 <div class="handle h-mr"></div>302 <div class="handle h-bl"></div>303 <div class="handle h-bm"></div>304 <div class="handle h-br"></div>305 </div>306 </div>307 </div>308 </div>309 310 <!-- NOTES / COMMENTS -->311 <div class="meta-row">312 <div class="meta-btn">313 <svg viewBox="0 0 24 24">314 <rect x="3" y="4" width="18" height="14" rx="2"></rect>315 <line x1="7" y1="9" x2="17" y2="9"></line>316 <line x1="7" y1="13" x2="14" y2="13"></line>317 </svg>318 <span>Notes</span>319 </div>320 <div class="meta-btn">321 <svg viewBox="0 0 24 24">322 <path d="M21 15a4 4 0 01-4 4H8l-5 3V7a4 4 0 014-4h10a4 4 0 014 4z"></path>323 </svg>324 <span>Comments</span>325 </div>326 </div>327 328 <!-- FILMSTRIP -->329 <div class="filmstrip">330 <div class="thumb">331 <div class="slide-mini"></div>332 <div class="label">1</div>333 </div>334 <div class="thumb active">335 <div class="slide-mini"></div>336 <div class="label">2</div>337 </div>338 <div class="thumb">339 <div class="slide-mini"></div>340 <div class="label">+</div>341 </div>342 </div>343 344 <!-- BOTTOM TOOLBAR -->345 <div class="bottom-bar">346 <!-- Crop -->347 <div class="bottom-btn" title="Crop">348 <svg viewBox="0 0 24 24">349 <path d="M6 3v12a3 3 0 003 3h12"></path>350 <path d="M18 21V9a3 3 0 00-3-3H3"></path>351 </svg>352 </div>353 <!-- Brush -->354 <div class="bottom-btn" title="Draw">355 <svg viewBox="0 0 24 24">356 <path d="M3 17v4h4l11-11-4-4L3 17z"></path>357 <path d="M14 6l4 4"></path>358 </svg>359 </div>360 <!-- Image -->361 <div class="bottom-btn" title="Pictures">362 <svg viewBox="0 0 24 24">363 <rect x="3" y="5" width="18" height="14" rx="2"></rect>364 <circle cx="9" cy="11" r="2"></circle>365 <path d="M21 16l-5-5-6 6"></path>366 </svg>367 </div>368 <!-- Layout -->369 <div class="bottom-btn" title="Layouts">370 <svg viewBox="0 0 24 24">371 <rect x="3" y="4" width="18" height="16" rx="2"></rect>372 <line x1="12" y1="4" x2="12" y2="20"></line>373 <line x1="3" y1="12" x2="21" y2="12"></line>374 </svg>375 </div>376 <!-- Add -->377 <div class="bottom-btn" title="Add">378 <svg viewBox="0 0 24 24">379 <circle cx="12" cy="12" r="9"></circle>380 <line x1="12" y1="8" x2="12" y2="16"></line>381 <line x1="8" y1="12" x2="16" y2="12"></line>382 </svg>383 </div>384 <!-- Undo -->385 <div class="bottom-btn" title="Undo">386 <svg viewBox="0 0 24 24">387 <path d="M7 7l-4 4 4 4"></path>388 <path d="M3 11h10a5 5 0 110 10"></path>389 </svg>390 </div>391 </div>392 393 <!-- GESTURE BAR -->394 <div class="gesture">395 <div class="pill"></div>396 </div>397 398</div>399</body>400</html>