editor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CanvasCrafter Studio</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
        .hover-lift { transition: all 0.3s ease; }
        .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
    </style>
</head>
<body class="min-h-screen gradient-bg" id="vanta-bg">
    <!-- Navigation -->
    <nav class="glass-effect border-b border-white/20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center">
                    <i data-feather="image" class="text-white w-8 h-8 mr-3"></i>
                    <span class="text-white text-xl font-bold">CanvasCrafter Studio</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a>
                    <a href="templates.html" class="text-white/80 hover:text-white transition-colors">Templates</a>
                    <a href="editor.html" class="text-white font-semibold">Editor</a>
                    <a href="library.html" class="text-white/80 hover:text-white transition-colors">Library</a>
                </div>
<button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors">
                    Get Started
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="py-20 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">
                Craft Stunning
                <span class="bg-gradient-to-r from-yellow-400 to-pink-500 bg-clip-text text-transparent">
                    Posters
                </span>
            </h1>
            <p class="text-xl md:text-2xl text-white/80 mb-12 max-w-3xl mx-auto">
                Transform your Jellyfin media library with custom-designed posters. 
                Professional templates, real-time previews, and seamless integration.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="bg-white text-purple-600 px-8 py-4 rounded-xl font-semibold text-lg hover-lift">
                    <i data-feather="play" class="inline w-5 h-5 mr-2"></i>
                    Start Creating
                </button>
                <button class="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift">
                    <i data-feather="eye" class="inline w-5 h-5 mr-2"></i>
                    View Templates
                </button>
            </div>
        </div>
    </section>

    <!-- Features Grid -->
    <section class="py-20 px-4">
        <div class="max-w-7xl mx-auto">
            <h2 class="text-4xl font-bold text-white text-center mb-16">Powerful Features</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                        <i data-feather="film" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-4">Jellyfin Integration</h3>
                    <p class="text-white/70">Seamlessly connect to your Jellyfin server and browse your entire media library.</p>
                </div>

                <!-- Feature 2 -->
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                        <i data-feather="layout" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-4">Smart Templates</h3>
                    <p class="text-white/70">Choose from professionally designed templates or create your own custom designs.</p>
                </div>

                <!-- Feature 3 -->
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                        <i data-feather="type" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-4">Advanced Typography</h3>
                    <p class="text-white/70">Full control over fonts, spacing, and text effects with real-time preview.</p>
                </div>

                <!-- Feature 4 -->
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                        <i data-feather="download" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-4">Instant Export</h3>
                    <p class="text-white/70">High-quality exports with automatic upload back to your Jellyfin server.</p>
                </div>

                <!-- Feature 5 -->
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                        <i data-feather="database" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-4">TMDb Enrichment</h3>
                    <p class="text-white/70">Access millions of alternative posters and metadata from The Movie Database.</p>
                </div>

                <!-- Feature 6 -->
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
                        <i data-feather="zap" class="text-white w-8 h-8"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-white mb-4">Real-time Preview</h3>
                    <p class="text-white/70">See your changes instantly with our optimized WebGL rendering engine.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4">
        <div class="max-w-4xl mx-auto text-center glass-effect rounded-3xl p-12">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
                Ready to Transform Your Media Library?
            </h2>
            <p class="text-white/70 text-lg mb-8">
                Join thousands of users creating beautiful, custom posters for their Jellyfin collections.
            </p>
            <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift">
                Start Your Free Trial
            </button>
        </div>
    </section>

    <!-- Footer -->
    <footer class="border-t border-white/20 py-12 px-4">
        <div class="max-w-7xl mx-auto">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-white font-semibold mb-4">CanvasCrafter</h4>
                    <p class="text-white/60 text-sm">Crafting beautiful posters for your media library since 2024.</p>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-4">Product</h4>
                    <div class="space-y-2">
                        <a href="#" class="block text-white/60 hover:text-white text-sm">Features</a>
                        <a href="#" class="block text-white/60 hover:text-white text-sm">Templates</a>
                        <a href="#" class="block text-white/60 hover:text-white text-sm">Pricing</a>
                    </div>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-4">Resources</h4>
                    <div class="space-y-2">
                        <a href="#" class="block text-white/60 hover:text-white text-sm">Documentation</a>
                        <a href="#" class="block text-white/60 hover:text-white text-sm">API Reference</a>
                        <a href="#" class="block text-white/60 hover:text-white text-sm">Support</a>
                    </div>
                </div>
                <div>
                    <h4 class="text-white font-semibold mb-4">Connect</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-white/60 hover:text-white"><i data-feather="github"></i></a>
                        <a href="#" class="text-white/60 hover:text-white"><i data-feather="twitter"></i></a>
                        <a href="#" class="text-white/60 hover:text-white"><i data-feather="discord"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Vanta.js background
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0xffffff,
            backgroundColor: 0x667eea,
            size: 1.00
        });

        // Initialize Feather Icons
        feather.replace();
    </script>
</body>
</html>