Spaces:
Running
Running
import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; const OracleCard = ({ card, isActive }) => { const renderSymbol = () => { switch (card.id) { case 1: // AETHERIA OS return ( <div className="relative w-32 h-32"> <motion.div className="absolute inset-0 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-cyan-500/50" animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 3, repeat: Infinity }} /> {[...Array(7)].map((_, i) => ( <motion.div key={i} className="absolute top-1/2 left-1/2 w-0.5 h-16 bg-gradient-to-t from-transparent via-cyan-400 to-cyan-200 origin-bottom" style={{ transform: `translate(-50%, -50%) rotate(${i * 51.43}deg)` }} animate={{ opacity: [0.3, 1, 0.3] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} /> ))} </div> ); case 2: // CORE PHILOSOPHY return ( <div className="relative w-36 h-36"> {[...Array(5)].map((_, i) => { const size = 144 - i * 24; const colors = ['border-cyan-400', 'border-purple-500', 'border-pink-500', 'border-green-400', 'border-yellow-400']; return ( <motion.div key={i} className={`absolute rounded-full border-2 ${colors[i]} shadow-lg`} style={{ width: size, height: size, top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} animate={{ rotate: 360 * (i % 2 === 0 ? 1 : -1) }} transition={{ duration: 20 + i * 5, repeat: Infinity, ease: "linear" }} /> ); })} </div> ); case 3: // GOAL return ( <div className="relative w-32 h-40"> <motion.div className="absolute bottom-0 left-1/2 w-1 h-20 bg-gradient-to-t from-cyan-400 to-purple-500 origin-bottom" style={{ transform: 'translateX(-50%)' }} /> {[...Array(6)].map((_, i) => { const angle = (i / 6) * Math.PI * 2; const length = 25 + Math.random() * 15; return ( <motion.div key={i} className="absolute w-0.5 bg-gradient-to-t from-cyan-300 to-cyan-100 origin-bottom" style={{ height: length, left: '50%', bottom: '50%', transform: `translateX(-50%) rotate(${angle}rad)` }} animate={{ opacity: [0.5, 1, 0.5] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.3 }} /> ); })} {[...Array(8)].map((_, i) => { const angle = (i / 8) * Math.PI * 2; const distance = 35; return ( <motion.div key={i} className="absolute w-2 h-2 rounded-full bg-white shadow-lg shadow-cyan-400/50" style={{ left: `calc(50% + ${Math.cos(angle) * distance}px)`, top: `calc(50% + ${Math.sin(angle) * distance}px)` }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} /> ); })} </div> ); case 4: // KEY PRINCIPLES return ( <div className="relative w-36 h-20"> <motion.div className="absolute w-20 h-20 border-t-4 border-l-4 border-cyan-400 rounded-full shadow-lg shadow-cyan-500/30" animate={{ rotate: 360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear" }} /> <motion.div className="absolute right-0 w-20 h-20 border-b-4 border-r-4 border-purple-500 rounded-full shadow-lg shadow-purple-500/30" animate={{ rotate: 360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear", delay: 0.5 }} /> </div> ); case 5: // COGNITIVE CORES return ( <div className="relative w-40 h-32"> {[...Array(7)].map((_, i) => { const colors = ['from-pink-500 to-purple-600', 'from-cyan-400 to-blue-500', 'from-green-400 to-teal-500', 'from-yellow-400 to-orange-500', 'from-red-500 to-pink-600', 'from-indigo-500 to-purple-600', 'from-teal-400 to-cyan-500']; return ( <motion.div key={i} className={`absolute w-6 h-12 bg-gradient-to-t ${colors[i]} clip-path-crystal shadow-lg`} style={{ left: `${10 + i * 12}%`, top: `${30 + Math.sin(i) * 20}%`, clipPath: 'polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)' }} animate={{ y: [0, -5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }} /> ); })} </div> ); case 6: // SACRED RITES return ( <div className="relative w-36 h-36"> <motion.div className="absolute inset-0 rounded-full border-2 border-cyan-400 shadow-lg shadow-cyan-500/30" animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} /> {[...Array(12)].map((_, i) => { const angle = (i / 12) * Math.PI * 2; const radius = 65; return ( <motion.div key={i} className="absolute w-3 h-3 rounded-full bg-purple-500 shadow-lg shadow-purple-500/50" style={{ left: `calc(50% + ${Math.cos(angle) * radius}px)`, top: `calc(50% + ${Math.sin(angle) * radius}px)` }} animate={{ scale: [1, 1.5, 1], opacity: [0.7, 1, 0.7] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }} /> ); })} </div> ); case 7: // AETHERIC PIPES return ( <div className="relative w-40 h-32"> {[...Array(8)].map((_, i) => ( <motion.div key={i} className="absolute h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent rounded-full shadow-lg shadow-cyan-500/30" style={{ width: `${60 + Math.random() * 80}px`, top: `${10 + i * 12}%`, left: `${5 + Math.random() * 10}%`, transform: `rotate(${Math.random() * 30 - 15}deg)` }} animate={{ opacity: [0.3, 0.8, 0.3], x: [0, 5, 0] }} transition={{ duration: 3, repeat: Infinity, delay: i * 0.2 }} /> ))} </div> ); case 8: // HUMAN OVERSIGHT return ( <div className="relative w-32 h-32"> <motion.div className="absolute inset-0 rounded-full border-4 border-cyan-400 shadow-lg shadow-cyan-500/30" animate={{ scale: [1, 1.05, 1] }} transition={{ duration: 4, repeat: Infinity }} /> <motion.div className="absolute inset-4 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-purple-500/30" animate={{ scale: [1, 1.03, 1] }} transition={{ duration: 3, repeat: Infinity }} /> <motion.div className="absolute inset-8 rounded-full bg-black" animate={{ scale: [1, 1.02, 1] }} transition={{ duration: 2, repeat: Infinity }} /> </div> ); case 9: // SELF-EVOLUTION return ( <div className="relative w-36 h-36"> <motion.svg className="absolute inset-0" viewBox="0 0 144 144" animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} > <path d="M72,24 C100,24 120,44 120,72 C120,100 100,120 72,120 C44,120 24,100 24,72 C24,44 44,24 72,24 Z" fill="none" stroke="url(#ouroborosGradient)" strokeWidth="4" /> <defs> <linearGradient id="ouroborosGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stopColor="#00ffff" /> <stop offset="100%" stopColor="#6a00ff" /> </linearGradient> </defs> </motion.svg> <motion.div className="absolute w-6 h-6 bg-cyan-400 clip-path-triangle shadow-lg shadow-cyan-500/50" style={{ top: '0%', left: '50%', transform: 'translate(-50%, -50%)', clipPath: 'polygon(0% 0%, 100% 50%, 0% 100%, 0% 50%)' }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity }} /> <motion.div className="absolute w-4 h-4 rounded-full bg-cyan-400 shadow-lg shadow-cyan-500/50" style={{ bottom: '0%', left: '50%', transform: 'translate(-50%, 50%)' }} animate={{ scale: [1, 1.3, 1] }} transition={{ duration: 2, repeat: Infinity, delay: 1 }} /> </div> ); default: return null; } }; return ( <motion.div className="flex flex-col items-center p-6 bg-gradient-to-br from-gray-900 to-black rounded-2xl border border-gray-800 shadow-2xl w-72 h-96 relative overflow-hidden" style={{ boxShadow: '0 0 30px rgba(100, 100, 255, 0.1)', background: 'linear-gradient(145deg, #0f0f2a, #1a1a3a)' }} whileHover={{ y: -10, scale: 1.02 }} transition={{ duration: 0.3 }} > {/* Glow border effect */} <div className="absolute inset-0 rounded-2xl pointer-events-none"> <div className="absolute inset-0 rounded-2xl opacity-20 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 animate-pulse" /> </div> <h2 className="text-2xl font-bold text-center mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 z-10"> {card.title} </h2> <p className="text-sm text-center text-gray-300 mb-8 z-10"> {card.subtitle} </p> <div className="flex-1 flex items-center justify-center w-full z-10"> {renderSymbol()} </div> {/* Subtle background pattern */} <div className="absolute inset-0 opacity-5" style={{ backgroundImage: `radial-gradient(circle at center, #6a00ff 0%, transparent 70%)` }} /> </motion.div> ); }; const CarouselIndicator = ({ currentIndex, total, onDotClick }) => { return ( <div className="flex space-x-2 z-20"> {[...Array(total)].map((_, index) => ( <button key={index} className={`w-3 h-3 rounded-full transition-all duration-300 ${ index === currentIndex ? 'bg-cyan-400 shadow-lg shadow-cyan-500/50 scale-125' : 'bg-gray-700 hover:bg-gray-600' }`} onClick={() => onDotClick(index)} /> ))} </div> ); }; export default function App() { const [currentIndex, setCurrentIndex] = useState(0); const [direction, setDirection] = useState(1); const cards = [ { id: 1, title: "AETHERIA OS", subtitle: "Meta-Operating System for Collaborative Intelligence" }, { id: 2, title: "CORE PHILOSOPHY", subtitle: "Orchestrating and Evolving Collaborative Intelligence" }, { id: 3, title: "GOAL", subtitle: "Autonomous Cognitive Ecosystem" }, { id: 4, title: "KEY PRINCIPLES", subtitle: "Dynamic Role-Based Collaboration & Continuous Self-Improvement" }, { id: 5, title: "COGNITIVE CORES (CCs)", subtitle: "Specialized AI Archetypes embodying Divine Roles" }, { id: 6, title: "SACRED RITES", subtitle: "Dynamic Workflows for Orchestration and Optimization" }, { id: 7, title: "AETHERIC PIPES", subtitle: "Self-Regulating Conduits of Flow and Adaptation" }, { id: 8, title: "HUMAN OVERSIGHT", subtitle: "The Watcher" }, { id: 9, title: "SELF-EVOLUTION", subtitle: "The Ouroboros" } ]; const nextSlide = () => { setDirection(1); setCurrentIndex((prev) => (prev + 1) % cards.length); }; const prevSlide = () => { setDirection(-1); setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length); }; const goToSlide = (index) => { setDirection(index > currentIndex ? 1 : -1); setCurrentIndex(index); }; // Auto-rotate carousel useEffect(() => { const interval = setInterval(() => { nextSlide(); }, 3000); return () => clearInterval(interval); }, []); const slideVariants = { enter: (direction) => ({ x: direction > 0 ? 1000 : -1000, opacity: 0, scale: 0.8 }), center: { zIndex: 1, x: 0, opacity: 1, scale: 1 }, exit: (direction) => ({ zIndex: 0, x: direction < 0 ? 1000 : -1000, opacity: 0, scale: 0.8 }) }; return ( <div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col items-center justify-center p-8 overflow-hidden relative"> {/* Background particles */} <div className="absolute inset-0 overflow-hidden"> {[...Array(50)].map((_, i) => ( <motion.div key={i} className="absolute rounded-full bg-cyan-400" style={{ width: Math.random() * 4 + 1, height: Math.random() * 4 + 1, left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, }} animate={{ y: [0, -100], opacity: [0, 1, 0] }} transition={{ duration: Math.random() * 3 + 2, repeat: Infinity, delay: Math.random() * 2 }} /> ))} </div> <div className="relative w-full max-w-6xl flex items-center justify-center"> <button onClick={prevSlide} className="absolute left-4 z-20 w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg" > ‹ </button> <div className="relative w-full h-96 flex items-center justify-center overflow-hidden"> <AnimatePresence initial={false} custom={direction}> <motion.div key={currentIndex} custom={direction} variants={slideVariants} initial="enter" animate="center" exit="exit" transition={{ x: { type: "spring", stiffness: 300, damping: 30 }, opacity: { duration: 0.2 } }} className="absolute" > <OracleCard card={cards[currentIndex]} isActive={true} /> </motion.div> </AnimatePresence> </div> <button onClick={nextSlide} className="absolute right-4 z-20 w-12 h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg" > › </button> </div> <div className="mt-12 flex flex-col items-center space-y-6"> <CarouselIndicator currentIndex={currentIndex} total={cards.length} onDotClick={goToSlide} /> <div className="text-center max-w-2xl"> <h3 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 mb-4"> {cards[currentIndex].title} </h3> <p className="text-gray-300 text-lg"> {cards[currentIndex].subtitle} </p> </div> </div> {/* Subtle glow effect */} <div className="absolute inset-0 pointer-events-none"> <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl" /> </div> </div> ); } - Initial Deployment
412341c verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Oracle Card Carousel</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script> | |
| <style> | |
| .clip-path-crystal { | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| } | |
| .clip-path-triangle { | |
| clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 50%); | |
| } | |
| .card-glow { | |
| box-shadow: 0 0 30px rgba(100, 100, 255, 0.1); | |
| background: linear-gradient(145deg, #0f0f2a, #1a1a3a); | |
| } | |
| .bg-pattern { | |
| background-image: radial-gradient(circle at center, #6a00ff 0%, transparent 70%); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .rotate-animation { | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .pulse-animation { | |
| animation: pulse 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .float-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 overflow-hidden"> | |
| <div class="relative w-full min-h-screen flex flex-col items-center justify-center p-4 md:p-8"> | |
| <!-- Background particles --> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div id="particles"></div> | |
| </div> | |
| <!-- Main carousel container --> | |
| <div class="relative w-full max-w-6xl flex items-center justify-center"> | |
| <!-- Previous button --> | |
| <button id="prevBtn" class="absolute left-0 md:left-4 z-20 w-10 h-10 md:w-12 md:h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg"> | |
| ‹ | |
| </button> | |
| <!-- Carousel slides --> | |
| <div id="carousel" class="relative w-full h-80 md:h-96 flex items-center justify-center overflow-hidden"> | |
| <!-- Cards will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Next button --> | |
| <button id="nextBtn" class="absolute right-0 md:right-4 z-20 w-10 h-10 md:w-12 md:h-12 rounded-full bg-black/30 backdrop-blur-sm border border-gray-700 text-cyan-400 text-2xl flex items-center justify-center hover:bg-gray-800/50 transition-all duration-300 shadow-lg"> | |
| › | |
| </button> | |
| </div> | |
| <!-- Indicators and text --> | |
| <div class="mt-8 md:mt-12 flex flex-col items-center space-y-4 md:space-y-6"> | |
| <!-- Indicators --> | |
| <div id="indicators" class="flex space-x-2 z-20"> | |
| <!-- Indicators will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Text content --> | |
| <div id="textContent" class="text-center max-w-2xl px-4"> | |
| <h3 id="cardTitle" class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 mb-2 md:mb-4"></h3> | |
| <p id="cardSubtitle" class="text-gray-300 text-sm md:text-lg"></p> | |
| </div> | |
| </div> | |
| <!-- Subtle glow effect --> | |
| <div class="absolute inset-0 pointer-events-none"> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 md:w-96 md:h-96 bg-cyan-500/5 rounded-full blur-3xl"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Card data | |
| const cards = [ | |
| { | |
| id: 1, | |
| title: "AETHERIA OS", | |
| subtitle: "Meta-Operating System for Collaborative Intelligence" | |
| }, | |
| { | |
| id: 2, | |
| title: "CORE PHILOSOPHY", | |
| subtitle: "Orchestrating and Evolving Collaborative Intelligence" | |
| }, | |
| { | |
| id: 3, | |
| title: "GOAL", | |
| subtitle: "Autonomous Cognitive Ecosystem" | |
| }, | |
| { | |
| id: 4, | |
| title: "KEY PRINCIPLES", | |
| subtitle: "Dynamic Role-Based Collaboration & Continuous Self-Improvement" | |
| }, | |
| { | |
| id: 5, | |
| title: "COGNITIVE CORES (CCs)", | |
| subtitle: "Specialized AI Archetypes embodying Divine Roles" | |
| }, | |
| { | |
| id: 6, | |
| title: "SACRED RITES", | |
| subtitle: "Dynamic Workflows for Orchestration and Optimization" | |
| }, | |
| { | |
| id: 7, | |
| title: "AETHERIC PIPES", | |
| subtitle: "Self-Regulating Conduits of Flow and Adaptation" | |
| }, | |
| { | |
| id: 8, | |
| title: "HUMAN OVERSIGHT", | |
| subtitle: "The Watcher" | |
| }, | |
| { | |
| id: 9, | |
| title: "SELF-EVOLUTION", | |
| subtitle: "The Ouroboros" | |
| } | |
| ]; | |
| // Current index and direction | |
| let currentIndex = 0; | |
| let direction = 1; | |
| let autoRotateInterval; | |
| // Initialize the carousel | |
| function initCarousel() { | |
| createParticles(); | |
| renderCarousel(); | |
| renderIndicators(); | |
| updateTextContent(); | |
| startAutoRotate(); | |
| setupEventListeners(); | |
| } | |
| // Create background particles | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'absolute rounded-full bg-cyan-400'; | |
| particle.style.width = `${Math.random() * 4 + 1}px`; | |
| particle.style.height = `${Math.random() * 4 + 1}px`; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| particle.style.opacity = '0'; | |
| // Animation | |
| particle.style.animation = `fadeIn ${Math.random() * 3 + 2}s ease-in-out infinite`; | |
| particle.style.animationDelay = `${Math.random() * 2}s`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Render the carousel with cards | |
| function renderCarousel() { | |
| const carousel = document.getElementById('carousel'); | |
| carousel.innerHTML = ''; | |
| // Create card for current index | |
| const card = createCard(cards[currentIndex], true); | |
| carousel.appendChild(card); | |
| } | |
| // Create a card element | |
| function createCard(card, isActive) { | |
| const cardElement = document.createElement('div'); | |
| cardElement.className = 'flex flex-col items-center p-4 md:p-6 bg-gradient-to-br from-gray-900 to-black rounded-2xl border border-gray-800 shadow-2xl w-64 md:w-72 h-64 md:h-80 relative overflow-hidden card-glow transition-all duration-300'; | |
| if (isActive) { | |
| cardElement.classList.add('float-animation'); | |
| } | |
| // Glow border effect | |
| const glowBorder = document.createElement('div'); | |
| glowBorder.className = 'absolute inset-0 rounded-2xl pointer-events-none'; | |
| const glowInner = document.createElement('div'); | |
| glowInner.className = 'absolute inset-0 rounded-2xl opacity-20 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 animate-pulse'; | |
| glowBorder.appendChild(glowInner); | |
| cardElement.appendChild(glowBorder); | |
| // Title | |
| const title = document.createElement('h2'); | |
| title.className = 'text-xl md:text-2xl font-bold text-center mb-1 md:mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500 z-10'; | |
| title.textContent = card.title; | |
| cardElement.appendChild(title); | |
| // Subtitle | |
| const subtitle = document.createElement('p'); | |
| subtitle.className = 'text-xs md:text-sm text-center text-gray-300 mb-4 md:mb-6 z-10'; | |
| subtitle.textContent = card.subtitle; | |
| cardElement.appendChild(subtitle); | |
| // Symbol container | |
| const symbolContainer = document.createElement('div'); | |
| symbolContainer.className = 'flex-1 flex items-center justify-center w-full z-10'; | |
| // Render symbol based on card ID | |
| const symbol = renderSymbol(card.id); | |
| if (symbol) { | |
| symbolContainer.appendChild(symbol); | |
| } | |
| cardElement.appendChild(symbolContainer); | |
| // Subtle background pattern | |
| const bgPattern = document.createElement('div'); | |
| bgPattern.className = 'absolute inset-0 opacity-5 bg-pattern'; | |
| cardElement.appendChild(bgPattern); | |
| return cardElement; | |
| } | |
| // Render symbol based on card ID | |
| function renderSymbol(cardId) { | |
| const container = document.createElement('div'); | |
| switch (cardId) { | |
| case 1: // AETHERIA OS | |
| container.className = 'relative w-24 h-24 md:w-32 md:h-32'; | |
| // Main circle | |
| const circle1 = document.createElement('div'); | |
| circle1.className = 'absolute inset-0 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-cyan-500/50 pulse-animation'; | |
| container.appendChild(circle1); | |
| // Rays | |
| for (let i = 0; i < 7; i++) { | |
| const ray = document.createElement('div'); | |
| ray.className = 'absolute top-1/2 left-1/2 w-0.5 h-12 md:h-16 bg-gradient-to-t from-transparent via-cyan-400 to-cyan-200 origin-bottom'; | |
| ray.style.transform = `translate(-50%, -50%) rotate(${i * 51.43}deg)`; | |
| ray.style.animation = `fadeIn 2s ease-in-out infinite`; | |
| ray.style.animationDelay = `${i * 0.2}s`; | |
| container.appendChild(ray); | |
| } | |
| break; | |
| case 2: // CORE PHILOSOPHY | |
| container.className = 'relative w-28 h-28 md:w-36 md:h-36'; | |
| // Concentric circles | |
| for (let i = 0; i < 5; i++) { | |
| const size = 120 - i * 24; | |
| const colors = ['border-cyan-400', 'border-purple-500', 'border-pink-500', 'border-green-400', 'border-yellow-400']; | |
| const circle = document.createElement('div'); | |
| circle.className = `absolute rounded-full border-2 ${colors[i]} shadow-lg rotate-animation`; | |
| circle.style.width = `${size}px`; | |
| circle.style.height = `${size}px`; | |
| circle.style.top = '50%'; | |
| circle.style.left = '50%'; | |
| circle.style.transform = 'translate(-50%, -50%)'; | |
| circle.style.animationDuration = `${20 + i * 5}s`; | |
| if (i % 2 === 1) { | |
| circle.style.animationDirection = 'reverse'; | |
| } | |
| container.appendChild(circle); | |
| } | |
| break; | |
| case 3: // GOAL | |
| container.className = 'relative w-24 h-32 md:w-32 md:h-40'; | |
| // Main line | |
| const line = document.createElement('div'); | |
| line.className = 'absolute bottom-0 left-1/2 w-1 h-16 md:h-20 bg-gradient-to-t from-cyan-400 to-purple-500 origin-bottom'; | |
| line.style.transform = 'translateX(-50%)'; | |
| container.appendChild(line); | |
| // Radial lines | |
| for (let i = 0; i < 6; i++) { | |
| const angle = (i / 6) * Math.PI * 2; | |
| const length = 20 + Math.random() * 15; | |
| const radialLine = document.createElement('div'); | |
| radialLine.className = 'absolute w-0.5 bg-gradient-to-t from-cyan-300 to-cyan-100 origin-bottom'; | |
| radialLine.style.height = `${length}px`; | |
| radialLine.style.left = '50%'; | |
| radialLine.style.bottom = '50%'; | |
| radialLine.style.transform = `translateX(-50%) rotate(${angle}rad)`; | |
| radialLine.style.animation = `fadeIn 3s ease-in-out infinite`; | |
| radialLine.style.animationDelay = `${i * 0.3}s`; | |
| container.appendChild(radialLine); | |
| } | |
| // Dots | |
| for (let i = 0; i < 8; i++) { | |
| const angle = (i / 8) * Math.PI * 2; | |
| const distance = 28; | |
| const dot = document.createElement('div'); | |
| dot.className = 'absolute w-2 h-2 rounded-full bg-white shadow-lg shadow-cyan-400/50'; | |
| dot.style.left = `calc(50% + ${Math.cos(angle) * distance}px)`; | |
| dot.style.top = `calc(50% + ${Math.sin(angle) * distance}px)`; | |
| dot.style.animation = `pulse 2s ease-in-out infinite`; | |
| dot.style.animationDelay = `${i * 0.2}s`; | |
| container.appendChild(dot); | |
| } | |
| break; | |
| case 4: // KEY PRINCIPLES | |
| container.className = 'relative w-28 h-16 md:w-36 md:h-20'; | |
| // First arc | |
| const arc1 = document.createElement('div'); | |
| arc1.className = 'absolute w-16 h-16 border-t-4 border-l-4 border-cyan-400 rounded-full shadow-lg shadow-cyan-500/30 rotate-animation'; | |
| arc1.style.animationDuration = '15s'; | |
| container.appendChild(arc1); | |
| // Second arc | |
| const arc2 = document.createElement('div'); | |
| arc2.className = 'absolute right-0 w-16 h-16 border-b-4 border-r-4 border-purple-500 rounded-full shadow-lg shadow-purple-500/30 rotate-animation'; | |
| arc2.style.animationDuration = '15s'; | |
| arc2.style.animationDelay = '0.5s'; | |
| container.appendChild(arc2); | |
| break; | |
| case 5: // COGNITIVE CORES | |
| container.className = 'relative w-32 h-24 md:w-40 md:h-32'; | |
| // Crystals | |
| const colors = ['from-pink-500 to-purple-600', 'from-cyan-400 to-blue-500', 'from-green-400 to-teal-500', 'from-yellow-400 to-orange-500', 'from-red-500 to-pink-600', 'from-indigo-500 to-purple-600', 'from-teal-400 to-cyan-500']; | |
| for (let i = 0; i < 7; i++) { | |
| const crystal = document.createElement('div'); | |
| crystal.className = `absolute w-5 h-8 md:w-6 md:h-12 bg-gradient-to-t ${colors[i]} clip-path-crystal shadow-lg`; | |
| crystal.style.left = `${10 + i * 12}%`; | |
| crystal.style.top = `${30 + Math.sin(i) * 20}%`; | |
| crystal.style.animation = `float 3s ease-in-out infinite`; | |
| crystal.style.animationDelay = `${i * 0.2}s`; | |
| container.appendChild(crystal); | |
| } | |
| break; | |
| case 6: // SACRED RITES | |
| container.className = 'relative w-28 h-28 md:w-36 md:h-36'; | |
| // Main circle | |
| const circle6 = document.createElement('div'); | |
| circle6.className = 'absolute inset-0 rounded-full border-2 border-cyan-400 shadow-lg shadow-cyan-500/30 rotate-animation'; | |
| circle6.style.animationDuration = '20s'; | |
| container.appendChild(circle6); | |
| // Dots around | |
| for (let i = 0; i < 12; i++) { | |
| const angle = (i / 12) * Math.PI * 2; | |
| const radius = 50; | |
| const dot = document.createElement('div'); | |
| dot.className = 'absolute w-2 h-2 md:w-3 md:h-3 rounded-full bg-purple-500 shadow-lg shadow-purple-500/50'; | |
| dot.style.left = `calc(50% + ${Math.cos(angle) * radius}px)`; | |
| dot.style.top = `calc(50% + ${Math.sin(angle) * radius}px)`; | |
| dot.style.animation = `pulse 2s ease-in-out infinite`; | |
| dot.style.animationDelay = `${i * 0.1}s`; | |
| container.appendChild(dot); | |
| } | |
| break; | |
| case 7: // AETHERIC PIPES | |
| container.className = 'relative w-32 h-24 md:w-40 md:h-32'; | |
| // Pipes | |
| for (let i = 0; i < 8; i++) { | |
| const pipe = document.createElement('div'); | |
| pipe.className = 'absolute h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent rounded-full shadow-lg shadow-cyan-500/30'; | |
| pipe.style.width = `${40 + Math.random() * 80}px`; | |
| pipe.style.top = `${10 + i * 12}%`; | |
| pipe.style.left = `${5 + Math.random() * 10}%`; | |
| pipe.style.transform = `rotate(${Math.random() * 30 - 15}deg)`; | |
| pipe.style.animation = `fadeIn 3s ease-in-out infinite, float 3s ease-in-out infinite`; | |
| pipe.style.animationDelay = `${i * 0.2}s`; | |
| container.appendChild(pipe); | |
| } | |
| break; | |
| case 8: // HUMAN OVERSIGHT | |
| container.className = 'relative w-24 h-24 md:w-32 md:h-32'; | |
| // Outer circle | |
| const outerCircle = document.createElement('div'); | |
| outerCircle.className = 'absolute inset-0 rounded-full border-4 border-cyan-400 shadow-lg shadow-cyan-500/30 pulse-animation'; | |
| outerCircle.style.animationDuration = '4s'; | |
| container.appendChild(outerCircle); | |
| // Middle circle | |
| const middleCircle = document.createElement('div'); | |
| middleCircle.className = 'absolute inset-4 rounded-full bg-gradient-to-br from-cyan-400 to-purple-600 shadow-lg shadow-purple-500/30 pulse-animation'; | |
| middleCircle.style.animationDuration = '3s'; | |
| container.appendChild(middleCircle); | |
| // Inner circle | |
| const innerCircle = document.createElement('div'); | |
| innerCircle.className = 'absolute inset-6 md:inset-8 rounded-full bg-black pulse-animation'; | |
| innerCircle.style.animationDuration = '2s'; | |
| container.appendChild(innerCircle); | |
| break; | |
| case 9: // SELF-EVOLUTION | |
| container.className = 'relative w-28 h-28 md:w-36 md:h-36'; | |
| // Circle SVG | |
| const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | |
| svg.setAttribute("class", "absolute inset-0 rotate-animation"); | |
| svg.setAttribute("viewBox", "0 0 144 144"); | |
| svg.style.animationDuration = '20s'; | |
| const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
| path.setAttribute("d", "M72,24 C100,24 120,44 120,72 C120,100 100,120 72,120 C44,120 24,100 24,72 C24,44 44,24 72,24 Z"); | |
| path.setAttribute("fill", "none"); | |
| path.setAttribute("stroke", "url(#ouroborosGradient)"); | |
| path.setAttribute("stroke-width", "4"); | |
| const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); | |
| const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient"); | |
| gradient.setAttribute("id", "ouroborosGradient"); | |
| gradient.setAttribute("x1", "0%"); | |
| gradient.setAttribute("y1", "0%"); | |
| gradient.setAttribute("x2", "100%"); | |
| gradient.setAttribute("y2", "100%"); | |
| const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); | |
| stop1.setAttribute("offset", "0%"); | |
| stop1.setAttribute("stop-color", "#00ffff"); | |
| const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop"); | |
| stop2.setAttribute("offset", "100%"); | |
| stop2.setAttribute("stop-color", "#6a00ff"); | |
| gradient.appendChild(stop1); | |
| gradient.appendChild(stop2); | |
| defs.appendChild(gradient); | |
| svg.appendChild(defs); | |
| svg.appendChild(path); | |
| container.appendChild(svg); | |
| // Top triangle | |
| const triangle = document.createElement('div'); | |
| triangle.className = 'absolute w-5 h-5 md:w-6 md:h-6 bg-cyan-400 clip-path-triangle shadow-lg shadow-cyan-500/50'; | |
| triangle.style.top = '0%'; | |
| triangle.style.left = '50%'; | |
| triangle.style.transform = 'translate(-50%, -50%)'; | |
| triangle.style.animation = 'pulse 2s ease-in-out infinite'; | |
| container.appendChild(triangle); | |
| // Bottom circle | |
| const bottomCircle = document.createElement('div'); | |
| bottomCircle.className = 'absolute w-3 h-3 md:w-4 md:h-4 rounded-full bg-cyan-400 shadow-lg shadow-cyan-500/50'; | |
| bottomCircle.style.bottom = '0%'; | |
| bottomCircle.style.left = '50%'; | |
| bottomCircle.style.transform = 'translate(-50%, 50%)'; | |
| bottomCircle.style.animation = 'pulse 2s ease-in-out infinite'; | |
| bottomCircle.style.animationDelay = '1s'; | |
| container.appendChild(bottomCircle); | |
| break; | |
| default: | |
| return null; | |
| } | |
| return container; | |
| } | |
| // Render indicators | |
| function renderIndicators() { | |
| const indicatorsContainer = document.getElementById('indicators'); | |
| indicatorsContainer.innerHTML = ''; | |
| for (let i = 0; i < cards.length; i++) { | |
| const indicator = document.createElement('button'); | |
| indicator.className = `w-2 h-2 md:w-3 md:h-3 rounded-full transition-all duration-300 ${i === currentIndex ? 'bg-cyan-400 shadow-lg shadow-cyan-500/50 scale-125' : 'bg-gray-700 hover:bg-gray-600'}`; | |
| indicator.addEventListener('click', () => goToSlide(i)); | |
| indicatorsContainer.appendChild(indicator); | |
| } | |
| } | |
| // Update text content | |
| function updateTextContent() { | |
| document.getElementById('cardTitle').textContent = cards[currentIndex].title; | |
| document.getElementById('cardSubtitle').textContent = cards[currentIndex].subtitle; | |
| } | |
| // Go to next slide | |
| function nextSlide() { | |
| direction = 1; | |
| currentIndex = (currentIndex + 1) % cards.length; | |
| updateCarousel(); | |
| } | |
| // Go to previous slide | |
| function prevSlide() { | |
| direction = -1; | |
| currentIndex = (currentIndex - 1 + cards.length) % cards.length; | |
| updateCarousel(); | |
| } | |
| // Go to specific slide | |
| function goToSlide(index) { | |
| direction = index > currentIndex ? 1 : -1; | |
| currentIndex = index; | |
| updateCarousel(); | |
| } | |
| // Update carousel with animation | |
| function updateCarousel() { | |
| const carousel = document.getElementById('carousel'); | |
| // Remove current card | |
| while (carousel.firstChild) { | |
| carousel.removeChild(carousel.firstChild); | |
| } | |
| // Add new card with fade animation | |
| const newCard = createCard(cards[currentIndex], true); | |
| newCard.classList.add('fade-in'); | |
| carousel.appendChild(newCard); | |
| // Update indicators | |
| renderIndicators(); | |
| // Update text content | |
| updateTextContent(); | |
| } | |
| // Start auto rotation | |
| function startAutoRotate() { | |
| autoRotateInterval = setInterval(() => { | |
| nextSlide(); | |
| }, 3000); | |
| } | |
| // Setup event listeners | |
| function setupEventListeners() { | |
| document.getElementById('prevBtn').addEventListener('click', () => { | |
| clearInterval(autoRotateInterval); | |
| prevSlide(); | |
| startAutoRotate(); | |
| }); | |
| document.getElementById('nextBtn').addEventListener('click', () => { | |
| clearInterval(autoRotateInterval); | |
| nextSlide(); | |
| startAutoRotate(); | |
| }); | |
| // Pause auto rotation on hover | |
| const carousel = document.getElementById('carousel'); | |
| carousel.addEventListener('mouseenter', () => { | |
| clearInterval(autoRotateInterval); | |
| }); | |
| carousel.addEventListener('mouseleave', () => { | |
| startAutoRotate(); | |
| }); | |
| } | |
| // Initialize the carousel when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', initCarousel); | |
| </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/aetheria-os-cards" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |