Spaces:

samihalawa
/

Wordlist-Video

Build error

App Files Files Community

Sami commited on Mar 14

Commit

cf9c856

1 Parent(s): a7515cf

Setup Docker-based Hugging Face Space with project directory

Browse files

Files changed (17) hide show

.gitignore +33 -0
Dockerfile +26 -0
README.md +33 -1
favicon.ico +0 -0
healthcheck.py +31 -0
index.html +151 -0
nginx.conf +15 -0
react/enhanced-videogen-pro-v2.tsx +1267 -0
react/enhanced-videogen-pro-v3-permite-mover-con-mano.tsx +1812 -0
react/enhanced-videogen-pro.tsx +916 -0
robots.txt +3 -0
run_local.sh +9 -0
video-editor-html/SplashScreen 3.json +1 -0
video-editor-html/doctorsimage.webp +0 -0
video-editor-html/image.png +0 -0
video-editor-html/index.html +687 -0
video-editor-html/video-animation copy BUENO BUENO BUENO copy.html +1267 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,33 @@

+# Node modules
+node_modules/
+# Build files
+dist/
+build/
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+logs/
+*.log
+# Editor directories and files
+.idea/
+.vscode/
+*.swp
+*.swo
+# OS files
+.DS_Store
+Thumbs.db
+# Docker
+.dockerignore

Dockerfile ADDED Viewed

	@@ -0,0 +1,26 @@

+FROM nginx:alpine
+# Install Python for health check
+RUN apk add --no-cache python3
+# Copy all project files to the nginx html directory
+COPY . /usr/share/nginx/html
+# Remove the .git directory from the final image
+RUN rm -rf /usr/share/nginx/html/.git
+# Configure nginx
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Make health check script executable
+RUN chmod +x /usr/share/nginx/html/healthcheck.py
+# Expose port 7860 (default for Hugging Face Spaces)
+EXPOSE 7860
+# Health check
+HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
+  CMD python3 /usr/share/nginx/html/healthcheck.py
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

README.md CHANGED Viewed

@@ -7,4 +7,36 @@ sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 pinned: false
 ---
+# Wordlist Video Projects
+A collection of video editing and generation tools hosted on Hugging Face Spaces.
+## Available Projects
+### React-based Video Editors
+- **Enhanced VideoGen Pro**: A React-based video generation tool with advanced features
+- **VideoGen Pro V2**: Version 2 with additional features
+- **VideoGen Pro V3**: Version 3 with hand movement capabilities
+### HTML-based Video Editors
+- **HTML Video Editor**: A simple HTML-based video editor
+- **Advanced HTML Video Animation**: Enhanced HTML video animation tool
+## Technical Details
+This Hugging Face Space uses a simple Docker setup with Nginx to serve the various projects. The main page provides a directory to navigate between the different tools.
+## Usage
+Simply visit the Space URL to access the main directory page, then click on any project to explore its features.
+## Development
+To modify or add new projects:
+1. Add your project files to the appropriate directory
+2. Update the main index.html to include links to your new project
+3. Commit and push your changes to update the Space
+## License
+This project is open source and available under the MIT License.

favicon.ico ADDED Viewed

healthcheck.py ADDED Viewed

	@@ -0,0 +1,31 @@

+#!/usr/bin/env python3
+import http.client
+import time
+import sys
+def check_server_health():
+    """Check if the server is running and responding to requests."""
+    conn = http.client.HTTPConnection("localhost", 7860)
+    try:
+        conn.request("GET", "/")
+        response = conn.getresponse()
+        return response.status == 200
+    except Exception as e:
+        print(f"Error checking server health: {e}")
+        return False
+    finally:
+        conn.close()
+# Wait for the server to start (max 30 seconds)
+max_attempts = 30
+for attempt in range(max_attempts):
+    if check_server_health():
+        print("Server is healthy!")
+        sys.exit(0)
+    print(f"Waiting for server to start... ({attempt+1}/{max_attempts})")
+    time.sleep(1)
+print("Server failed to start within the expected time.")
+sys.exit(1)

index.html ADDED Viewed

	@@ -0,0 +1,151 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wordlist Video Projects</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f9f9f9;
+        }
+        header {
+            background: linear-gradient(to right, #FFD700, #CCCCCC);
+            color: white;
+            text-align: center;
+            padding: 2rem;
+            border-radius: 8px;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        .projects-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+        .project-card {
+            background-color: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .project-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        .project-image {
+            height: 200px;
+            background-color: #eee;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            color: #666;
+        }
+        .project-content {
+            padding: 1.5rem;
+        }
+        .project-title {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            font-size: 1.5rem;
+        }
+        .project-description {
+            color: #666;
+            margin-bottom: 1.5rem;
+        }
+        .project-link {
+            display: inline-block;
+            background-color: #FFD700;
+            color: white;
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            font-weight: bold;
+            transition: background-color 0.3s ease;
+        }
+        .project-link:hover {
+            background-color: #E6C200;
+        }
+        footer {
+            text-align: center;
+            margin-top: 3rem;
+            padding-top: 1rem;
+            border-top: 1px solid #eee;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Wordlist Video Projects</h1>
+        <p>A collection of video editing and generation tools</p>
+    </header>
+    <main>
+        <div class="projects-container">
+            <!-- React Video Editor Projects -->
+            <div class="project-card">
+                <div class="project-image">🎬</div>
+                <div class="project-content">
+                    <h2 class="project-title">Enhanced VideoGen Pro</h2>
+                    <p class="project-description">A React-based video generation tool with advanced features.</p>
+                    <a href="react/enhanced-videogen-pro.tsx" class="project-link">View Project</a>
+                </div>
+            </div>
+            <div class="project-card">
+                <div class="project-image">🎬</div>
+                <div class="project-content">
+                    <h2 class="project-title">VideoGen Pro V2</h2>
+                    <p class="project-description">Version 2 of the React video generation tool with additional features.</p>
+                    <a href="react/enhanced-videogen-pro-v2.tsx" class="project-link">View Project</a>
+                </div>
+            </div>
+            <div class="project-card">
+                <div class="project-image">🎬</div>
+                <div class="project-content">
+                    <h2 class="project-title">VideoGen Pro V3</h2>
+                    <p class="project-description">Version 3 with hand movement capabilities for more interactive editing.</p>
+                    <a href="react/enhanced-videogen-pro-v3-permite-mover-con-mano.tsx" class="project-link">View Project</a>
+                </div>
+            </div>
+            <!-- HTML Video Editor -->
+            <div class="project-card">
+                <div class="project-image">🎥</div>
+                <div class="project-content">
+                    <h2 class="project-title">HTML Video Editor</h2>
+                    <p class="project-description">A simple HTML-based video editor with basic functionality.</p>
+                    <a href="video-editor-html/index.html" class="project-link">View Project</a>
+                </div>
+            </div>
+            <div class="project-card">
+                <div class="project-image">🎥</div>
+                <div class="project-content">
+                    <h2 class="project-title">Advanced HTML Video Animation</h2>
+                    <p class="project-description">Enhanced HTML video animation tool with additional features.</p>
+                    <a href="video-editor-html/video-animation copy BUENO BUENO BUENO copy.html" class="project-link">View Project</a>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <p>© 2023 Wordlist Video Projects. Hosted on Hugging Face Spaces.</p>
+    </footer>
+</body>
+</html>

nginx.conf ADDED Viewed

	@@ -0,0 +1,15 @@

+server {
+    listen 7860;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ =404;
+    }
+    # Enable gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/javascript application/json;
+    gzip_min_length 1000;
+}

react/enhanced-videogen-pro-v2.tsx ADDED Viewed

	@@ -0,0 +1,1267 @@

+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Plus, Trash2, Edit3, Download, Play, Pause, ChevronDown,
+  Settings, Save, X, FileText, UploadCloud, RefreshCw,
+  Volume2, Clock, FileVideo, Check, AlertTriangle, Zap,
+  Layers, Grid, ArrowLeft, ArrowRight, Move, Eye
+} from 'lucide-react';
+// Shadcn UI components
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import { Checkbox } from '@/components/ui/checkbox';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Textarea } from '@/components/ui/textarea';
+const VideoGeneratorApp = () => {
+  // State management
+  const [activeTab, setActiveTab] = useState("blocks");
+  const [currentBlock, setCurrentBlock] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [showEditor, setShowEditor] = useState(false);
+  const [targetLanguage, setTargetLanguage] = useState("es-ES");
+  const [nativeLanguage, setNativeLanguage] = useState("en-US");
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(15);
+  const [editingElement, setEditingElement] = useState(null);
+  const timelineRef = useRef(null);
+  const previewRef = useRef(null);
+  // Project data
+  const [projectName, setProjectName] = useState("Vocabulary Project");
+  const [showNotification, setShowNotification] = useState(false);
+  const [notificationMessage, setNotificationMessage] = useState("");
+  const [generatingStatus, setGeneratingStatus] = useState(null);
+  const [renderQueue, setRenderQueue] = useState([]);
+  const [selectedAnimationStyle, setSelectedAnimationStyle] = useState("fadeIn");
+  const [audioSyncEnabled, setAudioSyncEnabled] = useState(true);
+  // Content data
+  const [content, setContent] = useState([
+    {
+      id: 1,
+      targetWord: "médico",
+      nativeWord: "doctor",
+      targetPhrase1: "quiere ser médico",
+      nativePhrase1: "he wants to be a doctor",
+      targetPhrase2: "su médico es bueno",
+      nativePhrase2: "his doctor is good",
+    },
+    {
+      id: 2,
+      targetWord: "abogado",
+      nativeWord: "lawyer",
+      targetPhrase1: "estudia para abogado",
+      nativePhrase1: "he studies to be a lawyer",
+      targetPhrase2: "necesita un abogado",
+      nativePhrase2: "he needs a lawyer",
+    }
+  ]);
+  const [currentContentIndex, setCurrentContentIndex] = useState(0);
+  const [newRow, setNewRow] = useState({
+    targetWord: "",
+    nativeWord: "",
+    targetPhrase1: "",
+    nativePhrase1: "",
+    targetPhrase2: "",
+    nativePhrase2: ""
+  });
+  // Blocks
+  const [blocks, setBlocks] = useState([
+    {
+      id: "vocab-block",
+      name: "Vocabulary Block",
+      description: "Standard vocabulary block with word and phrases",
+      duration: 15,
+      background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)"
+    },
+    {
+      id: "grammar-block",
+      name: "Grammar Block",
+      description: "Block for grammar explanations with examples",
+      duration: 20,
+      background: "linear-gradient(135deg, #16213e 0%, #0f3460 100%)"
+    },
+    {
+      id: "conversation-block",
+      name: "Conversation Block",
+      description: "Dialog-based block for conversation practice",
+      duration: 30,
+      background: "linear-gradient(135deg, #0f3460 0%, #950740 100%)"
+    }
+  ]);
+  // Timeline elements
+  const [timelineElements, setTimelineElements] = useState([
+    {
+      id: "el-1",
+      type: "text",
+      content: "Vocabulary Word",
+      start: 0,
+      duration: 3,
+      position: {x: 50, y: 20},
+      style: {color: "#ffffff", fontSize: 36, fontWeight: "bold"},
+      animation: "fadeIn",
+      contentKey: "targetWord"
+    },
+    {
+      id: "el-2",
+      type: "block",
+      content: "Color Block",
+      start: 0.5,
+      duration: 12,
+      position: {x: 30, y: 35},
+      style: {width: 200, height: 200, borderRadius: "8px", background: "linear-gradient(45deg, #3490dc, #6574cd)"},
+      animation: "zoomIn"
+    },
+    {
+      id: "el-3",
+      type: "text",
+      content: "Example Phrase 1",
+      start: 4,
+      duration: 3,
+      position: {x: 50, y: 65},
+      style: {color: "#ffffff", fontSize: 24},
+      animation: "slideIn",
+      contentKey: "targetPhrase1"
+    },
+    {
+      id: "el-4",
+      type: "text",
+      content: "Example Phrase 2",
+      start: 8,
+      duration: 3,
+      position: {x: 50, y: 80},
+      style: {color: "#ffffff", fontSize: 24},
+      animation: "slideIn",
+      contentKey: "targetPhrase2"
+    },
+    {
+      id: "el-5",
+      type: "audio",
+      content: "narration.mp3",
+      start: 0,
+      duration: 15
+    },
+  ]);
+  // Notification helper
+  const showNotify = (message) => {
+    setNotificationMessage(message);
+    setShowNotification(true);
+    setTimeout(() => setShowNotification(false), 3000);
+  };
+  // Block selection
+  const selectBlock = (blockId) => {
+    setCurrentBlock(blocks.find(b => b.id === blockId));
+    showNotify("Block selected: " + blocks.find(b => b.id === blockId).name);
+    setActiveTab("content");
+  };
+  // Add new content row
+  const addContentRow = () => {
+    if (!newRow.targetWord || !newRow.nativeWord) {
+      showNotify("Target and native words are required");
+      return;
+    }
+    setContent([...content, {
+      id: content.length + 1,
+      ...newRow
+    }]);
+    setNewRow({
+      targetWord: "",
+      nativeWord: "",
+      targetPhrase1: "",
+      nativePhrase1: "",
+      targetPhrase2: "",
+      nativePhrase2: ""
+    });
+    showNotify("New content row added");
+  };
+  // Delete content row
+  const deleteContentRow = (id) => {
+    setContent(content.filter(row => row.id !== id));
+    showNotify("Content row deleted");
+  };
+  // Toggle play/pause
+  const togglePlayback = () => {
+    setIsPlaying(!isPlaying);
+  };
+  // Animation preview
+  useEffect(() => {
+    let interval;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        setCurrentTime(time => {
+          const newTime = time + 0.1;
+          if (newTime >= duration) {
+            setIsPlaying(false);
+            return 0;
+          }
+          return newTime;
+        });
+        setProgress(prog => {
+          const newProg = prog + (100 / (duration * 10));
+          return newProg > 100 ? 0 : newProg;
+        });
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, duration]);
+  // Handle timeline scrubbing
+  const handleTimelineClick = (e) => {
+    if (!timelineRef.current) return;
+    const rect = timelineRef.current.getBoundingClientRect();
+    const clickPosition = e.clientX - rect.left;
+    const percentClicked = clickPosition / rect.width;
+    const newTime = percentClicked * duration;
+    setCurrentTime(Math.max(0, Math.min(newTime, duration)));
+    setProgress(percentClicked * 100);
+  };
+  // Open element editor
+  const openElementEditor = (element) => {
+    setEditingElement(element);
+    setShowEditor(true);
+  };
+  // Update element
+  const updateElement = (updatedElement) => {
+    setTimelineElements(elements =>
+      elements.map(el => el.id === updatedElement.id ? updatedElement : el)
+    );
+    setShowEditor(false);
+    showNotify("Element updated");
+  };
+  // Add new element
+  const addTimelineElement = (type) => {
+    const newElement = {
+      id: `el-${Date.now()}`,
+      type,
+      content: type === 'text' ? 'New Text' : type === 'block' ? 'Color Block' : 'audio.mp3',
+      start: currentTime,
+      duration: type === 'audio' ? 5 : 3,
+      position: type !== 'audio' ? {x: 50, y: 50} : undefined,
+      style: type === 'text' ? {color: "#ffffff", fontSize: 24} :
+             type === 'block' ? {
+               width: 150,
+               height: 150,
+               borderRadius: "8px",
+               background: "linear-gradient(45deg, #3490dc, #6574cd)"
+             } : undefined,
+      animation: type !== 'audio' ? selectedAnimationStyle : undefined
+    };
+    setTimelineElements([...timelineElements, newElement]);
+    setEditingElement(newElement);
+    setShowEditor(true);
+    showNotify(`New ${type} element added`);
+  };
+  // Generate audio
+  const generateAudio = () => {
+    showNotify("Generating audio for content...");
+    // Simulate audio generation
+    setTimeout(() => {
+      showNotify("Audio generation complete!");
+    }, 1500);
+  };
+  // Generate videos for all content
+  const generateAllVideos = () => {
+    if (!currentBlock) {
+      showNotify("Please select a block first");
+      return;
+    }
+    if (content.length === 0) {
+      showNotify("No content to generate");
+      return;
+    }
+    // Create render queue
+    const queue = content.map(item => ({
+      id: `render-${item.id}`,
+      content: item,
+      block: currentBlock,
+      status: "pending",
+      progress: 0
+    }));
+    setRenderQueue(queue);
+    setGeneratingStatus("preparing");
+    // Simulate processing
+    setTimeout(() => {
+      setGeneratingStatus("processing");
+      let currentIndex = 0;
+      const processNext = () => {
+        if (currentIndex >= queue.length) {
+          setGeneratingStatus("complete");
+          return;
+        }
+        const updatedQueue = [...queue];
+        updatedQueue[currentIndex].status = "processing";
+        setRenderQueue(updatedQueue);
+        // Simulate processing time
+        let progress = 0;
+        const interval = setInterval(() => {
+          progress += 10;
+          const newQueue = [...updatedQueue];
+          newQueue[currentIndex].progress = progress;
+          setRenderQueue(newQueue);
+          if (progress >= 100) {
+            clearInterval(interval);
+            newQueue[currentIndex].status = "complete";
+            setRenderQueue(newQueue);
+            currentIndex++;
+            setTimeout(processNext, 500);
+          }
+        }, 300);
+      };
+      processNext();
+    }, 1500);
+  };
+  // Reset progress for new render
+  const startNewProject = () => {
+    setCurrentBlock(null);
+    setActiveTab("blocks");
+    setProjectName("New Project");
+    setContent([]);
+    setRenderQueue([]);
+    setGeneratingStatus(null);
+    showNotify("Started new project");
+  };
+  // Get element animation state
+  const getElementAnimationState = (element) => {
+    if (currentTime < element.start) {
+      return "before";
+    } else if (currentTime >= element.start && currentTime < element.start + element.duration) {
+      return "active";
+    } else {
+      return "after";
+    }
+  };
+  // Get real content based on timeline element
+  const getElementContent = (element) => {
+    if (!element.contentKey || currentContentIndex >= content.length) {
+      return element.content;
+    }
+    const contentItem = content[currentContentIndex];
+    return contentItem[element.contentKey] || element.content;
+  };
+  return (
+    <div className="flex flex-col h-screen bg-slate-50 overflow-hidden">
+      {/* Header */}
+      <header className="border-b bg-white shadow-sm z-10">
+        <div className="container mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <FileVideo className="h-6 w-6 text-blue-600" />
+            <h1 className="text-xl font-bold tracking-tight">VideoGen Pro</h1>
+          </div>
+          <div className="flex space-x-2">
+            <Input
+              className="w-60"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              placeholder="Project Name"
+            />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <FileText className="h-4 w-4 mr-1" /> Project
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem onClick={startNewProject}>
+                  New Project
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  Load Project
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  Save Project
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button size="sm">
+              <Download className="h-4 w-4 mr-1" /> Export
+            </Button>
+            <Button variant="ghost" size="icon">
+              <Settings className="h-5 w-5" />
+            </Button>
+          </div>
+        </div>
+      </header>
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left Sidebar */}
+        <div className="w-56 border-r bg-white">
+          <div className="p-4">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid grid-cols-2 mb-4">
+                <TabsTrigger value="blocks">Blocks</TabsTrigger>
+                <TabsTrigger value="content">Content</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="space-y-2">
+              <Button
+                variant={activeTab === "blocks" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("blocks")}
+              >
+                <Layers className="h-4 w-4 mr-2" />
+                Blocks
+              </Button>
+              <Button
+                variant={activeTab === "content" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("content")}
+              >
+                <FileText className="h-4 w-4 mr-2" />
+                Content
+              </Button>
+              <Button
+                variant={activeTab === "editor" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("editor")}
+              >
+                <Edit3 className="h-4 w-4 mr-2" />
+                Editor
+              </Button>
+              <Button
+                variant={activeTab === "generate" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("generate")}
+              >
+                <Zap className="h-4 w-4 mr-2" />
+                Generate
+              </Button>
+            </div>
+            {activeTab === "editor" && (
+              <div className="mt-6 space-y-2 border-t pt-4">
+                <h3 className="text-sm font-medium text-slate-500">Add Elements</h3>
+                <div className="grid grid-cols-3 gap-2">
+                  <Button variant="outline" size="sm" className="w-full p-1" onClick={() => addTimelineElement("text")}>
+                    <FileText className="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="w-full p-1" onClick={() => addTimelineElement("block")}>
+                    <Layers className="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="w-full p-1" onClick={() => addTimelineElement("audio")}>
+                    <Volume2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <h3 className="text-sm font-medium text-slate-500 mt-4">Animation Style</h3>
+                <Select value={selectedAnimationStyle} onValueChange={setSelectedAnimationStyle}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Animation Style" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fadeIn">Fade In</SelectItem>
+                    <SelectItem value="slideIn">Slide In</SelectItem>
+                    <SelectItem value="zoomIn">Zoom In</SelectItem>
+                    <SelectItem value="bounceIn">Bounce In</SelectItem>
+                    <SelectItem value="flipIn">Flip In</SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="flex items-center justify-between mt-4">
+                  <Label htmlFor="audio-sync" className="text-sm">
+                    Auto-sync to Audio
+                  </Label>
+                  <Switch
+                    id="audio-sync"
+                    checked={audioSyncEnabled}
+                    onCheckedChange={setAudioSyncEnabled}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        {/* Main Panel */}
+        <div className="flex-1 overflow-auto">
+          <div className="container mx-auto p-6">
+            {activeTab === "blocks" && (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-2xl font-bold">Video Blocks</h2>
+                  <Button size="sm">
+                    <Plus className="h-4 w-4 mr-1" /> Import Block
+                  </Button>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {blocks.map(block => (
+                    <Card key={block.id} className={`overflow-hidden transition-all ${currentBlock?.id === block.id ? 'ring-2 ring-blue-500' : ''}`}>
+                      <div className="aspect-video relative overflow-hidden"
+                        style={{ background: block.background }}
+                      >
+                        <div className="absolute inset-0 flex items-center justify-center">
+                          <div className="w-24 h-24 rounded"
+                            style={{ background: "rgba(255,255,255,0.1)" }}
+                          />
+                        </div>
+                        <div
+                          className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4"
+                        >
+                          <h3 className="text-lg font-medium text-white">{block.name}</h3>
+                          <p className="text-sm text-white/80">{block.description}</p>
+                        </div>
+                        <Badge className="absolute top-2 right-2">
+                          {block.duration}s
+                        </Badge>
+                      </div>
+                      <CardFooter className="bg-white p-3">
+                        <Button
+                          className="w-full"
+                          onClick={() => selectBlock(block.id)}
+                        >
+                          {currentBlock?.id === block.id ? (
+                            <>
+                              <Check className="h-4 w-4 mr-1" />
+                              Selected
+                            </>
+                          ) : "Select Block"}
+                        </Button>
+                      </CardFooter>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+            {activeTab === "content" && (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-2xl font-bold">Content</h2>
+                  <div className="flex space-x-2">
+                    <Select value={targetLanguage} onValueChange={setTargetLanguage}>
+                      <SelectTrigger className="w-40">
+                        <SelectValue placeholder="Target Language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="es-ES">Español</SelectItem>
+                        <SelectItem value="fr-FR">Français</SelectItem>
+                        <SelectItem value="de-DE">Deutsch</SelectItem>
+                        <SelectItem value="it-IT">Italiano</SelectItem>
+                        <SelectItem value="pt-PT">Português</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Select value={nativeLanguage} onValueChange={setNativeLanguage}>
+                      <SelectTrigger className="w-40">
+                        <SelectValue placeholder="Native Language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="en-US">English</SelectItem>
+                        <SelectItem value="es-ES">Español</SelectItem>
+                        <SelectItem value="fr-FR">Français</SelectItem>
+                        <SelectItem value="de-DE">Deutsch</SelectItem>
+                        <SelectItem value="it-IT">Italiano</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="bg-white rounded-md shadow overflow-hidden">
+                  <div className="border-b px-4 py-2 bg-slate-50 grid grid-cols-7 gap-4 font-medium text-sm">
+                    <div className="col-span-1">Target Word</div>
+                    <div className="col-span-1">Native Word</div>
+                    <div className="col-span-2">Target Phrase 1</div>
+                    <div className="col-span-2">Native Phrase 1</div>
+                    <div className="col-span-1">Actions</div>
+                  </div>
+                  {content.map(row => (
+                    <div key={row.id} className="px-4 py-3 border-b grid grid-cols-7 gap-4 items-center">
+                      <div className="col-span-1">{row.targetWord}</div>
+                      <div className="col-span-1">{row.nativeWord}</div>
+                      <div className="col-span-2">{row.targetPhrase1}</div>
+                      <div className="col-span-2">{row.nativePhrase1}</div>
+                      <div className="col-span-1 flex space-x-1">
+                        <Button variant="ghost" size="icon" onClick={() => setCurrentContentIndex(content.indexOf(row))}>
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon" onClick={() => deleteContentRow(row.id)}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                  <div className="px-4 py-3 grid grid-cols-7 gap-4 items-center bg-slate-50">
+                    <div className="col-span-1">
+                      <Input
+                        placeholder="Target Word"
+                        value={newRow.targetWord}
+                        onChange={(e) => setNewRow({...newRow, targetWord: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <Input
+                        placeholder="Native Word"
+                        value={newRow.nativeWord}
+                        onChange={(e) => setNewRow({...newRow, nativeWord: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Input
+                        placeholder="Target Phrase 1"
+                        value={newRow.targetPhrase1}
+                        onChange={(e) => setNewRow({...newRow, targetPhrase1: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Input
+                        placeholder="Native Phrase 1"
+                        value={newRow.nativePhrase1}
+                        onChange={(e) => setNewRow({...newRow, nativePhrase1: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <Button onClick={addContentRow}>
+                        <Plus className="h-4 w-4 mr-1" /> Add
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-between">
+                  <Button variant="outline" onClick={generateAudio}>
+                    <Volume2 className="h-4 w-4 mr-1" /> Generate Audio
+                  </Button>
+                  <Button onClick={() => setActiveTab("editor")}>
+                    Continue to Editor <ChevronDown className="h-4 w-4 ml-1 rotate-270" />
+                  </Button>
+                </div>
+              </div>
+            )}
+            {(activeTab === "editor" || activeTab === "generate") && (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-2xl font-bold">
+                    {activeTab === "editor" ? "Block Editor" : "Generate Videos"}
+                  </h2>
+                  {activeTab === "generate" && (
+                    <div className="flex space-x-2">
+                      <Select defaultValue="1080p">
+                        <SelectTrigger className="w-32">
+                          <SelectValue placeholder="Resolution" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="720p">720p</SelectItem>
+                          <SelectItem value="1080p">1080p</SelectItem>
+                          <SelectItem value="4k">4K</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Select defaultValue="mp4">
+                        <SelectTrigger className="w-32">
+                          <SelectValue placeholder="Format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="mp4">MP4 (H.264)</SelectItem>
+                          <SelectItem value="webm">WebM</SelectItem>
+                          <SelectItem value="gif">GIF</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+                {/* Preview and Timeline Area */}
+                <div className="space-y-4">
+                  {/* Preview Area */}
+                  <div
+                    ref={previewRef}
+                    className="aspect-video rounded-lg relative overflow-hidden"
+                    style={{
+                      background: currentBlock?.background || "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)"
+                    }}
+                  >
+                    {/* Preview elements */}
+                    {timelineElements.map(element => {
+                      if (element.type === 'audio') return null; // Audio doesn't render visually
+                      const animationState = getElementAnimationState(element);
+                      if (animationState === "before") return null;
+                      // Calculate opacity based on time
+                      const opacity = animationState === "active" ? 1 : 0;
+                      return (
+                        <div
+                          key={element.id}
+                          className="absolute"
+                          style={{
+                            left: `${element.position?.x || 0}%`,
+                            top: `${element.position?.y || 0}%`,
+                            opacity,
+                            transition: 'opacity 0.3s',
+                            cursor: 'move',
+                            transform: 'translate(-50%, -50%)'
+                          }}
+                          onClick={() => openElementEditor(element)}
+                        >
+                          {element.type === 'text' ? (
+                            <div
+                              style={{
+                                color: element.style?.color || 'white',
+                                fontSize: `${element.style?.fontSize || 24}px`,
+                                fontWeight: element.style?.fontWeight || 'normal',
+                                textShadow: '0 1px 2px rgba(0,0,0,0.5)',
+                                whiteSpace: 'nowrap'
+                              }}
+                            >
+                              {getElementContent(element)}
+                            </div>
+                          ) : element.type === 'block' ? (
+                            <div
+                              style={{
+                                width: `${element.style?.width || 100}px`,
+                                height: `${element.style?.height || 100}px`,
+                                borderRadius: element.style?.borderRadius || '0px',
+                                background: element.style?.background || 'rgba(255,255,255,0.2)'
+                              }}
+                            />
+                          ) : null}
+                        </div>
+                      );
+                    })}
+                    {/* Controls */}
+                    <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 bg-black/70 rounded-full p-2">
+                      <Button variant="ghost" size="icon" className="text-white">
+                        <ArrowLeft className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon" className="text-white" onClick={togglePlayback}>
+                        {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
+                      </Button>
+                      <Button variant="ghost" size="icon" className="text-white">
+                        <ArrowRight className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    {/* Timeline progress */}
+                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-700">
+                      <div
+                        className="h-full bg-blue-500 transition-all"
+                        style={{ width: `${progress}%` }}
+                      ></div>
+                    </div>
+                  </div>
+                  {/* Timeline */}
+                  <div
+                    ref={timelineRef}
+                    className="h-16 bg-gray-800 rounded relative overflow-hidden cursor-pointer"
+                    onClick={handleTimelineClick}
+                  >
+                    {/* Time markers */}
+                    <div className="absolute top-0 left-0 right-0 h-4 flex text-xs text-gray-400">
+                      {Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
+                        <div
+                          key={i}
+                          className="border-l border-gray-700 h-full flex items-center px-1"
+                          style={{
+                            position: 'absolute',
+                            left: `${(i / duration) * 100}%`
+                          }}
+                        >
+                          {i}s
+                        </div>
+                      ))}
+                    </div>
+                    {/* Elements timeline */}
+                    <div className="absolute top-4 left-0 right-0 bottom-0 px-2">
+                      {timelineElements.map(element => (
+                        <div
+                          key={element.id}
+                          className={`absolute h-5 rounded cursor-pointer ${
+                            element.type === 'text' ? 'bg-blue-600/70' :
+                            element.type === 'block' ? 'bg-green-600/70' :
+                            'bg-purple-600/70'
+                          } ${currentTime >= element.start && currentTime < element.start + element.duration ? 'ring-1 ring-white' : ''}`}
+                          style={{
+                            left: `${(element.start / duration) * 100}%`,
+                            width: `${(element.duration / duration) * 100}%`,
+                            top: element.type === 'audio' ? '7px' : '0px'
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            openElementEditor(element);
+                          }}
+                        >
+                          <div className="truncate text-xs text-white px-1 py-0.5">
+                            {element.type === 'text' ? getElementContent(element).substring(0, 10) : element.type}
+                            {element.type === 'text' && getElementContent(element).length > 10 ? '...' : ''}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                    {/* Current time indicator */}
+                    <div className="absolute top-0 bottom-0 w-px bg-red-500 z-10" style={{ left: `${(currentTime / duration) * 100}%` }}>
+                      <div className="w-2 h-2 bg-red-500 rounded-full -ml-1"></div>
+                    </div>
+                  </div>
+                  <div className="flex justify-between">
+                    <div className="flex space-x-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentContentIndex(prev => (prev > 0 ? prev - 1 : 0))}
+                        disabled={currentContentIndex <= 0}
+                      >
+                        <ArrowLeft className="h-4 w-4 mr-1" />
+                        Previous
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentContentIndex(prev => (prev < content.length - 1 ? prev + 1 : prev))}
+                        disabled={currentContentIndex >= content.length - 1}
+                      >
+                        Next
+                        <ArrowRight className="h-4 w-4 ml-1" />
+                      </Button>
+                      <div className="bg-slate-100 rounded px-2 py-1 text-sm flex items-center">
+                        Item {currentContentIndex + 1} of {content.length}
+                      </div>
+                    </div>
+                    {activeTab === "editor" && (
+                      <Button onClick={() => setActiveTab("generate")}>
+                        Continue to Generate <ChevronDown className="h-4 w-4 ml-1 rotate-270" />
+                      </Button>
+                    )}
+                    {activeTab === "generate" && (
+                      <Button onClick={generateAllVideos} disabled={generatingStatus === "processing" || generatingStatus === "preparing"}>
+                        {generatingStatus === "complete" ?
+                          <><RefreshCw className="h-4 w-4 mr-1" /> Generate More</> :
+                          generatingStatus === "processing" || generatingStatus === "preparing" ?
+                            <><RefreshCw className="h-4 w-4 mr-1 animate-spin" /> Processing...</> :
+                            <><Zap className="h-4 w-4 mr-1" /> Generate All Videos</>}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                {activeTab === "generate" && (
+                  <div className="mt-6">
+                    <Alert className={generatingStatus === "complete" ? "bg-green-50 border-green-200" : "bg-blue-50 border-blue-200"}>
+                      <AlertDescription className={generatingStatus === "complete" ? "text-green-700" : "text-blue-700"}>
+                        {generatingStatus === "complete" ?
+                          `Successfully generated ${renderQueue.length} videos.` :
+                          generatingStatus === "processing" ?
+                            `Processing ${renderQueue.filter(item => item.status === "complete").length} of ${renderQueue.length} videos...` :
+                            generatingStatus === "preparing" ?
+                              "Setting up render queue..." :
+                              "Click the button below to generate videos for all content."}
+                      </AlertDescription>
+                    </Alert>
+                    <Card className="mt-4">
+                      <CardHeader>
+                        <CardTitle>Generation Queue</CardTitle>
+                        <CardDescription>
+                          {content.length} videos to generate using {currentBlock?.name || "selected block"}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-4">
+                        {renderQueue.length > 0 ? (
+                          renderQueue.map(item => (
+                            <div key={item.id} className="flex items-center space-x-4">
+                              <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
+                                {item.status === "complete" ?
+                                  <Check className="h-4 w-4 text-green-500" /> :
+                                  item.status === "processing" ?
+                                    <RefreshCw className="h-4 w-4 text-blue-500 animate-spin" /> :
+                                    <Clock className="h-4 w-4 text-slate-400" />}
+                              </div>
+                              <div className="flex-1">
+                                <div className="font-medium">{item.content.targetWord} - {item.content.nativeWord}</div>
+                                <Progress
+                                  value={item.progress}
+                                  className="h-2 mt-1"
+                                />
+                              </div>
+                              <div className="text-sm text-slate-500">
+                                {item.status === "complete" ?
+                                  "Complete" :
+                                  item.status === "processing" ?
+                                    `${item.progress}%` :
+                                    "Pending"}
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                disabled={item.status !== "complete"}
+                              >
+                                <Download className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-center py-8 text-slate-500">
+                            <Grid className="h-8 w-8 mx-auto mb-2" />
+                            <p>No videos in queue yet</p>
+                            <p className="text-sm">Click the "Generate All Videos" button to start generation</p>
+                          </div>
+                        )}
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <div>
+                          <div className="flex items-center space-x-2">
+                            <Checkbox id="audio-checkbox" checked />
+                            <Label htmlFor="audio-checkbox">Include audio</Label>
+                          </div>
+                        </div>
+                      </CardFooter>
+                    </Card>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Element Editor Dialog */}
+      <Dialog open={showEditor} onOpenChange={setShowEditor}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Edit Element</DialogTitle>
+            <DialogDescription>
+              Adjust properties for this timeline element
+            </DialogDescription>
+          </DialogHeader>
+          {editingElement && (
+            <div className="space-y-4 pt-2">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>Start Time (seconds)</Label>
+                  <Input
+                    type="number"
+                    min="0"
+                    step="0.1"
+                    value={editingElement.start}
+                    onChange={(e) => setEditingElement({...editingElement, start: parseFloat(e.target.value)})}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Duration (seconds)</Label>
+                  <Input
+                    type="number"
+                    min="0.1"
+                    step="0.1"
+                    value={editingElement.duration}
+                    onChange={(e) => setEditingElement({...editingElement, duration: parseFloat(e.target.value)})}
+                  />
+                </div>
+              </div>
+              {editingElement.type === "text" && (
+                <>
+                  <div className="space-y-2">
+                    <Label>Text Content</Label>
+                    <Textarea
+                      value={editingElement.content}
+                      onChange={(e) => setEditingElement({...editingElement, content: e.target.value})}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Font Size</Label>
+                      <Input
+                        type="number"
+                        value={editingElement.style?.fontSize || 24}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, fontSize: parseInt(e.target.value)}
+                        })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Text Color</Label>
+                      <Input
+                        type="color"
+                        value={editingElement.style?.color || "#ffffff"}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, color: e.target.value}
+                        })}
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Content Link</Label>
+                    <Select
+                      value={editingElement.contentKey || "none"}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        contentKey: val === "none" ? undefined : val
+                      })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Link to content field" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No link (use fixed text)</SelectItem>
+                        <SelectItem value="targetWord">Target Word</SelectItem>
+                        <SelectItem value="nativeWord">Native Word</SelectItem>
+                        <SelectItem value="targetPhrase1">Target Phrase 1</SelectItem>
+                        <SelectItem value="nativePhrase1">Native Phrase 1</SelectItem>
+                        <SelectItem value="targetPhrase2">Target Phrase 2</SelectItem>
+                        <SelectItem value="nativePhrase2">Native Phrase 2</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+              {editingElement.type === "block" && (
+                <>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Width (px)</Label>
+                      <Input
+                        type="number"
+                        value={editingElement.style?.width || 100}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, width: parseInt(e.target.value)}
+                        })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Height (px)</Label>
+                      <Input
+                        type="number"
+                        value={editingElement.style?.height || 100}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, height: parseInt(e.target.value)}
+                        })}
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Border Radius (px)</Label>
+                    <Input
+                      type="number"
+                      value={parseInt(editingElement.style?.borderRadius) || 0}
+                      onChange={(e) => setEditingElement({
+                        ...editingElement,
+                        style: {...editingElement.style, borderRadius: `${e.target.value}px`}
+                      })}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Background</Label>
+                    <Select
+                      value={editingElement.style?.background || "gradient1"}
+                      onValueChange={(val) => {
+                        let bgValue = val;
+                        if (val === "gradient1") {
+                          bgValue = "linear-gradient(45deg, #3490dc, #6574cd)";
+                        } else if (val === "gradient2") {
+                          bgValue = "linear-gradient(45deg, #38c172, #4dc0b5)";
+                        } else if (val === "gradient3") {
+                          bgValue = "linear-gradient(45deg, #e3342f, #f6993f)";
+                        } else if (val === "solid1") {
+                          bgValue = "#3490dc";
+                        } else if (val === "solid2") {
+                          bgValue = "#38c172";
+                        } else if (val === "solid3") {
+                          bgValue = "#e3342f";
+                        }
+                        setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, background: bgValue}
+                        });
+                      }}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose background" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="gradient1">Blue Gradient</SelectItem>
+                        <SelectItem value="gradient2">Green Gradient</SelectItem>
+                        <SelectItem value="gradient3">Red Gradient</SelectItem>
+                        <SelectItem value="solid1">Solid Blue</SelectItem>
+                        <SelectItem value="solid2">Solid Green</SelectItem>
+                        <SelectItem value="solid3">Solid Red</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+              {editingElement.type === "audio" && (
+                <div className="space-y-2">
+                  <Label>Audio Source</Label>
+                  <div className="flex space-x-2">
+                    <Input
+                      value={editingElement.content}
+                      onChange={(e) => setEditingElement({...editingElement, content: e.target.value})}
+                    />
+                    <Button variant="outline" size="icon">
+                      <UploadCloud className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              )}
+              {editingElement.type !== "audio" && (
+                <div className="space-y-2">
+                  <Label>Position</Label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="flex items-center space-x-2">
+                      <Label className="w-8">X %</Label>
+                      <Input
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={editingElement.position?.x || 50}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          position: {...editingElement.position, x: parseFloat(e.target.value)}
+                        })}
+                      />
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Label className="w-8">Y %</Label>
+                      <Input
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={editingElement.position?.y || 50}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          position: {...editingElement.position, y: parseFloat(e.target.value)}
+                        })}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+              {editingElement.type !== "audio" && (
+                <div className="space-y-2">
+                  <Label>Animation</Label>
+                  <Select
+                    value={editingElement.animation || "fadeIn"}
+                    onValueChange={(val) => setEditingElement({
+                      ...editingElement,
+                      animation: val
+                    })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Choose animation" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="fadeIn">Fade In</SelectItem>
+                      <SelectItem value="slideIn">Slide In</SelectItem>
+                      <SelectItem value="zoomIn">Zoom In</SelectItem>
+                      <SelectItem value="bounceIn">Bounce In</SelectItem>
+                      <SelectItem value="flipIn">Flip In</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+              <div className="flex items-center mt-4 space-x-2">
+                <Label htmlFor="element-sync" className="text-sm">
+                  Sync with audio
+                </Label>
+                <Switch
+                  id="element-sync"
+                  checked={true}
+                />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowEditor(false)}>Cancel</Button>
+            <Button onClick={() => updateElement(editingElement)}>Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {/* Notification Toast */}
+      <div className={`fixed bottom-4 right-4 bg-slate-800 text-white px-4 py-2 rounded-md shadow-lg transition-opacity duration-300 flex items-center ${showNotification ? 'opacity-100' : 'opacity-0'}`}>
+        <Check className="h-4 w-4 mr-2 text-green-400" />
+        {notificationMessage}
+      </div>
+    </div>
+  );
+};
+export default VideoGeneratorApp;

react/enhanced-videogen-pro-v3-permite-mover-con-mano.tsx ADDED Viewed

	@@ -0,0 +1,1812 @@

+import React, { useState, useEffect, useRef } from 'react';
+import { Camera, Plus, Trash2, Edit3, Download, Play, Pause, ChevronDown,
+  Settings, Save, X, FileText, Upload, RefreshCw, Globe, Volume2, Image,
+  Clock, Copy, FileVideo, Check, AlertTriangle, Zap, Layers, UploadCloud,
+  Grid, CheckCircle, Move, ArrowLeft, ArrowRight, SkipBack, SkipForward,
+  Music, Mic, Eye, EyeOff, Maximize, Minimize, Monitor, Wind } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import * as d3 from 'd3';
+// Mock imports for shadcn UI components
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '@/components/ui/dialog';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Checkbox } from '@/components/ui/checkbox';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Textarea } from '@/components/ui/textarea';
+// Animation presets for elements
+const animationPresets = {
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.5 }
+  },
+  slideIn: {
+    initial: { x: -100, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: 100, opacity: 0 },
+    transition: { duration: 0.5 }
+  },
+  zoomIn: {
+    initial: { scale: 0, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0, opacity: 0 },
+    transition: { duration: 0.5 }
+  },
+  bounceIn: {
+    initial: { scale: 0, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0, opacity: 0 },
+    transition: { type: "spring", stiffness: 200, damping: 10 }
+  },
+  flipIn: {
+    initial: { rotateY: 90, opacity: 0 },
+    animate: { rotateY: 0, opacity: 1 },
+    exit: { rotateY: -90, opacity: 0 },
+    transition: { duration: 0.5 }
+  }
+};
+// Helper for getting element animation based on time
+const getElementAnimationState = (element, currentTime) => {
+  if (currentTime < element.start) {
+    return "before";
+  } else if (currentTime >= element.start && currentTime < element.start + element.duration) {
+    return "active";
+  } else {
+    return "after";
+  }
+};
+const VideoGeneratorApp = () => {
+  // References
+  const canvasRef = useRef(null);
+  const videoRef = useRef(null);
+  const timelineRef = useRef(null);
+  const previewContainerRef = useRef(null);
+  // State management
+  const [activeTab, setActiveTab] = useState("templates");
+  const [currentTemplate, setCurrentTemplate] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [showEditor, setShowEditor] = useState(false);
+  const [targetLanguage, setTargetLanguage] = useState("es-ES");
+  const [nativeLanguage, setNativeLanguage] = useState("en-US");
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(15);
+  const [isDraggingTimeline, setIsDraggingTimeline] = useState(false);
+  const [showWaveform, setShowWaveform] = useState(true);
+  const [fullscreenPreview, setFullscreenPreview] = useState(false);
+  const [exportProgress, setExportProgress] = useState(0);
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportFormat, setExportFormat] = useState("mp4");
+  const [exportResolution, setExportResolution] = useState("1080p");
+  const [savedProjects, setSavedProjects] = useState([]);
+  const [showLoadProjectDialog, setShowLoadProjectDialog] = useState(false);
+  const [previewQuality, setPreviewQuality] = useState("medium");
+  const [draggedElement, setDraggedElement] = useState(null);
+  const [content, setContent] = useState([
+    {
+      id: 1,
+      image: "medico.jpg",
+      targetWord: "médico",
+      nativeWord: "doctor",
+      targetPhrase1: "quiere ser médico",
+      nativePhrase1: "he wants to be a doctor",
+      targetPhrase2: "su médico es bueno",
+      nativePhrase2: "his doctor is good",
+      audio: "medico-audio.mp3"
+    },
+    {
+      id: 2,
+      image: "abogado.jpg",
+      targetWord: "abogado",
+      nativeWord: "lawyer",
+      targetPhrase1: "estudia para abogado",
+      nativePhrase1: "he studies to be a lawyer",
+      targetPhrase2: "necesita un abogado",
+      nativePhrase2: "he needs a lawyer",
+      audio: "abogado-audio.mp3"
+    }
+  ]);
+  const [currentContentIndex, setCurrentContentIndex] = useState(0);
+  const [newRow, setNewRow] = useState({
+    image: "",
+    targetWord: "",
+    nativeWord: "",
+    targetPhrase1: "",
+    nativePhrase1: "",
+    targetPhrase2: "",
+    nativePhrase2: ""
+  });
+  const [selectedAnimationStyle, setSelectedAnimationStyle] = useState("fadeIn");
+  const [audioSyncEnabled, setAudioSyncEnabled] = useState(true);
+  const [generatingStatus, setGeneratingStatus] = useState(null);
+  const [renderQueue, setRenderQueue] = useState([]);
+  const [projectName, setProjectName] = useState("Vocabulary Project");
+  const [showNotification, setShowNotification] = useState(false);
+  const [notificationMessage, setNotificationMessage] = useState("");
+  const [notificationType, setNotificationType] = useState("success");
+  const [editingElement, setEditingElement] = useState(null);
+  const [audioData, setAudioData] = useState(null);
+  const [audioWaveform, setAudioWaveform] = useState([]);
+  const [templates, setTemplates] = useState([
+    {
+      id: "vocab-template",
+      name: "Vocabulary Template",
+      description: "Standard vocabulary template with word and phrases",
+      thumbnail: "template1.jpg",
+      duration: 15,
+      background: "#1a1a2e"
+    },
+    {
+      id: "grammar-template",
+      name: "Grammar Template",
+      description: "Template for grammar explanations with examples",
+      thumbnail: "template2.jpg",
+      duration: 20,
+      background: "#16213e"
+    },
+    {
+      id: "conversation-template",
+      name: "Conversation Template",
+      description: "Dialog-based template for conversation practice",
+      thumbnail: "template3.jpg",
+      duration: 30,
+      background: "#0f3460"
+    }
+  ]);
+  const [timelineElements, setTimelineElements] = useState([
+    {
+      id: "el-1",
+      type: "text",
+      content: "Vocabulary Word",
+      start: 0,
+      duration: 3,
+      position: {x: 400, y: 150},
+      style: {color: "#ffffff", fontSize: 36, fontWeight: "bold"},
+      animation: "fadeIn",
+      contentKey: "targetWord"
+    },
+    {
+      id: "el-2",
+      type: "image",
+      content: "medico.jpg",
+      start: 0.5,
+      duration: 12,
+      position: {x: 200, y: 250},
+      style: {width: 300, height: 300, borderRadius: "8px"},
+      animation: "zoomIn",
+      contentKey: "image"
+    },
+    {
+      id: "el-3",
+      type: "text",
+      content: "Example Phrase 1",
+      start: 4,
+      duration: 3,
+      position: {x: 400, y: 350},
+      style: {color: "#ffffff", fontSize: 24},
+      animation: "slideIn",
+      contentKey: "targetPhrase1"
+    },
+    {
+      id: "el-4",
+      type: "text",
+      content: "Example Phrase 2",
+      start: 8,
+      duration: 3,
+      position: {x: 400, y: 450},
+      style: {color: "#ffffff", fontSize: 24},
+      animation: "slideIn",
+      contentKey: "targetPhrase2"
+    },
+    {
+      id: "el-5",
+      type: "audio",
+      content: "narration.mp3",
+      start: 0,
+      duration: 15,
+      contentKey: "audio"
+    },
+  ]);
+  // Initialize local storage and load saved projects
+  useEffect(() => {
+    const loadSavedProjects = () => {
+      try {
+        const projectsJson = localStorage.getItem('videogen-projects');
+        if (projectsJson) {
+          const projects = JSON.parse(projectsJson);
+          setSavedProjects(projects);
+        }
+      } catch (error) {
+        console.error("Error loading saved projects:", error);
+        showNotify("Error loading saved projects", "error");
+      }
+    };
+    loadSavedProjects();
+    // Setup auto-save
+    const autoSaveInterval = setInterval(() => {
+      if (currentTemplate && content.length > 0) {
+        saveCurrentProject(true);
+      }
+    }, 60000); // Auto-save every minute
+    return () => clearInterval(autoSaveInterval);
+  }, []);
+  // Save current project
+  const saveCurrentProject = (isAutoSave = false) => {
+    try {
+      const project = {
+        id: Date.now().toString(),
+        name: projectName,
+        template: currentTemplate,
+        content: content,
+        timelineElements: timelineElements,
+        lastSaved: new Date().toISOString()
+      };
+      let projects = [];
+      const projectsJson = localStorage.getItem('videogen-projects');
+      if (projectsJson) {
+        projects = JSON.parse(projectsJson);
+        // Check if project with same name exists
+        const existingProjectIndex = projects.findIndex(p => p.name === projectName);
+        if (existingProjectIndex >= 0) {
+          projects[existingProjectIndex] = project;
+        } else {
+          projects.push(project);
+        }
+      } else {
+        projects = [project];
+      }
+      localStorage.setItem('videogen-projects', JSON.stringify(projects));
+      setSavedProjects(projects);
+      if (!isAutoSave) {
+        showNotify("Project saved successfully");
+      }
+    } catch (error) {
+      console.error("Error saving project:", error);
+      showNotify("Error saving project", "error");
+    }
+  };
+  // Load a saved project
+  const loadProject = (project) => {
+    setProjectName(project.name);
+    setCurrentTemplate(project.template);
+    setContent(project.content);
+    setTimelineElements(project.timelineElements);
+    setActiveTab("content");
+    setShowLoadProjectDialog(false);
+    showNotify(`Project "${project.name}" loaded successfully`);
+  };
+  // Template selection
+  const selectTemplate = (templateId) => {
+    setCurrentTemplate(templates.find(t => t.id === templateId));
+    showNotify("Template selected: " + templates.find(t => t.id === templateId).name);
+    setActiveTab("content");
+  };
+  // Notification helper
+  const showNotify = (message, type = "success") => {
+    setNotificationMessage(message);
+    setNotificationType(type);
+    setShowNotification(true);
+    setTimeout(() => setShowNotification(false), 3000);
+  };
+  // Add new content row
+  const addContentRow = () => {
+    if (!newRow.targetWord || !newRow.nativeWord) {
+      showNotify("Target and native words are required", "error");
+      return;
+    }
+    setContent([...content, {
+      id: content.length + 1,
+      ...newRow,
+      audio: `audio-${content.length + 1}.mp3` // Placeholder for generated audio
+    }]);
+    setNewRow({
+      image: "",
+      targetWord: "",
+      nativeWord: "",
+      targetPhrase1: "",
+      nativePhrase1: "",
+      targetPhrase2: "",
+      nativePhrase2: ""
+    });
+    showNotify("New content row added");
+  };
+  // Delete content row
+  const deleteContentRow = (id) => {
+    setContent(content.filter(row => row.id !== id));
+    showNotify("Content row deleted");
+  };
+  // Toggle play/pause
+  const togglePlayback = () => {
+    setIsPlaying(!isPlaying);
+  };
+  // Add new element to timeline
+  const addTimelineElement = (type) => {
+    const newElement = {
+      id: `el-${Date.now()}`,
+      type,
+      content: type === 'text' ? 'New Text' : type === 'image' ? 'image.jpg' : 'audio.mp3',
+      start: currentTime,
+      duration: type === 'audio' ? 5 : 3,
+      position: type !== 'audio' ? {x: 400, y: 300} : undefined,
+      style: type === 'text' ? {color: "#ffffff", fontSize: 24} :
+             type === 'image' ? {width: 200, height: 200, borderRadius: "8px"} : undefined,
+      animation: type !== 'audio' ? selectedAnimationStyle : undefined
+    };
+    setTimelineElements([...timelineElements, newElement]);
+    setEditingElement(newElement);
+    setShowEditor(true);
+    showNotify(`New ${type} element added`);
+  };
+  // Animation preview
+  useEffect(() => {
+    let interval;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        setCurrentTime(time => {
+          const newTime = time + 0.1;
+          if (newTime >= duration) {
+            setIsPlaying(false);
+            return 0;
+          }
+          return newTime;
+        });
+        setProgress(prog => {
+          const newProg = prog + (100 / (duration * 10));
+          return newProg > 100 ? 0 : newProg;
+        });
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, duration]);
+  // Handle timeline scrubbing
+  const handleTimelineClick = (e) => {
+    if (!timelineRef.current) return;
+    const rect = timelineRef.current.getBoundingClientRect();
+    const clickPosition = e.clientX - rect.left;
+    const percentClicked = clickPosition / rect.width;
+    const newTime = percentClicked * duration;
+    setCurrentTime(Math.max(0, Math.min(newTime, duration)));
+    setProgress(percentClicked * 100);
+  };
+  // Handle timeline drag
+  const handleTimelineDragStart = () => {
+    setIsDraggingTimeline(true);
+    setIsPlaying(false);
+  };
+  const handleTimelineDragMove = (e) => {
+    if (!isDraggingTimeline || !timelineRef.current) return;
+    const rect = timelineRef.current.getBoundingClientRect();
+    const dragPosition = e.clientX - rect.left;
+    const percentDragged = Math.max(0, Math.min(dragPosition / rect.width, 1));
+    const newTime = percentDragged * duration;
+    setCurrentTime(newTime);
+    setProgress(percentDragged * 100);
+  };
+  const handleTimelineDragEnd = () => {
+    setIsDraggingTimeline(false);
+  };
+  // Effect for handling window mouse events during timeline dragging
+  useEffect(() => {
+    const handleMouseMove = (e) => handleTimelineDragMove(e);
+    const handleMouseUp = () => handleTimelineDragEnd();
+    if (isDraggingTimeline) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDraggingTimeline]);
+  // Generate videos for all content
+  const generateAllVideos = () => {
+    if (!currentTemplate) {
+      showNotify("Please select a template first", "error");
+      return;
+    }
+    if (content.length === 0) {
+      showNotify("No content to generate", "error");
+      return;
+    }
+    // Create render queue
+    const queue = content.map(item => ({
+      id: `render-${item.id}`,
+      content: item,
+      template: currentTemplate,
+      status: "pending",
+      progress: 0
+    }));
+    setRenderQueue(queue);
+    setGeneratingStatus("preparing");
+    // Simulate processing
+    setTimeout(() => {
+      setGeneratingStatus("processing");
+      let currentIndex = 0;
+      const processNext = () => {
+        if (currentIndex >= queue.length) {
+          setGeneratingStatus("complete");
+          showNotify(`Successfully generated ${queue.length} videos`);
+          return;
+        }
+        const updatedQueue = [...queue];
+        updatedQueue[currentIndex].status = "processing";
+        setRenderQueue(updatedQueue);
+        // Simulate processing time (in real app, this would be actual rendering)
+        let progress = 0;
+        const interval = setInterval(() => {
+          progress += 5;
+          const newQueue = [...updatedQueue];
+          newQueue[currentIndex].progress = progress;
+          setRenderQueue(newQueue);
+          if (progress >= 100) {
+            clearInterval(interval);
+            newQueue[currentIndex].status = "complete";
+            setRenderQueue(newQueue);
+            currentIndex++;
+            setTimeout(processNext, 500);
+          }
+        }, 300);
+      };
+      processNext();
+    }, 1500);
+  };
+  // Open element editor
+  const openElementEditor = (element) => {
+    setEditingElement(element);
+    setShowEditor(true);
+  };
+  // Update element
+  const updateElement = (updatedElement) => {
+    setTimelineElements(elements =>
+      elements.map(el => el.id === updatedElement.id ? updatedElement : el)
+    );
+    setShowEditor(false);
+    showNotify("Element updated");
+  };
+  // Handle element drag in preview
+  const startElementDrag = (element) => {
+    setDraggedElement(element);
+  };
+  const handleElementDrag = (e, element) => {
+    if (!previewContainerRef.current) return;
+    const rect = previewContainerRef.current.getBoundingClientRect();
+    const newX = e.clientX - rect.left;
+    const newY = e.clientY - rect.top;
+    setTimelineElements(elements =>
+      elements.map(el => {
+        if (el.id === element.id && el.position) {
+          return {
+            ...el,
+            position: {
+              x: Math.max(0, Math.min(newX, rect.width)),
+              y: Math.max(0, Math.min(newY, rect.height))
+            }
+          };
+        }
+        return el;
+      })
+    );
+  };
+  const endElementDrag = () => {
+    setDraggedElement(null);
+  };
+  // Effect for mouse events during element dragging
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (draggedElement) {
+        handleElementDrag(e, draggedElement);
+      }
+    };
+    const handleMouseUp = () => {
+      if (draggedElement) {
+        endElementDrag();
+      }
+    };
+    if (draggedElement) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [draggedElement]);
+  // Generate audio for content
+  const generateAudio = () => {
+    showNotify("Generating audio for content...");
+    // Simulate audio generation
+    let generatedCount = 0;
+    const processNext = () => {
+      if (generatedCount >= content.length) {
+        showNotify("Audio generation complete!");
+        // Generate mock waveform data
+        generateMockWaveform();
+        return;
+      }
+      setTimeout(() => {
+        generatedCount++;
+        processNext();
+      }, 500);
+    };
+    processNext();
+  };
+  // Generate mock waveform for audio visualization
+  const generateMockWaveform = () => {
+    const waveformPoints = [];
+    const numPoints = 100;
+    for (let i = 0; i < numPoints; i++) {
+      // Create a semi-random waveform height, with more activity in the middle
+      const x = i / numPoints;
+      let height = 0.2 + 0.6 * Math.sin(x * Math.PI) * Math.random();
+      waveformPoints.push(height);
+    }
+    setAudioWaveform(waveformPoints);
+  };
+  // Export current video
+  const exportCurrentVideo = () => {
+    if (currentContentIndex >= content.length) {
+      showNotify("No content selected for export", "error");
+      return;
+    }
+    setIsExporting(true);
+    setExportProgress(0);
+    // Simulate export process
+    const interval = setInterval(() => {
+      setExportProgress(prev => {
+        const next = prev + 5;
+        if (next >= 100) {
+          clearInterval(interval);
+          setTimeout(() => {
+            setIsExporting(false);
+            showNotify(`Video exported successfully as ${projectName}-${currentContentIndex + 1}.${exportFormat}`);
+          }, 500);
+          return 100;
+        }
+        return next;
+      });
+    }, 200);
+  };
+  // Reset progress for new render
+  const startNewProject = () => {
+    setCurrentTemplate(null);
+    setActiveTab("templates");
+    setProjectName("New Project");
+    setContent([]);
+    setRenderQueue([]);
+    setGeneratingStatus(null);
+    setCurrentTime(0);
+    setProgress(0);
+    showNotify("Started new project");
+  };
+  // Define placeholder thumbnails and assets
+  const getImageUrl = (name) => {
+    if (name === "medico.jpg") {
+      return "/api/placeholder/300/300";
+    } else if (name === "abogado.jpg") {
+      return "/api/placeholder/300/300";
+    } else if (name === "template1.jpg" || name === "template2.jpg" || name === "template3.jpg") {
+      return "/api/placeholder/400/220";
+    }
+    return "/api/placeholder/200/200";
+  };
+  // Get real content based on timeline element
+  const getElementContent = (element) => {
+    if (!element.contentKey || currentContentIndex >= content.length) {
+      return element.content;
+    }
+    const contentItem = content[currentContentIndex];
+    return contentItem[element.contentKey] || element.content;
+  };
+  // Timeline rendering
+  const renderTimeline = () => {
+    // Find the time range to display
+    const visibleTimeStart = Math.max(0, currentTime - 5);
+    const visibleTimeEnd = Math.min(duration, currentTime + 10);
+    return (
+      <div className="relative h-24 bg-slate-800 rounded overflow-hidden">
+        {/* Time markers */}
+        <div className="absolute top-0 left-0 right-0 h-6 flex text-xs text-slate-400">
+          {Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
+            <div
+              key={i}
+              className="border-l border-slate-700 h-full flex items-center px-1"
+              style={{
+                position: 'absolute',
+                left: `${(i / duration) * 100}%`,
+                opacity: i % 5 === 0 ? 1 : 0.5
+              }}
+            >
+              {i}s
+            </div>
+          ))}
+        </div>
+        {/* Waveform */}
+        {showWaveform && audioWaveform.length > 0 && (
+          <div className="absolute top-6 left-0 right-0 h-10 px-2">
+            <svg width="100%" height="100%" className="opacity-50">
+              <defs>
+                <linearGradient id="waveformGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stopColor="#4F46E5" />
+                  <stop offset="100%" stopColor="#818CF8" />
+                </linearGradient>
+              </defs>
+              <path
+                d={`M0,${10} ${audioWaveform.map((h, i) => `L${(i / audioWaveform.length) * 100}%,${(1-h) * 10} `).join('')}`}
+                stroke="url(#waveformGradient)"
+                strokeWidth="1.5"
+                fill="none"
+              />
+            </svg>
+          </div>
+        )}
+        {/* Elements timeline */}
+        <div className="absolute top-16 left-0 right-0 bottom-0 px-2">
+          {timelineElements.map(element => (
+            <div
+              key={element.id}
+              className={`absolute h-6 rounded cursor-pointer ${
+                element.type === 'text' ? 'bg-blue-600/70' :
+                element.type === 'image' ? 'bg-green-600/70' :
+                'bg-purple-600/70'
+              } ${currentTime >= element.start && currentTime < element.start + element.duration ? 'ring-2 ring-white' : ''}`}
+              style={{
+                left: `${(element.start / duration) * 100}%`,
+                width: `${(element.duration / duration) * 100}%`,
+                top: element.type === 'audio' ? 'auto' :
+                     element.type === 'text' ? '0px' : '8px',
+                bottom: element.type === 'audio' ? '0px' : 'auto'
+              }}
+              onClick={() => openElementEditor(element)}
+            >
+              <div className="truncate text-xs text-white px-2 py-1">
+                {element.type === 'text' ? getElementContent(element).substring(0, 15) : element.type}
+                {element.type === 'text' && getElementContent(element).length > 15 ? '...' : ''}
+              </div>
+            </div>
+          ))}
+        </div>
+        {/* Current time indicator */}
+        <div className="absolute top-0 bottom-0 w-px bg-red-500 z-10" style={{ left: `${(currentTime / duration) * 100}%` }}>
+          <div className="w-3 h-3 bg-red-500 rounded-full -ml-1.5 -mt-1"></div>
+        </div>
+        {/* Click area */}
+        <div
+          ref={timelineRef}
+          className="absolute inset-0 cursor-pointer"
+          onClick={handleTimelineClick}
+          onMouseDown={handleTimelineDragStart}
+        ></div>
+      </div>
+    );
+  };
+  // Render preview with elements
+  const renderPreview = () => {
+    const currentContent = content[currentContentIndex];
+    const backgroundColor = currentTemplate?.background || "#1a1a2e";
+    return (
+      <div
+        ref={previewContainerRef}
+        className={`aspect-video bg-slate-800 rounded-lg relative overflow-hidden ${fullscreenPreview ? 'fixed inset-0 z-50 rounded-none' : ''}`}
+        style={{ backgroundColor }}
+      >
+        {/* Background elements */}
+        {currentTemplate && (
+          <div className="absolute inset-0 opacity-20">
+            <svg width="100%" height="100%">
+              <defs>
+                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" strokeWidth="0.5" />
+                </pattern>
+              </defs>
+              <rect width="100%" height="100%" fill="url(#grid)" />
+            </svg>
+          </div>
+        )}
+        {/* Display timeline elements */}
+        {timelineElements.map(element => {
+          if (element.type === 'audio') return null; // Don't visually render audio
+          const animationState = getElementAnimationState(element, currentTime);
+          if (animationState === "before") return null;
+          const content = getElementContent(element);
+          const animationPreset = animationPresets[element.animation || "fadeIn"];
+          // Determine animation based on time
+          const animationProgress = Math.min(1, (currentTime - element.start) / 0.5); // 0.5s animation duration
+          const exitProgress = Math.min(1, (currentTime - (element.start + element.duration - 0.5)) / 0.5);
+          const shouldExit = animationState === "after" || exitProgress > 0;
+          const shouldAnimate = animationProgress < 1 && !shouldExit;
+          // Calculate final animation values
+          const opacity = shouldExit ? 1 - exitProgress : shouldAnimate ? animationProgress : 1;
+          // Determine transform based on animation type
+          let transform = '';
+          if (element.animation === 'slideIn') {
+            const xOffset = shouldExit ? (exitProgress * 100) : shouldAnimate ? ((1 - animationProgress) * -100) : 0;
+            transform = `translateX(${xOffset}px)`;
+          } else if (element.animation === 'zoomIn') {
+            const scale = shouldExit ? (1 - exitProgress * 0.5) : shouldAnimate ? animationProgress : 1;
+            transform = `scale(${scale})`;
+          } else if (element.animation === 'bounceIn') {
+            const scale = shouldExit ? (1 - exitProgress * 0.5) : shouldAnimate ? (animationProgress < 0.5 ? 2 * animationProgress : 1 + (1 - animationProgress)) : 1;
+            transform = `scale(${scale})`;
+          } else if (element.animation === 'flipIn') {
+            const rotateY = shouldExit ? (exitProgress * 90) : shouldAnimate ? ((1 - animationProgress) * 90) : 0;
+            transform = `perspective(800px) rotateY(${rotateY}deg)`;
+          }
+          return (
+            <div
+              key={element.id}
+              className="absolute p-1"
+              style={{
+                left: element.position?.x || 0,
+                top: element.position?.y || 0,
+                opacity,
+                transform,
+                transition: 'opacity 0.1s, transform 0.1s',
+                cursor: activeTab === 'editor' ? 'move' : 'default',
+                transformOrigin: 'center'
+              }}
+              onMouseDown={activeTab === 'editor' ? () => startElementDrag(element) : undefined}
+            >
+              {element.type === 'text' ? (
+                <div
+                  style={{
+                    color: element.style?.color || 'white',
+                    fontSize: `${element.style?.fontSize || 24}px`,
+                    fontWeight: element.style?.fontWeight || 'normal',
+                    fontFamily: element.style?.fontFamily || 'Inter, sans-serif',
+                    textShadow: '0 1px 3px rgba(0,0,0,0.5)'
+                  }}
+                >
+                  {content}
+                </div>
+              ) : element.type === 'image' ? (
+                <img
+                  src={getImageUrl(content)}
+                  alt={content}
+                  style={{
+                    width: `${element.style?.width || 200}px`,
+                    height: `${element.style?.height || 200}px`,
+                    borderRadius: element.style?.borderRadius || '0px',
+                    objectFit: 'cover',
+                    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
+                  }}
+                />
+              ) : null}
+            </div>
+          );
+        })}
+        {/* Playback controls */}
+        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 bg-black/70 rounded-full p-2 backdrop-blur-sm">
+          <Button variant="ghost" size="icon" className="text-white" onClick={() => setCurrentTime(Math.max(0, currentTime - 1))}>
+            <SkipBack className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="text-white" onClick={togglePlayback}>
+            {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
+          </Button>
+          <Button variant="ghost" size="icon" className="text-white" onClick={() => setCurrentTime(Math.min(duration, currentTime + 1))}>
+            <SkipForward className="h-4 w-4" />
+          </Button>
+        </div>
+        {/* Additional controls */}
+        <div className="absolute top-2 right-2 flex space-x-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-white/70 hover:text-white bg-black/20 hover:bg-black/40"
+            onClick={() => setShowWaveform(!showWaveform)}
+          >
+            {showWaveform ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-white/70 hover:text-white bg-black/20 hover:bg-black/40"
+            onClick={() => setFullscreenPreview(!fullscreenPreview)}
+          >
+            {fullscreenPreview ? <Minimize className="h-4 w-4" /> : <Maximize className="h-4 w-4" />}
+          </Button>
+        </div>
+        {/* Export progress overlay */}
+        {isExporting && (
+          <div className="absolute inset-0 bg-black/80 flex flex-col items-center justify-center">
+            <div className="w-64 mb-4">
+              <Progress value={exportProgress} className="h-2" />
+            </div>
+            <div className="text-white font-medium">Exporting video... {exportProgress}%</div>
+          </div>
+        )}
+        {/* Timeline progress */}
+        <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-700 z-10">
+          <div
+            className="h-full bg-blue-500 transition-all"
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+      </div>
+    );
+  };
+  return (
+    <div className="flex flex-col h-screen bg-slate-50 overflow-hidden">
+      {/* Header */}
+      <header className="border-b bg-white shadow-sm">
+        <div className="container mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <FileVideo className="h-6 w-6 text-blue-600" />
+            <h1 className="text-xl font-bold tracking-tight">VideoGen Pro</h1>
+          </div>
+          <div className="flex space-x-2">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Input
+                    className="w-60"
+                    value={projectName}
+                    onChange={(e) => setProjectName(e.target.value)}
+                  />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Project Name</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <FileText className="h-4 w-4 mr-1" /> Project
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem onClick={startNewProject}>
+                  <FileText className="h-4 w-4 mr-2" />
+                  New Project
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setShowLoadProjectDialog(true)}>
+                  <Upload className="h-4 w-4 mr-2" />
+                  Load Project
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => saveCurrentProject()}>
+                  <Save className="h-4 w-4 mr-2" />
+                  Save Project
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button size="sm" onClick={() => exportCurrentVideo()}>
+              <Download className="h-4 w-4 mr-1" /> Export
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                  <Settings className="h-5 w-5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Settings</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => setPreviewQuality("low")}>
+                  <div className="flex items-center">
+                    <span className="mr-2">Low Quality Preview</span>
+                    {previewQuality === "low" && <Check className="h-4 w-4" />}
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setPreviewQuality("medium")}>
+                  <div className="flex items-center">
+                    <span className="mr-2">Medium Quality Preview</span>
+                    {previewQuality === "medium" && <Check className="h-4 w-4" />}
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setPreviewQuality("high")}>
+                  <div className="flex items-center">
+                    <span className="mr-2">High Quality Preview</span>
+                    {previewQuality === "high" && <Check className="h-4 w-4" />}
+                  </div>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Project Settings</DropdownMenuItem>
+                <DropdownMenuItem>Export Settings</DropdownMenuItem>
+                <DropdownMenuItem>User Preferences</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </header>
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left Sidebar */}
+        <div className="w-56 border-r bg-white">
+          <div className="p-4">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid grid-cols-2 mb-4">
+                <TabsTrigger value="templates">Templates</TabsTrigger>
+                <TabsTrigger value="content">Content</TabsTrigger>
+              </TabsList>
+            </Tabs>
+            <div className="space-y-2">
+              <Button
+                variant={activeTab === "templates" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("templates")}
+              >
+                <Layers className="h-4 w-4 mr-2" />
+                Templates
+              </Button>
+              <Button
+                variant={activeTab === "content" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("content")}
+              >
+                <FileText className="h-4 w-4 mr-2" />
+                Content
+              </Button>
+              <Button
+                variant={activeTab === "editor" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("editor")}
+              >
+                <Edit3 className="h-4 w-4 mr-2" />
+                Editor
+              </Button>
+              <Button
+                variant={activeTab === "generate" ? "default" : "outline"}
+                className="w-full justify-start"
+                onClick={() => setActiveTab("generate")}
+              >
+                <Zap className="h-4 w-4 mr-2" />
+                Generate
+              </Button>
+            </div>
+            {activeTab === "editor" && (
+              <div className="mt-6 space-y-2 border-t pt-4">
+                <h3 className="text-sm font-medium text-slate-500">Add Elements</h3>
+                <div className="grid grid-cols-3 gap-2">
+                  <Button variant="outline" size="sm" className="w-full p-1" onClick={() => addTimelineElement("text")}>
+                    <FileText className="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="w-full p-1" onClick={() => addTimelineElement("image")}>
+                    <Image className="h-4 w-4" />
+                  </Button>
+                  <Button variant="outline" size="sm" className="w-full p-1" onClick={() => addTimelineElement("audio")}>
+                    <Volume2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <h3 className="text-sm font-medium text-slate-500 mt-4">Animation Style</h3>
+                <Select value={selectedAnimationStyle} onValueChange={setSelectedAnimationStyle}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Animation Style" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fadeIn">Fade In</SelectItem>
+                    <SelectItem value="slideIn">Slide In</SelectItem>
+                    <SelectItem value="zoomIn">Zoom In</SelectItem>
+                    <SelectItem value="bounceIn">Bounce In</SelectItem>
+                    <SelectItem value="flipIn">Flip In</SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="flex items-center justify-between mt-4">
+                  <Label htmlFor="audio-sync" className="text-sm">
+                    Auto-sync to Audio
+                  </Label>
+                  <Switch
+                    id="audio-sync"
+                    checked={audioSyncEnabled}
+                    onCheckedChange={setAudioSyncEnabled}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        {/* Main Panel */}
+        <div className="flex-1 overflow-auto">
+          <div className="container mx-auto p-6">
+            {activeTab === "templates" && (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-2xl font-bold">Video Templates</h2>
+                  <Button size="sm">
+                    <Plus className="h-4 w-4 mr-1" /> Import Template
+                  </Button>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {templates.map(template => (
+                    <Card key={template.id} className={`overflow-hidden transition-all ${currentTemplate?.id === template.id ? 'ring-2 ring-blue-500' : ''}`}>
+                      <div className="aspect-video bg-slate-100 relative overflow-hidden">
+                        <img
+                          src={getImageUrl(template.thumbnail)}
+                          alt={template.name}
+                          className="w-full h-full object-cover"
+                        />
+                        <div
+                          className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4"
+                        >
+                          <h3 className="text-lg font-medium text-white">{template.name}</h3>
+                          <p className="text-sm text-white/80">{template.description}</p>
+                        </div>
+                        <Badge className="absolute top-2 right-2">
+                          {template.duration}s
+                        </Badge>
+                      </div>
+                      <CardFooter className="bg-white p-3">
+                        <Button
+                          className="w-full"
+                          onClick={() => selectTemplate(template.id)}
+                        >
+                          {currentTemplate?.id === template.id ? (
+                            <>
+                              <CheckCircle className="h-4 w-4 mr-1" />
+                              Selected
+                            </>
+                          ) : "Select Template"}
+                        </Button>
+                      </CardFooter>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+            {activeTab === "content" && (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-2xl font-bold">Content</h2>
+                  <div className="flex space-x-2">
+                    <Select value={targetLanguage} onValueChange={setTargetLanguage}>
+                      <SelectTrigger className="w-40">
+                        <SelectValue placeholder="Target Language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="es-ES">Español</SelectItem>
+                        <SelectItem value="fr-FR">Français</SelectItem>
+                        <SelectItem value="de-DE">Deutsch</SelectItem>
+                        <SelectItem value="it-IT">Italiano</SelectItem>
+                        <SelectItem value="pt-PT">Português</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Select value={nativeLanguage} onValueChange={setNativeLanguage}>
+                      <SelectTrigger className="w-40">
+                        <SelectValue placeholder="Native Language" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="en-US">English</SelectItem>
+                        <SelectItem value="es-ES">Español</SelectItem>
+                        <SelectItem value="fr-FR">Français</SelectItem>
+                        <SelectItem value="de-DE">Deutsch</SelectItem>
+                        <SelectItem value="it-IT">Italiano</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <div className="bg-white rounded-md shadow overflow-hidden">
+                  <div className="border-b px-4 py-2 bg-slate-50 grid grid-cols-9 gap-4 font-medium text-sm">
+                    <div className="col-span-1">Image</div>
+                    <div className="col-span-1">Target Word</div>
+                    <div className="col-span-1">Native Word</div>
+                    <div className="col-span-2">Target Phrase 1</div>
+                    <div className="col-span-2">Native Phrase 1</div>
+                    <div className="col-span-1">Target Phrase 2</div>
+                    <div className="col-span-1">Actions</div>
+                  </div>
+                  {content.map(row => (
+                    <div key={row.id} className="px-4 py-3 border-b grid grid-cols-9 gap-4 items-center">
+                      <div className="col-span-1">
+                        <div className="w-10 h-10 bg-slate-100 rounded overflow-hidden">
+                          <img
+                            src={getImageUrl(row.image)}
+                            alt={row.targetWord}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      </div>
+                      <div className="col-span-1">{row.targetWord}</div>
+                      <div className="col-span-1">{row.nativeWord}</div>
+                      <div className="col-span-2">{row.targetPhrase1}</div>
+                      <div className="col-span-2">{row.nativePhrase1}</div>
+                      <div className="col-span-1">{row.targetPhrase2}</div>
+                      <div className="col-span-1 flex space-x-1">
+                        <Button variant="ghost" size="icon" onClick={() => setCurrentContentIndex(content.indexOf(row))}>
+                          <Eye className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon" onClick={() => deleteContentRow(row.id)}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                  <div className="px-4 py-3 grid grid-cols-9 gap-4 items-center bg-slate-50">
+                    <div className="col-span-1">
+                      <Button variant="outline" size="sm" className="w-10 h-10 p-0">
+                        <Upload className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <div className="col-span-1">
+                      <Input
+                        placeholder="Word"
+                        value={newRow.targetWord}
+                        onChange={(e) => setNewRow({...newRow, targetWord: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <Input
+                        placeholder="Word"
+                        value={newRow.nativeWord}
+                        onChange={(e) => setNewRow({...newRow, nativeWord: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Input
+                        placeholder="Phrase"
+                        value={newRow.targetPhrase1}
+                        onChange={(e) => setNewRow({...newRow, targetPhrase1: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Input
+                        placeholder="Phrase"
+                        value={newRow.nativePhrase1}
+                        onChange={(e) => setNewRow({...newRow, nativePhrase1: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <Input
+                        placeholder="Phrase"
+                        value={newRow.targetPhrase2}
+                        onChange={(e) => setNewRow({...newRow, targetPhrase2: e.target.value})}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <Button onClick={addContentRow}>
+                        <Plus className="h-4 w-4 mr-1" /> Add
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-between">
+                  <Button variant="outline" onClick={generateAudio}>
+                    <Volume2 className="h-4 w-4 mr-1" /> Generate Audio
+                  </Button>
+                  <Button onClick={() => setActiveTab("editor")}>
+                    Continue to Editor <ChevronDown className="h-4 w-4 ml-1 rotate-270" />
+                  </Button>
+                </div>
+              </div>
+            )}
+            {(activeTab === "editor" || activeTab === "generate") && (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-2xl font-bold">
+                    {activeTab === "editor" ? "Template Editor" : "Generate Videos"}
+                  </h2>
+                  {activeTab === "generate" && (
+                    <div className="flex space-x-2">
+                      <Select value={exportResolution} onValueChange={setExportResolution}>
+                        <SelectTrigger className="w-32">
+                          <SelectValue placeholder="Resolution" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="720p">720p</SelectItem>
+                          <SelectItem value="1080p">1080p</SelectItem>
+                          <SelectItem value="4k">4K</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Select value={exportFormat} onValueChange={setExportFormat}>
+                        <SelectTrigger className="w-32">
+                          <SelectValue placeholder="Format" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="mp4">MP4 (H.264)</SelectItem>
+                          <SelectItem value="webm">WebM</SelectItem>
+                          <SelectItem value="gif">GIF</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                </div>
+                {/* Preview and Timeline Area */}
+                <div className="space-y-4">
+                  {/* Preview Area */}
+                  {renderPreview()}
+                  {/* Timeline */}
+                  {renderTimeline()}
+                  <div className="flex justify-between">
+                    <div className="flex space-x-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentContentIndex(prev => (prev > 0 ? prev - 1 : 0))}
+                        disabled={currentContentIndex <= 0}
+                      >
+                        <ArrowLeft className="h-4 w-4 mr-1" />
+                        Previous
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentContentIndex(prev => (prev < content.length - 1 ? prev + 1 : prev))}
+                        disabled={currentContentIndex >= content.length - 1}
+                      >
+                        Next
+                        <ArrowRight className="h-4 w-4 ml-1" />
+                      </Button>
+                      <div className="bg-slate-100 rounded px-2 py-1 text-sm flex items-center">
+                        Item {currentContentIndex + 1} of {content.length}
+                      </div>
+                    </div>
+                    {activeTab === "editor" && (
+                      <Button onClick={() => setActiveTab("generate")}>
+                        Continue to Generate <ChevronDown className="h-4 w-4 ml-1 rotate-270" />
+                      </Button>
+                    )}
+                    {activeTab === "generate" && (
+                      <Button onClick={generateAllVideos} disabled={generatingStatus === "processing" || generatingStatus === "preparing"}>
+                        {generatingStatus === "complete" ?
+                          <><RefreshCw className="h-4 w-4 mr-1" /> Generate More</> :
+                          generatingStatus === "processing" || generatingStatus === "preparing" ?
+                            <><RefreshCw className="h-4 w-4 mr-1 animate-spin" /> Processing...</> :
+                            <><Zap className="h-4 w-4 mr-1" /> Generate All Videos</>}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+                {activeTab === "generate" && (
+                  <div className="mt-6">
+                    <Alert variant={generatingStatus === "complete" ? "success" : "default"}>
+                      <CheckCircle className="h-4 w-4" />
+                      <AlertTitle>
+                        {generatingStatus === "complete" ?
+                          "Generation Complete!" :
+                          generatingStatus === "processing" ?
+                            "Processing Videos..." :
+                            generatingStatus === "preparing" ?
+                              "Preparing..." :
+                              "Ready to Generate"}
+                      </AlertTitle>
+                      <AlertDescription>
+                        {generatingStatus === "complete" ?
+                          `Successfully generated ${renderQueue.length} videos.` :
+                          generatingStatus === "processing" ?
+                            `Processing ${renderQueue.filter(item => item.status === "complete").length} of ${renderQueue.length} videos...` :
+                            generatingStatus === "preparing" ?
+                              "Setting up render queue..." :
+                              "Click the button below to generate videos for all content."}
+                      </AlertDescription>
+                    </Alert>
+                    <Card className="mt-4">
+                      <CardHeader>
+                        <CardTitle>Generation Queue</CardTitle>
+                        <CardDescription>
+                          {content.length} videos to generate using {currentTemplate?.name || "selected template"}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-4">
+                        {renderQueue.length > 0 ? (
+                          renderQueue.map(item => (
+                            <div key={item.id} className="flex items-center space-x-4">
+                              <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
+                                {item.status === "complete" ?
+                                  <Check className="h-4 w-4 text-green-500" /> :
+                                  item.status === "processing" ?
+                                    <RefreshCw className="h-4 w-4 text-blue-500 animate-spin" /> :
+                                    <Clock className="h-4 w-4 text-slate-400" />}
+                              </div>
+                              <div className="flex-1">
+                                <div className="font-medium">{item.content.targetWord} - {item.content.nativeWord}</div>
+                                <Progress
+                                  value={item.progress}
+                                  className="h-2 mt-1"
+                                />
+                              </div>
+                              <div className="text-sm text-slate-500">
+                                {item.status === "complete" ?
+                                  "Complete" :
+                                  item.status === "processing" ?
+                                    `${item.progress}%` :
+                                    "Pending"}
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                disabled={item.status !== "complete"}
+                              >
+                                <Download className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-center py-8 text-slate-500">
+                            <Grid className="h-8 w-8 mx-auto mb-2" />
+                            <p>No videos in queue yet</p>
+                            <p className="text-sm">Click the "Generate All Videos" button to start generation</p>
+                          </div>
+                        )}
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <div>
+                          <div className="flex items-center space-x-2">
+                            <Checkbox id="audio-checkbox" checked />
+                            <Label htmlFor="audio-checkbox">Include audio</Label>
+                          </div>
+                        </div>
+                      </CardFooter>
+                    </Card>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Element Editor Dialog */}
+      <Dialog open={showEditor} onOpenChange={setShowEditor}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Edit Element</DialogTitle>
+            <DialogDescription>
+              Adjust properties for this timeline element
+            </DialogDescription>
+          </DialogHeader>
+          {editingElement && (
+            <div className="space-y-4 pt-2">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label>Start Time (seconds)</Label>
+                  <Input
+                    type="number"
+                    min="0"
+                    step="0.1"
+                    value={editingElement.start}
+                    onChange={(e) => setEditingElement({...editingElement, start: parseFloat(e.target.value)})}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Duration (seconds)</Label>
+                  <Input
+                    type="number"
+                    min="0.1"
+                    step="0.1"
+                    value={editingElement.duration}
+                    onChange={(e) => setEditingElement({...editingElement, duration: parseFloat(e.target.value)})}
+                  />
+                </div>
+              </div>
+              {editingElement.type === "text" && (
+                <>
+                  <div className="space-y-2">
+                    <Label>Text Content</Label>
+                    <Textarea
+                      value={editingElement.content}
+                      onChange={(e) => setEditingElement({...editingElement, content: e.target.value})}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Font Size</Label>
+                      <Input
+                        type="number"
+                        value={editingElement.style?.fontSize || 24}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, fontSize: parseInt(e.target.value)}
+                        })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Text Color</Label>
+                      <Input
+                        type="color"
+                        value={editingElement.style?.color || "#ffffff"}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, color: e.target.value}
+                        })}
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Content Link</Label>
+                    <Select
+                      value={editingElement.contentKey || "none"}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        contentKey: val === "none" ? undefined : val
+                      })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Link to content field" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No link (use fixed text)</SelectItem>
+                        <SelectItem value="targetWord">Target Word</SelectItem>
+                        <SelectItem value="nativeWord">Native Word</SelectItem>
+                        <SelectItem value="targetPhrase1">Target Phrase 1</SelectItem>
+                        <SelectItem value="nativePhrase1">Native Phrase 1</SelectItem>
+                        <SelectItem value="targetPhrase2">Target Phrase 2</SelectItem>
+                        <SelectItem value="nativePhrase2">Native Phrase 2</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Animation</Label>
+                    <Select
+                      value={editingElement.animation || "fadeIn"}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        animation: val
+                      })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose animation" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="fadeIn">Fade In</SelectItem>
+                        <SelectItem value="slideIn">Slide In</SelectItem>
+                        <SelectItem value="zoomIn">Zoom In</SelectItem>
+                        <SelectItem value="bounceIn">Bounce In</SelectItem>
+                        <SelectItem value="flipIn">Flip In</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+              {editingElement.type === "image" && (
+                <>
+                  <div className="space-y-2">
+                    <Label>Image Source</Label>
+                    <div className="flex space-x-2">
+                      <Input
+                        value={editingElement.content}
+                        onChange={(e) => setEditingElement({...editingElement, content: e.target.value})}
+                      />
+                      <Button variant="outline" size="icon">
+                        <Upload className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label>Width (px)</Label>
+                      <Input
+                        type="number"
+                        value={editingElement.style?.width || 200}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, width: parseInt(e.target.value)}
+                        })}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label>Height (px)</Label>
+                      <Input
+                        type="number"
+                        value={editingElement.style?.height || 200}
+                        onChange={(e) => setEditingElement({
+                          ...editingElement,
+                          style: {...editingElement.style, height: parseInt(e.target.value)}
+                        })}
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Border Radius (px)</Label>
+                    <Slider
+                      value={[parseInt(editingElement.style?.borderRadius) || 0]}
+                      max={50}
+                      step={1}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        style: {...editingElement.style, borderRadius: `${val[0]}px`}
+                      })}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Content Link</Label>
+                    <Select
+                      value={editingElement.contentKey || "none"}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        contentKey: val === "none" ? undefined : val
+                      })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Link to content field" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No link (use fixed image)</SelectItem>
+                        <SelectItem value="image">Content Image</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Animation</Label>
+                    <Select
+                      value={editingElement.animation || "fadeIn"}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        animation: val
+                      })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Choose animation" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="fadeIn">Fade In</SelectItem>
+                        <SelectItem value="slideIn">Slide In</SelectItem>
+                        <SelectItem value="zoomIn">Zoom In</SelectItem>
+                        <SelectItem value="bounceIn">Bounce In</SelectItem>
+                        <SelectItem value="flipIn">Flip In</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+              {editingElement.type === "audio" && (
+                <>
+                  <div className="space-y-2">
+                    <Label>Audio Source</Label>
+                    <div className="flex space-x-2">
+                      <Input
+                        value={editingElement.content}
+                        onChange={(e) => setEditingElement({...editingElement, content: e.target.value})}
+                      />
+                      <Button variant="outline" size="icon">
+                        <Upload className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label>Content Link</Label>
+                    <Select
+                      value={editingElement.contentKey || "none"}
+                      onValueChange={(val) => setEditingElement({
+                        ...editingElement,
+                        contentKey: val === "none" ? undefined : val
+                      })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Link to content field" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No link (use fixed audio)</SelectItem>
+                        <SelectItem value="audio">Content Audio</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
+              <Alert className="bg-blue-50 border-blue-200">
+                <AlertTriangle className="h-4 w-4 text-blue-500" />
+                <AlertDescription className="text-blue-700 text-sm">
+                  {audioSyncEnabled ?
+                    "Audio synchronization is enabled. Element timing will adapt based on audio duration." :
+                    "Audio synchronization is disabled. Element timing will use fixed values."}
+                </AlertDescription>
+              </Alert>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowEditor(false)}>Cancel</Button>
+            <Button onClick={() => updateElement(editingElement)}>Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {/* Load Project Dialog */}
+      <Dialog open={showLoadProjectDialog} onOpenChange={setShowLoadProjectDialog}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>Load Project</DialogTitle>
+            <DialogDescription>
+              Select a project to load
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 pt-2">
+            {savedProjects.length > 0 ? (
+              <div className="space-y-2">
+                {savedProjects.map(project => (
+                  <div
+                    key={project.id}
+                    className="flex items-center justify-between p-3 border rounded-md hover:bg-gray-50 cursor-pointer"
+                    onClick={() => loadProject(project)}
+                  >
+                    <div>
+                      <h3 className="font-medium">{project.name}</h3>
+                      <p className="text-sm text-gray-500">
+                        Last saved: {new Date(project.lastSaved).toLocaleString()}
+                      </p>
+                    </div>
+                    <Button variant="ghost" size="sm">
+                      <Upload className="h-4 w-4 mr-1" />
+                      Load
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-slate-500">
+                <FileText className="h-8 w-8 mx-auto mb-2" />
+                <p>No saved projects found</p>
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowLoadProjectDialog(false)}>Cancel</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {/* Notification Toast */}
+      <div className={`fixed bottom-4 right-4 ${notificationType === 'error' ? 'bg-red-600' : 'bg-slate-800'} text-white px-4 py-2 rounded-md shadow-lg transition-opacity duration-300 flex items-center ${showNotification ? 'opacity-100' : 'opacity-0'}`}>
+        {notificationType === 'error' ? (
+          <AlertTriangle className="h-4 w-4 mr-2 text-white" />
+        ) : (
+          <Check className="h-4 w-4 mr-2 text-green-400" />
+        )}
+        {notificationMessage}
+      </div>
+    </div>
+  );
+};
+export default VideoGeneratorApp;

react/enhanced-videogen-pro.tsx ADDED Viewed

	@@ -0,0 +1,916 @@

+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Play, Pause, Plus, Trash2, ChevronRight, ChevronLeft,
+  Save, Download, Settings, Clock, Volume2, Edit3, Copy,
+  Scissors, Music, Image, FileText, RotateCcw, RotateCw,
+  CheckCircle, UploadCloud, Maximize, Layers, ZoomIn, ZoomOut
+} from 'lucide-react';
+// Shadcn UI components
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Progress } from '@/components/ui/progress';
+import { Badge } from '@/components/ui/badge';
+const VideoEditor = () => {
+  // Editor state
+  const [projectName, setProjectName] = useState("My Video Project");
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(60); // Total duration in seconds
+  const [zoom, setZoom] = useState(1);
+  const [selectedSceneIndex, setSelectedSceneIndex] = useState(0);
+  const [showSceneEditor, setShowSceneEditor] = useState(false);
+  const [notification, setNotification] = useState(null);
+  const [showExportDialog, setShowExportDialog] = useState(false);
+  const [exportProgress, setExportProgress] = useState(0);
+  const [isExporting, setIsExporting] = useState(false);
+  // References
+  const timelineRef = useRef(null);
+  const previewRef = useRef(null);
+  // Scenes data structure
+  const [scenes, setScenes] = useState([
+    {
+      id: "scene-1",
+      name: "Introduction",
+      duration: 5,
+      background: "linear-gradient(120deg, #1e3c72, #2a5298)",
+      type: "title",
+      content: {
+        title: "Learning Spanish",
+        subtitle: "Basic Vocabulary"
+      }
+    },
+    {
+      id: "scene-2",
+      name: "Word 1",
+      duration: 8,
+      background: "linear-gradient(120deg, #2a5298, #4776E6)",
+      type: "word",
+      content: {
+        word: "médico",
+        translation: "doctor",
+        example: "Quiero ser médico"
+      }
+    },
+    {
+      id: "scene-3",
+      name: "Word 2",
+      duration: 8,
+      background: "linear-gradient(120deg, #4776E6, #8E54E9)",
+      type: "word",
+      content: {
+        word: "abogado",
+        translation: "lawyer",
+        example: "Necesito un abogado"
+      }
+    },
+    {
+      id: "scene-4",
+      name: "Conclusion",
+      duration: 5,
+      background: "linear-gradient(120deg, #8E54E9, #1e3c72)",
+      type: "title",
+      content: {
+        title: "Keep Practicing!",
+        subtitle: "Learn a new word every day"
+      }
+    }
+  ]);
+  // Scene templates
+  const sceneTemplates = [
+    {
+      id: "template-title",
+      name: "Title Scene",
+      type: "title",
+      thumbnail: "linear-gradient(120deg, #1e3c72, #2a5298)",
+      duration: 5
+    },
+    {
+      id: "template-word",
+      name: "Vocabulary Word",
+      type: "word",
+      thumbnail: "linear-gradient(120deg, #4776E6, #8E54E9)",
+      duration: 8
+    },
+    {
+      id: "template-split",
+      name: "Split Screen",
+      type: "split",
+      thumbnail: "linear-gradient(120deg, #11998e, #38ef7d)",
+      duration: 6
+    },
+    {
+      id: "template-blank",
+      name: "Blank Scene",
+      type: "blank",
+      thumbnail: "linear-gradient(120deg, #333, #666)",
+      duration: 5
+    }
+  ];
+  // Get current scene
+  const currentScene = scenes[selectedSceneIndex] || scenes[0];
+  // Update the total duration when scenes change
+  useEffect(() => {
+    const total = scenes.reduce((sum, scene) => sum + scene.duration, 0);
+    setDuration(total);
+  }, [scenes]);
+  // When scene selection changes, update current time
+  useEffect(() => {
+    if (selectedSceneIndex >= 0 && selectedSceneIndex < scenes.length) {
+      let startTime = 0;
+      for (let i = 0; i < selectedSceneIndex; i++) {
+        startTime += scenes[i].duration;
+      }
+      setCurrentTime(startTime);
+    }
+  }, [selectedSceneIndex]);
+  // Animation playback
+  useEffect(() => {
+    let interval;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        setCurrentTime(time => {
+          const newTime = time + 0.1;
+          if (newTime >= duration) {
+            setIsPlaying(false);
+            return 0;
+          }
+          // Update selected scene based on current time
+          let timeSum = 0;
+          for (let i = 0; i < scenes.length; i++) {
+            timeSum += scenes[i].duration;
+            if (newTime < timeSum) {
+              if (selectedSceneIndex !== i) {
+                setSelectedSceneIndex(i);
+              }
+              break;
+            }
+          }
+          return newTime;
+        });
+      }, 100);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, duration, scenes, selectedSceneIndex]);
+  // Handle timeline scrubbing
+  const handleTimelineClick = (e) => {
+    if (!timelineRef.current) return;
+    const rect = timelineRef.current.getBoundingClientRect();
+    const clickPosition = e.clientX - rect.left;
+    const percentClicked = clickPosition / rect.width;
+    const newTime = percentClicked * duration;
+    setCurrentTime(Math.max(0, Math.min(newTime, duration)));
+    // Update selected scene
+    let timeSum = 0;
+    for (let i = 0; i < scenes.length; i++) {
+      timeSum += scenes[i].duration;
+      if (newTime < timeSum) {
+        setSelectedSceneIndex(i);
+        break;
+      }
+    }
+  };
+  // Add a new scene
+  const addScene = (templateId) => {
+    const template = sceneTemplates.find(t => t.id === templateId);
+    if (!template) return;
+    const newScene = {
+      id: `scene-${Date.now()}`,
+      name: `New ${template.name}`,
+      duration: template.duration,
+      background: template.thumbnail,
+      type: template.type,
+      content: template.type === 'title'
+        ? { title: "New Title", subtitle: "Add a subtitle" }
+        : template.type === 'word'
+        ? { word: "palabra", translation: "word", example: "Una palabra nueva" }
+        : template.type === 'split'
+        ? { leftText: "Left side", rightText: "Right side" }
+        : {}
+    };
+    // Insert after currently selected scene
+    const newScenes = [...scenes];
+    newScenes.splice(selectedSceneIndex + 1, 0, newScene);
+    setScenes(newScenes);
+    setSelectedSceneIndex(selectedSceneIndex + 1);
+    showNotification("Scene added");
+  };
+  // Delete scene
+  const deleteScene = (index) => {
+    if (scenes.length <= 1) {
+      showNotification("Cannot delete the only scene", "error");
+      return;
+    }
+    const newScenes = [...scenes];
+    newScenes.splice(index, 1);
+    setScenes(newScenes);
+    if (selectedSceneIndex >= newScenes.length) {
+      setSelectedSceneIndex(newScenes.length - 1);
+    }
+    showNotification("Scene deleted");
+  };
+  // Duplicate scene
+  const duplicateScene = (index) => {
+    const sceneToClone = scenes[index];
+    const clonedScene = {
+      ...sceneToClone,
+      id: `scene-${Date.now()}`,
+      name: `${sceneToClone.name} (Copy)`
+    };
+    const newScenes = [...scenes];
+    newScenes.splice(index + 1, 0, clonedScene);
+    setScenes(newScenes);
+    setSelectedSceneIndex(index + 1);
+    showNotification("Scene duplicated");
+  };
+  // Update scene
+  const updateScene = (sceneData) => {
+    const newScenes = [...scenes];
+    newScenes[selectedSceneIndex] = {
+      ...newScenes[selectedSceneIndex],
+      ...sceneData
+    };
+    setScenes(newScenes);
+    setShowSceneEditor(false);
+    showNotification("Scene updated");
+  };
+  // Show notification
+  const showNotification = (message, type = "success") => {
+    setNotification({ message, type });
+    setTimeout(() => setNotification(null), 3000);
+  };
+  // Export video
+  const exportVideo = (settings) => {
+    setIsExporting(true);
+    setExportProgress(0);
+    // Simulate export process
+    const interval = setInterval(() => {
+      setExportProgress(prev => {
+        const newValue = prev + 5;
+        if (newValue >= 100) {
+          clearInterval(interval);
+          setTimeout(() => {
+            setIsExporting(false);
+            setShowExportDialog(false);
+            showNotification("Video exported successfully!");
+          }, 500);
+          return 100;
+        }
+        return newValue;
+      });
+    }, 200);
+  };
+  // Get time at scene start
+  const getSceneStartTime = (index) => {
+    let startTime = 0;
+    for (let i = 0; i < index; i++) {
+      startTime += scenes[i].duration;
+    }
+    return startTime;
+  };
+  // Format time as MM:SS
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+  // Jump to previous scene
+  const goToPreviousScene = () => {
+    if (selectedSceneIndex > 0) {
+      setSelectedSceneIndex(selectedSceneIndex - 1);
+    }
+  };
+  // Jump to next scene
+  const goToNextScene = () => {
+    if (selectedSceneIndex < scenes.length - 1) {
+      setSelectedSceneIndex(selectedSceneIndex + 1);
+    }
+  };
+  // Render scene preview based on type
+  const renderScenePreview = (scene) => {
+    switch (scene.type) {
+      case 'title':
+        return (
+          <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
+            <h1 className="text-4xl font-bold mb-4 text-center">{scene.content.title}</h1>
+            <h2 className="text-xl text-center">{scene.content.subtitle}</h2>
+          </div>
+        );
+      case 'word':
+        return (
+          <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
+            <h2 className="text-xl mb-1">New Word</h2>
+            <h1 className="text-5xl font-bold mb-2">{scene.content.word}</h1>
+            <p className="text-2xl mb-6 opacity-80">{scene.content.translation}</p>
+            <div className="bg-white/20 p-4 rounded-lg text-xl">
+              "{scene.content.example}"
+            </div>
+          </div>
+        );
+      case 'split':
+        return (
+          <div className="absolute inset-0 flex text-white">
+            <div className="w-1/2 border-r border-white/20 flex items-center justify-center p-6">
+              <p className="text-2xl text-center">{scene.content.leftText}</p>
+            </div>
+            <div className="w-1/2 flex items-center justify-center p-6">
+              <p className="text-2xl text-center">{scene.content.rightText}</p>
+            </div>
+          </div>
+        );
+      default:
+        return (
+          <div className="absolute inset-0 flex items-center justify-center text-white">
+            <p className="text-xl">Empty Scene</p>
+          </div>
+        );
+    }
+  };
+  return (
+    <div className="flex flex-col h-screen bg-gray-900 text-white overflow-hidden">
+      {/* Top toolbar */}
+      <header className="border-b border-gray-700 bg-gray-800 p-3 flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="text-white">Project</Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="bg-gray-800 border-gray-700 text-white">
+                <DropdownMenuItem className="hover:bg-gray-700">New Project</DropdownMenuItem>
+                <DropdownMenuItem className="hover:bg-gray-700">Open Project</DropdownMenuItem>
+                <DropdownMenuItem className="hover:bg-gray-700">Save Project</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Input
+              className="w-40 bg-gray-800 border-gray-600 text-white"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+            />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white"
+              onClick={() => setShowSceneEditor(true)}
+            >
+              <Edit3 className="h-4 w-4 mr-1" /> Edit Scene
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white"
+              onClick={() => duplicateScene(selectedSceneIndex)}
+            >
+              <Copy className="h-4 w-4 mr-1" /> Duplicate
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-white"
+              onClick={() => deleteScene(selectedSceneIndex)}
+            >
+              <Trash2 className="h-4 w-4 mr-1" /> Delete
+            </Button>
+          </div>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-white"
+            onClick={() => setShowExportDialog(true)}
+          >
+            <Download className="h-4 w-4 mr-1" /> Export
+          </Button>
+          <Button variant="ghost" size="icon" className="text-white">
+            <Settings className="h-5 w-5" />
+          </Button>
+        </div>
+      </header>
+      {/* Main Content Area */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left panel - Templates */}
+        <div className="w-64 border-r border-gray-700 bg-gray-800 overflow-y-auto">
+          <div className="p-3 border-b border-gray-700">
+            <h2 className="font-medium">Scene Templates</h2>
+          </div>
+          <div className="p-3 space-y-3">
+            {sceneTemplates.map(template => (
+              <Card
+                key={template.id}
+                className="bg-gray-700 border-gray-600 cursor-pointer hover:bg-gray-600 transition-colors overflow-hidden"
+                onClick={() => addScene(template.id)}
+              >
+                <div className="aspect-video relative" style={{ background: template.thumbnail }}>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Plus className="h-8 w-8 text-white opacity-50" />
+                  </div>
+                </div>
+                <CardContent className="p-2">
+                  <div className="text-sm">{template.name}</div>
+                  <div className="text-xs text-gray-400">{template.duration}s</div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+        {/* Middle Panel - Preview */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Scene Preview */}
+          <div className="flex-1 bg-gray-950 p-4 flex items-center justify-center">
+            <div
+              ref={previewRef}
+              className="aspect-video w-full max-h-full relative rounded overflow-hidden"
+              style={{ background: currentScene.background }}
+            >
+              {renderScenePreview(currentScene)}
+              {/* Scene info overlay */}
+              <div className="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded">
+                {currentScene.name} ({formatTime(getSceneStartTime(selectedSceneIndex))} - {formatTime(getSceneStartTime(selectedSceneIndex) + currentScene.duration)})
+              </div>
+            </div>
+          </div>
+          {/* Playback Controls */}
+          <div className="h-12 border-t border-gray-700 bg-gray-800 flex items-center px-4 space-x-4">
+            <div className="flex items-center">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-white"
+                onClick={goToPreviousScene}
+                disabled={selectedSceneIndex === 0}
+              >
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-white"
+                onClick={() => setIsPlaying(!isPlaying)}
+              >
+                {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-white"
+                onClick={goToNextScene}
+                disabled={selectedSceneIndex === scenes.length - 1}
+              >
+                <ChevronRight className="h-5 w-5" />
+              </Button>
+            </div>
+            <div className="text-sm flex items-center space-x-2 text-gray-300">
+              <span>{formatTime(currentTime)}</span>
+              <span>/</span>
+              <span>{formatTime(duration)}</span>
+            </div>
+            <div className="flex-1">
+              <Slider
+                value={[currentTime]}
+                max={duration}
+                step={0.1}
+                onValueChange={(val) => setCurrentTime(val[0])}
+                className="mt-0.5"
+              />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-gray-300"
+                onClick={() => setZoom(Math.max(0.5, zoom - 0.25))}
+              >
+                <ZoomOut className="h-4 w-4" />
+              </Button>
+              <span className="text-xs">{Math.round(zoom * 100)}%</span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-gray-300"
+                onClick={() => setZoom(Math.min(2, zoom + 0.25))}
+              >
+                <ZoomIn className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+          {/* Timeline */}
+          <div
+            ref={timelineRef}
+            className="h-24 border-t border-gray-700 bg-gray-800 overflow-x-auto relative"
+            onClick={handleTimelineClick}
+          >
+            <div
+              className="absolute top-0 left-0 h-full flex"
+              style={{ width: `${100 * zoom}%` }}
+            >
+              {/* Time markers */}
+              <div className="absolute top-0 left-0 right-0 h-5 flex">
+                {Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="border-l border-gray-600 h-full flex items-center px-1 text-xs text-gray-500"
+                    style={{ position: 'absolute', left: `${(i / duration) * 100}%` }}
+                  >
+                    {formatTime(i)}
+                  </div>
+                ))}
+              </div>
+              {/* Scene blocks */}
+              <div className="absolute top-5 left-0 right-0 bottom-0">
+                {scenes.map((scene, index) => {
+                  const startPercent = (getSceneStartTime(index) / duration) * 100;
+                  const widthPercent = (scene.duration / duration) * 100;
+                  return (
+                    <div
+                      key={scene.id}
+                      className={`
+                        absolute h-16 cursor-pointer
+                        ${selectedSceneIndex === index ? 'ring-2 ring-blue-500' : ''}
+                        hover:ring-1 hover:ring-blue-400
+                      `}
+                      style={{
+                        left: `${startPercent}%`,
+                        width: `${widthPercent}%`,
+                        background: scene.background,
+                        borderRight: '1px solid rgba(0,0,0,0.3)',
+                        borderRadius: '2px'
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedSceneIndex(index);
+                      }}
+                    >
+                      <div className="p-1 text-xs text-white truncate overflow-hidden">
+                        {scene.name}
+                      </div>
+                      <div className="absolute bottom-1 right-1 text-xs bg-black/50 px-1 rounded">
+                        {scene.duration}s
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+              {/* Playhead */}
+              <div
+                className="absolute top-0 bottom-0 w-px bg-red-500 z-10"
+                style={{ left: `${(currentTime / duration) * 100}%` }}
+              >
+                <div className="w-3 h-3 bg-red-500 -ml-1.5 -mt-0.5 rounded-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Scene Editor Dialog */}
+      <Dialog open={showSceneEditor} onOpenChange={setShowSceneEditor}>
+        <DialogContent className="bg-gray-800 text-white border-gray-700">
+          <DialogHeader>
+            <DialogTitle>Edit Scene</DialogTitle>
+          </DialogHeader>
+          {currentScene && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label className="text-white">Scene Name</Label>
+                <Input
+                  value={currentScene.name}
+                  onChange={(e) => updateScene({ name: e.target.value })}
+                  className="bg-gray-700 border-gray-600 text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label className="text-white">Duration (seconds)</Label>
+                <div className="flex space-x-2">
+                  <Input
+                    type="number"
+                    value={currentScene.duration}
+                    onChange={(e) => updateScene({ duration: parseFloat(e.target.value) })}
+                    className="bg-gray-700 border-gray-600 text-white"
+                    min="1"
+                    step="0.5"
+                  />
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="border-gray-600 text-white"
+                    onClick={() => updateScene({ duration: currentScene.duration - 0.5 })}
+                    disabled={currentScene.duration <= 1}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="border-gray-600 text-white"
+                    onClick={() => updateScene({ duration: currentScene.duration + 0.5 })}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-white">Background</Label>
+                <Select
+                  value="custom"
+                  onValueChange={(val) => {
+                    if (val === "blue") {
+                      updateScene({ background: "linear-gradient(120deg, #1e3c72, #2a5298)" });
+                    } else if (val === "purple") {
+                      updateScene({ background: "linear-gradient(120deg, #8E54E9, #4776E6)" });
+                    } else if (val === "green") {
+                      updateScene({ background: "linear-gradient(120deg, #11998e, #38ef7d)" });
+                    } else if (val === "red") {
+                      updateScene({ background: "linear-gradient(120deg, #c31432, #240b36)" });
+                    }
+                  }}
+                >
+                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
+                    <SelectValue placeholder="Choose background" />
+                  </SelectTrigger>
+                  <SelectContent className="bg-gray-800 border-gray-700 text-white">
+                    <SelectItem value="blue">Blue Gradient</SelectItem>
+                    <SelectItem value="purple">Purple Gradient</SelectItem>
+                    <SelectItem value="green">Green Gradient</SelectItem>
+                    <SelectItem value="red">Red Gradient</SelectItem>
+                    <SelectItem value="custom">Custom</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              {currentScene.type === 'title' && (
+                <>
+                  <div className="space-y-2">
+                    <Label className="text-white">Title</Label>
+                    <Input
+                      value={currentScene.content.title}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, title: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="text-white">Subtitle</Label>
+                    <Input
+                      value={currentScene.content.subtitle}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, subtitle: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                </>
+              )}
+              {currentScene.type === 'word' && (
+                <>
+                  <div className="space-y-2">
+                    <Label className="text-white">Word</Label>
+                    <Input
+                      value={currentScene.content.word}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, word: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="text-white">Translation</Label>
+                    <Input
+                      value={currentScene.content.translation}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, translation: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="text-white">Example</Label>
+                    <Input
+                      value={currentScene.content.example}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, example: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                </>
+              )}
+              {currentScene.type === 'split' && (
+                <>
+                  <div className="space-y-2">
+                    <Label className="text-white">Left Side Text</Label>
+                    <Textarea
+                      value={currentScene.content.leftText}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, leftText: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label className="text-white">Right Side Text</Label>
+                    <Textarea
+                      value={currentScene.content.rightText}
+                      onChange={(e) => updateScene({
+                        content: { ...currentScene.content, rightText: e.target.value }
+                      })}
+                      className="bg-gray-700 border-gray-600 text-white"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowSceneEditor(false)}
+              className="border-gray-600 text-white hover:bg-gray-700"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => setShowSceneEditor(false)}
+              className="bg-blue-600 text-white hover:bg-blue-700"
+            >
+              Save Changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {/* Export Dialog */}
+      <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
+        <DialogContent className="bg-gray-800 text-white border-gray-700">
+          <DialogHeader>
+            <DialogTitle>Export Video</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label className="text-white">Format</Label>
+              <Select defaultValue="mp4">
+                <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
+                  <SelectValue placeholder="Select format" />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-800 border-gray-700 text-white">
+                  <SelectItem value="mp4">MP4 (H.264)</SelectItem>
+                  <SelectItem value="webm">WebM</SelectItem>
+                  <SelectItem value="gif">GIF</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label className="text-white">Resolution</Label>
+              <Select defaultValue="1080p">
+                <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
+                  <SelectValue placeholder="Select resolution" />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-800 border-gray-700 text-white">
+                  <SelectItem value="720p">720p</SelectItem>
+                  <SelectItem value="1080p">1080p (Full HD)</SelectItem>
+                  <SelectItem value="4k">4K (UHD)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <div className="flex justify-between">
+                <Label className="text-white">Include Audio</Label>
+                <Switch defaultChecked />
+              </div>
+            </div>
+            {isExporting && (
+              <div className="space-y-2">
+                <Label className="text-white">Export Progress</Label>
+                <Progress value={exportProgress} className="h-2" />
+                <div className="text-sm text-center text-gray-400">
+                  {exportProgress}% complete
+                </div>
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowExportDialog(false)}
+              className="border-gray-600 text-white hover:bg-gray-700"
+              disabled={isExporting}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={exportVideo}
+              className="bg-blue-600 text-white hover:bg-blue-700"
+              disabled={isExporting}
+            >
+              {isExporting ? "Exporting..." : "Export Video"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {/* Notification */}
+      {notification && (
+        <div className={`
+          fixed bottom-4 right-4 px-4 py-2 rounded-md shadow-lg
+          transition-opacity duration-300 flex items-center
+          ${notification.type === 'error' ? 'bg-red-800' : 'bg-gray-800'} text-white
+        `}>
+          {notification.type === 'error' ? (
+            <AlertTriangle className="h-4 w-4 mr-2 text-red-400" />
+          ) : (
+            <CheckCircle className="h-4 w-4 mr-2 text-green-400" />
+          )}
+          {notification.message}
+        </div>
+      )}
+    </div>
+  );
+};
+export default VideoEditor;

robots.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+User-agent: *
+Allow: /
+Disallow: /.git/

run_local.sh ADDED Viewed

	@@ -0,0 +1,9 @@

+#!/bin/bash
+# Build the Docker image
+docker build -t wordlist-video .
+# Run the Docker container
+docker run -p 7860:7860 wordlist-video
+echo "Server running at http://localhost:7860"

video-editor-html/SplashScreen 3.json ADDED Viewed

	@@ -0,0 +1 @@

+ {"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":140,"w":1080,"h":1920,"nm":"SplashScreen 3","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 8","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,1920,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 19","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,1920,0],"ix":2},"a":{"a":0,"k":[6,-30,0],"ix":1},"s":{"a":0,"k":[102,198,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.3,0.3],"y":[1,1]},"o":{"x":[0.7,0.7],"y":[0,0]},"t":99,"s":[0,2020]},{"t":149,"s":[1204,2020]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.87450986376,0.003921568627,0.345098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[6,-30],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.3,0.3],"y":[1,1]},"o":{"x":[0.7,0.7],"y":[0,0]},"t":89,"s":[0,2020]},{"t":139,"s":[1204,2020]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.87450986376,0.003921568627,0.345098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[6,-30],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":60,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.3,0.3],"y":[1,1]},"o":{"x":[0.7,0.7],"y":[0,0]},"t":79,"s":[0,2020]},{"t":129,"s":[1204,2020]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.87450986376,0.003921568627,0.345098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[6,-30],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":60,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":5,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 18","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[539,1898,0],"ix":2},"a":{"a":0,"k":[-1,566,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.33,0.33,0.33],"y":[1,1,1]},"o":{"x":[0.67,0.67,0.67],"y":[0,0,0]},"t":0,"s":[100,0,100]},{"i":{"x":[0.23,0.826,0.33],"y":[1,1,1]},"o":{"x":[0.468,0.385,0.67],"y":[0,0,0]},"t":20,"s":[100,100,100]},{"t":34,"s":[100,203,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.675,0.675],"y":[1,0.337]},"o":{"x":[0.342,0.342],"y":[0,0]},"t":32,"s":[1295,136]},{"i":{"x":[0.3,0.3],"y":[1,1]},"o":{"x":[0.676,0.676],"y":[0,-26.239]},"t":33,"s":[3358,138.365]},{"i":{"x":[0.675,0.675],"y":[1,0.337]},"o":{"x":[0.342,0.342],"y":[0,0]},"t":52,"s":[1295,136]},{"i":{"x":[0.288,0.288],"y":[1,1]},"o":{"x":[0.676,0.676],"y":[0,0.053]},"t":53,"s":[3358,138.365]},{"t":102,"s":[3358,3141]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":124,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.87450986376,0.003921568627,0.345098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1,566],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.3],"y":[1]},"o":{"x":[0.7],"y":[0]},"t":52,"s":[0]},{"t":102,"s":[90]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.675,0.675],"y":[1,0.337]},"o":{"x":[0.342,0.342],"y":[0,0]},"t":32,"s":[1295,136]},{"i":{"x":[0.3,0.3],"y":[1,1]},"o":{"x":[0.676,0.676],"y":[0,-12.429]},"t":33,"s":[3358,138.365]},{"i":{"x":[0.675,0.675],"y":[1,0.337]},"o":{"x":[0.342,0.342],"y":[0,0]},"t":42,"s":[1295,136]},{"i":{"x":[0.288,0.288],"y":[1,1]},"o":{"x":[0.676,0.676],"y":[0,0.053]},"t":43,"s":[3358,138.365]},{"t":92,"s":[3358,3141]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":124,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.87450986376,0.003921568627,0.345098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1,566],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.3],"y":[1]},"o":{"x":[0.7],"y":[0]},"t":42,"s":[0]},{"t":92,"s":[90]}],"ix":6},"o":{"a":0,"k":60,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.675,0.675],"y":[1,0.337]},"o":{"x":[0.342,0.342],"y":[0,0]},"t":32,"s":[1295,136]},{"i":{"x":[0.288,0.288],"y":[1,1]},"o":{"x":[0.676,0.676],"y":[0,0.053]},"t":33,"s":[3358,138.365]},{"t":82,"s":[3358,3141]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":124,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.87450986376,0.003921568627,0.345098039216,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-1,566],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.3],"y":[1]},"o":{"x":[0.7],"y":[0]},"t":32,"s":[0]},{"t":82,"s":[90]}],"ix":6},"o":{"a":0,"k":60,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":0,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":5,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,1920,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[60,60,100],"ix":6}},"ao":0,"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"L","parent":1,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-49.635,-49.351,0],"ix":2},"a":{"a":0,"k":[910.365,910.649,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.77,"y":0},"t":0,"s":[{"i":[[0,-3.542],[0,0],[-8.692,0],[0,0],[0,8.692],[0,0],[6.897,1.833],[0,0],[0,7.137],[0,0],[9.664,-0.166],[0,0],[5.389,-6.82]],"o":[[0,0],[0,8.692],[0,0],[8.692,0],[0,0],[0,-7.132],[0,0],[-6.893,-1.833],[0,0],[0,-12.033],[-9.664,0.166],[-13.72,0.379],[-2.197,2.778]],"v":[[-188.595,-201.413],[-188.292,413.666],[-172.556,429.403],[172.553,429.403],[188.292,413.666],[188.292,296.01],[176.596,280.8],[-18.011,276.984],[-29.703,261.773],[-30.57,-201.432],[-45.481,-219.923],[-163.174,-219.511],[-185.204,-211.172]],"c":true}]},{"t":96,"s":[{"i":[[0,-3.542],[0,0],[-8.692,0],[0,0],[0,8.692],[0,0],[6.897,1.833],[0,0],[0,7.137],[0,0],[9.439,7.461],[0,0],[5.389,-6.82]],"o":[[0,0],[0,8.692],[0,0],[8.692,0],[0,0],[0,-7.132],[0,0],[-6.893,-1.833],[0,0],[0,-12.033],[0,0],[-6.82,-5.39],[-2.197,2.778]],"v":[[-188.292,-413.663],[-188.292,413.666],[-172.556,429.403],[172.553,429.403],[188.292,413.666],[188.292,296.01],[176.596,280.8],[-18.255,228.984],[-29.948,213.773],[-29.948,-301.932],[-44.893,-332.798],[-162.794,-426.011],[-184.901,-423.422]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.75,"y":0},"t":34,"s":[1314.145,2287.632],"to":[0,0],"ti":[0,0]},{"t":64,"s":[1314.145,954.632]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":26,"op":100,"st":26,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"ribbon","parent":1,"tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":330,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.036],"y":[1]},"o":{"x":[0.056],"y":[0.253]},"t":26,"s":[-1129]},{"t":52,"s":[0]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-7.081],[0,0],[-17.321,0],[-5.275,3.695],[0,0],[-13.439,-8.941],[0,0],[-9.595,14.419],[0,6.183],[0,0],[28.066,22.31],[0,0],[10.778,-13.563]],"o":[[0,0],[0,17.323],[6.44,0],[0,0],[13.223,-9.263],[0,0],[14.418,9.593],[3.418,-5.148],[0,0],[0,-35.858],[0,0],[-13.558,-10.78],[-4.41,5.542]],"v":[[-309.14,-625.943],[-309.14,625.94],[-277.779,657.305],[-259.78,651.627],[3.686,528.117],[47.895,527.582],[260.405,607.87],[303.89,599.129],[309.14,578.98],[309.14,-142.69],[264.715,-234.755],[-258.262,-650.493],[-302.329,-645.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":26,"op":100,"st":26,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"matte ribbon izq","parent":1,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-705,26,0],"ix":2},"a":{"a":0,"k":[-653,-4,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[88,-750],[-1218,166],[-1360.667,3831.334],[89.333,3831.334]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.573681999655,0.70613600787,0.890196018593,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"ribbbon izq","parent":1,"tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-180,"ix":10},"p":{"s":true,"x":{"a":0,"k":-336,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.925],"y":[0.929]},"o":{"x":[0.75],"y":[0]},"t":0,"s":[4981]},{"i":{"x":[0.281],"y":[1]},"o":{"x":[0.75],"y":[0]},"t":26,"s":[-41.962]},{"t":48,"s":[-2143.962]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-7.081],[0,0],[-17.321,0],[0,0],[-13.439,-8.941],[0,0],[-9.595,14.419],[0,6.183],[0,0],[28.066,22.31],[0,0],[10.778,-13.563]],"o":[[0,0],[0,17.323],[6.44,0],[20.907,-5.54],[0,0],[14.418,9.593],[3.418,-5.148],[0,0],[0,-35.858],[0,0],[-13.558,-10.78],[-4.41,5.542]],"v":[[-309.14,-625.943],[-309.039,1312.44],[-277.678,1343.805],[4.593,1253.117],[48.755,1263.582],[310.531,1559.18],[354.016,1550.439],[359.266,1530.29],[359.14,-143.38],[314.715,-235.444],[-258.262,-650.493],[-302.329,-645.451]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.86405223608,0.86405223608,0.86405223608,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":12,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"w","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[930.365,1890.649,0],"ix":2},"a":{"a":0,"k":[910.365,910.649,0],"ix":1},"s":{"a":0,"k":[60,60,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[204,266],[204,1590],[954,1590],[954,266]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.37,"y":1},"o":{"x":0.63,"y":0},"t":31,"s":[{"i":[[0,0],[0,0],[-2.689,-3.414],[0,-1.767],[0,0],[-4.347,0],[-1.418,2.388],[0,0],[-7.474,-4.439],[-0.799,-0.739],[0,0],[-2.94,3.199],[0,1.973],[0,0],[-6.752,-0.637],[0,0],[0,0],[0,0],[4.331,6.828],[0,0],[7.34,-4.657],[1.274,-2.241],[0,0],[8.493,0],[0,0],[0,8.692],[0,0],[-7.451,-0.881]],"o":[[0,0],[6.139,0.827],[1.094,1.388],[0,0],[0,4.347],[2.775,0],[0,0],[4.439,-7.474],[0.936,0.555],[0,0],[3.202,2.939],[1.334,-1.452],[0,0],[0,-7.187],[0,0],[0,0],[0,0],[-8.088,0],[0,0],[-4.654,-7.337],[-2.176,1.38],[0,0],[-4.194,7.388],[0,0],[-8.692,0],[0,0],[0,-7.231],[0,0]],"v":[[-298.136,-175.268],[-177.475,-176.976],[-166.353,-171.664],[-164.726,-164.042],[-164.432,207.196],[-156.563,215.068],[-149.797,211.214],[-25.974,2.624],[-4.405,-2.873],[-1.791,-0.931],[144.769,216.785],[155.888,216.314],[157.963,210.991],[158.041,-161.799],[166.916,-175.512],[307.13,-175.68],[307.043,476.68],[146.6,476.68],[126.661,465.714],[4.388,272.909],[-17.332,268.05],[-22.589,273.567],[-131.176,464.73],[-151.702,476.68],[-291.317,476.68],[-307.043,460.941],[-307.04,-161.725],[-298.136,-175.268]],"c":false}]},{"t":51,"s":[{"i":[[0,0],[0,0],[-2.689,-3.414],[0,-1.767],[0,0],[-4.347,0],[-1.418,2.388],[0,0],[-7.474,-4.439],[-0.799,-0.739],[0,0],[-2.941,3.199],[0,1.973],[0,0],[-5.62,4.478],[0,0],[0,0],[0,0],[4.331,6.828],[0,0],[7.34,-4.657],[1.274,-2.241],[0,0],[8.493,0],[0,0],[0,8.692],[0,0],[-5.681,4.476]],"o":[[0,0],[3.414,-2.689],[1.094,1.388],[0,0],[0,4.347],[2.775,0],[0,0],[4.439,-7.474],[0.936,0.555],[0,0],[3.202,2.939],[1.334,-1.452],[0,0],[0,-7.187],[0,0],[0,0],[0,0],[-8.088,0],[0,0],[-4.653,-7.337],[-2.176,1.38],[0,0],[-4.194,7.388],[0,0],[-8.692,0],[0,0],[0,-7.231],[0,0]],"v":[[-298.034,-9.768],[-177.17,-104.976],[-166.121,-103.664],[-164.432,-98.792],[-164.432,207.196],[-156.563,215.068],[-149.797,211.214],[-25.974,2.624],[-4.405,-2.873],[-1.791,-0.931],[144.825,133.785],[155.944,133.314],[158.019,127.991],[158.019,-346.549],[166.915,-365.012],[307.043,-476.68],[307.043,476.68],[146.6,476.68],[126.661,465.714],[4.388,272.909],[-17.332,268.05],[-22.589,273.567],[-131.176,464.73],[-151.702,476.68],[-291.317,476.68],[-307.043,460.941],[-307.043,8.775],[-298.034,-9.768]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tr","p":{"a":0,"k":[625.336,910.649],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false}],"ip":23,"op":100,"st":40,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 32","parent":2,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,-364.583,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[104.167,104.167,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-3.5,13],[21.5,-16],[0,0],[0,0],[0,0],[0,0],[-20.5,5],[-14.5,9.5],[18.5,-2.5],[-15.5,3],[0,0],[-49.5,4.5],[0,0],[12.5,-7.5],[-8,4.5],[0,0],[-11,-0.5],[1,12],[0,0],[-9,-2],[0,0],[0,0],[0,-1.5],[-7.5,6.5],[4,-30.5],[-31,16.5],[0,0],[-36,38],[0,0],[-10,4],[0,0],[-14.5,6],[-15,4.5],[0,0],[29.5,-15],[-40,24.5],[31.5,-12.5],[0,0]],"o":[[0,0],[3.5,-13],[-21.5,16],[0,0],[0,0],[0,0],[0,0],[20.5,-5],[14.5,-9.5],[-18.5,2.5],[15.5,-3],[0,0],[49.5,-4.5],[0,0],[-12.5,7.5],[8,-4.5],[0,0],[11,0.5],[-1,-12],[0,0],[9,2],[0,0],[0,0],[0,1.5],[7.5,-6.5],[-4,30.5],[6.5,-12.5],[0,0],[36,-38],[0,0],[10,-4],[0,0],[-22,7.5],[15,-4.5],[0,0],[-29.5,15],[40,-24.5],[-31.5,12.5],[0,0]],"v":[[25,344],[48.5,293],[23.5,304],[-21.5,365],[-55.5,371.5],[-1.501,371.009],[26,377],[48.5,361.5],[76.5,353],[81,316.5],[65,383.5],[89.5,365.5],[122.5,304.5],[148.5,324],[113,344.5],[107,377.5],[140.5,341],[135,373],[168,342],[189,338],[180.5,373],[221,333],[202,376.5],[247.5,336],[237,376.5],[279.5,335],[287.5,366],[313,334.5],[314,355],[343,338],[327,373.5],[347,361],[397,328],[362.5,373],[400,335.5],[356.5,414.5],[421.5,355],[344.5,278],[283.5,324]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":23,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.28],"y":[1]},"o":{"x":[0.72],"y":[0]},"t":84,"s":[0]},{"t":144,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":84,"op":282,"st":84,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"learning","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.95],"y":[1]},"o":{"x":[0.72],"y":[0]},"t":209,"s":[540]},{"t":239,"s":[1162]}],"ix":3},"y":{"a":0,"k":1310,"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[96,96,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[11.043,-19.731],[0,0],[3.245,-2.46],[1.518,0],[0,2.251],[-7.379,11.671],[0,1.151],[0.837,0],[5.914,-6.594],[8.688,-12.037],[3.664,-5.757],[-4.449,-1.099],[-8.479,-2.408],[-4.03,-0.419],[1.884,-1.989],[0.994,-0.419],[3.088,0.628],[6.699,1.727],[5.862,1.151],[4.815,0],[1.989,-0.628],[3.507,-1.465],[1.413,0],[0,1.675],[-0.68,1.204],[-1.622,2.512],[-1.832,1.413],[-3.454,0.785],[-5.652,0.052],[-7.379,10.101],[-6.019,6.961],[-4.553,3.559],[-2.669,0],[-1.047,-1.047],[0,-1.884]],"o":[[0,0],[-4.292,5.391],[-3.193,2.46],[-1.256,0],[0,-5.6],[6.228,-10.101],[0,-0.994],[-1.465,0],[-5.914,6.594],[-9.839,13.398],[6.961,0.68],[4.501,1.047],[8.531,2.407],[-4.92,5.6],[-1.832,2.041],[-1.57,0.68],[-3.088,-0.576],[-6.699,-1.727],[-5.809,-1.151],[-2.722,0],[-1.936,0.628],[-3.454,1.413],[-2.041,0],[0,-0.942],[1.727,-2.774],[1.622,-2.512],[1.832,-1.413],[3.454,-0.785],[8.531,-13.084],[7.379,-10.153],[6.071,-6.961],[4.553,-3.611],[1.884,0],[1.047,1.047],[0,6.28]],"v":[[38.546,-27.124],[40.98,-24.69],[29.675,-12.914],[22.609,-9.224],[20.725,-12.6],[31.795,-38.507],[41.137,-55.385],[39.881,-56.877],[28.811,-46.985],[6.908,-19.038],[-13.346,9.695],[3.768,12.365],[23.238,17.546],[42.079,21.785],[31.873,33.168],[27.634,36.858],[20.647,36.937],[5.966,33.482],[-12.875,29.165],[-28.811,27.438],[-35.877,28.38],[-44.041,31.52],[-51.342,33.64],[-54.404,31.127],[-53.384,27.909],[-48.359,19.98],[-43.178,14.092],[-35.249,10.794],[-21.589,9.538],[2.277,-25.239],[22.374,-50.911],[38.311,-66.69],[49.144,-72.107],[53.541,-70.537],[55.111,-66.141]],"c":true},"ix":2},"nm":"Path 11","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[7.379,-2.983],[0,0],[-1.518,-1.727],[-2.46,0],[-2.721,1.204],[-2.721,1.989],[-3.925,3.35],[0,0],[5.181,-3.821],[5.338,0],[2.721,3.611],[0,6.28],[-2.564,4.449],[-5.809,4.972],[-3.925,1.727],[-3.088,0],[-1.413,-1.151],[0,-2.25],[2.46,-3.297],[5.077,-3.245]],"o":[[0,0],[0,3.088],[1.518,1.727],[2.564,0],[2.774,-1.204],[2.721,-1.989],[0,0],[-5.914,7.118],[-5.181,3.768],[-4.658,0],[-2.721,-3.611],[0,-5.495],[2.564,-4.501],[3.978,-3.402],[3.925,-1.727],[2.46,0],[1.465,1.099],[0,3.297],[-2.46,3.245],[-5.024,3.193]],"v":[[63.589,10.48],[63.589,12.443],[65.866,19.666],[71.832,22.256],[79.761,20.451],[88.004,15.662],[97.974,7.654],[97.974,12.443],[81.331,28.851],[65.552,34.503],[54.483,29.086],[50.4,14.249],[54.247,-0.667],[66.808,-14.877],[78.662,-22.57],[89.182,-25.161],[94.991,-23.434],[97.189,-18.409],[93.5,-8.518],[82.195,1.217]],"c":true},"ix":2},"nm":"Path 12","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0.523,-3.088],[-3.35,2.722],[-1.57,2.46],[0,1.151],[1.099,0],[2.146,-1.204],[2.198,-1.936],[1.727,-2.617]],"o":[[4.71,-1.832],[3.35,-2.721],[1.622,-2.512],[0,-1.204],[-0.942,0],[-2.093,1.204],[-2.146,1.936],[-1.727,2.617]],"v":[[64.374,5.378],[76.464,-1.452],[83.844,-9.224],[86.277,-14.72],[84.629,-16.525],[79.997,-14.72],[73.559,-10.009],[67.75,-3.179]],"c":true},"ix":2},"nm":"Path 13","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[-2.983,2.826],[-7.484,3.507],[-4.082,0],[-0.942,-0.942],[-0.523,-1.204],[0,-0.576],[0.733,-0.471],[1.832,-0.628],[-0.576,-1.308],[-0.314,-0.837],[0,-0.628],[2.564,-3.454],[1.047,-1.622],[0,-2.355],[-3.559,0],[-7.798,6.856],[0,0],[5.705,0],[0.89,1.361],[0,2.617],[-2.983,7.851],[3.716,-3.611],[2.407,0],[1.727,1.989],[1.361,3.14],[0,3.402],[-0.471,1.622],[-1.361,1.727]],"o":[[7.955,-7.222],[7.484,-3.507],[1.099,0],[0.942,0.89],[0.576,1.204],[0,0.942],[-0.733,0.419],[0.366,0.837],[0.576,1.308],[0.314,0.785],[0,1.256],[-2.512,3.402],[-0.994,1.622],[0,3.873],[3.664,0],[0,0],[-13.241,14.707],[-2.041,0],[-0.837,-1.308],[0,-4.135],[-7.641,8.479],[-3.716,3.559],[-1.151,0],[-1.727,-1.989],[-1.308,-3.193],[0,-2.46],[0.471,-1.675],[1.361,-1.727]],"v":[[107.16,-6.398],[130.319,-22.492],[147.668,-27.752],[150.73,-26.338],[152.928,-23.198],[153.792,-20.529],[152.693,-18.409],[148.846,-16.839],[150.259,-13.621],[151.593,-10.402],[152.064,-8.282],[148.218,-1.217],[142.879,6.32],[141.388,12.286],[146.726,18.095],[163.919,7.811],[163.919,12.6],[135.5,34.66],[131.104,32.619],[129.848,26.731],[134.322,8.753],[117.287,26.888],[108.102,32.226],[103.784,29.243],[99.152,21.55],[97.189,11.658],[97.896,5.535],[100.644,0.432]],"c":true},"ix":2},"nm":"Path 14","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[-6.385,8.95],[5.809,-4.344],[0,-4.606],[-0.576,-1.099],[-0.994,0],[-1.465,0.733],[-4.553,5.181]],"o":[[-13.608,6.228],[-5.757,4.344],[0,1.675],[0.576,1.047],[0.576,0],[5.495,-3.245],[4.553,-5.234]],"v":[[144.764,-15.034],[115.638,0.824],[107.003,14.249],[107.866,18.41],[110.221,19.98],[113.283,18.88],[128.356,6.241]],"c":true},"ix":2},"nm":"Path 15","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[6.176,-5.286],[0,0],[-1.465,2.355],[0.785,0.837],[0,1.675],[-1.57,2.879],[-2.303,2.512],[-1.884,0.733],[-0.68,0],[0,-0.994],[1.622,-2.721],[-2.826,0],[-0.419,-0.209],[-0.576,-1.727],[0,-1.727],[0.994,-1.308],[2.355,-2.46],[1.884,-3.507],[0,-1.779],[-3.036,0],[-7.903,6.49],[0,0],[2.826,-2.617],[2.407,-1.57],[1.884,0],[1.465,1.989],[0,3.821],[-1.151,2.879],[-2.198,3.35],[-2.774,3.35],[1.832,-0.366],[2.041,-0.366],[1.099,-0.209]],"o":[[0,0],[2.826,-3.35],[-1.675,-0.576],[-0.733,-0.837],[0,-1.884],[1.57,-2.879],[2.303,-2.512],[0.733,-0.366],[1.047,0],[0,0.89],[10.781,-1.675],[1.099,0],[0.89,0.471],[0.576,1.727],[0,1.099],[-0.942,1.256],[-2.774,2.983],[-1.884,3.507],[0,2.46],[3.193,0],[0,0],[-4.344,4.553],[-2.826,2.617],[-2.407,1.518],[-2.198,0],[-1.465,-2.041],[0,-2.251],[1.151,-2.879],[2.25,-3.402],[-1.465,0.314],[-1.832,0.314],[-2.041,0.366],[-3.245,6.49]],"v":[[162.506,13.699],[162.506,8.596],[168.943,0.039],[165.253,-2.08],[164.154,-5.849],[166.509,-12.993],[172.319,-21.079],[178.599,-25.946],[180.719,-26.495],[182.289,-25.004],[179.855,-19.587],[200.267,-22.099],[202.543,-21.785],[204.741,-18.488],[205.605,-13.307],[204.113,-9.695],[199.168,-4.122],[192.181,5.613],[189.354,13.542],[193.908,17.232],[210.551,7.497],[210.551,12.757],[199.796,23.512],[191.945,29.793],[185.508,32.069],[180.012,29.086],[177.814,20.294],[179.541,12.6],[184.566,3.258],[192.102,-6.869],[187.156,-5.849],[181.347,-4.828],[176.637,-3.965]],"c":true},"ix":2},"nm":"Path 16","mn":"ADBE Vector Shape - Group","hd":false},{"ind":6,"ty":"sh","ix":7,"ks":{"a":0,"k":{"i":[[2.25,-2.355],[0,-4.03],[-1.832,0],[-2.408,1.57],[-5.181,4.082],[0,0],[3.978,-3.245],[2.512,0],[0,5.652],[-0.523,1.622],[-0.89,1.727],[-1.884,3.245],[-2.46,4.135],[4.501,-4.501],[2.041,-2.564],[2.355,-3.14],[1.099,-1.099],[1.099,0],[1.413,3.507],[0,4.658],[-0.628,1.622],[-1.936,2.983],[-2.617,2.565],[-2.407,0],[-0.994,-0.576],[0,-1.204],[0.314,-0.576],[0.419,-0.471],[1.256,-1.361],[0,-2.721],[-0.994,0],[-1.779,1.989],[-2.826,3.245],[-3.873,3.559],[-4.972,3.297],[-1.832,0],[-0.785,-2.303],[0,-2.355]],"o":[[-9.211,10.258],[0,2.251],[1.518,0],[2.46,-1.622],[0,0],[-7.432,7.327],[-3.978,3.245],[-4.292,0],[0,-1.675],[0.523,-1.622],[0.942,-1.779],[1.884,-3.297],[-2.983,1.518],[-2.931,2.826],[-2.041,2.512],[-2.303,3.088],[-1.047,1.047],[-1.675,0],[-1.413,-3.507],[0,-2.879],[0.68,-1.622],[3.611,-5.548],[2.617,-2.617],[1.675,0],[1.047,0.576],[0,0.523],[-0.314,0.576],[-0.366,0.471],[-8.269,9.159],[0,1.518],[0.628,0],[1.832,-2.041],[2.879,-3.297],[3.925,-3.559],[2.774,-1.936],[0.837,0],[0.837,2.303],[0,1.151]],"v":[[263.149,-6.555],[249.332,14.877],[252.08,18.252],[257.968,15.897],[269.43,7.34],[269.43,12.757],[252.316,28.615],[242.581,33.482],[236.144,25.004],[236.929,20.058],[239.048,15.034],[243.287,7.497],[249.803,-3.65],[238.577,5.378],[231.119,13.464],[224.525,21.942],[219.422,28.223],[216.203,29.793],[211.571,24.533],[209.452,12.286],[210.394,5.535],[214.319,-1.374],[223.661,-13.542],[231.198,-17.467],[235.201,-16.604],[236.772,-13.935],[236.301,-12.286],[235.201,-10.716],[232.768,-7.968],[220.364,9.852],[221.856,12.129],[225.467,9.146],[232.454,1.217],[242.581,-9.067],[255.927,-19.352],[262.835,-22.256],[265.269,-18.802],[266.525,-11.815]],"c":true},"ix":2},"nm":"Path 17","mn":"ADBE Vector Shape - Group","hd":false},{"ind":7,"ty":"sh","ix":8,"ks":{"a":0,"k":{"i":[[2.46,0],[1.204,0.994],[0,1.518],[-2.198,2.826],[-2.355,0],[-1.047,-0.994],[0,-1.832],[2.146,-2.721]],"o":[[-1.308,0],[-1.151,-0.994],[0,-2.303],[2.198,-2.826],[1.57,0],[1.047,0.942],[0,2.251],[-2.146,2.722]],"v":[[301.146,-27.438],[297.378,-28.929],[295.65,-32.697],[298.948,-40.391],[305.778,-44.63],[309.703,-43.139],[311.273,-38.978],[308.054,-31.52]],"c":true},"ix":2},"nm":"Path 18","mn":"ADBE Vector Shape - Group","hd":false},{"ind":8,"ty":"sh","ix":9,"ks":{"a":0,"k":{"i":[[-4.71,3.978],[0,0],[4.396,-3.35],[3.088,0],[2.093,4.501],[0,5.338],[-0.419,1.832],[-0.576,1.204],[-1.57,2.565],[-6.176,0],[0,-2.46],[2.093,-3.559],[1.622,-1.518],[1.413,-1.727],[0,-2.198],[-1.413,-1.256],[-2.251,0],[-2.931,1.779]],"o":[[0,0],[-5.077,6.542],[-4.396,3.297],[-4.292,0],[-2.094,-4.501],[0,-2.041],[0.419,-1.884],[0.576,-1.204],[7.432,-11.566],[3.192,0],[0,1.675],[-2.041,3.559],[-4.553,4.396],[-1.361,1.727],[0,1.884],[1.413,1.256],[2.46,0],[2.983,-1.832]],"v":[[306.484,7.654],[306.484,13.385],[292.275,28.223],[281.048,33.168],[271.471,26.417],[268.331,11.658],[268.959,5.849],[270.45,1.217],[273.669,-4.436],[294.08,-21.785],[298.869,-18.095],[295.729,-10.245],[290.234,-2.63],[281.284,6.555],[279.243,12.443],[281.362,17.153],[286.858,19.038],[294.944,16.368]],"c":true},"ix":2},"nm":"Path 19","mn":"ADBE Vector Shape - Group","hd":false},{"ind":9,"ty":"sh","ix":10,"ks":{"a":0,"k":{"i":[[2.25,-2.355],[0,-4.03],[-1.832,0],[-2.408,1.57],[-5.181,4.082],[0,0],[3.978,-3.245],[2.512,0],[0,5.652],[-0.523,1.622],[-0.89,1.727],[-1.884,3.245],[-2.46,4.135],[4.501,-4.501],[2.041,-2.564],[2.355,-3.14],[1.099,-1.099],[1.099,0],[1.413,3.507],[0,4.658],[-0.628,1.622],[-1.936,2.983],[-2.617,2.565],[-2.408,0],[-0.994,-0.576],[0,-1.204],[0.314,-0.576],[0.419,-0.471],[1.256,-1.361],[0,-2.721],[-0.994,0],[-1.779,1.989],[-2.826,3.245],[-3.873,3.559],[-4.972,3.297],[-1.832,0],[-0.785,-2.303],[0,-2.355]],"o":[[-9.211,10.258],[0,2.251],[1.518,0],[2.46,-1.622],[0,0],[-7.432,7.327],[-3.978,3.245],[-4.292,0],[0,-1.675],[0.523,-1.622],[0.942,-1.779],[1.884,-3.297],[-2.983,1.518],[-2.931,2.826],[-2.041,2.512],[-2.303,3.088],[-1.047,1.047],[-1.675,0],[-1.413,-3.507],[0,-2.879],[0.68,-1.622],[3.611,-5.548],[2.617,-2.617],[1.675,0],[1.047,0.576],[0,0.523],[-0.314,0.576],[-0.366,0.471],[-8.269,9.159],[0,1.518],[0.628,0],[1.832,-2.041],[2.878,-3.297],[3.925,-3.559],[2.774,-1.936],[0.837,0],[0.837,2.303],[0,1.151]],"v":[[358.769,-6.555],[344.952,14.877],[347.699,18.252],[353.587,15.897],[365.049,7.34],[365.049,12.757],[347.935,28.615],[338.2,33.482],[331.763,25.004],[332.548,20.058],[334.667,15.034],[338.907,7.497],[345.423,-3.65],[334.196,5.378],[326.738,13.464],[320.144,21.942],[315.041,28.223],[311.823,29.793],[307.191,24.533],[305.071,12.286],[306.013,5.535],[309.938,-1.374],[319.28,-13.542],[326.817,-17.467],[330.821,-16.604],[332.391,-13.935],[331.92,-12.286],[330.821,-10.716],[328.387,-7.968],[315.983,9.852],[317.475,12.129],[321.086,9.146],[328.073,1.217],[338.2,-9.067],[351.546,-19.352],[358.455,-22.256],[360.888,-18.802],[362.144,-11.815]],"c":true},"ix":2},"nm":"Path 20","mn":"ADBE Vector Shape - Group","hd":false},{"ind":10,"ty":"sh","ix":11,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[6.019,-6.228],[2.931,0],[0,1.936],[-3.821,5.862],[-1.936,2.198],[-1.727,1.622],[-2.879,2.408],[-1.047,0.89],[-2.303,5.652],[3.664,-3.35],[3.088,-1.832],[2.46,0],[2.25,4.239],[0,4.501],[-0.942,2.303],[-2.041,2.617],[-3.193,2.722],[-4.292,2.617],[-4.501,0],[0,-2.46],[7.275,-3.245],[4.396,-3.193],[2.721,-3.611],[0,-2.879],[-0.68,-0.837],[-1.099,0],[-2.355,1.675],[-4.606,4.239],[-3.454,4.292],[-2.251,2.251],[-1.832,0],[-0.628,-0.68],[0,-1.256],[1.936,-4.606],[4.972,-10.415],[0,0]],"o":[[0,0],[-7.327,12.665],[-6.019,6.28],[-1.57,0],[0,-3.768],[1.518,-2.303],[1.989,-2.198],[1.779,-1.57],[2.879,-2.355],[5.234,-10.677],[-4.92,5.234],[-3.664,3.35],[-3.036,1.779],[-2.669,0],[-2.251,-4.292],[0,-2.093],[0.994,-2.303],[2.093,-2.617],[3.192,-2.774],[8.112,-5.077],[3.35,0],[0,3.402],[-4.449,1.936],[-4.344,3.193],[-2.669,3.559],[0,1.413],[0.68,0.837],[1.832,0],[2.355,-1.675],[2.094,-1.936],[3.507,-4.344],[2.303,-2.303],[1.047,0],[0.68,0.628],[0,2.408],[-1.884,4.553],[0,0],[0,0]],"v":[[426.99,12.914],[400.926,34.346],[380.907,62.686],[367.483,72.107],[365.128,69.202],[370.858,54.757],[376.04,48.006],[381.614,42.275],[388.601,36.309],[394.488,31.441],[405.793,6.948],[392.918,19.823],[382.791,27.595],[374.548,30.264],[367.169,23.905],[363.793,10.716],[365.206,4.122],[369.759,-3.258],[377.688,-11.265],[388.915,-19.352],[407.834,-26.967],[412.859,-23.277],[401.946,-13.307],[388.679,-5.613],[378.081,4.593],[374.077,14.249],[375.098,17.624],[377.767,18.88],[384.047,16.368],[394.488,7.497],[402.81,-1.845],[411.446,-11.737],[417.647,-15.191],[420.16,-14.17],[421.18,-11.344],[418.276,-0.824],[407.991,21.628],[426.99,7.811]],"c":true},"ix":2},"nm":"Path 21","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":12,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":84,"op":282,"st":62,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 31","parent":4,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,-364.583,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[104.167,104.167,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[12.726,0.749],[-11.5,10.5],[-13,2],[9.5,-11.5],[-7.5,-8],[-5.5,7],[-8.5,19],[4,-13],[6.5,-8.5],[-3.5,-9.5],[-8,7],[0,0],[14.5,4.5],[0.5,-9.5],[-18,5],[0,0],[-23.5,0],[-3.5,6.5],[-60.5,42.5],[0,0],[0,0],[0,0],[9,-7.5],[-7.5,0],[-6,9.5],[-8.5,7.5],[-9.5,11],[5,8],[-14,-20.5],[-11.5,10]],"o":[[-25.5,-1.5],[11.5,-10.5],[3.5,9],[-9.5,11.5],[7.5,8],[5.5,-7],[8.5,-19],[-4,13],[-6.5,8.5],[3.5,9.5],[8,-7],[0,0],[-14.5,-4.5],[-0.5,9.5],[18,-5],[0,0],[23.5,0],[3.5,-6.5],[6,-11.5],[0,0],[0,0],[0,0],[-9,7.5],[7.5,0],[-9.5,19.5],[8.5,-7.5],[9.5,-11],[-5,-8],[14,20.5],[11.5,-10]],"v":[[-381.5,329.5],[-398,316.5],[-350,292],[-355.5,317.5],[-376.5,376],[-363,376],[-318,304],[-281,284],[-296,318.5],[-324.5,363],[-314.5,372.5],[-262,319.5],[-271,370],[-294.5,348.5],[-265,381],[-211,323.5],[-232.5,371],[-183.5,319.5],[-192.5,360],[-165,293.5],[-119,300.5],[-125.5,327.5],[-170,346],[-174,376],[-137.5,343.5],[-145.5,378.5],[-101.5,340.5],[-80,297],[-114,368.5],[-80.5,357]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":23,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.28],"y":[1]},"o":{"x":[0.72],"y":[0]},"t":53,"s":[0]},{"t":113,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":53,"op":282,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"visual","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.95],"y":[1]},"o":{"x":[0.72],"y":[0]},"t":209,"s":[540]},{"t":239,"s":[-16]}],"ix":3},"y":{"a":0,"k":1310,"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[96,96,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-3.14],[1.204,-1.936],[2.355,-3.716],[3.35,-5.757],[3.559,-6.961],[1.832,-4.606],[0,-3.297],[-2.774,-1.989],[-3.245,3.611],[-3.14,4.449],[-4.135,6.804],[-3.245,5.705],[0.209,0.471],[0,0.314],[-0.994,2.146],[-1.465,2.041],[-2.983,3.716],[-1.151,0],[0,-2.407],[1.989,-5.181],[3.821,-6.961],[5.705,-8.636],[7.17,-9.368],[3.14,0],[2.25,1.989],[1.622,3.402],[0,3.873],[-0.942,3.611],[-2.041,5.024],[-2.617,4.92],[-2.041,3.402],[-2.617,4.135],[0,0.366],[1.047,0],[5.077,-3.088],[8.112,-6.28],[0.785,-0.733],[0,-0.471],[-0.994,0],[-2.407,0.314],[-1.413,0],[0,-0.837],[0.994,-0.419],[1.727,-0.419],[2.931,-0.733],[3.507,-1.57],[0.523,0],[0.209,0.733],[0,1.675],[-2.46,4.03],[-6.333,4.396],[-6.594,3.297],[-4.763,1.518],[-2.25,0],[-2.146,-2.826]],"o":[[0,0.471],[-1.204,1.884],[-2.355,3.664],[-3.35,5.705],[-4.082,8.008],[-1.779,4.553],[0,2.617],[3.35,-2.617],[3.245,-3.611],[3.193,-4.449],[4.187,-6.804],[-0.157,-0.471],[-0.157,-0.471],[0,-2.46],[0.994,-2.146],[1.518,-2.041],[0.785,-0.994],[1.884,0],[0,2.408],[-1.936,5.129],[-3.821,6.961],[-5.652,8.583],[-7.275,9.473],[-1.779,0],[-2.25,-1.936],[-1.622,-3.402],[0,-2.303],[0.994,-3.611],[2.093,-5.077],[2.721,-5.181],[2.093,-3.402],[2.617,-4.187],[0,-0.785],[-3.036,0],[-5.024,3.088],[-3.088,2.408],[-0.837,0.68],[0,0.628],[0.419,0],[2.408,-0.314],[2.355,0],[0,0.733],[-0.942,0.419],[-1.675,0.419],[-3.14,0.837],[-3.559,1.57],[-0.994,0],[-0.262,-0.733],[0,-7.432],[2.46,-4.082],[7.222,-5.024],[6.594,-3.35],[4.815,-1.57],[2.198,0],[2.198,2.826]],"v":[[-351.939,-56.327],[-353.744,-52.716],[-359.083,-44.316],[-367.64,-30.185],[-378.002,-11.187],[-386.873,7.733],[-389.543,19.509],[-385.382,26.417],[-375.49,17.075],[-365.913,4.985],[-354.922,-11.894],[-343.774,-30.656],[-344.324,-32.069],[-344.559,-33.247],[-343.068,-40.155],[-339.378,-46.436],[-332.626,-55.071],[-329.722,-56.563],[-326.896,-52.952],[-329.879,-41.568],[-338.514,-23.434],[-352.802,-0.039],[-372.036,26.888],[-387.658,41.097],[-393.703,38.114],[-399.513,30.107],[-401.946,19.195],[-400.533,10.323],[-395.98,-2.63],[-388.915,-17.624],[-381.771,-30.499],[-374.705,-41.804],[-370.78,-48.634],[-372.35,-49.812],[-384.518,-45.18],[-404.223,-31.127],[-410.032,-26.417],[-411.289,-24.69],[-409.797,-23.748],[-405.558,-24.219],[-399.827,-24.69],[-396.294,-23.434],[-397.786,-21.707],[-401.789,-20.451],[-408.698,-18.723],[-418.668,-15.112],[-424.791,-12.757],[-426.597,-13.856],[-426.99,-17.467],[-423.3,-34.66],[-410.111,-47.378],[-389.386,-59.86],[-372.35,-67.161],[-361.752,-69.516],[-355.236,-65.277]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[2.46,0],[1.204,0.994],[0,1.518],[-2.198,2.826],[-2.355,0],[-1.047,-0.994],[0,-1.832],[2.146,-2.721]],"o":[[-1.308,0],[-1.151,-0.994],[0,-2.303],[2.198,-2.826],[1.57,0],[1.047,0.942],[0,2.251],[-2.146,2.722]],"v":[[-308.839,-27.438],[-312.608,-28.929],[-314.335,-32.697],[-311.037,-40.391],[-304.207,-44.63],[-300.282,-43.139],[-298.712,-38.978],[-301.931,-31.52]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[-4.71,3.978],[0,0],[4.396,-3.35],[3.088,0],[2.093,4.501],[0,5.338],[-0.419,1.832],[-0.576,1.204],[-1.57,2.565],[-6.176,0],[0,-2.46],[2.093,-3.559],[1.622,-1.518],[1.413,-1.727],[0,-2.198],[-1.413,-1.256],[-2.25,0],[-2.931,1.779]],"o":[[0,0],[-5.077,6.542],[-4.396,3.297],[-4.292,0],[-2.093,-4.501],[0,-2.041],[0.419,-1.884],[0.576,-1.204],[7.432,-11.566],[3.193,0],[0,1.675],[-2.041,3.559],[-4.553,4.396],[-1.361,1.727],[0,1.884],[1.413,1.256],[2.46,0],[2.983,-1.832]],"v":[[-303.501,7.654],[-303.501,13.385],[-317.71,28.223],[-328.937,33.168],[-338.514,26.417],[-341.654,11.658],[-341.026,5.849],[-339.535,1.217],[-336.316,-4.436],[-315.905,-21.785],[-311.116,-18.095],[-314.256,-10.245],[-319.752,-2.63],[-328.701,6.555],[-330.742,12.443],[-328.623,17.153],[-323.127,19.038],[-315.041,16.368]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[0,3.925],[0,0],[-5.077,5.705],[-4.396,0],[-1.256,-0.628],[0,0],[0,-1.151],[-0.733,-2.721],[-0.419,-1.832],[0,-2.303],[1.57,-3.193],[2.983,-2.931],[4.71,-3.036],[-1.099,0],[-2.46,1.047],[-2.565,1.779],[-3.454,2.879],[0,0],[5.286,-3.402],[3.821,0],[4.187,4.187],[0.628,2.303]],"o":[[0,0],[13.503,-14.236],[1.151,-6.437],[1.099,0],[0,0],[-0.209,0.628],[0,0.994],[0.785,2.669],[0.419,1.832],[0,3.454],[-1.57,3.14],[-2.983,2.879],[1.884,0.314],[2.146,0],[2.512,-1.099],[2.617,-1.832],[0,0],[-6.699,6.542],[-5.286,3.35],[-4.92,0],[-2.46,-2.512],[-0.576,-2.303]],"v":[[-304.443,9.852],[-304.443,7.968],[-276.574,-21.942],[-268.252,-31.598],[-264.719,-30.656],[-264.248,-29.165],[-264.562,-26.495],[-263.463,-20.922],[-261.658,-14.17],[-261.03,-7.968],[-263.385,2.002],[-270.215,11.108],[-281.755,19.98],[-277.28,20.451],[-270.372,18.88],[-262.757,14.563],[-253.65,7.497],[-253.65,12.757],[-271.628,27.673],[-285.288,32.697],[-298.948,26.417],[-303.579,19.195]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":4,"ty":"sh","ix":5,"ks":{"a":0,"k":{"i":[[0.052,0.419],[0,0],[10.624,-10.415],[-1.151,-1.151],[-2.093,-3.297],[-1.884,2.512],[0,4.396],[0.052,0.419]],"o":[[0,0],[-3.245,3.664],[3.14,0.68],[1.151,1.151],[3.559,-1.465],[1.936,-2.564],[0,-0.523],[0,-0.419]],"v":[[-275.161,-2.159],[-276.574,-13.621],[-297.378,7.497],[-290.94,10.245],[-286.073,16.918],[-277.908,10.951],[-275.004,0.51],[-275.082,-0.903]],"c":true},"ix":2},"nm":"Path 5","mn":"ADBE Vector Shape - Group","hd":false},{"ind":5,"ty":"sh","ix":6,"ks":{"a":0,"k":{"i":[[-2.931,6.385],[3.978,-4.239],[2.512,0],[1.675,1.622],[0.942,2.774],[0,3.193],[-0.366,1.675],[-1.099,1.989],[-1.779,2.355],[-2.617,2.983],[-1.047,1.256],[-0.994,0.419],[-2.303,0],[-1.518,-0.471],[0,-0.471],[1.57,-2.46],[3.454,-3.559],[4.501,-3.402],[0,-1.622],[-1.727,0],[-1.465,1.047],[-3.454,3.036],[-2.774,2.355],[-2.669,3.507],[-1.675,1.779],[-1.413,1.204],[-1.308,0],[-0.419,-0.785],[0,-2.407],[0.209,-0.68],[0.68,-1.099],[1.989,-2.879],[2.722,-3.925],[1.099,-2.512],[0,-1.256],[-2.146,0],[-2.355,1.465],[-4.867,3.821],[0,0],[2.931,-2.565],[2.146,-1.308],[1.936,0],[0,5.234],[-1.308,3.35]],"o":[[-7.589,10.049],[-3.925,4.239],[-1.989,0],[-1.675,-1.675],[-0.89,-2.826],[0,-2.093],[0.419,-1.675],[1.099,-2.041],[1.832,-2.355],[1.57,-1.832],[1.099,-1.256],[1.047,-0.471],[1.675,0],[1.518,0.419],[0,0.942],[-1.518,2.46],[-3.402,3.507],[-0.994,3.088],[0,2.251],[0.628,0],[1.465,-1.099],[3.507,-3.088],[2.041,-1.779],[2.721,-3.559],[3.873,-4.082],[1.413,-1.256],[1.256,0],[0.471,0.785],[0,1.099],[-0.209,0.68],[-0.628,1.047],[-1.989,2.879],[-1.465,2.094],[-1.099,2.46],[0,2.722],[1.779,0],[2.355,-1.465],[0,0],[-6.123,5.652],[-2.931,2.564],[-2.146,1.308],[-4.396,0],[0,-1.989],[1.308,-3.402]],"v":[[-216.91,2.316],[-234.259,23.748],[-243.916,30.107],[-249.411,27.673],[-253.336,21],[-254.671,11.972],[-254.121,6.32],[-251.845,0.824],[-247.527,-5.77],[-240.854,-13.778],[-236.929,-18.409],[-233.788,-20.922],[-228.764,-21.628],[-223.975,-20.922],[-221.699,-19.587],[-224.054,-14.484],[-231.512,-5.456],[-243.366,4.907],[-244.858,11.972],[-242.267,15.348],[-239.127,13.778],[-231.747,7.576],[-222.327,-0.589],[-215.261,-8.518],[-208.667,-16.525],[-200.738,-24.454],[-196.655,-26.338],[-194.143,-25.161],[-193.437,-20.372],[-193.751,-17.703],[-195.085,-15.034],[-199.011,-9.146],[-206.076,1.06],[-209.923,7.968],[-211.571,13.542],[-208.353,17.624],[-202.151,15.426],[-191.317,7.497],[-191.317,12.757],[-204.898,25.082],[-212.513,30.892],[-218.637,32.854],[-225.231,25.004],[-223.269,16.996]],"c":true},"ix":2},"nm":"Path 6","mn":"ADBE Vector Shape - Group","hd":false},{"ind":6,"ty":"sh","ix":7,"ks":{"a":0,"k":{"i":[[-2.983,2.826],[-7.484,3.507],[-4.082,0],[-0.942,-0.942],[-0.523,-1.204],[0,-0.576],[0.733,-0.471],[1.832,-0.628],[-0.576,-1.308],[-0.314,-0.837],[0,-0.628],[2.564,-3.454],[1.047,-1.622],[0,-2.355],[-3.559,0],[-7.798,6.856],[0,0],[5.705,0],[0.89,1.361],[0,2.617],[-2.983,7.851],[3.716,-3.611],[2.408,0],[1.727,1.989],[1.361,3.14],[0,3.402],[-0.471,1.622],[-1.361,1.727]],"o":[[7.955,-7.222],[7.484,-3.507],[1.099,0],[0.942,0.89],[0.576,1.204],[0,0.942],[-0.733,0.419],[0.366,0.837],[0.576,1.308],[0.314,0.785],[0,1.256],[-2.512,3.402],[-0.994,1.622],[0,3.873],[3.664,0],[0,0],[-13.241,14.707],[-2.041,0],[-0.837,-1.308],[0,-4.135],[-7.641,8.479],[-3.716,3.559],[-1.151,0],[-1.727,-1.989],[-1.308,-3.193],[0,-2.46],[0.471,-1.675],[1.361,-1.727]],"v":[[-182.839,-6.398],[-159.679,-22.492],[-142.33,-27.752],[-139.268,-26.338],[-137.07,-23.198],[-136.206,-20.529],[-137.306,-18.409],[-141.152,-16.839],[-139.739,-13.621],[-138.405,-10.402],[-137.934,-8.282],[-141.78,-1.217],[-147.119,6.32],[-148.61,12.286],[-143.272,18.095],[-126.079,7.811],[-126.079,12.6],[-154.498,34.66],[-158.894,32.619],[-160.151,26.731],[-155.676,8.753],[-172.711,26.888],[-181.896,32.226],[-186.214,29.243],[-190.846,21.55],[-192.809,11.658],[-192.102,5.535],[-189.354,0.432]],"c":true},"ix":2},"nm":"Path 7","mn":"ADBE Vector Shape - Group","hd":false},{"ind":7,"ty":"sh","ix":8,"ks":{"a":0,"k":{"i":[[-6.385,8.95],[5.809,-4.344],[0,-4.606],[-0.576,-1.099],[-0.994,0],[-1.465,0.733],[-4.553,5.181]],"o":[[-13.608,6.228],[-5.757,4.344],[0,1.675],[0.576,1.047],[0.576,0],[5.495,-3.245],[4.553,-5.234]],"v":[[-145.235,-15.034],[-174.36,0.824],[-182.996,14.249],[-182.132,18.41],[-179.777,19.98],[-176.715,18.88],[-161.642,6.241]],"c":true},"ix":2},"nm":"Path 8","mn":"ADBE Vector Shape - Group","hd":false},{"ind":8,"ty":"sh","ix":9,"ks":{"a":0,"k":{"i":[[-4.867,4.501],[0,0],[6.856,0],[2.146,4.03],[0,6.594],[-2.512,7.327],[-4.187,7.536],[-4.501,5.6],[-3.873,2.251],[-0.89,0],[-0.366,-0.994],[0,-2.355],[5.914,-10.624],[10.572,-11.043],[0,-1.465],[-1.413,-2.094],[-2.565,0],[-1.518,0.994],[-1.675,1.518]],"o":[[0,0],[-10.938,14.497],[-3.716,0],[-2.094,-4.082],[0,-5.338],[2.512,-7.379],[4.239,-7.589],[4.553,-5.652],[1.57,-0.942],[1.099,0],[0.366,0.942],[0,7.275],[-5.914,10.572],[-0.523,2.722],[0,3.35],[1.465,2.093],[1.308,0],[1.518,-1.047],[1.675,-1.518]],"v":[[-89.182,6.791],[-89.182,12.6],[-115.874,34.346],[-124.666,28.301],[-127.806,12.286],[-124.038,-6.712],[-113.989,-29.086],[-100.879,-48.869],[-88.24,-60.724],[-84.55,-62.137],[-82.352,-60.645],[-81.802,-55.699],[-90.673,-28.851],[-115.403,3.572],[-116.188,9.852],[-114.068,18.017],[-108.023,21.157],[-103.784,19.666],[-98.995,15.819]],"c":true},"ix":2},"nm":"Path 9","mn":"ADBE Vector Shape - Group","hd":false},{"ind":9,"ty":"sh","ix":10,"ks":{"a":0,"k":{"i":[[1.675,-7.746],[-2.512,3.402],[-2.251,3.873],[-1.256,3.088],[0,1.57],[0.837,0],[0.89,-0.576],[3.978,-7.641]],"o":[[2.721,-2.669],[2.564,-3.402],[2.25,-3.873],[1.308,-3.088],[0,-1.204],[-0.314,0],[-3.193,2.617],[-3.978,7.589]],"v":[[-112.655,-7.34],[-104.804,-16.447],[-97.582,-27.359],[-92.322,-37.8],[-90.359,-44.787],[-91.616,-46.593],[-93.421,-45.729],[-104.176,-30.342]],"c":true},"ix":2},"nm":"Path 10","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":11,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":52,"op":282,"st":30,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"cortina centro lottie","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,1324,0],"ix":2},"a":{"a":0,"k":[540,1920,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1080,"h":3840,"ip":140,"op":282,"st":140,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"WL","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":540,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.6],"y":[1]},"o":{"x":[0.4],"y":[0]},"t":14,"s":[960]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":43,"s":[769]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.96],"y":[0]},"t":368,"s":[769]},{"t":412,"s":[-901]}],"ix":4}},"a":{"a":0,"k":[960,1920,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.21,0.21,0.21],"y":[1,1,1]},"o":{"x":[0.79,0.79,0.79],"y":[0,0,0]},"t":14,"s":[57,57,100]},{"t":34,"s":[45,45,100]}],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[0,0],[0,0],[34.043,-25.532],[4.255,-38.298],[6.383,-2.127],[0,0],[0,0]],"o":[[0,0],[0,0],[-34.043,25.532],[-4.255,38.298],[-6.383,2.127],[0,0],[0,0]],"v":[[966.383,1505.107],[568.511,1777.447],[-231.489,2264.681],[-242.128,4237.021],[2213.191,4302.979],[2242.979,2534.894],[1377.022,1824.256]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"tm":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":118,"s":[1.65]}],"ix":2},"w":1920,"h":3840,"ip":0,"op":219,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Layer 1","parent":6,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[959.023,2453.553,0],"ix":2},"a":{"a":0,"k":[539.56,969.099,0],"ix":1},"s":{"a":0,"k":[666.667,666.667,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,1.505],[2.484,0],[0,5.768],[-5.569,0],[-0.921,-1.762],[0,0],[-0.544,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0]],"o":[[-0.921,1.762],[-5.568,0],[0,-5.768],[2.483,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0],[0,0.544],[0,0],[-1.505,0]],"v":[[4.587,11.057],[-1.302,14.261],[-10.716,4.126],[-1.302,-6.01],[4.587,-2.765],[4.587,-13.276],[5.572,-14.261],[9.732,-14.261],[10.716,-13.276],[10.716,12.796],[9.732,13.781],[7.312,13.781]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,2.685],[2.765,0],[0,-2.644],[-2.764,0]],"o":[[0,-2.644],[-2.765,0],[0,2.685],[2.765,0.001]],"v":[[4.587,4.126],[-0.019,-0.802],[-4.626,4.126],[-0.019,9.053]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[545.545,969.698],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0.586,0.078],[0.411,0],[0,-4.728],[0,0],[0.544,0],[0,0],[0,0.544],[0,0],[-0.544,0],[0,0],[0,-0.544],[0,0],[-2.685,0],[-0.303,-0.053],[0,-0.481]],"o":[[0,0.591],[-0.323,-0.043],[-3.366,0],[0,0],[0,0.544],[0,0],[-0.544,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0],[0.881,-1.802],[0.392,0],[0.473,0.083],[0,0]],"v":[[6.93,-5.121],[5.826,-4.144],[4.766,-4.206],[-0.802,2.284],[-0.802,8.831],[-1.786,9.815],[-5.945,9.815],[-6.93,8.831],[-6.93,-8.509],[-5.945,-9.494],[-1.786,-9.494],[-0.802,-8.509],[-0.802,-6.37],[5.087,-9.815],[6.11,-9.74],[6.93,-8.768]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[527.75,973.664],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,5.528],[-6.65,0],[0,-5.529],[6.73,0]],"o":[[0,-5.528],[6.73,0],[0,5.528],[-6.65,0]],"v":[[-10.716,0],[-0.02,-10.176],[10.716,0],[-0.02,10.176]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,2.725],[2.805,0],[0,-2.685],[-2.765,0]],"o":[[0,-2.685],[-2.765,0],[0,2.725],[2.804,0.001]],"v":[[4.628,0],[-0.019,-4.928],[-4.586,0],[-0.019,4.927]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[508.274,973.824],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 9","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0.43,0],[0,0],[0.139,0.394],[0,0],[-0.68,0],[0,0],[-0.128,-0.412],[0,0],[0,0],[-0.432,0],[0,0],[-0.128,-0.412],[0,0],[0,0],[-0.432,0],[0,0],[0.226,-0.641],[0,0],[0.419,0],[0,0],[0.129,0.409]],"o":[[0,0],[-0.129,0.409],[0,0],[-0.417,0],[0,0],[-0.226,-0.641],[0,0],[0.431,0],[0,0],[0,0],[0.127,-0.412],[0,0],[0.431,0],[0,0],[0,0],[0.127,-0.412],[0,0],[0.68,0],[0,0],[-0.138,0.394],[0,0],[-0.43,0],[0,0]],"v":[[0.021,-3.606],[-5.33,13.333],[-6.27,14.022],[-10.179,14.022],[-11.108,13.364],[-20.309,-12.709],[-19.379,-14.022],[-14.646,-14.022],[-13.706,-13.329],[-8.192,4.367],[-2.718,-13.327],[-1.778,-14.022],[1.779,-14.022],[2.719,-13.329],[8.233,4.367],[13.707,-13.327],[14.647,-14.022],[19.379,-14.022],[20.309,-12.709],[11.109,13.364],[10.18,14.022],[6.311,14.022],[5.371,13.333]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[480.366,969.457],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 10","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[512,968],"ix":2},"a":{"a":0,"k":[512,968],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.24,0.24],"y":[1,1]},"o":{"x":[0.76,0.76],"y":[0,0]},"t":22,"s":[0,0]},{"i":{"x":[0.24,0.24],"y":[1,1]},"o":{"x":[0.76,0.76],"y":[0,0]},"t":37,"s":[119,119]},{"t":52,"s":[100,100]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"word","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-0.761,-1.756],[-0.761,-1.023],[-1.678,-1.023],[-1.678,1.756],[-2.476,1.756],[-2.476,-1.023],[-3.393,-1.023],[-3.393,-1.756]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[1.55,0.234],[2.907,-1.756],[3.393,-1.756],[3.393,1.756],[2.577,1.756],[2.577,0.078],[1.742,1.279],[1.339,1.279],[0.504,0.078],[0.504,1.756],[-0.313,1.756],[-0.313,-1.756],[0.183,-1.756]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[615.727,957.226],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0.325,-0.046],[1.464,0],[0,6.45],[0,0],[0.182,0],[0,0],[0,0.544],[0,0],[-0.404,0],[0,1.277],[0,0],[-0.544,0],[0,0],[0,-0.544],[0,0],[-0.182,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0],[0,-0.182],[0,0],[-1.522,0],[-0.472,0.034],[0,-0.381]],"o":[[0,0.328],[-0.883,0.125],[-2.885,0],[0,0],[0,-0.182],[0,0],[-0.544,0],[0,0],[0,-0.404],[1.277,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0],[0,0.182],[0,0],[0.544,0],[0,0],[0,0.544],[0,0],[-0.182,0],[0,0],[0,2.845],[0.49,0],[0.378,-0.027],[0,0]],"v":[[6.99,11.798],[6.425,12.448],[2.905,12.679],[-3.946,5.869],[-3.946,-2.056],[-4.274,-2.384],[-6.006,-2.384],[-6.99,-3.369],[-6.99,-6.218],[-6.258,-6.951],[-3.946,-9.263],[-3.946,-11.694],[-2.961,-12.679],[1.158,-12.679],[2.142,-11.694],[2.142,-7.279],[2.471,-6.951],[5.563,-6.951],[6.548,-5.966],[6.548,-3.37],[5.563,-2.385],[2.471,-2.385],[2.142,-2.057],[2.142,4.505],[4.787,7.79],[6.291,7.74],[6.99,8.395]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[607.888,971.12],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-3.766],[4.807,0],[0.528,3.754],[-0.593,0],[0,0],[-0.043,-0.323],[-1.627,0],[0,1.281],[3.646,1.202],[0,3.727],[-5.208,0],[-0.51,-3.126],[0.598,0],[0,0],[0.045,0.318],[1.479,0],[0,-1.161],[-3.246,-1.082]],"o":[[0,4.567],[-5.014,0],[-0.083,-0.588],[0,0],[0.326,0],[0.22,1.628],[1.482,0],[0,-1.482],[-3.205,-1.001],[0,-4.006],[5.025,0],[0.096,0.59],[0,0],[-0.321,0],[-0.178,-1.262],[-1.242,0],[0,1.402],[3.406,1.001]],"v":[[8.78,3.966],[0.047,10.175],[-8.77,4.315],[-7.792,3.205],[-3.45,3.205],[-2.801,3.769],[0.247,6.05],[2.771,4.247],[-2.397,1.363],[-8.366,-4.286],[0.166,-10.175],[8.411,-4.766],[7.434,-3.645],[3.06,-3.645],[2.413,-4.195],[-0.074,-6.169],[-2.357,-4.446],[2.571,-1.722]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[591.514,973.824],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.545,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0],[0,0.544],[0,0]],"o":[[0,0],[0.544,0],[0,0],[0,0.544],[0,0],[-0.544,0],[0,0],[-0.001,-0.544]],"v":[[-2.079,-9.654],[2.079,-9.654],[3.064,-8.669],[3.064,8.67],[2.079,9.654],[-2.079,9.654],[-3.064,8.67],[-3.064,-8.669]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[577.825,973.824],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.02,0],[0,-1.983],[2.057,0],[0,1.947]],"o":[[2.057,0],[0,1.947],[-2.02,0],[0,-1.984]],"v":[[-0.018,-3.563],[3.617,0],[-0.018,3.563],[-3.617,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[577.824,957.76],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.545],[0,0],[0.544,0],[0,0],[0,0.544],[0,0],[-0.544,0],[0,0],[0,-0.544],[0,0],[-0.362,0],[0,0]],"o":[[0,0],[0,0.544],[0,0],[-0.544,0],[0,0],[0,-0.544],[0,0],[0.544,0],[0,0],[0,0.363],[0,0],[0.544,0]],"v":[[7.23,9.398],[7.23,13.036],[6.246,14.021],[-6.246,14.021],[-7.23,13.036],[-7.23,-13.036],[-6.246,-14.021],[-1.726,-14.021],[-0.741,-13.036],[-0.741,7.756],[-0.085,8.412],[6.246,8.412]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[565.822,969.458],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":2,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[588,972],"ix":2},"a":{"a":0,"k":[588,972],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.24,0.24],"y":[1,1]},"o":{"x":[0.76,0.76],"y":[0,0]},"t":31,"s":[0,0]},{"i":{"x":[0.24,0.24],"y":[1,1]},"o":{"x":[0.76,0.76],"y":[0,0]},"t":46,"s":[119,119]},{"t":61,"s":[100,100]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"list","np":6,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":22,"op":219,"st":22,"bm":0}],"markers":[]}

video-editor-html/doctorsimage.webp ADDED Viewed

video-editor-html/image.png ADDED Viewed

video-editor-html/index.html ADDED Viewed

	@@ -0,0 +1,687 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animation Editor</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <style>
+        /* Reset and Basic Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Montserrat', sans-serif;
+        }
+        body {
+            width: 100vw;
+            height: 100vh;
+            background: #121212; /* Darker background */
+            color: #eee;
+            overflow: hidden; /* Prevent scrollbars */
+        }
+        .editor-container {
+            display: grid;
+            grid-template-columns: 1fr 320px; /* Wider controls panel */
+            height: 100vh;
+            gap: 1rem; /* Consistent gap */
+            padding: 1rem;
+        }
+        .preview-container {
+            background: #222; /* Darker preview background */
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow */
+        }
+        .controls-container {
+            background: #222; /* Darker controls background */
+            border-radius: 8px;
+            padding: 1rem;
+            overflow-y: auto;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow */
+        }
+        .control-group {
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+            background: #333; /* Slightly lighter control group background */
+            border-radius: 6px;
+        }
+        .control-group h3 {
+            margin-bottom: 0.75rem;
+            color: #fff;
+            font-size: 1rem;
+            font-weight: 600;
+        }
+        .control-item {
+            margin-bottom: 0.75rem;
+        }
+        .control-item label {
+            display: block;
+            margin-bottom: 0.25rem;
+            font-size: 0.8rem;
+            color: #aaa;
+        }
+        input[type="text"],
+        input[type="number"],
+        input[type="file"] {
+            width: 100%;
+            padding: 0.5rem;
+            background: #444;
+            border: 1px solid #555;
+            border-radius: 4px;
+            color: #fff;
+            font-size: 0.9rem;
+            transition: border-color 0.2s, background-color 0.2s; /* Smooth transitions */
+        }
+        input[type="text"]:focus,
+        input[type="number"]:focus {
+            border-color: #4CAF50; /* Highlight on focus */
+            background-color: #555;
+            outline: none;
+        }
+        /* Custom File Input Styling */
+        input[type="file"] {
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        input[type="file"]::file-selector-button {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            margin-right: 0.5rem;
+            font-size: 0.9rem;
+        }
+        input[type="file"]::file-selector-button:hover {
+            background-color: #45a049;
+        }
+        /* Button Styles */
+        button {
+            padding: 0.5rem 1rem;
+            background: #4CAF50;
+            border: none;
+            border-radius: 4px;
+            color: white;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #45a049;
+        }
+        .playback-controls {
+            display: flex;
+            gap: 0.5rem;
+        }
+        .timeline-container {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 0.5rem;
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+        .timeline {
+            flex-grow: 1;
+            height: 10px; /* Thinner timeline */
+            background: #444;
+            border-radius: 5px;
+            position: relative;
+            cursor: pointer;
+        }
+        .timeline-progress {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            background: #4CAF50;
+            border-radius: 5px;
+            pointer-events: none;
+        }
+        .speed-control {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .speed-control input {
+            width: 4rem; /* Wider speed input */
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .save-export {
+            margin-top: 1rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+        .save-export button {
+            flex: 1;
+        }
+        .export-btn {
+            background: #2196F3;
+        }
+        .export-btn:hover {
+            background: #1976D2;
+        }
+        .save-btn {
+            background: #9C27B0;
+        }
+        .save-btn:hover {
+            background: #7B1FA2;
+        }
+        /* Drag and Drop Styling */
+        .drop-zone {
+            border: 2px dashed #aaa;
+            border-radius: 4px;
+            padding: 1rem;
+            text-align: center;
+            cursor: pointer;
+            margin-bottom: 0.5rem;
+            transition: border-color 0.2s, background-color 0.2s;
+            position: relative;
+            min-height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-position: center;
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+        .drop-zone.has-image:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.4);
+            z-index: 1;
+        }
+        .drop-zone.has-image:after {
+            content: 'Click or drop to change';
+            position: absolute;
+            color: white;
+            font-size: 0.8rem;
+            z-index: 2;
+        }
+        .drop-zone.drag-over {
+            border-color: #4CAF50;
+            background-color: rgba(76, 175, 80, 0.1);
+        }
+        .drop-zone-text {
+            position: relative;
+            z-index: 2;
+        }
+    </style>
+</head>
+<body>
+    <div class="editor-container">
+        <div class="preview-container">
+            <iframe id="preview" src="video-animation copy BUENO BUENO BUENO copy.html"></iframe>
+            <div class="timeline-container">
+                <div class="playback-controls">
+                    <button id="playPause">Play</button>
+                    <button id="reset">Reset</button>
+                </div>
+                <div class="timeline">
+                    <div class="timeline-progress"></div>
+                </div>
+                <div class="speed-control">
+                    <label>Speed:</label>
+                    <input type="number" id="speed" value="1" min="0.1" max="2" step="0.1">
+                </div>
+            </div>
+        </div>
+        <div class="controls-container">
+            <!-- Title Section -->
+            <div class="control-group">
+                <h3>Title Section</h3>
+                <div class="control-item">
+                    <label>Lista Text</label>
+                    <input type="text" id="listaText" value="LISTA">
+                </div>
+                <div class="control-item">
+                    <label>Profesiones Text</label>
+                    <input type="text" id="profesionesText" value="PROFESIONES">
+                </div>
+            </div>
+            <!-- Doctor Section -->
+            <div class="control-group">
+                <h3>Doctor Section</h3>
+                <div class="control-item">
+                    <label>English Word</label>
+                    <input type="text" id="doctorEnglish" value="doctor">
+                </div>
+                <div class="control-item">
+                    <label>Spanish Word</label>
+                    <input type="text" id="doctorSpanish" value="médico">
+                </div>
+                <div class="control-item">
+                    <label>English Sentence</label>
+                    <input type="text" id="doctorEnglishSentence" value="He wants to be a doctor.">
+                </div>
+                <div class="control-item">
+                    <label>Spanish Sentence</label>
+                    <input type="text" id="doctorSpanishSentence" value="Él quiere ser médico.">
+                </div>
+                <div class="control-item">
+                    <label>Doctor Image</label>
+                    <div class="drop-zone" id="doctorDropZone">
+                        <span class="drop-zone-text">Drag and drop or click to upload</span>
+                        <input type="file" id="doctorImage" accept="image/*" style="display: none;">
+                    </div>
+                </div>
+            </div>
+            <!-- Teacher Section -->
+            <div class="control-group">
+                <h3>Teacher Section</h3>
+                <div class="control-item">
+                    <label>English Word</label>
+                    <input type="text" id="teacherEnglish" value="teacher">
+                </div>
+                <div class="control-item">
+                    <label>Spanish Word</label>
+                    <input type="text" id="teacherSpanish" value="profesor">
+                </div>
+                <div class="control-item">
+                    <label>English Sentence</label>
+                    <input type="text" id="teacherEnglishSentence" value="She is a teacher.">
+                </div>
+                <div class="control-item">
+                    <label>Spanish Sentence</label>
+                    <input type="text" id="teacherSpanishSentence" value="Ella es profesora.">
+                </div>
+                <div class="control-item">
+                    <label>Teacher Image</label>
+                     <div class="drop-zone" id="teacherDropZone">
+                        <span class="drop-zone-text">Drag and drop or click to upload</span>
+                        <input type="file" id="teacherImage" accept="image/*" style="display: none;">
+                    </div>
+                </div>
+            </div>
+            <!-- Outro Section -->
+            <div class="control-group">
+                <h3>Outro Section</h3>
+                <div class="control-item">
+                    <label>Thank You Text</label>
+                    <input type="text" id="thankYouText" value="Gracias! Thank you!">
+                </div>
+                <div class="control-item">
+                    <label>Learned Text</label>
+                    <input type="text" id="learnedText" value="You've learned new profession vocabulary">
+                </div>
+            </div>
+            <!-- Save/Export -->
+            <div class="save-export">
+                <button id="saveBtn" class="save-btn">Save Changes</button>
+                <button id="exportBtn" class="export-btn">Export Animation</button>
+            </div>
+        </div>
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const preview = document.getElementById('preview');
+        const playPauseBtn = document.getElementById('playPause');
+        const resetBtn = document.getElementById('reset');
+        const timeline = document.querySelector('.timeline');
+        const timelineProgress = document.querySelector('.timeline-progress');
+        const speedInput = document.getElementById('speed');
+        let isPlaying = false;
+        let animationStartTime = 0;
+        let currentTime = 0;
+        const totalDuration = 20000; // 20 seconds total duration
+        // --- Data Management ---
+        // Function to get the animation state (for saving/exporting)
+        function getAnimationState() {
+            return {
+                listaText: document.getElementById('listaText').value,
+                profesionesText: document.getElementById('profesionesText').value,
+                doctorEnglish: document.getElementById('doctorEnglish').value,
+                doctorSpanish: document.getElementById('doctorSpanish').value,
+                doctorEnglishSentence: document.getElementById('doctorEnglishSentence').value,
+                doctorSpanishSentence: document.getElementById('doctorSpanishSentence').value,
+                doctorImage: localStorage.getItem('.doctor-image'), // Get image data URL from localStorage
+                teacherEnglish: document.getElementById('teacherEnglish').value,
+                teacherSpanish: document.getElementById('teacherSpanish').value,
+                teacherEnglishSentence: document.getElementById('teacherEnglishSentence').value,
+                teacherSpanishSentence: document.getElementById('teacherSpanishSentence').value,
+                teacherImage: localStorage.getItem('.teacher-image'), // Get image data URL from localStorage
+                thankYouText: document.getElementById('thankYouText').value,
+                learnedText: document.getElementById('learnedText').value,
+                speed: speedInput.value,
+            };
+        }
+        // Function to save the current state to localStorage
+        function saveState() {
+            const state = getAnimationState();
+            localStorage.setItem('animationState', JSON.stringify(state));
+            console.log('State saved:', state);
+        }
+        // Function to load the state from localStorage
+        function loadState() {
+            const savedState = localStorage.getItem('animationState');
+            if (savedState) {
+                const state = JSON.parse(savedState);
+                document.getElementById('listaText').value = state.listaText;
+                document.getElementById('profesionesText').value = state.profesionesText;
+                document.getElementById('doctorEnglish').value = state.doctorEnglish;
+                document.getElementById('doctorSpanish').value = state.doctorSpanish;
+                document.getElementById('doctorEnglishSentence').value = state.doctorEnglishSentence;
+                document.getElementById('doctorSpanishSentence').value = state.doctorSpanishSentence;
+                document.getElementById('teacherEnglish').value = state.teacherEnglish;
+                document.getElementById('teacherSpanish').value = state.teacherSpanish;
+                document.getElementById('teacherEnglishSentence').value = state.teacherEnglishSentence;
+                document.getElementById('teacherSpanishSentence').value = state.teacherSpanishSentence;
+                document.getElementById('thankYouText').value = state.thankYouText;
+                document.getElementById('learnedText').value = state.learnedText;
+                speedInput.value = state.speed;
+                // Load images (if available)
+                if (state.doctorImage) {
+                    preview.contentWindow.document.querySelector('.doctor-image').style.backgroundImage = `url(${state.doctorImage})`;
+                    // Also update the drop zone
+                    const doctorDropZone = document.getElementById('doctorDropZone');
+                    doctorDropZone.style.backgroundImage = `url(${state.doctorImage})`;
+                    doctorDropZone.classList.add('has-image');
+                }
+                if (state.teacherImage) {
+                    preview.contentWindow.document.querySelector('.teacher-image').style.backgroundImage = `url(${state.teacherImage})`;
+                    // Also update the drop zone
+                    const teacherDropZone = document.getElementById('teacherDropZone');
+                    teacherDropZone.style.backgroundImage = `url(${state.teacherImage})`;
+                    teacherDropZone.classList.add('has-image');
+                }
+                console.log('State loaded:', state);
+                updateAnimation(); // Update the iframe with the loaded state
+            }
+        }
+        // --- Animation Control ---
+        // Function to update the animation state in the iframe
+        function updateAnimation() {
+            const previewWindow = preview.contentWindow;
+            if (!previewWindow) return;
+            try {
+                // Update text content (same as before)
+                previewWindow.document.querySelector('.lista-text').textContent = document.getElementById('listaText').value;
+                previewWindow.document.querySelector('.profesiones-text').textContent = document.getElementById('profesionesText').value;
+                previewWindow.document.querySelector('.english-doctor').textContent = document.getElementById('doctorEnglish').value;
+                previewWindow.document.querySelector('.spanish-doctor').textContent = document.getElementById('doctorSpanish').value;
+                const doctorEnglishWord = document.getElementById('doctorEnglish').value;
+                const doctorEnglishSentence = document.getElementById('doctorEnglishSentence').value;
+                previewWindow.document.querySelector('.english-sentence-doctor').innerHTML = doctorEnglishSentence.includes(doctorEnglishWord) ? doctorEnglishSentence.replace(doctorEnglishWord, `<span class="doctor-highlight">${doctorEnglishWord}</span>`) : doctorEnglishSentence;
+                const doctorSpanishWord = document.getElementById('doctorSpanish').value;
+                const doctorSpanishSentence = document.getElementById('doctorSpanishSentence').value;
+                previewWindow.document.querySelector('.spanish-sentence-doctor').innerHTML = doctorSpanishSentence.includes(doctorSpanishWord) ? doctorSpanishSentence.replace(doctorSpanishWord, `<span class="medico-highlight">${doctorSpanishWord}</span>`) : doctorSpanishSentence;
+                previewWindow.document.querySelector('.english-teacher').textContent = document.getElementById('teacherEnglish').value;
+                previewWindow.document.querySelector('.spanish-teacher').textContent = document.getElementById('teacherSpanish').value;
+                const teacherEnglishWord = document.getElementById('teacherEnglish').value;
+                const teacherEnglishSentence = document.getElementById('teacherEnglishSentence').value;
+                previewWindow.document.querySelector('.english-sentence-teacher').innerHTML = teacherEnglishSentence.includes(teacherEnglishWord) ? teacherEnglishSentence.replace(teacherEnglishWord, `<span class="teacher-highlight">${teacherEnglishWord}</span>`) : teacherEnglishSentence;
+                const teacherSpanishWord = document.getElementById('teacherSpanish').value;
+                const teacherSpanishSentence = document.getElementById('teacherSpanishSentence').value;
+                previewWindow.document.querySelector('.spanish-sentence-teacher').innerHTML = teacherSpanishSentence.includes(teacherSpanishWord) ? teacherSpanishSentence.replace(teacherSpanishWord, `<span class="profesor-highlight">${teacherSpanishWord}</span>`) : teacherSpanishSentence;
+                previewWindow.document.querySelector('.thank-you').textContent = document.getElementById('thankYouText').value;
+                previewWindow.document.querySelector('.learned').textContent = document.getElementById('learnedText').value;
+                // Update animation speed
+                previewWindow.document.documentElement.style.setProperty('--speed-factor', speedInput.value);
+                if (previewWindow.animation) {
+                    previewWindow.animation.setSpeed(parseFloat(speedInput.value));
+                }
+                saveState(); // Save state after every update
+            } catch (error) {
+                console.error('Error updating animation:', error);
+            }
+        }
+        // --- Event Handlers ---
+        // Function to handle image uploads (with drag and drop)
+        function handleImageUpload(file, selector, dropZoneElement) {
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const imageUrl = e.target.result;
+                    // Update the preview iframe
+                    preview.contentWindow.document.querySelector(selector).style.backgroundImage = `url(${imageUrl})`;
+                    // Update the drop zone to show the thumbnail
+                    dropZoneElement.style.backgroundImage = `url(${imageUrl})`;
+                    dropZoneElement.classList.add('has-image');
+                    // Update the text inside drop zone
+                    const textElement = dropZoneElement.querySelector('.drop-zone-text');
+                    if (textElement) {
+                        textElement.textContent = 'Click or drop to change';
+                    }
+                    // Save to localStorage
+                    localStorage.setItem(selector, imageUrl);
+                    saveState();
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+        const doctorDropZone = document.getElementById('doctorDropZone');
+        const teacherDropZone = document.getElementById('teacherDropZone');
+        const doctorImageInput = document.getElementById('doctorImage');
+        const teacherImageInput = document.getElementById('teacherImage');
+        // Drag and drop events
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            doctorDropZone.addEventListener(eventName, preventDefaults, false);
+            teacherDropZone.addEventListener(eventName, preventDefaults, false);
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            doctorDropZone.addEventListener(eventName, () => doctorDropZone.classList.add('drag-over'), false);
+            teacherDropZone.addEventListener(eventName, () => teacherDropZone.classList.add('drag-over'), false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            doctorDropZone.addEventListener(eventName, () => doctorDropZone.classList.remove('drag-over'), false);
+            teacherDropZone.addEventListener(eventName, () => teacherDropZone.classList.remove('drag-over'), false);
+        });
+        doctorDropZone.addEventListener('drop', (e) => {
+            let dt = e.dataTransfer;
+            let files = dt.files;
+            handleImageUpload(files[0], '.doctor-image', doctorDropZone);
+        }, false);
+        teacherDropZone.addEventListener('drop', (e) => {
+            let dt = e.dataTransfer;
+            let files = dt.files;
+            handleImageUpload(files[0], '.teacher-image', teacherDropZone);
+        }, false);
+        // Click events for file input
+        doctorDropZone.addEventListener('click', () => doctorImageInput.click());
+        teacherDropZone.addEventListener('click', () => teacherImageInput.click());
+        doctorImageInput.addEventListener('change', (e) => handleImageUpload(e.target.files[0], '.doctor-image', doctorDropZone));
+        teacherImageInput.addEventListener('change', (e) => handleImageUpload(e.target.files[0], '.teacher-image', teacherDropZone));
+        // Handle text input changes
+        document.querySelectorAll('input[type="text"]').forEach(input => {
+            input.addEventListener('input', updateAnimation);
+        });
+        // Handle speed changes
+        speedInput.addEventListener('input', updateAnimation);
+        // Play/Pause functionality
+        playPauseBtn.addEventListener('click', function() {
+            const previewWindow = preview.contentWindow;
+            if (!previewWindow) return;
+            isPlaying = !isPlaying;
+            playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play';
+            if (isPlaying) {
+                // If we're at the end, reset first
+                if (currentTime >= totalDuration) {
+                    resetAnimation();
+                }
+                animationStartTime = Date.now() - currentTime;
+                requestAnimationFrame(updateTimeline);
+                // Start or resume animations in the iframe
+                if(previewWindow.startAnimationSequence && !previewWindow.animationStarted) {
+                    previewWindow.startAnimationSequence();
+                } else if (previewWindow.resumeAnimation) {
+                    previewWindow.resumeAnimation();
+                }
+            } else {
+                // Pause animations in the iframe
+                if (previewWindow.pauseAnimation) {
+                    previewWindow.pauseAnimation();
+                }
+            }
+        });
+        // Reset functionality
+        resetBtn.addEventListener('click', resetAnimation);
+        function resetAnimation() {
+            currentTime = 0;
+            animationStartTime = Date.now();
+            timelineProgress.style.width = '0%';
+            // Instead of reloading, we now reset the animation using the iframe's functions
+            const previewWindow = preview.contentWindow;
+            if (previewWindow && previewWindow.animation) {
+                previewWindow.animation.goToAndStop(0, true); // Reset Lottie animation
+                // Reset CSS animations by removing the 'paused' class (if present)
+                previewWindow.document.querySelector('.video-container').classList.remove('paused');
+                // And restarting the sequence
+                if (previewWindow.startAnimationSequence){
+                    previewWindow.animationStarted = false; // Allow it to be started again
+                    previewWindow.startAnimationSequence();
+                }
+            }
+            isPlaying = false;
+            playPauseBtn.textContent = 'Play';
+             updateAnimation(); // Ensure iframe is updated
+        }
+        // Timeline scrubbing (no actual seeking, just visual feedback)
+        timeline.addEventListener('click', function(e) {
+            const rect = timeline.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const percentage = x / rect.width;
+            currentTime = percentage * totalDuration;
+            timelineProgress.style.width = `${percentage * 100}%`;
+            console.log('Timeline clicked at percentage:', percentage); // For debugging
+        });
+        // Update timeline progress
+        function updateTimeline() {
+            if (!isPlaying) return;
+            currentTime = Date.now() - animationStartTime;
+            const progress = Math.min(currentTime / totalDuration, 1);
+            timelineProgress.style.width = `${progress * 100}%`;
+            if (progress < 1) {
+                requestAnimationFrame(updateTimeline);
+            } else {
+                isPlaying = false;
+                playPauseBtn.textContent = 'Play';
+            }
+        }
+        // Save changes (this button is now redundant, as we save on every change)
+        saveBtn.addEventListener('click', function() {
+            alert('Changes saved to local storage!'); // Keep the alert for user feedback
+        });
+        // Export animation (placeholder for now)
+        exportBtn.addEventListener('click', function() {
+            // Placeholder for export functionality
+            // Ideally, this would trigger a server-side process to generate a video
+            alert('Export functionality is not yet implemented.  In a full implementation, this would generate a video file of your animation.');
+        });
+        // --- Initialization ---
+        // Initialize when iframe loads
+        preview.addEventListener('load', function() {
+            loadState(); // Load saved state
+            updateAnimation(); // Update the iframe
+            // If the animation hasn't started yet (e.g., after a refresh), start it
+            const previewWindow = preview.contentWindow;
+            if (previewWindow && !previewWindow.animationStarted) {
+                // Don't auto-start: previewWindow.startAnimationSequence();
+            }
+        });
+    });
+    </script>
+</body>
+</html>

video-editor-html/video-animation copy BUENO BUENO BUENO copy.html ADDED Viewed

	@@ -0,0 +1,1267 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visual Learning - Professions Video</title>
+    <!-- Add Lottie library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js"></script>
+    <!-- Add Montserrat font -->
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <link rel="preload" href="./doctorsimage.webp" as="image">
+    <link rel="preload" href="../frames/final/frame_00300_sec_12_f00.jpg" as="image">
+    <link rel="preload" href="https://flagcdn.com/w80/es.png" as="image">
+    <link rel="preload" href="https://flagcdn.com/w80/gb.png" as="image">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            /* Global animation speed adjustment - now 20% faster than before */
+            animation-duration: calc(var(--original-duration, 1s) * 1) !important;
+        }
+        body {
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #000;
+            overflow: hidden;
+            font-family: 'Montserrat', sans-serif;
+        }
+        .video-container {
+            position: relative;
+            width: 100%;
+            max-width: 1920px;
+            aspect-ratio: 16 / 9;
+            background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
+            overflow: hidden;
+            transform: translateZ(0);
+            will-change: opacity;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+        /* Background video */
+        .background-video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: 0;
+        }
+        /* Background Elements - Reduced number and simplified */
+        .bg-shape {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.2;
+            background-color: #00BFFF;
+            filter: blur(30px);
+            will-change: transform;
+            transform: translateZ(0);
+        }
+        .bg-shape-1 {
+            width: 40%;
+            height: 40%;
+            top: -10%;
+            right: -10%;
+        }
+        .bg-shape-2 {
+            width: 35%;
+            height: 35%;
+            bottom: -10%;
+            right: 20%;
+        }
+        .bg-shape-3 {
+            width: 30%;
+            height: 30%;
+            bottom: -10%;
+            left: 10%;
+        }
+        /* Logo Section */
+        .logo-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 800px;
+            height: 800px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            opacity: 1;
+            z-index: 10;
+        }
+        /* Lottie container */
+        #lottie-container {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            opacity: 1;
+            transition: opacity 1s ease-out;
+        }
+        /* Lista Profesiones Section */
+        .title-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            opacity: 0;
+            z-index: 3;
+        }
+        .lista-wrapper {
+            position: relative;
+            overflow: hidden;
+            margin-bottom: -0.5em;
+            width: 180px;
+            height: 70px;
+            transform: translateX(-30px) rotate(-5deg);
+            animation: showListaContainer 0.625s 1.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+            animation-play-state: paused;
+            z-index: 2;
+            opacity: 0;
+        }
+        .lista-slice-wrapper {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            animation: sliceListaWidth 0.625s 4.5s ease-in-out forwards;
+            animation-play-state: paused;
+            overflow: hidden;
+        }
+        .lista-box {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            background-color: #0E3E54;
+            padding: 0.5em 1em;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .lista-text {
+            font-family: 'Montserrat', sans-serif;
+            font-size: 3.5vw;
+            font-weight: 900;
+            color: white;
+            letter-spacing: -0.02em;
+            text-transform: uppercase;
+            white-space: nowrap;
+        }
+        .profesiones-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 420px;
+            height: 70px;
+            transform: translateX(30px) rotate(-5deg);
+            animation: showProfesionesContainer 0.625s 1.375s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+            animation-play-state: paused;
+            z-index: 1;
+            opacity: 0;
+        }
+        .profesiones-slice-wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            animation: sliceProfesionesWidth 0.625s 4.5s ease-in-out forwards;
+            animation-play-state: paused;
+            overflow: hidden;
+        }
+        .profesiones-box {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            background-color: white;
+            padding: 0.5em 1em;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .profesiones-text {
+            font-family: 'Montserrat', sans-serif;
+            font-size: 3.5vw;
+            font-weight: 900;
+            color: #0E3E54;
+            letter-spacing: -0.02em;
+            text-transform: uppercase;
+            opacity: 0;
+            animation: fadeIn 0.5s 1.5s forwards, fadeOut 0.375s 4.5s forwards;
+            animation-play-state: paused;
+            white-space: nowrap;
+        }
+        /* Flags for Lista Profesiones */
+        .flags-list-container {
+            position: absolute;
+            bottom: 10%;
+            left: 10%;
+            display: flex;
+            gap: 10px;
+            opacity: 0;
+            z-index: 5;
+            animation: fadeIn 0.5s 1.75s forwards;
+            animation-play-state: paused;
+        }
+        .spain-flag-container {
+            opacity: 0;
+            animation: fadeIn 0.5s 1.875s forwards, fadeOut 0.625s 4.5s forwards;
+            animation-play-state: paused;
+        }
+        .uk-flag-container {
+            opacity: 0;
+            animation: fadeIn 0.5s 1.75s forwards, fadeOut 0.625s 4.5s forwards;
+            animation-play-state: paused;
+        }
+        .flag {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 2px solid white;
+            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .flag img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            will-change: transform;
+            transform: translateZ(0);
+        }
+        /* Doctor Section */
+        .doctor-section {
+            opacity: 0;
+            animation: fadeIn 0.25s 0.5s forwards, fadeOut 0.25s 1.5s forwards;
+            animation-play-state: paused;
+            z-index: 5;
+            pointer-events: none; /* Prevent interaction during animation */
+            will-change: opacity; /* Add hardware acceleration for smoother transitions */
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+            animation-fill-mode: forwards;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        /* Separate animations for doctor and teacher cards */
+        .doctor-card {
+            position: absolute;
+            top: 50%;
+            left: 25%;
+            transform: translate(-50%, -50%) scale(0);
+            width: 30%;
+            aspect-ratio: 1 / 1;
+            background-color: white;
+            border-radius: 15px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            animation: simpleScaleIn 0.3s 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,
+                      simpleScaleOut 0.3s 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+            animation-play-state: paused;
+            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
+            will-change: transform, opacity;
+            z-index: 1;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            animation-fill-mode: forwards;
+            transform-origin: center center;
+        }
+        .teacher-card {
+            position: absolute;
+            top: 50%;
+            left: 25%;
+            transform: translate(-50%, -50%) scale(0);
+            width: 30%;
+            aspect-ratio: 1 / 1;
+            background-color: white;
+            border-radius: 15px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            animation: simpleScaleIn 0.3s 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards,
+                      simpleScaleOut 0.3s 2.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+            animation-play-state: paused;
+            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
+            will-change: transform, opacity;
+            z-index: 1;
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            animation-fill-mode: forwards;
+            transform-origin: center center;
+        }
+        .doctor-card:hover, .teacher-card:hover {
+            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
+        }
+        .doctor-image {
+            width: 100%;
+            height: 100%;
+            background-image: url('./doctorsimage.webp');
+            background-size: 85%;
+            background-position: center;
+            background-repeat: no-repeat;
+            will-change: transform;
+            transform: translateZ(0);
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+        .teacher-image {
+            width: 100%;
+            height: 100%;
+            background-image: url('./doctorsimage.webp');
+            background-size: 85%;
+            background-position: center;
+            background-repeat: no-repeat;
+            will-change: transform;
+            transform: translateZ(0);
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+        .doctor-card:hover .doctor-image, .teacher-card:hover .teacher-image {
+            transform: scale(1.05);
+        }
+        .doctor-vocabulary {
+            position: absolute;
+            top: 50%;
+            right: 25%;
+            transform: translateY(-50%);
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .english-doctor {
+            position: relative;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 7vw;
+            font-weight: 900;
+            color: white;
+            letter-spacing: -0.02em;
+            text-transform: lowercase;
+            margin-bottom: 0.1em;
+            opacity: 0;
+            transform: scale(0);
+            animation: scaleInText 0.3s 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+                      fadeOut 0.25s 1.4s forwards;
+            animation-play-state: paused;
+        }
+        .spanish-doctor {
+            position: relative;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 5vw;
+            font-weight: 900;
+            color: #0E3E54;
+            letter-spacing: -0.02em;
+            text-transform: lowercase;
+            opacity: 0;
+            transform: scale(0);
+            animation: scaleInText 0.3s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+                      fadeOut 0.25s 1.4s forwards;
+            animation-play-state: paused;
+        }
+        /* Replace SVG X overlay with canvas */
+        .card-x-overlay, .teacher-x-overlay {
+            position: absolute;
+            top: 50%;
+            left: 25%;
+            transform: translate(-50%, -50%);
+            width: 30%;
+            aspect-ratio: 1 / 1;
+            pointer-events: none;
+            opacity: 0;
+        }
+        .card-x-overlay {
+            animation: fadeIn 0.2s 0.7s forwards, fadeOut 0.2s 0.9s forwards;
+            animation-play-state: paused;
+        }
+        .teacher-x-overlay {
+            animation: fadeIn 0.2s 1.7s forwards, fadeOut 0.2s 1.9s forwards;
+            animation-play-state: paused;
+        }
+        /* Doctor Phrase Section */
+        .doctor-phrase-section {
+            opacity: 0;
+            animation: fadeIn 0.25s 0.9s forwards, fadeOut 0.25s 1.9s forwards;
+            animation-play-state: paused;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .english-sentence-doctor {
+            position: absolute;
+            top: 35%;
+            width: 100%;
+            text-align: center;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 6vw;
+            font-weight: 900;
+            color: white;
+            letter-spacing: -0.02em;
+            opacity: 0;
+            animation: fadeIn 0.25s 0.95s forwards, fadeOut 0.25s 1.85s forwards;
+            animation-play-state: paused;
+        }
+        .spanish-sentence-doctor {
+            position: absolute;
+            top: 55%;
+            width: 100%;
+            text-align: center;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 5.5vw;
+            font-weight: 900;
+            color: #0E3E54;
+            letter-spacing: -0.02em;
+            opacity: 0;
+            animation: fadeIn 0.25s 1.0s forwards, fadeOut 0.25s 1.85s forwards;
+            animation-play-state: paused;
+        }
+        .doctor-highlight, .medico-highlight, .teacher-highlight, .profesor-highlight {
+            display: inline-block;
+            position: relative;
+            padding: 0 0.3em;
+            margin-left: 0.1em;
+            z-index: 2;
+        }
+        .doctor-highlight::before, .medico-highlight::before, .teacher-highlight::before, .profesor-highlight::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: scale(0);
+            transform-origin: center;
+            z-index: -1;
+            border-radius: 2px;
+        }
+        .doctor-highlight {
+            color: white;
+        }
+        .medico-highlight {
+            color: #0E1A2B;
+        }
+        .teacher-highlight {
+            color: white;
+        }
+        .profesor-highlight {
+            color: #0E1A2B;
+        }
+        /* Teacher Section */
+        .teacher-section {
+            opacity: 0;
+            animation: fadeIn 0.25s 1.05s forwards, fadeOut 0.25s 2.05s forwards;
+            animation-play-state: paused;
+            z-index: 5;
+            pointer-events: none; /* Prevent interaction during animation */
+            will-change: opacity; /* Add hardware acceleration for smoother transitions */
+            -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
+            animation-fill-mode: forwards;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .teacher-vocabulary {
+            position: absolute;
+            top: 50%;
+            right: 25%;
+            transform: translateY(-50%);
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .english-teacher {
+            position: relative;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 7vw;
+            font-weight: 900;
+            color: white;
+            letter-spacing: -0.02em;
+            text-transform: lowercase;
+            margin-bottom: 0.1em;
+            opacity: 0;
+            transform: scale(0);
+            animation: scaleInText 0.3s 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+                      fadeOut 0.25s 2.0s forwards;
+            animation-play-state: paused;
+        }
+        .spanish-teacher {
+            position: relative;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 5vw;
+            font-weight: 900;
+            color: #0E3E54;
+            letter-spacing: -0.02em;
+            text-transform: lowercase;
+            opacity: 0;
+            transform: scale(0);
+            animation: scaleInText 0.3s 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+                      fadeOut 0.25s 2.0s forwards;
+            animation-play-state: paused;
+        }
+        /* Teacher Phrase Section */
+        .teacher-phrase-section {
+            opacity: 0;
+            animation: fadeIn 0.25s 1.05s forwards, fadeOut 0.25s 2.05s forwards;
+            animation-play-state: paused;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .english-sentence-teacher {
+            position: absolute;
+            top: 35%;
+            width: 100%;
+            text-align: center;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 6vw;
+            font-weight: 900;
+            color: white;
+            letter-spacing: -0.02em;
+            opacity: 0;
+            animation: fadeIn 0.25s 1.1s forwards, fadeOut 0.25s 2.0s forwards;
+            animation-play-state: paused;
+        }
+        .spanish-sentence-teacher {
+            position: absolute;
+            top: 55%;
+            width: 100%;
+            text-align: center;
+            font-family: 'Montserrat', sans-serif;
+            font-size: 5.5vw;
+            font-weight: 900;
+            color: #0E3E54;
+            letter-spacing: -0.02em;
+            opacity: 0;
+            animation: fadeIn 0.25s 1.15s forwards, fadeOut 0.25s 2.0s forwards;
+            animation-play-state: paused;
+        }
+        /* Outro Section */
+        .outro-section {
+            opacity: 0;
+            animation: fadeIn 0.3s 2.1s forwards;
+            animation-play-state: paused;
+        }
+        .message {
+            position: absolute;
+            top: 40%;
+            left: 50%;
+            transform: translateX(-50%);
+            text-align: center;
+            opacity: 0;
+            animation: fadeIn 0.3s 2.15s forwards;
+            animation-play-state: paused;
+            width: 80%;
+        }
+        .thank-you {
+            font-family: 'Montserrat', sans-serif;
+            font-size: 5vw;
+            font-weight: 900;
+            color: white;
+            letter-spacing: -0.02em;
+            margin-bottom: 0.3em;
+        }
+        .learned {
+            font-family: 'Montserrat', sans-serif;
+            font-size: 2.5vw;
+            font-weight: 700;
+            color: #0E3E54;
+            letter-spacing: 0.02em;
+        }
+        .flags-outro-container {
+            position: absolute;
+            bottom: 15%;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 20px;
+            opacity: 0;
+            animation: fadeIn 0.3s 2.2s forwards;
+            animation-play-state: paused;
+        }
+        /* Common Flag Styles */
+        .outro-flag {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 3px solid white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .outro-flag img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            will-change: transform;
+            transform: translateZ(0);
+        }
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes fadeOut {
+            from { opacity: 1; visibility: visible; }
+            to { opacity: 0; visibility: hidden; }
+        }
+        @keyframes fadeInOut {
+            0% { opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+        @keyframes slideDown {
+            from {
+                transform: translateY(-60px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        @keyframes showListaContainer {
+            from {
+                transform: translateX(-30px) rotate(-5deg) scale(0);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(-30px) rotate(-5deg) scale(1);
+                opacity: 1;
+            }
+        }
+        @keyframes showProfesionesContainer {
+            from {
+                transform: translateX(30px) rotate(-5deg) scale(0);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(30px) rotate(-5deg) scale(1);
+                opacity: 1;
+            }
+        }
+        @keyframes sliceListaWidth {
+            0% { width: 100%; }
+            100% { width: 0%; }
+        }
+        @keyframes sliceProfesionesWidth {
+            0% { width: 100%; }
+            100% { width: 0%; }
+        }
+        @keyframes scaleInText {
+            from {
+                transform: scale(0);
+                opacity: 0;
+            }
+            to {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+        @keyframes textWobble {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            25% { transform: translate(0px, 0px) rotate(0deg); }
+            50% { transform: translate(0px, 0px) rotate(0deg); }
+            75% { transform: translate(0px, 0px) rotate(0deg); }
+        }
+        @keyframes floatAnimation {
+            0% { opacity: 0.2; transform: translate(0, 0) rotate(0deg); }
+            25% { opacity: 0.25; transform: translate(3px, -3px) rotate(1deg); }
+            50% { opacity: 0.2; transform: translate(5px, 3px) rotate(0deg); }
+            75% { opacity: 0.25; transform: translate(-3px, 5px) rotate(-1deg); }
+            100% { opacity: 0.2; transform: translate(0, 0) rotate(0deg); }
+        }
+        @keyframes elasticScale {
+            0% { transform: scale(0); }
+            70% { transform: scale(1.05); }
+            85% { transform: scale(0.98); }
+            100% { transform: scale(1); }
+        }
+        @keyframes scaleHighlightBackground {
+            from {
+                transform: scale(0);
+            }
+            to {
+                transform: scale(1);
+            }
+        }
+        .doctor-highlight::before {
+            background-color: #0E1A2B;
+            animation: scaleHighlightBackground 0.25s 1.7s forwards;
+            animation-play-state: paused;
+        }
+        .medico-highlight::before {
+            background-color: white;
+            animation: scaleHighlightBackground 0.25s 1.8s forwards;
+            animation-play-state: paused;
+        }
+        .teacher-highlight::before {
+            background-color: #0E1A2B;
+            animation: scaleHighlightBackground 0.25s 1.2s forwards;
+            animation-play-state: paused;
+        }
+        .profesor-highlight::before {
+            background-color: white;
+            animation: scaleHighlightBackground 0.25s 1.25s forwards;
+            animation-play-state: paused;
+        }
+        /* Optimize image loading */
+        img {
+            content-visibility: auto;
+        }
+        /* Optimize animations */
+        @media (prefers-reduced-motion: reduce) {
+            * {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+                scroll-behavior: auto !important;
+            }
+        }
+        /* New enhanced card animations */
+        @keyframes cardAnimation {
+            0% {
+                transform: translate(-50%, -50%) scale(0);
+                opacity: 0;
+                visibility: visible;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(1);
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+        @keyframes cardExitAnimation {
+            0% {
+                transform: translate(-50%, -50%) scale(1);
+                opacity: 1;
+                visibility: visible;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(0);
+                opacity: 0;
+                visibility: hidden;
+            }
+        }
+        /* Add simple scale animations with rotation */
+        @keyframes simpleScaleIn {
+            0% {
+                transform: translate(-50%, -50%) scale(0) rotate(45deg);
+                opacity: 0;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(1) rotate(0deg);
+                opacity: 1;
+            }
+        }
+        @keyframes simpleScaleOut {
+            0% {
+                transform: translate(-50%, -50%) scale(1) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-50%, -50%) scale(0) rotate(-45deg);
+                opacity: 0;
+            }
+        }
+        /* Add a class to control animation play state */
+        .paused * {
+            animation-play-state: paused !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="video-container">
+        <!-- Background video -->
+        <video class="background-video" autoplay muted loop>
+            <source src="../src/html/fondo_1.mp4" type="video/mp4">
+        </video>
+        <!-- Background shapes - reduced number -->
+        <div class="bg-shape bg-shape-1"></div>
+        <div class="bg-shape bg-shape-2"></div>
+        <div class="bg-shape bg-shape-3"></div>
+        <!-- Intro Section (0-5s) -->
+        <div class="logo-container">
+            <div id="lottie-container"></div>
+        </div>
+        <!-- Lista Profesiones Section (5-10s) -->
+        <div class="title-container">
+            <div class="lista-wrapper">
+                <div class="lista-slice-wrapper">
+                    <div class="lista-box">
+                        <div class="lista-text">LISTA</div>
+                    </div>
+                </div>
+            </div>
+            <div class="profesiones-wrapper">
+                <div class="profesiones-slice-wrapper">
+                    <div class="profesiones-box">
+                        <div class="profesiones-text">PROFESIONES</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flags-list-container">
+            <!-- Flag of Spain -->
+            <div class="flag spain-flag-container">
+                <img src="https://flagcdn.com/w80/es.png" alt="Spain Flag">
+            </div>
+            <!-- UK flag -->
+            <div class="flag uk-flag-container">
+                <img src="https://flagcdn.com/w80/gb.png" alt="UK Flag">
+            </div>
+        </div>
+        <!-- Doctor Section (10-15s) -->
+        <div class="doctor-section">
+            <div class="doctor-card">
+                <div class="doctor-image"></div>
+            </div>
+            <div class="doctor-vocabulary">
+                <div class="english-doctor">doctor</div>
+                <div class="spanish-doctor">médico</div>
+            </div>
+            <canvas class="card-x-overlay" width="100" height="100"></canvas>
+        </div>
+        <!-- Doctor Phrase Section (15-20s) -->
+        <div class="doctor-phrase-section">
+            <div class="english-sentence-doctor">
+                He wants to be a <span class="doctor-highlight">doctor</span>
+            </div>
+            <div class="spanish-sentence-doctor">
+                Él quiere ser <span class="medico-highlight">médico</span>
+            </div>
+        </div>
+        <!-- Teacher Section (20-25s) -->
+        <div class="teacher-section">
+            <div class="teacher-card">
+                <div class="teacher-image"></div>
+            </div>
+            <div class="teacher-vocabulary">
+                <div class="english-teacher">teacher</div>
+                <div class="spanish-teacher">profesor</div>
+            </div>
+            <canvas class="teacher-x-overlay" width="100" height="100"></canvas>
+        </div>
+        <!-- Teacher Phrase Section (25-30s) -->
+        <div class="teacher-phrase-section">
+            <div class="english-sentence-teacher">
+                She is a <span class="teacher-highlight">teacher</span>
+            </div>
+            <div class="spanish-sentence-teacher">
+                Ella es <span class="profesor-highlight">profesor</span>
+            </div>
+        </div>
+        <!-- Outro Section (30s+) -->
+        <div class="outro-section">
+            <div class="message">
+                <div class="thank-you">Gracias! Thank you!</div>
+                <div class="learned">You've learned new profession vocabulary</div>
+            </div>
+            <div class="flags-outro-container">
+                <!-- Spanish flag -->
+                <div class="outro-flag">
+                    <img src="https://flagcdn.com/w80/es.png" alt="Spain Flag">
+                </div>
+                <!-- UK flag -->
+                <div class="outro-flag">
+                    <img src="https://flagcdn.com/w80/gb.png" alt="UK Flag">
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let animation; // Store the Lottie animation object globally
+        let animationStarted = false;
+        let isPaused = false; // Track pause state
+        // Function to get all elements that have CSS animations
+        function getAnimatedElements() {
+            return document.querySelectorAll(
+                '.bg-shape, .lista-wrapper, .lista-slice-wrapper, .profesiones-wrapper, ' +
+                '.profesiones-slice-wrapper, .profesiones-text, .flags-list-container, ' +
+                '.spain-flag-container, .uk-flag-container, .doctor-section, .doctor-card, ' +
+                '.doctor-image, .doctor-vocabulary, .english-doctor, .spanish-doctor, ' +
+                '.card-x-overlay, .doctor-phrase-section, .english-sentence-doctor, ' +
+                '.spanish-sentence-doctor, .teacher-section, .teacher-card, .teacher-image, ' +
+                '.teacher-vocabulary, .english-teacher, .spanish-teacher, .teacher-x-overlay, ' +
+                '.teacher-phrase-section, .english-sentence-teacher, .spanish-sentence-teacher, ' +
+                '.outro-section, .message, .thank-you, .learned, .flags-outro-container, .outro-flag'
+            );
+        }
+        // Function to pause the animation
+        function pauseAnimation() {
+            if (animation) {
+                animation.pause(); // Pause Lottie animation
+            }
+            // Pause CSS animations by adding the 'paused' class to the video container
+            document.querySelector('.video-container').classList.add('paused');
+            isPaused = true;
+            console.log('Animation paused');
+        }
+        // Function to resume the animation
+        function resumeAnimation() {
+            if (animation) {
+                animation.play(); // Resume Lottie animation
+            }
+            // Resume CSS animations by removing the 'paused' class
+            document.querySelector('.video-container').classList.remove('paused');
+            isPaused = false;
+            console.log('Animation resumed');
+        }
+        // Function to toggle pause/resume
+        function togglePause() {
+            if (isPaused) {
+                resumeAnimation();
+            } else {
+                pauseAnimation();
+            }
+        }
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set global animation speed factor
+            document.documentElement.style.setProperty('--speed-factor', '1');
+            // Preload images
+            preloadImages();
+            // Use canvas renderer instead of SVG for better performance
+            animation = lottie.loadAnimation({
+                container: document.getElementById('lottie-container'),
+                renderer: 'svg', // Changed back to svg
+                loop: false,
+                autoplay: true, // Don't autoplay initially
+                path: 'SplashScreen 3.json',
+                rendererSettings: {
+                    progressiveLoad: true,
+                    hideOnTransparent: true
+                }
+            });
+            // Set animation speed to 1.0x (faster than previous 0.9x)
+            animation.setSpeed(1.0);
+            animation.addEventListener('DOMLoaded', function() {
+                console.log('Lottie animation loaded');
+                // Start animation sequence if not already started
+                if (!animationStarted) {
+                    // Don't auto-start: startAnimationSequence();
+                }
+            });
+            // Add event listener to ensure animations start in the right sequence
+            animation.addEventListener('complete', function() {
+                console.log('Lottie animation complete, starting text animations');
+                // Start animation sequence if not already started
+                if (!animationStarted) {
+                    startAnimationSequence();
+                }
+                // Clean up Lottie resources when done
+                setTimeout(() => {
+                    animation.destroy();
+                }, 1000);
+            });
+            // Function to start the animation sequence based on original timing
+            function startAnimationSequence() {
+                animationStarted = true;
+                // Draw X on canvas elements
+                drawXOnCanvas();
+                // Make the Lottie animation fade out after 1 second (0.8s * 1.25 for slower speed)
+                setTimeout(function() {
+                    const lottieContainer = document.getElementById('lottie-container');
+                    lottieContainer.style.opacity = '0';
+                    lottieContainer.style.transition = 'opacity 0.5s ease'; // 0.4s * 1.25
+                    // Ensure the title container becomes visible immediately after Lottie fades
+                    setTimeout(function() {
+                        const titleContainer = document.querySelector('.title-container');
+                        if (titleContainer) {
+                            titleContainer.style.opacity = '1';
+                            titleContainer.style.transition = 'opacity 0.375s ease'; // 0.3s * 1.25
+                            // Start animations in batches to improve performance
+                            startAnimationsInBatches();
+                        }
+                    }, 500); // 400ms * 1.25
+                }, 1000); // 800ms * 1.25
+            }
+            // Function to start animations in batches for better performance
+            function startAnimationsInBatches() {
+                // First batch - LISTA PROFESIONES and flags
+                const firstBatch = document.querySelectorAll(
+                                '.lista-wrapper, .lista-slice-wrapper, .profesiones-wrapper, ' +
+                                '.profesiones-slice-wrapper, .profesiones-text, ' +
+                    '.flags-list-container, .spain-flag-container, .uk-flag-container'
+                );
+                firstBatch.forEach(el => {
+                    if (el) el.style.animationPlayState = 'running';
+                });
+                // Start doctor section immediately after
+                setTimeout(() => {
+                    // Second batch - Doctor section
+                    const secondBatch = document.querySelectorAll(
+                        '.doctor-section, .doctor-card, .doctor-image'
+                    );
+                    secondBatch.forEach(el => {
+                        if (el) el.style.animationPlayState = 'running';
+                    });
+                    // Doctor text appears immediately with card
+                    const textBatch = document.querySelectorAll(
+                        '.english-doctor, .spanish-doctor, .card-x-overlay'
+                    );
+                    textBatch.forEach(el => {
+                        if (el) el.style.animationPlayState = 'running';
+                    });
+                    // Doctor phrase section starts immediately with doctor
+                    const thirdBatch = document.querySelectorAll(
+                        '.doctor-phrase-section, .english-sentence-doctor, ' +
+                        '.spanish-sentence-doctor'
+                    );
+                    thirdBatch.forEach(el => {
+                        if (el) el.style.animationPlayState = 'running';
+                    });
+                    // Handle pseudo-elements for doctor highlights
+                    const styleSheet1 = document.createElement('style');
+                    styleSheet1.textContent = `
+                        .doctor-highlight::before, .medico-highlight::before {
+                            animation-play-state: running !important;
+                        }
+                    `;
+                    document.head.appendChild(styleSheet1);
+                    // Teacher section and teacher phrases start immediately
+                    const teacherBatch = document.querySelectorAll(
+                        '.teacher-section, .teacher-card, .teacher-image, .english-teacher, .spanish-teacher, ' +
+                        '.teacher-x-overlay, .teacher-phrase-section, .english-sentence-teacher, ' +
+                        '.spanish-sentence-teacher'
+                    );
+                    teacherBatch.forEach(el => {
+                        if (el) el.style.animationPlayState = 'running';
+                    });
+                    // Handle pseudo-elements for teacher highlights
+                    const styleSheet2 = document.createElement('style');
+                    styleSheet2.textContent = `
+                        .teacher-highlight::before, .profesor-highlight::before {
+                            animation-play-state: running !important;
+                        }
+                    `;
+                    document.head.appendChild(styleSheet2);
+                    // Outro section starts immediately too
+                    const outroBatch = document.querySelectorAll(
+                        '.outro-section, .message, .flags-outro-container'
+                    );
+                    outroBatch.forEach(el => {
+                        if (el) el.style.animationPlayState = 'running';
+                    });
+                }, 50); // Almost immediate
+            }
+            // Add to the startAnimationSequence function
+            function drawXOnCanvas() {
+                // Draw X on doctor card canvas
+                const doctorCanvas = document.querySelector('.card-x-overlay');
+                if (doctorCanvas && doctorCanvas.getContext) {
+                    const ctx = doctorCanvas.getContext('2d');
+                    ctx.strokeStyle = 'rgba(150, 150, 150, 0.8)';
+                    ctx.lineWidth = 3;
+                    ctx.setLineDash([5, 5]);
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(100, 100);
+                    ctx.stroke();
+                    ctx.beginPath();
+                    ctx.moveTo(100, 0);
+                    ctx.lineTo(0, 100);
+                    ctx.stroke();
+                }
+                // Draw X on teacher card canvas
+                const teacherCanvas = document.querySelector('.teacher-x-overlay');
+                if (teacherCanvas && teacherCanvas.getContext) {
+                    const ctx = teacherCanvas.getContext('2d');
+                    ctx.strokeStyle = 'rgba(150, 150, 150, 0.8)';
+                    ctx.lineWidth = 3;
+                    ctx.setLineDash([5, 5]);
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(100, 100);
+                    ctx.stroke();
+                    ctx.beginPath();
+                    ctx.moveTo(100, 0);
+                    ctx.lineTo(0, 100);
+                    ctx.stroke();
+                }
+            }
+            // Preload images function
+            function preloadImages() {
+                const imagesToPreload = [
+                    './doctorsimage.webp',
+                    'https://flagcdn.com/w80/es.png',
+                    'https://flagcdn.com/w80/gb.png'
+                ];
+                // Also preload the video
+                const video = document.createElement('video');
+                video.preload = 'auto';
+                video.src = '../src/html/fondo_1.mp4';
+                video.style.display = 'none';
+                document.body.appendChild(video);
+                console.log('Preloading video: ../src/html/fondo_1.mp4');
+                imagesToPreload.forEach(src => {
+                    const img = new Image();
+                    img.src = src;
+                    console.log('Preloading image:', src);
+                    // Add error handling for image loading
+                    img.onerror = () => {
+                        console.error('Failed to load image:', src);
+                    };
+                });
+            }
+        });
+    </script>
+</body>
+</html>