Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BeamGen - Animated Beam Generator</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-beam { | |
| background: linear-gradient(90deg, rgba(14, 165, 233, 0) 0%, rgba(14, 165, 233, 0.5) 25%, rgba(14, 165, 233, 0.5) 75%, rgba(14, 165, 233, 0) 100%); | |
| height: 2px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .gradient-beam::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); | |
| animation: beam-animation 2s ease-in-out infinite; | |
| } | |
| @keyframes beam-animation { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .canvas-container { | |
| background-image: | |
| linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .tab-active { | |
| position: relative; | |
| } | |
| .tab-active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background-color: #0ea5e9; | |
| } | |
| .dot-grid { | |
| background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); | |
| background-size: 10px 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 transition-colors duration-200"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-dark-800/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white"> | |
| <path d="M5 12h14"></path> | |
| <path d="M12 5l7 7-7 7"></path> | |
| </svg> | |
| </div> | |
| <span class="ml-2 text-xl font-bold dark:text-white">BeamGen</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary-500 text-white">Editor</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Gallery</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Docs</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700">Pricing</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button type="button" class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none"> | |
| <span class="sr-only">Dark mode</span> | |
| <i class="fas fa-moon" id="dark-mode-toggle"></i> | |
| </button> | |
| <button class="ml-4 px-4 py-2 rounded-md text-sm font-medium border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white transition-colors"> | |
| Sign in | |
| </button> | |
| <button class="ml-2 px-4 py-2 rounded-md text-sm font-medium bg-primary-500 text-white hover:bg-primary-600 transition-colors"> | |
| Sign up | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="pt-16 pb-12 flex flex-col h-screen"> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 overflow-y-auto custom-scrollbar"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Beam Properties</h2> | |
| <button class="text-xs text-primary-500 hover:text-primary-600">Reset</button> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Path Type --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Path Type</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16" /> | |
| </svg> | |
| <span class="text-xs mt-1">Straight</span> | |
| </button> | |
| <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5l7 7-7 7" /> | |
| </svg> | |
| <span class="text-xs mt-1">Curved</span> | |
| </button> | |
| <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14m7-7H5" /> | |
| </svg> | |
| <span class="text-xs mt-1">Zigzag</span> | |
| </button> | |
| <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <span class="text-xs mt-1">Circular</span> | |
| </button> | |
| <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /> | |
| </svg> | |
| <span class="text-xs mt-1">Spline</span> | |
| </button> | |
| <button class="p-2 border rounded-md hover:border-primary-500 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" /> | |
| </svg> | |
| <span class="text-xs mt-1">3D</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Color Settings --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Color</h3> | |
| <div class="flex space-x-2 mb-2"> | |
| <button class="px-3 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700">Solid</button> | |
| <button class="px-3 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">Gradient</button> | |
| <button class="px-3 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">Animated</button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-md bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer"></div> | |
| <input type="text" value="#0ea5e9" class="flex-1 text-xs px-2 py-1 border rounded-md dark:bg-gray-700"> | |
| </div> | |
| </div> | |
| <!-- Width Slider --> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h3 class="text-sm font-medium">Width</h3> | |
| <span class="text-xs">4px</span> | |
| </div> | |
| <input type="range" min="1" max="20" value="4" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> | |
| </div> | |
| <!-- Opacity Slider --> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h3 class="text-sm font-medium">Opacity</h3> | |
| <span class="text-xs">80%</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> | |
| </div> | |
| <!-- Animation Settings --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Animation</h3> | |
| <div class="grid grid-cols-2 gap-2 mb-2"> | |
| <button class="px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700">On Load</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">On Hover</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">On Click</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">On Scroll</button> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-xs">Speed</span> | |
| <span class="text-xs">Medium</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"> | |
| </div> | |
| <!-- Effects --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Effects</h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-primary-500"> | |
| <span class="text-sm">Pulsing</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-primary-500"> | |
| <span class="text-sm">Sparkling</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-primary-500" checked> | |
| <span class="text-sm">Glow</span> | |
| </label> | |
| <label class="flex items-center space-x-2"> | |
| <input type="checkbox" class="rounded text-primary-500"> | |
| <span class="text-sm">Particles</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Canvas --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Toolbar --> | |
| <div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 p-2 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> | |
| </svg> | |
| </button> | |
| <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> | |
| </svg> | |
| </button> | |
| <div class="border-l border-gray-200 dark:border-gray-700 mx-2"></div> | |
| <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /> | |
| </svg> | |
| </button> | |
| <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm rounded-md border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> | |
| </svg> | |
| Export | |
| </button> | |
| <button class="px-3 py-1 text-sm rounded-md bg-primary-500 text-white hover:bg-primary-600"> | |
| Save | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Area --> | |
| <div class="flex-1 overflow-auto canvas-container dot-grid relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-full max-w-2xl mx-auto p-8"> | |
| <div class="relative"> | |
| <!-- Sample Beam --> | |
| <div class="gradient-beam w-full mb-8"></div> | |
| <!-- Start and End Points --> | |
| <div class="flex justify-between"> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center cursor-move shadow-lg"> | |
| <div class="w-3 h-3 bg-white rounded-full"></div> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center cursor-move shadow-lg"> | |
| <div class="w-3 h-3 bg-white rounded-full"></div> | |
| </div> | |
| </div> | |
| <!-- Control Points (for curved beams) --> | |
| <div class="absolute top-1/2 left-1/4 transform -translate-y-1/2"> | |
| <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center cursor-move shadow-lg"> | |
| <div class="w-2 h-2 bg-white rounded-full"></div> | |
| </div> | |
| </div> | |
| <div class="absolute top-1/2 right-1/4 transform -translate-y-1/2"> | |
| <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center cursor-move shadow-lg"> | |
| <div class="w-2 h-2 bg-white rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Properties Panel --> | |
| <div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 p-4"> | |
| <div class="flex border-b border-gray-200 dark:border-gray-700"> | |
| <button class="px-4 py-2 text-sm font-medium tab-active">Beam</button> | |
| <button class="px-4 py-2 text-sm font-medium">Path</button> | |
| <button class="px-4 py-2 text-sm font-medium">Effects</button> | |
| <button class="px-4 py-2 text-sm font-medium">Export</button> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Direction</label> | |
| <select class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700"> | |
| <option>Forward</option> | |
| <option>Reverse</option> | |
| <option>Bidirectional</option> | |
| <option>Ping Pong</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Easing</label> | |
| <select class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700"> | |
| <option>Linear</option> | |
| <option>Ease In</option> | |
| <option>Ease Out</option> | |
| <option>Ease In Out</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Duration (ms)</label> | |
| <input type="number" value="2000" class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Delay (ms)</label> | |
| <input type="number" value="0" class="w-full text-sm border rounded-md px-3 py-2 dark:bg-gray-700"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Panel --> | |
| <div class="w-80 flex-shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-800 overflow-y-auto custom-scrollbar"> | |
| <div class="p-4"> | |
| <h2 class="text-lg font-semibold mb-4">Export Settings</h2> | |
| <div class="space-y-6"> | |
| <!-- Framework Selection --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Framework</h3> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="px-2 py-2 text-xs rounded-md bg-gray-100 dark:bg-gray-700 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> | |
| </svg> | |
| <span class="mt-1">React</span> | |
| </button> | |
| <button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> | |
| </svg> | |
| <span class="mt-1">Vue</span> | |
| </button> | |
| <button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> | |
| </svg> | |
| <span class="mt-1">Svelte</span> | |
| </button> | |
| <button class="px-2 py-2 text-xs rounded-md border border-gray-200 dark:border-gray-600 flex flex-col items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" /> | |
| </svg> | |
| <span class="mt-1">JS</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Export Format --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Format</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="px-2 py-1 text-xs rounded-md bg-gray-100 dark:bg-gray-700">Code</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">SVG</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">CSS</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">GIF</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">MP4</button> | |
| <button class="px-2 py-1 text-xs rounded-md border border-gray-200 dark:border-gray-600">WebM</button> | |
| </div> | |
| </div> | |
| <!-- Code Preview --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Code Preview</h3> | |
| <div class="bg-gray-800 text-gray-200 p-3 rounded-md text-xs font-mono overflow-x-auto"> | |
| <pre><code>import React from 'react'; | |
| import './Beam.css'; | |
| const AnimatedBeam = () => { | |
| return ( | |
| <div className="beam-container"> | |
| <div className="gradient-beam" /> | |
| </div> | |
| ); | |
| }; | |
| export default AnimatedBeam;</code></pre> | |
| </div> | |
| <button class="mt-2 w-full py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /> | |
| </svg> | |
| Copy Code | |
| </button> | |
| </div> | |
| <!-- Download Options --> | |
| <div> | |
| <h3 class="text-sm font-medium mb-2">Download</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full py-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> | |
| </svg> | |
| Download SVG | |
| </button> | |
| <button class="w-full py-2 border border-gray-200 dark:border-gray-600 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> | |
| </svg> | |
| Download GIF | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Dark mode toggle | |
| const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
| const html = document.documentElement; | |
| darkModeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| if (html.classList.contains('dark')) { | |
| darkModeToggle.classList.replace('fa-moon', 'fa-sun'); | |
| } else { | |
| darkModeToggle.classList.replace('fa-sun', 'fa-moon'); | |
| } | |
| }); | |
| // Check for saved theme preference or use system preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| darkModeToggle.classList.replace('fa-moon', 'fa-sun'); | |
| } else { | |
| html.classList.remove('dark'); | |
| darkModeToggle.classList.replace('fa-sun', 'fa-moon'); | |
| } | |
| // Save theme preference | |
| darkModeToggle.addEventListener('click', () => { | |
| const isDark = html.classList.contains('dark'); | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| }); | |
| // Tab switching | |
| const tabs = document.querySelectorAll('.flex.border-b button'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('tab-active')); | |
| tab.classList.add('tab-active'); | |
| }); | |
| }); | |
| </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=vikashpatel/beam" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |