Spaces:
Running
Running
{ "script_title": "Digital Bloom: A Greeting to the World of YouTube", "overall_goal": "Create a script for a digital greeting video, from the team to the world of YouTube", "total_estimated_duration_seconds": 60, "core_concept": { "name": "Digital Bloom", "description": "A theme blending organic growth with digital interconnectedness, symbolizing the team's creativity, evolution, and connection with the global YouTube community. The aesthetic is minimalist yet warm, inviting, and dynamically flowing." }, "key_messages": [ "We are [Team Name], a collective passionate about creation and innovation.", "We are excited to connect with and contribute to the vibrant, diverse YouTube community.", "We believe in continuous growth, fostering creativity, and sharing our journey and ideas.", "Join us as we explore, learn, and build something meaningful together." ], "tone_of_voice": { "adjectives": ["Warm", "Inviting", "Inspiring", "Community-Oriented"], "explanation": "The video should feel like a genuine, heartfelt welcome, conveying enthusiasm for collaboration and shared discovery, with a forward-looking and positive outlook." }, "script_scenes": [ { "scene_number": 1, "scene_title": "OPENING: The Genesis of Connection", "estimated_duration_seconds": 10, "voiceover_dialogue": "VO: In a world connected by countless threads, where ideas spark and creativity thrives, something new is taking root.", "visual_description": "Wide shot establishing a dark, spacious background (#4A4A4A fading to #F5F5F5). Subtle, abstract geometric patterns (circuit-board inspired) begin to glow with soft #00C896 light, slowly forming. Individual particles coalesce and flow, reminiscent of data streams or nascent ideas. The patterns gently expand, hinting at organic growth. Soft, diffused lighting. Our team logo subtly begins to animate, 'blooming' from these patterns. (Production Note: Particle systems and logo animation require moderate motion graphics effort; optimize particle density and consider pre-rendering logo bloom for efficiency).", "on_screen_text": [ { "content": "[Team Name] Presents", "typography": "'Inter' Bold", "color": "#FFFFFF", "position": "Center, subtle fade-in", "accessibility_note": "Ensures excellent contrast on dark background." } ], "transitions": { "from_previous": "None (Opening Scene)", "to_next": "Morphing Geometric Wipe (Production Note: Moderate to high complexity, consider simpler patterns for smooth animation and efficiency) or Soft Fade/Dissolve." }, "music_sfx": "Soft, warm, inviting music begins." }, { "scene_number": 2, "scene_title": "INTRO: Who We Are", "estimated_duration_seconds": 15, "voiceover_dialogue": "VO: We are [Team Name]. A collective driven by curiosity, united by a passion to explore, innovate, and bring new ideas to life. Every project is a journey, every challenge an opportunity to grow.", "visual_description": "Medium shot, transitioning from the opening with a fluid 'Morphing Geometric Wipe'. The 'Digital Bloom' aesthetic is prominent. Stylized, abstract representations of team members (e.g., glowing avatars, interconnected nodes) appear briefly, highlighting individual contributions before forming a cohesive group. Subtle animations of lines and shapes flow between them, symbolizing collaboration. The scene is brighter with #F5F5F5 as the primary background, accented by #00C896 and #4A4A4A.", "on_screen_text": [ { "content": "We are [Team Name].", "typography": "'Inter' Bold", "color": "#00C896", "position": "Upper third, centered" }, { "content": "Innovators. Creators. Dreamers.", "typography": "'Roboto' Regular", "color": "#4A4A4A", "position": "Below previous text" } ], "transitions": { "from_previous": "Morphing Geometric Wipe or Particle Trails", "to_next": "Particle Trails (Production Note: Moderate complexity, requires particle system setup and control; optimize for rendering efficiency) or Soft Fade." }, "music_sfx": "Music continues, subtly building." }, { "scene_number": 3, "scene_title": "BODY: Connecting with You, The YouTube Community", "estimated_duration_seconds": 20, "voiceover_dialogue": "VO: And now, we're reaching out to you – the incredible, diverse, and inspiring world of YouTube. We've watched, learned, and been inspired by your creativity, and we're so excited to finally connect, share our stories, and grow together within this amazing community.", "visual_description": "Dynamic medium-wide shot, transitioning with 'Particle Trails'. A vibrant, interconnected global map or network visualization is shown. Particles, now representing the global YouTube community, flow and converge, using accent colors #FFB300 and #00C896 to highlight key interaction points. Subtle integration of stylized YouTube UI elements (play buttons, comment bubbles) showing connection and shared experiences. The overall mood is energetic and collaborative. (Production Note: Particle effects are render-intensive; optimize density and consider pre-rendering where possible).", "on_screen_text": [ { "content": "Hello, YouTube!", "typography": "'Inter' Bold", "color": "#FFFFFF", "position": "Prominent, upper section", "accessibility_note": "Ensures WCAG AA contrast on dynamic background." }, { "content": "Join Our Journey.", "typography": "'Inter' Bold", "color": "#00C896", "position": "Mid-section" }, { "content": "Share Your Voice.", "typography": "'Roboto' Regular", "color": "#4A4A4A", "position": "Lower section", "accessibility_note": "Ensures WCAG AA contrast for all text overlays." } ], "transitions": { "from_previous": "Particle Trails", "to_next": "Geometric Wipe or Focus Pull." }, "music_sfx": "Music becomes more upbeat and engaging." }, { "scene_number": 4, "scene_title": "OUTRO: Our Shared Future", "estimated_duration_seconds": 15, "voiceover_dialogue": "VO: This is just the beginning. We invite you to subscribe, join our journey, and become part of our growing community. Let's create something extraordinary, together. Thank you for watching.", "visual_description": "Returns to a balanced, harmonious composition, transitioning with a 'Geometric Wipe' or 'Focus Pull'. Elements from previous scenes (patterns, particles, light) gently converge into a final, complete 'Digital Bloom' formation. The team logo fully animates into its final position with the 'blooming' effect, prominently displayed against the clean background. A clear, clean call-to-action button appears. (Production Note: Logo animation is moderate effort; a pre-rendered asset can enhance efficiency).", "on_screen_text": [ { "content": "Subscribe & Join Us!", "typography": "'Inter' Bold", "color": "#FFFFFF", "background_color": "#00C896", "style": "Clean button with subtle hover effect", "position": "Central, prominent", "accessibility_note": "Ensures WCAG AA contrast for button text." }, { "content": "[Link/Channel Name]", "typography": "'Inter' Bold", "color": "#4A4A4A", "position": "Below the CTA button", "accessibility_note": "Ensures good contrast on background." } ], "transitions": { "from_previous": "Geometric Wipe or Focus Pull", "to_next": "Fade to Black (End Screen)." }, "music_sfx": "Music swells slightly, then fades out softly." } ], "production_notes": { "overall_animation_complexity": "A tiered approach to animation complexity is recommended: high-impact animations for intros, outros, and key messages, with simpler, elegant transitions for scene changes to manage production time and costs.", "rendering_optimization": "For complex particle systems and morphing effects, utilize styleframes/animatics early, optimize particle density, simplify simulation complexity, and consider pre-rendering elements in passes or as alpha-channel assets.", "accessibility_checklist": "Maintain continuous attention to WCAG AA contrast ratios for all text overlays and interactive elements. Ensure a minimum font size of 24px for on-screen text for optimal readability across devices.", "efficiency_suggestions": "Leverage existing assets, motion graphics templates, or stock libraries for abstract geometric patterns and particle effects that align with the 'Digital Bloom' aesthetic to accelerate production." } } - Initial Deployment
66914de
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Bloom: A Greeting to the World of YouTube</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F5F5F5; | |
| overflow-x: hidden; | |
| } | |
| .scene-container { | |
| min-height: 100vh; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| background-color: #00C896; | |
| opacity: 0.6; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(5deg); | |
| } | |
| } | |
| .logo-bloom { | |
| animation: bloom 2s ease-out forwards; | |
| transform-origin: center; | |
| opacity: 0; | |
| } | |
| @keyframes bloom { | |
| 0% { | |
| transform: scale(0.5); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .geometric-shape { | |
| position: absolute; | |
| background-color: rgba(0, 200, 150, 0.1); | |
| border: 1px solid rgba(0, 200, 150, 0.3); | |
| animation: pulse 8s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| opacity: 0.7; | |
| } | |
| } | |
| .network-node { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background-color: #FFB300; | |
| animation: pulse 3s infinite alternate; | |
| } | |
| .network-line { | |
| position: absolute; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #00C896, transparent); | |
| transform-origin: left center; | |
| } | |
| .youtube-element { | |
| position: absolute; | |
| color: #FF0000; | |
| font-size: 24px; | |
| opacity: 0.7; | |
| animation: float 8s infinite ease-in-out; | |
| } | |
| .cta-button { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 200, 150, 0.2); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 12px rgba(0, 200, 150, 0.3); | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-out forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .scene-transition { | |
| animation: sceneTransition 1s ease-out forwards; | |
| } | |
| @keyframes sceneTransition { | |
| 0% { opacity: 0; transform: translateY(20px); } | |
| 100% { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <!-- Scene 1: Opening --> | |
| <div id="scene1" class="scene-container bg-gradient-to-b from-gray-700 to-gray-100 flex flex-col items-center justify-center relative overflow-hidden"> | |
| <!-- Background elements --> | |
| <div id="particles1" class="absolute inset-0"></div> | |
| <!-- Geometric patterns --> | |
| <div class="geometric-shape w-32 h-32 rounded-full top-1/4 left-1/4"></div> | |
| <div class="geometric-shape w-20 h-20 rounded-lg top-1/3 right-1/4 rotate-45"></div> | |
| <div class="geometric-shape w-24 h-24 rounded-lg bottom-1/4 left-1/3 rotate-12"></div> | |
| <div class="geometric-shape w-16 h-16 rounded-full bottom-1/3 right-1/3"></div> | |
| <!-- Logo bloom --> | |
| <div class="logo-bloom text-center mb-8"> | |
| <div class="text-white text-5xl font-bold mb-2">TEAM NAME</div> | |
| <div class="text-gray-300 text-xl">Presents</div> | |
| </div> | |
| <!-- Voiceover text --> | |
| <div class="text-center max-w-2xl px-4 mx-auto mt-8 text-gray-300 fade-in" style="animation-delay: 1.5s;"> | |
| <p class="text-lg italic">"In a world connected by countless threads, where ideas spark and creativity thrives, something new is taking root."</p> | |
| </div> | |
| <!-- Navigation indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-white"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| <!-- Scene 2: Who We Are --> | |
| <div id="scene2" class="scene-container bg-gray-100 hidden flex flex-col items-center justify-center relative overflow-hidden"> | |
| <!-- Background elements --> | |
| <div id="particles2" class="absolute inset-0"></div> | |
| <!-- Team avatars --> | |
| <div class="flex flex-wrap justify-center max-w-4xl mx-auto mb-12 scene-transition"> | |
| <div class="w-24 h-24 m-4 rounded-full bg-white shadow-lg flex items-center justify-center text-4xl text-gray-700 transform hover:scale-110 transition-transform duration-300" style="background: linear-gradient(135deg, #F5F5F5, #E0E0E0);"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="w-24 h-24 m-4 rounded-full bg-white shadow-lg flex items-center justify-center text-4xl text-gray-700 transform hover:scale-110 transition-transform duration-300" style="background: linear-gradient(135deg, #F5F5F5, #E0E0E0);"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div class="w-24 h-24 m-4 rounded-full bg-white shadow-lg flex items-center justify-center text-4xl text-gray-700 transform hover:scale-110 transition-transform duration-300" style="background: linear-gradient(135deg, #F5F5F5, #E0E0E0);"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div class="w-24 h-24 m-4 rounded-full bg-white shadow-lg flex items-center justify-center text-4xl text-gray-700 transform hover:scale-110 transition-transform duration-300" style="background: linear-gradient(135deg, #F5F5F5, #E0E0E0);"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <div class="w-24 h-24 m-4 rounded-full bg-white shadow-lg flex items-center justify-center text-4xl text-gray-700 transform hover:scale-110 transition-transform duration-300" style="background: linear-gradient(135deg, #F5F5F5, #E0E0E0);"> | |
| <i class="fas fa-camera"></i> | |
| </div> | |
| <div class="w-24 h-24 m-4 rounded-full bg-white shadow-lg flex items-center justify-center text-4xl text-gray-700 transform hover:scale-110 transition-transform duration-300" style="background: linear-gradient(135deg, #F5F5F5, #E0E0E0);"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| </div> | |
| <!-- Main text --> | |
| <div class="text-center max-w-2xl px-4 mx-auto scene-transition" style="animation-delay: 0.3s;"> | |
| <h1 class="text-4xl font-bold text-teal-500 mb-4">We are TEAM NAME.</h1> | |
| <p class="text-xl text-gray-700 mb-6">Innovators. Creators. Dreamers.</p> | |
| <p class="text-gray-600 italic">"We are a collective driven by curiosity, united by a passion to explore, innovate, and bring new ideas to life. Every project is a journey, every challenge an opportunity to grow."</p> | |
| </div> | |
| <!-- Navigation indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-teal-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| <!-- Scene 3: Connecting with YouTube Community --> | |
| <div id="scene3" class="scene-container bg-gray-100 hidden flex flex-col items-center justify-center relative overflow-hidden"> | |
| <!-- Background elements --> | |
| <div id="network" class="absolute inset-0"></div> | |
| <div id="youtube-elements" class="absolute inset-0"></div> | |
| <!-- Main content --> | |
| <div class="text-center max-w-2xl px-4 mx-auto relative z-10 scene-transition"> | |
| <h1 class="text-4xl font-bold text-white mb-6 drop-shadow-lg">Hello, YouTube!</h1> | |
| <p class="text-xl text-teal-300 mb-8 font-medium">Join Our Journey. Share Your Voice.</p> | |
| <p class="text-gray-100 italic">"And now, we're reaching out to you – the incredible, diverse, and inspiring world of YouTube. We've watched, learned, and been inspired by your creativity, and we're so excited to finally connect, share our stories, and grow together within this amazing community."</p> | |
| </div> | |
| <!-- Navigation indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-teal-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| </div> | |
| </div> | |
| <!-- Scene 4: Outro --> | |
| <div id="scene4" class="scene-container bg-gradient-to-b from-gray-100 to-gray-300 hidden flex flex-col items-center justify-center relative overflow-hidden"> | |
| <!-- Background elements --> | |
| <div id="particles4" class="absolute inset-0"></div> | |
| <!-- Logo --> | |
| <div class="text-center mb-12 scene-transition"> | |
| <div class="text-5xl font-bold text-gray-800 mb-4">TEAM NAME</div> | |
| <div class="w-32 h-1 bg-teal-500 mx-auto mb-6"></div> | |
| <p class="text-gray-600 max-w-md px-4 mx-auto">Creating something extraordinary, together.</p> | |
| </div> | |
| <!-- CTA --> | |
| <div class="text-center scene-transition" style="animation-delay: 0.3s;"> | |
| <button class="cta-button bg-teal-500 text-white font-bold py-3 px-8 rounded-full text-lg mb-4"> | |
| Subscribe & Join Us! | |
| </button> | |
| <p class="text-gray-700 font-medium">youtube.com/teamname</p> | |
| </div> | |
| <!-- Voiceover text --> | |
| <div class="text-center max-w-2xl px-4 mx-auto mt-12 text-gray-600 scene-transition" style="animation-delay: 0.6s;"> | |
| <p class="text-lg italic">"This is just the beginning. We invite you to subscribe, join our journey, and become part of our growing community. Let's create something extraordinary, together. Thank you for watching."</p> | |
| </div> | |
| <!-- Navigation indicator --> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-gray-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-teal-500"></div> | |
| </div> | |
| </div> | |
| <!-- Navigation controls --> | |
| <div class="fixed bottom-4 right-4 z-50 flex space-x-2"> | |
| <button id="prevBtn" class="bg-gray-700 text-white w-10 h-10 rounded-full flex items-center justify-center opacity-70 hover:opacity-100 transition-opacity"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <button id="nextBtn" class="bg-teal-500 text-white w-10 h-10 rounded-full flex items-center justify-center opacity-90 hover:opacity-100 transition-opacity"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Scene management | |
| const scenes = ['scene1', 'scene2', 'scene3', 'scene4']; | |
| let currentScene = 0; | |
| // Navigation functions | |
| function showScene(index) { | |
| // Validate index | |
| if (index < 0) index = 0; | |
| if (index >= scenes.length) index = scenes.length - 1; | |
| // Hide all scenes | |
| scenes.forEach(scene => { | |
| document.getElementById(scene).classList.add('hidden'); | |
| }); | |
| // Show selected scene | |
| document.getElementById(scenes[index]).classList.remove('hidden'); | |
| currentScene = index; | |
| // Update navigation dots | |
| updateNavigationDots(); | |
| // Initialize scene-specific elements | |
| initializeScene(index); | |
| } | |
| function updateNavigationDots() { | |
| scenes.forEach((scene, index) => { | |
| const dots = document.querySelectorAll(`#${scene} .absolute.bottom-8 div`); | |
| dots.forEach((dot, dotIndex) => { | |
| if (dotIndex === currentScene) { | |
| dot.classList.remove('bg-gray-500'); | |
| dot.classList.add('bg-teal-500'); | |
| } else { | |
| dot.classList.remove('bg-teal-500'); | |
| dot.classList.add('bg-gray-500'); | |
| } | |
| }); | |
| }); | |
| } | |
| // Navigation buttons | |
| document.getElementById('nextBtn').addEventListener('click', function() { | |
| showScene(currentScene + 1); | |
| }); | |
| document.getElementById('prevBtn').addEventListener('click', function() { | |
| showScene(currentScene - 1); | |
| }); | |
| // Keyboard navigation | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'ArrowRight') { | |
| showScene(currentScene + 1); | |
| } else if (e.key === 'ArrowLeft') { | |
| showScene(currentScene - 1); | |
| } | |
| }); | |
| // Initialize scenes | |
| function initializeScene(index) { | |
| switch(index) { | |
| case 0: // Scene 1 | |
| createParticles('particles1', 30); | |
| break; | |
| case 1: // Scene 2 | |
| createParticles('particles2', 20); | |
| break; | |
| case 2: // Scene 3 | |
| createNetwork(); | |
| createYouTubeElements(); | |
| break; | |
| case 3: // Scene 4 | |
| createParticles('particles4', 25); | |
| break; | |
| } | |
| } | |
| // Particle system | |
| function createParticles(containerId, count) { | |
| const container = document.getElementById(containerId); | |
| container.innerHTML = ''; | |
| for (let i = 0; i < count; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random size between 3px and 8px | |
| const size = Math.random() * 5 + 3; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random animation delay | |
| particle.style.animationDelay = `${Math.random() * 10}s`; | |
| // Random color variation | |
| const hue = 160 + Math.random() * 20; // Teal color range | |
| particle.style.backgroundColor = `hsla(${hue}, 100%, 50%, ${Math.random() * 0.3 + 0.3})`; | |
| container.appendChild(particle); | |
| } | |
| } | |
| // Network visualization for Scene 3 | |
| function createNetwork() { | |
| const container = document.getElementById('network'); | |
| container.innerHTML = ''; | |
| const nodeCount = 15; | |
| const nodes = []; | |
| // Create nodes | |
| for (let i = 0; i < nodeCount; i++) { | |
| const node = document.createElement('div'); | |
| node.className = 'network-node'; | |
| // Position nodes in a circular pattern | |
| const angle = (i / nodeCount) * Math.PI * 2; | |
| const radius = Math.min(window.innerWidth, window.innerHeight) * 0.35; | |
| const centerX = window.innerWidth / 2; | |
| const centerY = window.innerHeight / 2; | |
| const x = centerX + Math.cos(angle) * radius; | |
| const y = centerY + Math.sin(angle) * radius; | |
| node.style.left = `${x}px`; | |
| node.style.top = `${y}px`; | |
| node.style.animationDelay = `${i * 0.2}s`; | |
| // Random size variation | |
| const size = Math.random() * 6 + 4; | |
| node.style.width = `${size}px`; | |
| node.style.height = `${size}px`; | |
| container.appendChild(node); | |
| nodes.push({x, y}); | |
| } | |
| // Create connections between nodes | |
| for (let i = 0; i < nodes.length; i++) { | |
| for (let j = i + 1; j < nodes.length; j++) { | |
| // Only connect some nodes randomly | |
| if (Math.random() > 0.7) { | |
| const line = document.createElement('div'); | |
| line.className = 'network-line'; | |
| const dx = nodes[j].x - nodes[i].x; | |
| const dy = nodes[j].y - nodes[i].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| const angle = Math.atan2(dy, dx) * 180 / Math.PI; | |
| line.style.width = `${distance}px`; | |
| line.style.left = `${nodes[i].x}px`; | |
| line.style.top = `${nodes[i].y}px`; | |
| line.style.transform = `rotate(${angle}deg)`; | |
| line.style.opacity = Math.random() * 0.3 + 0.1; | |
| container.appendChild(line); | |
| } | |
| } | |
| } | |
| } | |
| // YouTube elements for Scene 3 | |
| function createYouTubeElements() { | |
| const container = document.getElementById('youtube-elements'); | |
| container.innerHTML = ''; | |
| const elements = [ | |
| {icon: 'fa-play', size: 24}, | |
| {icon: 'fa-thumbs-up', size: 20}, | |
| {icon: 'fa-comment', size: 18}, | |
| {icon: 'fa-share', size: 16}, | |
| {icon: 'fa-bell', size: 22}, | |
| {icon: 'fa-user', size: 20}, | |
| {icon: 'fa-search', size: 18} | |
| ]; | |
| for (let i = 0; i < 8; i++) { | |
| const element = elements[Math.floor(Math.random() * elements.length)]; | |
| const youtubeElement = document.createElement('i'); | |
| youtubeElement.className = `youtube-element fab ${element.icon}`; | |
| // Random position | |
| const x = Math.random() * window.innerWidth; | |
| const y = Math.random() * window.innerHeight; | |
| youtubeElement.style.left = `${x}px`; | |
| youtubeElement.style.top = `${y}px`; | |
| youtubeElement.style.fontSize = `${element.size}px`; | |
| youtubeElement.style.animationDelay = `${Math.random() * 5}s`; | |
| // Random color variation | |
| const hue = 0 + Math.random() * 20; // Red color range | |
| youtubeElement.style.color = `hsla(${hue}, 100%, 50%, ${Math.random() * 0.3 + 0.4})`; | |
| container.appendChild(youtubeElement); | |
| } | |
| } | |
| // Handle window resize | |
| window.addEventListener('resize', function() { | |
| if (currentScene === 2) { // Recreate network for Scene 3 on resize | |
| initializeScene(2); | |
| } | |
| }); | |
| // Start with first scene | |
| showScene(0); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dfbdokk/digital-greeting-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |