Hugging Face's logo

Spaces:
mtrausch0
/
animate-studio-pro
Running

App Files Community
animate-studio-pro / editor.html
mtrausch0's picture
mtrausch0
Why isn't it working?
b726ba6 verified
Raw History Blame Contribute Delete
10.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Editor - Animate Studio Pro</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#3b82f6">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-grow container mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold">Animation Editor</h1>
<div class="flex gap-3">
<button id="play-btn" class="btn-primary flex items-center gap-2">
<i data-feather="play"></i> Play
</button>
<button id="export-btn" class="btn-secondary flex items-center gap-2">
<i data-feather="download"></i> Export
</button>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-6">
<!-- Toolbar -->
<div class="lg:w-16 flex flex-row lg:flex-col gap-2 overflow-x-auto lg:overflow-visible pb-4 lg:pb-0 toolbar">
<button class="toolbar-btn tool-active" data-tool="select">
<i data-feather="mouse-pointer"></i>
</button>
<button class="toolbar-btn" data-tool="pen">
<i data-feather="pen-tool"></i>
</button>
<button class="toolbar-btn" data-tool="brush">
<i data-feather="brush"></i>
</button>
<button class="toolbar-btn" data-tool="eraser">
<i data-feather="minus-square"></i>
</button>
<button class="toolbar-btn" data-tool="shapes">
<i data-feather="square"></i>
</button>
<button class="toolbar-btn" data-tool="text">
<i data-feather="type"></i>
</button>
<button class="toolbar-btn" data-tool="fill">
<i data-feather="droplet"></i>
</button>
</div>
<!-- Canvas Area -->
<div class="flex-grow">
<div class="canvas-container p-4">
<div class="bg-gray-800 rounded-lg overflow-hidden" style="height: 500px;">
<canvas id="animation-canvas" class="w-full h-full"></canvas>
</div>
<!-- Timeline -->
<div class="mt-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Timeline</h3>
<div class="flex gap-2">
<button id="add-frame" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
+ Frame
</button>
<button id="delete-frame" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
- Frame
</button>
</div>
</div>
<div class="timeline-container overflow-x-auto pb-2">
<div class="flex h-16 bg-gray-700 rounded" id="timeline">
<!-- Frames will be added here dynamically -->
</div>
</div>
</div>
</div>
</div>
<!-- Properties Panel -->
<div class="lg:w-80">
<div class="bg-gray-800 rounded-lg p-5">
<h3 class="font-bold text-lg mb-4">Properties</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Canvas Size</label>
<div class="grid grid-cols-2 gap-2">
<input type="number" value="800" class="bg-gray-700 border border-gray-600 rounded px-3 py-2 w-full">
<input type="number" value="600" class="bg-gray-700 border border-gray-600 rounded px-3 py-2 w-full">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Frame Rate</label>
<select class="bg-gray-700 border border-gray-600 rounded px-3 py-2 w-full">
<option>12 fps</option>
<option selected>24 fps</option>
<option>30 fps</option>
<option>60 fps</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Background</label>
<div class="flex gap-2">
<input type="color" value="#1f2937" class="w-10 h-10 bg-gray-700 border border-gray-600 rounded cursor-pointer">
<input type="text" value="#1f2937" class="bg-gray-700 border border-gray-600 rounded px-3 py-2 flex-grow">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-1">Brush Size</label>
<input type="range" min="1" max="50" value="5" class="w-full">
</div>
<div>
<label class="block text-sm font-medium mb-1">Brush Color</label>
<div class="flex gap-2">
<input type="color" value="#3b82f6" class="w-10 h-10 bg-gray-700 border border-gray-600 rounded cursor-pointer">
<input type="text" value="#3b82f6" class="bg-gray-700 border border-gray-600 rounded px-3 py-2 flex-grow">
</div>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-5 mt-6">
<h3 class="font-bold text-lg mb-4">Layers</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-gray-700 p-2 rounded">
<span>Layer 1</span>
<div class="flex gap-2">
<button class="text-gray-400 hover:text-white">
<i data-feather="eye" class="w-4 h-4"></i>
</button>
<button class="text-gray-400 hover:text-white">
<i data-feather="lock" class="w-4 h-4"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between p-2 rounded">
<span class="text-gray-400">+ Add Layer</span>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
// Initialize canvas
document.addEventListener('DOMContentLoaded', function() {
feather.replace();
const canvas = document.getElementById('animation-canvas');
const ctx = canvas.getContext('2d');
// Set canvas size
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// Draw initial content
ctx.fillStyle = '#1f2937';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '20px Inter';
ctx.fillStyle = '#9ca3af';
ctx.textAlign = 'center';
ctx.fillText('Start drawing your animation!', canvas.width/2, canvas.height/2);
// Initialize timeline
const timeline = document.getElementById('timeline');
for (let i = 0; i < 10; i++) {
const frame = document.createElement('div');
frame.className = 'w-12 h-12 bg-gray-600 rounded m-2 cursor-pointer flex items-center justify-center relative';
if (i === 0) {
frame.classList.add('bg-blue-500');
}
if (i % 3 === 0) {
frame.classList.add('ring-2', 'ring-yellow-500');
}
frame.innerHTML = `<span class="text-xs">${i+1}</span>`;
timeline.appendChild(frame);
}
// Tool selection
const toolButtons = document.querySelectorAll('[data-tool]');
toolButtons.forEach(button => {
button.addEventListener('click', function() {
toolButtons.forEach(btn => btn.classList.remove('tool-active'));
this.classList.add('tool-active');
});
});
// Play button
document.getElementById('play-btn').addEventListener('click', function() {
const icon = this.querySelector('i');
if (icon.getAttribute('data-feather') === 'play') {
icon.setAttribute('data-feather', 'pause');
feather.replace();
} else {
icon.setAttribute('data-feather', 'play');
feather.replace();
}
});
// Export button
document.getElementById('export-btn').addEventListener('click', function() {
alert('In a full implementation, this would export your animation as a video file.');
});
});
</script>
</body>
</html>