GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Editor - Element Animations</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 height: 80px;21 padding: 0 28px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #1f1f1f;26 font-size: 36px;27 }28 .status-left { display: flex; align-items: center; gap: 12px; }29 .status-right { display: flex; align-items: center; gap: 22px; }30 .dot { width: 18px; height: 18px; background:#6b6b6b; border-radius: 50%; display:inline-block; opacity:.9; }31 32 /* App toolbar */33 .toolbar {34 height: 120px;35 padding: 0 28px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 }40 .toolbar .left-actions,41 .toolbar .right-actions {42 display: flex; align-items: center; gap: 34px;43 }44 .icon-btn {45 width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;46 color: #222;47 }48 .icon-btn svg { width: 48px; height: 48px; }49 50 /* Canvas workspace */51 .canvas {52 position: relative;53 height: 1220px;54 background: #f3f3f3;55 overflow: hidden;56 }57 /* Decorative bands behind the video */58 .band-dark {59 position: absolute; left: 0; right: 0; top: 140px; height: 180px; background: #25322d;60 }61 .band-yellow {62 position: absolute; left: 60px; right: 60px; top: 260px; height: 140px; background: #fff1b0;63 }64 .collage {65 position: absolute; left: 0; right: 0; bottom: 180px; height: 240px;66 background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;67 display: flex; align-items: center; justify-content: center; color:#757575; font-size: 36px;68 }69 70 /* Video element (selected) */71 .video-wrap {72 position: absolute;73 left: 90px; right: 90px; top: 320px; height: 540px;74 border: 4px solid #4a9dfc;75 border-radius: 20px;76 overflow: hidden;77 background: #E0E0E0;78 display: flex; align-items: center; justify-content: center; color:#757575; font-size: 40px;79 }80 .handle {81 position: absolute; width: 28px; height: 28px; background:#ffffff; border: 3px solid #4a9dfc; border-radius: 50%;82 }83 .h-tl { left:-14px; top:-14px; }84 .h-tr { right:-14px; top:-14px; }85 .h-bl { left:-14px; bottom:-14px; }86 .h-br { right:-14px; bottom:-14px; }87 .h-ml { left:-14px; top:50%; transform:translateY(-50%); }88 .h-mr { right:-14px; top:50%; transform:translateY(-50%); }89 .h-tm { top:-14px; left:50%; transform:translateX(-50%); }90 .h-bm { bottom:-14px; left:50%; transform:translateX(-50%); }91 92 .play-overlay {93 position: absolute; width: 140px; height: 140px; border-radius: 50%;94 background: rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;95 }96 .play-overlay svg { width: 70px; height: 70px; }97 98 /* Timeline overlay inside video */99 .timeline {100 position: absolute; left: 28px; right: 28px; bottom: 24px; color: #fff;101 display: flex; align-items: center; gap: 22px;102 }103 .timeline .time { font-size: 32px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); width: 110px; }104 .progress {105 flex: 1; height: 8px; background: rgba(255,255,255,0.45); border-radius: 6px; position: relative;106 }107 .progress .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background:#ffffff; border-radius: 6px; }108 109 /* Rotate icon below video */110 .rotate-btn {111 position: absolute; left: 50%; transform: translateX(-50%);112 bottom: 110px; width: 72px; height: 72px; border-radius: 50%;113 background:#ffffff; border: 2px solid #DADADA; display:flex; align-items:center; justify-content:center;114 box-shadow: 0 2px 6px rgba(0,0,0,0.08);115 }116 .rotate-btn svg { width: 42px; height: 42px; }117 118 /* Bottom sheet */119 .sheet {120 position: absolute; left: 0; right: 0; bottom: 96px; height: 840px; background: #ffffff;121 border-top-left-radius: 26px; border-top-right-radius: 26px;122 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);123 padding: 22px 32px 20px 32px;124 }125 .sheet-head {126 display: flex; align-items: center; justify-content: space-between; padding: 18px 6px 8px;127 }128 .sheet-title { font-size: 52px; font-weight: 700; color:#111; }129 .sheet-close { width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; }130 .sheet-close svg { width: 42px; height: 42px; }131 132 .option-row { display: flex; align-items: center; gap: 18px; font-size: 36px; color:#2a2a2a; margin: 28px 6px; }133 .checkbox {134 width: 44px; height: 44px; border: 3px solid #B6B6B6; border-radius: 8px; background:#fff;135 }136 137 .chip-row {138 display: flex; align-items: center; gap: 22px; margin: 36px 0 28px 0; padding: 0 4px; overflow: hidden;139 }140 .chip {141 padding: 22px 34px; border: 2px solid #D7D7D7; border-radius: 18px; font-size: 36px; color:#232323; background:#fff;142 white-space: nowrap;143 }144 .chip.active {145 border-color: #7a5af8; color: #4b36c4; box-shadow: inset 0 0 0 1px rgba(122,90,248,0.15);146 }147 148 .sheet-footer {149 position: absolute; left:0; right:0; bottom: 22px; display: flex; justify-content: space-around; align-items: center;150 }151 .foot-item { display:flex; flex-direction: column; align-items:center; gap: 8px; color:#5c5c5c; font-size: 30px; }152 .foot-item.active { color:#6f51ff; }153 .foot-icon { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; border-radius: 18px; }154 .foot-item.active .foot-icon { color:#6f51ff; }155 156 /* Android navigation bar gesture pill */157 .nav-pill {158 position: absolute; left: 50%; transform: translateX(-50%);159 bottom: 24px; width: 260px; height: 10px; background: #1a1a1a; border-radius: 8px;160 opacity: .95;161 }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Status bar -->168 <div class="status-bar">169 <div class="status-left">170 <div style="font-weight:600;">6:07</div>171 <span class="dot"></span>172 <span class="dot" style="opacity:.6;"></span>173 <span class="dot" style="opacity:.35;"></span>174 <span class="dot" style="width:10px;height:10px;opacity:.6;"></span>175 </div>176 <div class="status-right">177 <svg width="44" height="44" viewBox="0 0 24 24" fill="#6b6b6b" xmlns="http://www.w3.org/2000/svg">178 <path d="M3 18h18l-4-6-5 7-4-5-5 4z"/>179 </svg>180 <svg width="44" height="44" viewBox="0 0 24 24" fill="#6b6b6b" xmlns="http://www.w3.org/2000/svg">181 <path d="M20 8V6a2 2 0 0 0-2-2H6C4.9 4 4 4.9 4 6v2h16zM4 10v8c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2v-8H4z"/>182 </svg>183 <svg width="44" height="44" viewBox="0 0 24 24" fill="#6b6b6b" xmlns="http://www.w3.org/2000/svg">184 <path d="M16 4h-1V2h-2v2H9c-1.7 0-3 1.3-3 3v11c0 1.6 1.3 3 3 3h7c1.6 0 3-1.4 3-3V7c0-1.7-1.4-3-3-3z"/>185 </svg>186 </div>187 </div>188 189 <!-- Toolbar -->190 <div class="toolbar">191 <div class="left-actions">192 <div class="icon-btn" title="Back">193 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">194 <path d="M15 18l-6-6 6-6"/>195 </svg>196 </div>197 <div class="icon-btn" title="Preview">198 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="1.8">199 <circle cx="12" cy="12" r="9" stroke-dasharray="2 3"/>200 <path d="M10 8l6 4-6 4" fill="#222" stroke="none"/>201 </svg>202 </div>203 <div class="icon-btn" title="Layers">204 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round">205 <path d="M12 3l8 4-8 4-8-4 8-4z"/>206 <path d="M4 12l8 4 8-4"/>207 <path d="M4 16l8 4 8-4"/>208 </svg>209 </div>210 </div>211 <div class="right-actions">212 <div class="icon-btn" title="Undo">213 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">214 <path d="M9 14H5v-4"/>215 <path d="M20 20a8 8 0 0 0-11-11L5 10"/>216 </svg>217 </div>218 <div class="icon-btn" title="More">219 <svg viewBox="0 0 24 24" fill="#222">220 <circle cx="12" cy="5" r="2"/>221 <circle cx="12" cy="12" r="2"/>222 <circle cx="12" cy="19" r="2"/>223 </svg>224 </div>225 <div class="icon-btn" title="Download">226 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">227 <path d="M12 3v12"/>228 <path d="M7 10l5 5 5-5"/>229 <path d="M4 20h16"/>230 </svg>231 </div>232 <div class="icon-btn" title="Share">233 <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">234 <circle cx="18" cy="5" r="3"/>235 <circle cx="6" cy="12" r="3"/>236 <circle cx="18" cy="19" r="3"/>237 <path d="M8.7 13.3l6.6 3.4M15.3 7.3L8.7 10.7"/>238 </svg>239 </div>240 </div>241 </div>242 243 <!-- Canvas area -->244 <div class="canvas">245 <div class="band-dark"></div>246 <div class="band-yellow"></div>247 248 <div class="video-wrap">249 [IMG: Video Frame]250 <div class="play-overlay">251 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">252 <path d="M8 5l12 7-12 7z" fill="#ffffff"/>253 </svg>254 </div>255 256 <!-- resize handles -->257 <div class="handle h-tl"></div>258 <div class="handle h-tr"></div>259 <div class="handle h-bl"></div>260 <div class="handle h-br"></div>261 <div class="handle h-ml"></div>262 <div class="handle h-mr"></div>263 <div class="handle h-tm"></div>264 <div class="handle h-bm"></div>265 266 <!-- timeline -->267 <div class="timeline">268 <div class="time">00:00</div>269 <div class="progress"><div class="bar"></div></div>270 <div class="time" style="text-align:right;">00:15</div>271 </div>272 </div>273 274 <div class="collage">[IMG: Office Team Collage]</div>275 276 <div class="rotate-btn" title="Rotate">277 <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">278 <path d="M4 11a8 8 0 1 1 2 5.5"/>279 <path d="M4 15v-4h4"/>280 </svg>281 </div>282 </div>283 284 <!-- Bottom sheet -->285 <div class="sheet">286 <div class="sheet-head">287 <div style="display:flex; align-items:center; gap:12px;">288 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">289 <path d="M6 9l-3 3 3 3"/>290 <path d="M3 12h18"/>291 </svg>292 <span style="color:#6f6f6f; font-size:30px;">Expand</span>293 </div>294 <div class="sheet-title">Element Animations</div>295 <div class="sheet-close">296 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round">297 <path d="M6 6l12 12M18 6l-12 12"/>298 </svg>299 </div>300 </div>301 302 <div class="option-row">303 <div class="checkbox"></div>304 <div>Apply same animation to all pages</div>305 </div>306 <div class="option-row">307 <div class="checkbox"></div>308 <div>Animate elements together</div>309 </div>310 311 <div class="chip-row">312 <div class="chip">Rotate in from screen</div>313 <div class="chip active">Zoom In</div>314 <div class="chip">Zoom Out</div>315 <div class="chip">Light Speed In</div>316 </div>317 318 <div class="sheet-footer">319 <div class="foot-item active">320 <div class="foot-icon">321 <svg viewBox="0 0 24 24" fill="none" stroke="#6f51ff" stroke-width="2">322 <circle cx="12" cy="12" r="8"/>323 <circle cx="9" cy="10" r="1.2" fill="#6f51ff" stroke="none"/>324 <circle cx="15" cy="10" r="1.2" fill="#6f51ff" stroke="none"/>325 <path d="M8 15c2.5 2 5.5 2 8 0"/>326 </svg>327 </div>328 <div>Animations</div>329 </div>330 <div class="foot-item">331 <div class="foot-icon">332 <svg viewBox="0 0 24 24" fill="none" stroke="#5c5c5c" stroke-width="2" stroke-linecap="round">333 <circle cx="12" cy="12" r="8"/>334 <path d="M12 7v5l3 2"/>335 </svg>336 </div>337 <div>Duration</div>338 </div>339 <div class="foot-item">340 <div class="foot-icon" style="border:2px solid #5c5c5c; width:60px; height:60px;">341 <span style="font-size:26px; color:#5c5c5c;">9+</span>342 </div>343 <div>Manage pages</div>344 </div>345 </div>346 </div>347 348 <!-- Android navigation gesture pill -->349 <div class="nav-pill"></div>350</div>351</body>352</html>