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>UI Mock - Element Animations</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #1f1f1f;17 }18 19 /* Status bar */20 .status-bar {21 height: 110px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #2d2d2d;27 font-weight: 600;28 font-size: 44px;29 }30 .status-left { display: flex; align-items: center; gap: 22px; }31 .status-dots { display: flex; gap: 20px; align-items: center; }32 .dot {33 width: 24px; height: 24px; background: #707070; border-radius: 50%;34 opacity: 0.65;35 }36 .status-right { display: flex; align-items: center; gap: 26px; }37 .icon-mini { width: 46px; height: 46px; }38 39 /* App toolbar */40 .app-bar {41 height: 124px;42 border-bottom: 1px solid #eee;43 display: flex;44 align-items: center;45 padding: 0 34px;46 gap: 46px;47 }48 .icon-btn {49 width: 88px; height: 88px;50 border-radius: 16px;51 display: flex; align-items: center; justify-content: center;52 color: #1f1f1f;53 }54 .app-bar .spacer { flex: 1; }55 56 /* Canvas / editor area */57 .canvas-area {58 background: #f1f1f1;59 height: 1080px;60 position: relative;61 }62 .band-dark {63 position: absolute;64 top: 200px;65 left: 0;66 right: 0;67 height: 210px;68 background: #26342f;69 }70 .band-accent {71 position: absolute;72 top: 300px;73 left: -40px;74 right: -40px;75 height: 160px;76 background: #f6eea7;77 }78 79 .video-wrapper {80 position: absolute;81 top: 270px;82 left: 60px;83 width: 960px;84 height: 540px;85 border: 3px solid #42a5f5;86 border-radius: 18px;87 overflow: hidden;88 box-shadow: 0 8px 18px rgba(0,0,0,0.25);89 background: #E0E0E0;90 }91 .video-placeholder {92 position: absolute;93 inset: 0;94 display: flex;95 align-items: center;96 justify-content: center;97 color: #757575;98 font-size: 44px;99 letter-spacing: .5px;100 border: 1px solid #BDBDBD;101 background: linear-gradient(0deg, rgba(0,0,0,0.08), rgba(0,0,0,0.08)), #E0E0E0;102 }103 .play-overlay {104 position: absolute;105 top: 50%; left: 50%;106 transform: translate(-50%, -50%);107 width: 132px; height: 132px;108 border-radius: 50%;109 background: rgba(0,0,0,0.45);110 display: flex; align-items: center; justify-content: center;111 }112 .progress-area {113 position: absolute;114 left: 28px; right: 28px; bottom: 24px;115 height: 54px; color: #fff;116 display: flex; align-items: center; gap: 18px;117 font-size: 34px; font-weight: 600;118 text-shadow: 0 1px 2px rgba(0,0,0,0.4);119 }120 .progress-track {121 flex: 1; height: 8px;122 background: rgba(255,255,255,0.55);123 border-radius: 6px; position: relative;124 }125 .progress-track::before {126 content: ""; position: absolute; left: 0; top: 0;127 width: 18%; height: 100%; background: #ffffff; border-radius: 6px;128 }129 130 /* Selection handles around video */131 .handle {132 width: 26px; height: 26px; border-radius: 50%;133 background: #ffffff; border: 3px solid #42a5f5;134 position: absolute;135 }136 .h-tl { top: -14px; left: -14px; }137 .h-tr { top: -14px; right: -14px; }138 .h-bl { bottom: -14px; left: -14px; }139 .h-br { bottom: -14px; right: -14px; }140 .h-ml { top: 50%; left: -14px; transform: translateY(-50%); }141 .h-mr { top: 50%; right: -14px; transform: translateY(-50%); }142 .h-tm { top: -14px; left: 50%; transform: translateX(-50%); }143 .h-bm { bottom: -14px; left: 50%; transform: translateX(-50%); }144 145 .rotate-handle {146 position: absolute;147 top: 840px;148 left: 50%;149 transform: translateX(-50%);150 width: 74px; height: 74px;151 border-radius: 50%;152 border: 1px solid #CFCFCF;153 background: #ffffff;154 display: flex; align-items: center; justify-content: center;155 box-shadow: 0 2px 6px rgba(0,0,0,0.1);156 }157 158 /* Bottom sheet */159 .sheet {160 position: absolute;161 left: 0; right: 0; bottom: 0;162 height: 980px;163 background: #ffffff;164 border-top-left-radius: 28px;165 border-top-right-radius: 28px;166 box-shadow: 0 -12px 24px rgba(0,0,0,0.08);167 overflow: hidden;168 }169 .sheet-inner { padding: 28px 34px 0 34px; }170 .sheet-header {171 display: flex; align-items: center; justify-content: space-between;172 padding: 12px 4px 20px;173 }174 .sheet-title {175 display: flex; align-items: center; gap: 18px;176 font-size: 54px; font-weight: 700;177 }178 .caret { transform: rotate(180deg); }179 .close-btn {180 width: 70px; height: 70px; border-radius: 50%;181 display: flex; align-items: center; justify-content: center;182 }183 .option {184 display: flex; align-items: center; gap: 22px;185 font-size: 40px; margin: 26px 6px;186 }187 .checkbox {188 width: 44px; height: 44px; border: 2px solid #9e9e9e;189 border-radius: 8px; background: #fff;190 }191 .chip-row {192 display: flex; gap: 22px; margin: 28px 0 34px; flex-wrap: nowrap;193 }194 .chip {195 padding: 24px 34px; border: 2px solid #d7d7d7;196 border-radius: 18px; font-size: 36px; white-space: nowrap;197 background: #fafafa;198 }199 200 /* Bottom tabs */201 .bottom-tabs {202 position: absolute; left: 0; right: 0; bottom: 64px;203 display: flex; justify-content: space-around; align-items: center;204 }205 .tab-item {206 display: flex; flex-direction: column; align-items: center; gap: 14px;207 color: #1f1f1f; font-size: 30px;208 }209 .tab-item.active { color: #5b53ff; }210 .badge {211 position: absolute; top: -8px; right: -18px;212 background: #efefef; color: #111; border-radius: 12px;213 font-size: 22px; padding: 4px 8px; border: 1px solid #d0d0d0;214 }215 216 /* Gesture bar */217 .gesture {218 position: absolute; left: 50%; transform: translateX(-50%);219 bottom: 18px; width: 300px; height: 10px; background: #0f0f0f; border-radius: 8px;220 opacity: 0.85;221 }222</style>223</head>224<body>225<div id="render-target">226 227 <!-- Status bar -->228 <div class="status-bar">229 <div class="status-left">230 <div>6:06</div>231 <div class="status-dots">232 <div class="dot"></div>233 <div class="dot"></div>234 <div class="dot"></div>235 <div style="width:14px;height:14px;background:#707070;border-radius:50%;opacity:.7;"></div>236 </div>237 </div>238 <div class="status-right">239 <!-- Signal/WiFi -->240 <svg class="icon-mini" viewBox="0 0 24 24" fill="#5a5a5a">241 <path d="M12 20c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zM4 8l2 2c3.9-3.9 10.2-3.9 14.1 0L22 8C17-0.7 7-0.7 2 8zm4 4l2 2c2.8-2.8 7.2-2.8 10 0l2-2c-3.9-3.9-10.1-3.9-14 0z"/>242 </svg>243 <!-- Battery -->244 <svg class="icon-mini" viewBox="0 0 24 24" fill="#5a5a5a">245 <path d="M16 6h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1v1h-2v-1H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h8zM8 8v8h8V8H8z"/>246 </svg>247 </div>248 </div>249 250 <!-- App toolbar -->251 <div class="app-bar">252 <!-- Back -->253 <div class="icon-btn">254 <svg width="54" height="54" viewBox="0 0 24 24" fill="#1f1f1f">255 <path d="M15.5 19l-7-7 7-7 1.5 1.5L11.5 12l5.5 5.5z"/>256 </svg>257 </div>258 <!-- Preview (dashed circle with play) -->259 <div class="icon-btn">260 <svg width="64" height="64" viewBox="0 0 24 24">261 <circle cx="12" cy="12" r="9" fill="none" stroke="#1f1f1f" stroke-width="2" stroke-dasharray="2 2"/>262 <path d="M10 8l6 4-6 4z" fill="#1f1f1f"/>263 </svg>264 </div>265 <!-- Layers -->266 <div class="icon-btn">267 <svg width="60" height="60" viewBox="0 0 24 24" fill="#1f1f1f">268 <path d="M12 2L1 7l11 5 11-5-11-5zm0 9L1 6v3l11 5 11-5V6l-11 5zm0 4L1 11v3l11 5 11-5v-3l-11 4z"/>269 </svg>270 </div>271 <!-- Undo -->272 <div class="icon-btn">273 <svg width="56" height="56" viewBox="0 0 24 24" fill="#1f1f1f">274 <path d="M12 5V1L7 6l5 5V7c3.3 0 6 2.7 6 6 0 1.1-.3 2.1-.8 3l1.8 1C20.7 15.9 21 14.5 21 13c0-4.4-3.6-8-8-8z"/>275 </svg>276 </div>277 <div class="spacer"></div>278 <!-- More -->279 <div class="icon-btn">280 <svg width="50" height="50" viewBox="0 0 24 24" fill="#1f1f1f">281 <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>282 </svg>283 </div>284 <!-- Download -->285 <div class="icon-btn">286 <svg width="58" height="58" viewBox="0 0 24 24" fill="#1f1f1f">287 <path d="M5 20h14v-2H5v2zm7-18l-5 5h3v6h4V7h3l-5-5z"/>288 </svg>289 </div>290 <!-- Share/Export -->291 <div class="icon-btn">292 <svg width="60" height="60" viewBox="0 0 24 24" fill="#1f1f1f">293 <path d="M18 16.1c-.7 0-1.3.3-1.8.7L8.9 12c.1-.3.1-.7 0-1l7.2-4.7c.5.4 1.1.7 1.8.7 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .2 0 .4.1.6L8.8 9.6c-.5-.4-1.1-.6-1.8-.6-1.7 0-3 1.3-3 3s1.3 3 3 3c.7 0 1.3-.2 1.8-.6l6.3 4.2c-.1.2-.1.5-.1.7 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3z"/>294 </svg>295 </div>296 </div>297 298 <!-- Canvas/Editor preview -->299 <div class="canvas-area">300 <div class="band-dark"></div>301 <div class="band-accent"></div>302 303 <div class="video-wrapper">304 <div class="video-placeholder">[VIDEO PLACEHOLDER]</div>305 306 <div class="play-overlay">307 <svg width="60" height="60" viewBox="0 0 24 24">308 <path d="M8 5v14l11-7z" fill="#ffffff"/>309 </svg>310 </div>311 312 <!-- selection handles -->313 <div class="handle h-tl"></div>314 <div class="handle h-tr"></div>315 <div class="handle h-bl"></div>316 <div class="handle h-br"></div>317 <div class="handle h-ml"></div>318 <div class="handle h-mr"></div>319 <div class="handle h-tm"></div>320 <div class="handle h-bm"></div>321 322 <!-- progress -->323 <div class="progress-area">324 <div style="min-width:120px; text-align:left;">00:00</div>325 <div class="progress-track"></div>326 <div style="min-width:120px; text-align:right;">00:15</div>327 </div>328 </div>329 330 <!-- rotate handle under the video -->331 <div class="rotate-handle" title="Rotate">332 <svg width="32" height="32" viewBox="0 0 24 24" fill="#5a5a5a">333 <path d="M12 6V3L8 7l4 4V8c2.2 0 4 1.8 4 4a4 4 0 1 1-7.5-2.1l-1.8-1A6 6 0 1 0 12 6z"/>334 </svg>335 </div>336 </div>337 338 <!-- Bottom Sheet: Element Animations -->339 <div class="sheet">340 <div class="sheet-inner">341 <div class="sheet-header">342 <div class="sheet-title">343 <svg class="caret" width="36" height="36" viewBox="0 0 24 24" fill="#1f1f1f">344 <path d="M7 14l5-5 5 5z"/>345 </svg>346 <span>Element Animations</span>347 </div>348 <div class="close-btn">349 <svg width="44" height="44" viewBox="0 0 24 24" fill="#1f1f1f">350 <path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.4L10.6 13.4 4.3 19.7 3 18.3 9.3 12 3 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>351 </svg>352 </div>353 </div>354 355 <div class="option">356 <div class="checkbox"></div>357 <div>Apply same animation to all pages</div>358 </div>359 <div class="option">360 <div class="checkbox"></div>361 <div>Animate elements together</div>362 </div>363 364 <div class="chip-row">365 <div class="chip">Rotate in from screen</div>366 <div class="chip">Zoom In</div>367 <div class="chip">Zoom Out</div>368 <div class="chip">Light Speed In</div>369 </div>370 </div>371 372 <!-- Bottom tabs -->373 <div class="bottom-tabs">374 <div class="tab-item active">375 <svg width="56" height="56" viewBox="0 0 24 24" fill="#5b53ff">376 <circle cx="12" cy="12" r="9" fill="none" stroke="#5b53ff" stroke-width="2"/>377 <circle cx="12" cy="12" r="2.5" fill="#5b53ff"/>378 </svg>379 <div>Animations</div>380 </div>381 <div class="tab-item">382 <svg width="56" height="56" viewBox="0 0 24 24" fill="#1f1f1f">383 <path d="M7 4h2v16H7V4zm8 0h2v16h-2V4zM11 8h2v8h-2V8z"/>384 </svg>385 <div>Duration</div>386 </div>387 <div class="tab-item" style="position:relative;">388 <svg width="56" height="56" viewBox="0 0 24 24" fill="#1f1f1f">389 <path d="M3 4h18v2H3V4zm0 4h12v12H3V8zm14 4h4v8h-4v-8z"/>390 </svg>391 <div>Manage pages</div>392 <span class="badge">9+</span>393 </div>394 </div>395 396 <div class="gesture"></div>397 </div>398 399</div>400</body>401</html>