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 UI - Element Animations</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: #FFFFFF;15 color: #1f1f1f;16 }17 18 /* Status bar */19 .statusbar {20 height: 120px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #5f6368;26 font-size: 42px;27 box-sizing: border-box;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 26px;33 }34 .dot { width: 12px; height: 12px; background: #9aa0a6; border-radius: 50%; display: inline-block; }35 .status-icon { width: 46px; height: 46px; }36 37 /* Top app bar */38 .toolbar {39 height: 130px;40 border-top: 1px solid #eee;41 border-bottom: 1px solid #eee;42 display: flex;43 align-items: center;44 justify-content: space-between;45 padding: 0 28px;46 box-sizing: border-box;47 }48 .left-actions, .right-actions {49 display: flex;50 align-items: center;51 gap: 36px;52 }53 .icon-btn {54 width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center;55 }56 .icon {57 width: 54px; height: 54px; fill: none; stroke: #2b2b2b; stroke-width: 3;58 }59 60 /* Canvas/content area */61 .canvas {62 position: relative;63 height: 1240px;64 background: #f6f7f8;65 }66 /* Decorative bands to mimic the editor page under the video */67 .band-dark {68 position: absolute; left: 0; right: 0; top: 210px; height: 170px; background: #25322E;69 }70 .band-yellow {71 position: absolute; left: 0; right: 0; top: 380px; height: 120px; background: #FFF2B5;72 }73 74 /* Video frame */75 .video-frame {76 position: absolute;77 left: 60px;78 right: 60px;79 top: 430px;80 height: 520px;81 border-radius: 22px;82 overflow: hidden;83 box-shadow: 0 10px 30px rgba(0,0,0,0.25);84 }85 .img-ph {86 width: 100%; height: 100%;87 background: #E0E0E0;88 border: 1px solid #BDBDBD;89 display: flex; align-items: center; justify-content: center;90 color: #757575; font-size: 42px; letter-spacing: 0.5px;91 }92 /* Selection handles (white circles at corners/sides) */93 .handle {94 position: absolute; width: 32px; height: 32px; background: #ffffff;95 border: 2px solid #D0D0D0; border-radius: 50%;96 }97 .h-tl { top: -16px; left: -16px; }98 .h-tr { top: -16px; right: -16px; }99 .h-bl { bottom: -16px; left: -16px; }100 .h-br { bottom: -16px; right: -16px; }101 .h-ml { top: 50%; left: -16px; transform: translateY(-50%); }102 .h-mr { top: 50%; right: -16px; transform: translateY(-50%); }103 .h-tm { left: 50%; top: -16px; transform: translateX(-50%); }104 .h-bm { left: 50%; bottom: -16px; transform: translateX(-50%); }105 106 /* Play overlay and scrub bar inside video */107 .play-overlay {108 position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;109 }110 .play-circle {111 width: 120px; height: 120px;112 background: rgba(0,0,0,0.55);113 border-radius: 50%;114 display: flex; align-items: center; justify-content: center;115 }116 .play-triangle {117 width: 0; height: 0; border-left: 42px solid #fff; border-top: 28px solid transparent; border-bottom: 28px solid transparent; margin-left: 8px;118 }119 .scrub {120 position: absolute; left: 28px; right: 28px; bottom: 24px; height: 58px; display: flex; align-items: center; gap: 22px; color: #fff; font-size: 34px;121 }122 .scrub .line {123 flex: 1; height: 6px; background: rgba(255,255,255,0.55); border-radius: 4px;124 position: relative;125 }126 .scrub .progress {127 position: absolute; left: 0; top: 0; bottom: 0; width: 0%;128 background: #fff; border-radius: 4px;129 }130 131 /* Rotate button under video */132 .rotate {133 position: absolute; left: 50%; top: 990px; transform: translateX(-50%);134 width: 82px; height: 82px; background: #ffffff; border: 2px solid #D9D9D9; border-radius: 50%;135 display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,0.08);136 }137 .rotate svg { width: 46px; height: 46px; stroke: #6b6b6b; stroke-width: 3; fill: none; }138 139 /* Bottom sheet */140 .sheet {141 position: absolute; left: 0; right: 0; bottom: 0; height: 900px; background: #ffffff;142 border-top-left-radius: 36px; border-top-right-radius: 36px;143 box-shadow: 0 -12px 32px rgba(0,0,0,0.12);144 padding: 28px 36px 24px;145 box-sizing: border-box;146 }147 .sheet-header {148 display: flex; align-items: center; justify-content: space-between; padding: 18px 6px 12px;149 }150 .sheet-title {151 font-size: 52px; font-weight: 700; letter-spacing: 0.3px;152 }153 .close-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }154 .close-btn svg { width: 44px; height: 44px; stroke: #222; stroke-width: 3; fill: none; }155 156 .checkbox-row { display: flex; align-items: center; gap: 22px; margin: 26px 6px; font-size: 40px; color: #2b2b2b; }157 .cbx {158 width: 46px; height: 46px; border: 3px solid #CFCFCF; border-radius: 8px; box-sizing: border-box; background: #fff;159 }160 161 .pill-row {162 margin-top: 28px; display: flex; gap: 22px; overflow: hidden; flex-wrap: wrap;163 }164 .pill {165 padding: 26px 34px; border: 2px solid #E2E2E9; border-radius: 22px; font-size: 38px; color: #222; background: #fff;166 }167 .pill.active { border-color: #7B61FF; color: #7B61FF; background: #FBF9FF; }168 169 /* Bottom nav within sheet */170 .sheet-nav {171 position: absolute; left: 0; right: 0; bottom: 90px; display: flex; justify-content: space-around; text-align: center;172 }173 .nav-item { color: #8a88a6; font-size: 32px; }174 .nav-item.active { color: #7B61FF; }175 .nav-ico { width: 70px; height: 70px; margin: 0 auto 12px; }176 177 /* Home indicator bar */178 .home-indicator {179 position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px;180 width: 360px; height: 10px; background: #000; border-radius: 8px; opacity: 0.7;181 }182</style>183</head>184<body>185<div id="render-target">186 187 <!-- Status Bar -->188 <div class="statusbar">189 <div>6:06</div>190 <div class="status-right">191 <span class="dot"></span><span class="dot"></span><span class="dot"></span>192 <svg class="status-icon" viewBox="0 0 24 24" stroke="#8a8a8a" fill="none" stroke-width="2">193 <circle cx="12" cy="12" r="9"></circle>194 <path d="M12 7v5l4 2"></path>195 </svg>196 <svg class="status-icon" viewBox="0 0 24 24" stroke="#8a8a8a" fill="none" stroke-width="2">197 <path d="M2 18l8-8 5 5 7-7"></path>198 </svg>199 <svg class="status-icon" viewBox="0 0 24 24" stroke="#8a8a8a" fill="none" stroke-width="2">200 <rect x="5" y="6" width="14" height="12" rx="2"></rect>201 <path d="M9 6v-1a3 3 0 0 1 6 0v1"></path>202 </svg>203 </div>204 </div>205 206 <!-- Top App Bar -->207 <div class="toolbar">208 <div class="left-actions">209 <div class="icon-btn">210 <svg class="icon" viewBox="0 0 24 24">211 <path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"></path>212 </svg>213 </div>214 <div class="icon-btn" title="Preview">215 <svg class="icon" viewBox="0 0 24 24" stroke-dasharray="3 3">216 <circle cx="12" cy="12" r="9"></circle>217 <path d="M10 8l6 4-6 4z" fill="#2b2b2b" stroke="none"></path>218 </svg>219 </div>220 <div class="icon-btn" title="Layers">221 <svg class="icon" viewBox="0 0 24 24">222 <path d="M12 3l9 5-9 5-9-5 9-5z"></path>223 <path d="M3 12l9 5 9-5" opacity="0.8"></path>224 </svg>225 </div>226 <div class="icon-btn" title="Undo">227 <svg class="icon" viewBox="0 0 24 24">228 <path d="M9 10H4l5-5"></path>229 <path d="M20 19a8 8 0 0 0-11-9"></path>230 </svg>231 </div>232 </div>233 <div class="right-actions">234 <div class="icon-btn" title="More">235 <svg class="icon" viewBox="0 0 24 24">236 <circle cx="12" cy="5" r="1.5" fill="#2b2b2b" stroke="none"></circle>237 <circle cx="12" cy="12" r="1.5" fill="#2b2b2b" stroke="none"></circle>238 <circle cx="12" cy="19" r="1.5" fill="#2b2b2b" stroke="none"></circle>239 </svg>240 </div>241 <div class="icon-btn" title="Download">242 <svg class="icon" viewBox="0 0 24 24">243 <path d="M12 3v12"></path>244 <path d="M7 11l5 5 5-5"></path>245 <path d="M5 21h14"></path>246 </svg>247 </div>248 <div class="icon-btn" title="Share">249 <svg class="icon" viewBox="0 0 24 24">250 <path d="M4 12v7a2 2 0 0 0 2 2h12"></path>251 <path d="M12 16l8-8"></path>252 <path d="M15 4h5v5"></path>253 </svg>254 </div>255 </div>256 </div>257 258 <!-- Canvas / Page content preview -->259 <div class="canvas">260 <div class="band-dark"></div>261 <div class="band-yellow"></div>262 263 <div class="video-frame">264 <div class="img-ph">[IMG: Video Preview]</div>265 266 <div class="play-overlay">267 <div class="play-circle"><div class="play-triangle"></div></div>268 </div>269 270 <div class="scrub">271 <span>00:00</span>272 <div class="line"><div class="progress" style="width:0%"></div></div>273 <span>00:15</span>274 </div>275 276 <div class="handle h-tl"></div>277 <div class="handle h-tr"></div>278 <div class="handle h-bl"></div>279 <div class="handle h-br"></div>280 <div class="handle h-ml"></div>281 <div class="handle h-mr"></div>282 <div class="handle h-tm"></div>283 <div class="handle h-bm"></div>284 </div>285 286 <div class="rotate">287 <svg viewBox="0 0 24 24">288 <path d="M3 12a9 9 0 1 0 9-9" stroke-linecap="round"></path>289 <path d="M3 6v6h6" stroke-linecap="round"></path>290 </svg>291 </div>292 </div>293 294 <!-- Bottom Sheet: Element Animations -->295 <div class="sheet">296 <div class="sheet-header">297 <div class="sheet-title">Element Animations</div>298 <div class="close-btn">299 <svg viewBox="0 0 24 24">300 <path d="M5 5l14 14"></path>301 <path d="M19 5L5 19"></path>302 </svg>303 </div>304 </div>305 306 <div class="checkbox-row">307 <div class="cbx"></div>308 <div>Apply same animation to all pages</div>309 </div>310 <div class="checkbox-row" style="margin-top: 12px;">311 <div class="cbx"></div>312 <div>Animate elements together</div>313 </div>314 315 <div class="pill-row">316 <div class="pill active">Swing In</div>317 <div class="pill">Fade In</div>318 <div class="pill">Rotate in from left</div>319 <div class="pill">Rotate in from screen</div>320 <div class="pill">Zoom In</div>321 <div class="pill">Slide Up</div>322 </div>323 324 <div class="sheet-nav">325 <div class="nav-item active">326 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="#7B61FF" stroke-width="2">327 <circle cx="12" cy="12" r="8"></circle>328 <circle cx="12" cy="12" r="2" fill="#7B61FF" stroke="none"></circle>329 </svg>330 Animations331 </div>332 <div class="nav-item">333 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="#8a88a6" stroke-width="2">334 <circle cx="12" cy="12" r="9"></circle>335 <path d="M12 7v5l3 2"></path>336 </svg>337 Duration338 </div>339 <div class="nav-item">340 <svg class="nav-ico" viewBox="0 0 24 24" fill="none" stroke="#8a88a6" stroke-width="2">341 <rect x="4" y="4" width="16" height="16" rx="3"></rect>342 <text x="8" y="16" font-size="8" fill="#8a88a6" stroke="none">9+</text>343 </svg>344 Manage pages345 </div>346 </div>347 </div>348 349 <div class="home-indicator"></div>350</div>351</body>352</html>