Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Chat Animator TikTok Export</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: #000; | |
| height: 100%; | |
| font-family: -apple-system, BlinkMacSystemFont, sans-serif; | |
| } | |
| .phone-frame { | |
| width: 360px; | |
| height: 640px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 32px; | |
| box-shadow: 0 0 12px rgba(0,0,0,0.6); | |
| } | |
| video#bg { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: 0; | |
| } | |
| #chat { | |
| position: absolute; | |
| z-index: 1; | |
| width: 100%; | |
| height: 100%; | |
| padding: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| overflow-y: hidden; | |
| } | |
| .message { | |
| display: flex; | |
| align-items: flex-end; | |
| margin-bottom: 10px; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| animation: fadeIn 0.6s ease forwards; | |
| } | |
| .left { flex-direction: row; } | |
| .right { flex-direction: row-reverse; } | |
| .avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| margin: 0 6px; | |
| } | |
| .bubble { | |
| max-width: 70%; | |
| padding: 10px 14px; | |
| font-size: 14px; | |
| border-radius: 18px; | |
| background: white; | |
| } | |
| .right .bubble { background: #007aff; color: white; } | |
| .typing { | |
| width: 48px; | |
| height: 20px; | |
| background: #e5e5ea; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 3px; | |
| margin-bottom: 10px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .typing span { | |
| width: 6px; | |
| height: 6px; | |
| background: #999; | |
| border-radius: 50%; | |
| animation: blink 1.4s infinite; | |
| } | |
| .typing span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes fadeIn { | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes blink { | |
| 0%, 80%, 100% { opacity: 0.2; } | |
| 40% { opacity: 1; } | |
| } | |
| #controls { | |
| text-align: center; | |
| margin: 10px auto; | |
| color: white; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background: #25d366; | |
| border: none; | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="phone-frame"> | |
| <video id="bg" muted loop></video> | |
| <div id="chat"></div> | |
| </div> | |
| <div id="controls"> | |
| <input type="file" accept="video/mp4" onchange="loadBackground(event)"> | |
| <button onclick="start()">🎬 Export MP4 with Voice</button> | |
| </div> | |
| <script type="module" src="main.js"></script> | |
| </body> | |
| </html> | |