|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Infinite Universe Explorer</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"> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
.spinning { |
|
|
animation: spin 20s linear infinite; |
|
|
} |
|
|
.pulsing { |
|
|
animation: pulse 3s ease infinite; |
|
|
} |
|
|
.theme-transition { |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
.particle { |
|
|
position: absolute; |
|
|
background: currentColor; |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
.gradient-mask { |
|
|
mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); |
|
|
} |
|
|
.code-container { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.5s ease; |
|
|
} |
|
|
.code-container.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
.copy-btn { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.copy-btn.copied { |
|
|
background-color: #10B981 !important; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 text-white theme-transition"> |
|
|
<div id="particles-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<header class="text-center mb-16"> |
|
|
<div class="floating inline-block mb-6"> |
|
|
<div class="spinning text-6xl mb-2"> |
|
|
<i class="fas fa-infinity"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-5xl font-bold mb-4 tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-amber-300 to-pink-400"> |
|
|
Infinite Universe Explorer |
|
|
</h1> |
|
|
<p class="text-xl opacity-80 max-w-2xl mx-auto"> |
|
|
Discover truly infinite random themes with unique colors and patterns! |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<main class="max-w-4xl mx-auto"> |
|
|
<div class="bg-white/10 backdrop-blur-lg rounded-3xl overflow-hidden border border-white/20 mb-12"> |
|
|
<div class="p-8 md:p-12"> |
|
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
|
<div class="flex-1"> |
|
|
<h2 class="text-3xl font-bold mb-4">Current Dimension</h2> |
|
|
<div id="theme-display" class="mb-6 p-6 rounded-xl bg-black/20 border border-white/10"> |
|
|
<div class="flex items-center gap-3 mb-4"> |
|
|
<span id="theme-icon" class="text-3xl"><i class="fas fa-question"></i></span> |
|
|
<span id="theme-name" class="text-2xl font-medium">Unknown Dimension</span> |
|
|
</div> |
|
|
<p id="theme-description" class="opacity-80"> |
|
|
Waiting to discover your first random dimension... |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-5 gap-2 mb-4"> |
|
|
<div id="color1" class="h-12 rounded-md relative group"> |
|
|
<div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div> |
|
|
</div> |
|
|
<div id="color2" class="h-12 rounded-md relative group"> |
|
|
<div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div> |
|
|
</div> |
|
|
<div id="color3" class="h-12 rounded-md relative group"> |
|
|
<div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div> |
|
|
</div> |
|
|
<div id="color4" class="h-12 rounded-md relative group"> |
|
|
<div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div> |
|
|
</div> |
|
|
<div id="color5" class="h-12 rounded-md relative group"> |
|
|
<div class="hex-tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-black/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div id="hex-codes" class="text-sm opacity-80 flex gap-2 flex-wrap"> |
|
|
|
|
|
</div> |
|
|
<button id="copy-hex-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full flex items-center gap-1"> |
|
|
<i class="fas fa-copy"></i> Copy |
|
|
</button> |
|
|
</div> |
|
|
<button id="generate-btn" class="pulsing w-full py-4 px-6 bg-gradient-to-r from-amber-400 to-pink-500 rounded-xl font-bold text-lg hover:opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl active:scale-95 mb-4"> |
|
|
<i class="fas fa-random mr-2"></i> Explore New Dimension |
|
|
</button> |
|
|
<button id="toggle-css-btn" class="w-full py-3 px-6 bg-white/5 hover:bg-white/10 rounded-xl font-medium transition-all duration-300 flex items-center justify-center gap-2"> |
|
|
<i class="fas fa-code"></i> Generate CSS Code |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="relative h-64 md:h-80 rounded-2xl overflow-hidden border-2 border-white/20"> |
|
|
<div id="pattern-display" class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-6xl opacity-20"><i class="fas fa-star"></i></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="css-code-container" class="code-container mt-6 bg-black/30 rounded-xl overflow-hidden"> |
|
|
<div class="p-4 border-t border-white/10 flex justify-between items-center"> |
|
|
<h3 class="font-mono font-bold text-sm">CSS Variables</h3> |
|
|
<button id="copy-css-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full flex items-center gap-1"> |
|
|
<i class="fas fa-copy"></i> Copy |
|
|
</button> |
|
|
</div> |
|
|
<pre id="css-code" class="p-4 text-sm font-mono overflow-auto max-h-64 bg-black/20"></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all"> |
|
|
<div class="text-3xl mb-4 text-amber-300"><i class="fas fa-infinity"></i></div> |
|
|
<h3 class="text-xl font-bold mb-2">Infinite Variety</h3> |
|
|
<p class="opacity-80">Every dimension is completely unique with randomly generated colors and patterns.</p> |
|
|
</div> |
|
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all"> |
|
|
<div class="text-3xl mb-4 text-pink-400"><i class="fas fa-atom"></i></div> |
|
|
<h3 class="text-xl font-bold mb-2">Quantum Colors</h3> |
|
|
<p class="opacity-80">Colors are generated using quantum-inspired algorithms for maximum uniqueness.</p> |
|
|
</div> |
|
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all"> |
|
|
<div class="text-3xl mb-4 text-purple-300"><i class="fas fa-shapes"></i></div> |
|
|
<h3 class="text-xl font-bold mb-2">Dynamic Patterns</h3> |
|
|
<p class="opacity-80">Patterns are procedurally generated to match each dimension's unique properties.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 backdrop-blur-sm p-6 rounded-2xl border border-white/10 mb-12"> |
|
|
<h2 class="text-2xl font-bold mb-4">Dimension History</h2> |
|
|
<div id="history-container" class="flex overflow-x-auto pb-4 gap-4 gradient-mask"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="text-center opacity-70 mt-20 pb-8"> |
|
|
<p>Journey through the infinite multiverse <i class="fas fa-infinity text-purple-300"></i></p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const prefixes = ["Quantum", "Neon", "Cosmic", "Hyper", "Digital", "Fractal", "Ethereal", "Void", "Celestial", "Nebula", "Chromatic", "Prismatic", "Luminous", "Dimensional", "Parallel", "Alternate", "Infinite", "Singularity", "Holographic", "Psychedelic"]; |
|
|
const suffixes = ["Realm", "Dimension", "Universe", "Expanse", "Continuum", "Vortex", "Matrix", "Spectrum", "Horizon", "Infinity", "Cosmos", "Nexus", "Plane", "Domain", "Eclipse", "Paradox", "Mandala", "Fabric", "Construct", "Abyss"]; |
|
|
const descriptors = ["where time folds upon itself", "of shimmering possibilities", "where colors sing", "beyond the veil of perception", "where physics takes a vacation", "of infinite reflections", "where light dances differently", "of impossible geometries", "where dreams take form", "of vibrating energy fields", "where reality glitches beautifully", "of chromatic harmony", "where dimensions intertwine", "of pure potentiality", "where the laws of nature rewrite themselves"]; |
|
|
|
|
|
|
|
|
const icons = [ |
|
|
"fa-atom", "fa-infinity", "fa-star", "fa-moon", "fa-sun", |
|
|
"fa-galaxy", "fa-meteor", "fa-satellite", "fa-rocket", "fa-ufo", |
|
|
"fa-shapes", "fa-cubes", "fa-dna", "fa-microscope", "fa-telescope", |
|
|
"fa-mountain", "fa-water", "fa-fire", "fa-wind", "fa-leaf", |
|
|
"fa-gem", "fa-crystal-ball", "fa-magic", "fa-hat-wizard", "fa-scroll" |
|
|
]; |
|
|
|
|
|
|
|
|
const generateBtn = document.getElementById('generate-btn'); |
|
|
const themeName = document.getElementById('theme-name'); |
|
|
const themeIcon = document.getElementById('theme-icon'); |
|
|
const themeDescription = document.getElementById('theme-description'); |
|
|
const themeDisplay = document.getElementById('theme-display'); |
|
|
const patternDisplay = document.getElementById('pattern-display'); |
|
|
const body = document.querySelector('body'); |
|
|
const particlesContainer = document.getElementById('particles-container'); |
|
|
const historyContainer = document.getElementById('history-container'); |
|
|
const hexCodesContainer = document.getElementById('hex-codes'); |
|
|
const copyHexBtn = document.getElementById('copy-hex-btn'); |
|
|
const toggleCssBtn = document.getElementById('toggle-css-btn'); |
|
|
const cssCodeContainer = document.getElementById('css-code-container'); |
|
|
const cssCode = document.getElementById('css-code'); |
|
|
const copyCssBtn = document.getElementById('copy-css-btn'); |
|
|
|
|
|
|
|
|
const colorElements = [ |
|
|
document.getElementById('color1'), |
|
|
document.getElementById('color2'), |
|
|
document.getElementById('color3'), |
|
|
document.getElementById('color4'), |
|
|
document.getElementById('color5') |
|
|
]; |
|
|
|
|
|
|
|
|
function hslToHex(h, s, l) { |
|
|
l /= 100; |
|
|
const a = s * Math.min(l, 1 - l) / 100; |
|
|
const f = n => { |
|
|
const k = (n + h / 30) % 12; |
|
|
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); |
|
|
return Math.round(255 * color).toString(16).padStart(2, '0'); |
|
|
}; |
|
|
return `#${f(0)}${f(8)}${f(4)}`; |
|
|
} |
|
|
|
|
|
|
|
|
function generateRandomColor() { |
|
|
const h = Math.floor(Math.random() * 360); |
|
|
const s = Math.floor(Math.random() * 30) + 70; |
|
|
const l = Math.floor(Math.random() * 30) + 50; |
|
|
return { |
|
|
hsl: `hsl(${h}, ${s}%, ${l}%)`, |
|
|
hex: hslToHex(h, s, l) |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function generateColorPalette() { |
|
|
const baseHue = Math.floor(Math.random() * 360); |
|
|
const colors = []; |
|
|
|
|
|
|
|
|
const baseS = Math.floor(Math.random() * 30) + 70; |
|
|
const baseL = Math.floor(Math.random() * 30) + 50; |
|
|
colors.push({ |
|
|
hsl: `hsl(${baseHue}, ${baseS}%, ${baseL}%)`, |
|
|
hex: hslToHex(baseHue, baseS, baseL) |
|
|
}); |
|
|
|
|
|
|
|
|
const analogous1S = Math.floor(Math.random() * 20) + 70; |
|
|
const analogous1L = Math.floor(Math.random() * 20) + 60; |
|
|
colors.push({ |
|
|
hsl: `hsl(${(baseHue + 30) % 360}, ${analogous1S}%, ${analogous1L}%)`, |
|
|
hex: hslToHex((baseHue + 30) % 360, analogous1S, analogous1L) |
|
|
}); |
|
|
|
|
|
const analogous2S = Math.floor(Math.random() * 20) + 70; |
|
|
const analogous2L = Math.floor(Math.random() * 20) + 60; |
|
|
colors.push({ |
|
|
hsl: `hsl(${(baseHue - 30 + 360) % 360}, ${analogous2S}%, ${analogous2L}%)`, |
|
|
hex: hslToHex((baseHue - 30 + 360) % 360, analogous2S, analogous2L) |
|
|
}); |
|
|
|
|
|
|
|
|
if (Math.random() > 0.5) { |
|
|
|
|
|
const compS = Math.floor(Math.random() * 30) + 60; |
|
|
const compL = Math.floor(Math.random() * 20) + 40; |
|
|
colors.push({ |
|
|
hsl: `hsl(${(baseHue + 180) % 360}, ${compS}%, ${compL}%)`, |
|
|
hex: hslToHex((baseHue + 180) % 360, compS, compL) |
|
|
}); |
|
|
} else { |
|
|
|
|
|
const split1S = Math.floor(Math.random() * 20) + 60; |
|
|
const split1L = Math.floor(Math.random() * 20) + 40; |
|
|
colors.push({ |
|
|
hsl: `hsl(${(baseHue + 150) % 360}, ${split1S}%, ${split1L}%)`, |
|
|
hex: hslToHex((baseHue + 150) % 360, split1S, split1L) |
|
|
}); |
|
|
|
|
|
const split2S = Math.floor(Math.random() * 20) + 60; |
|
|
const split2L = Math.floor(Math.random() * 20) + 40; |
|
|
colors.push({ |
|
|
hsl: `hsl(${(baseHue + 210) % 360}, ${split2S}%, ${split2L}%)`, |
|
|
hex: hslToHex((baseHue + 210) % 360, split2S, split2L) |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
if (Math.random() > 0.5) { |
|
|
|
|
|
const monoL = Math.random() > 0.5 ? baseL + 20 : baseL - 20; |
|
|
colors.push({ |
|
|
hsl: `hsl(${baseHue}, ${baseS}%, ${monoL}%)`, |
|
|
hex: hslToHex(baseHue, baseS, monoL) |
|
|
}); |
|
|
} else { |
|
|
|
|
|
const triadS = Math.floor(Math.random() * 20) + 70; |
|
|
const triadL = Math.floor(Math.random() * 20) + 50; |
|
|
colors.push({ |
|
|
hsl: `hsl(${(baseHue + 120) % 360}, ${triadS}%, ${triadL}%)`, |
|
|
hex: hslToHex((baseHue + 120) % 360, triadS, triadL) |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
return colors.sort(() => Math.random() - 0.5).slice(0, 5); |
|
|
} |
|
|
|
|
|
|
|
|
function generateThemeName() { |
|
|
const prefix = prefixes[Math.floor(Math.random() * prefixes.length)]; |
|
|
const suffix = suffixes[Math.floor(Math.random() * suffixes.length)]; |
|
|
return `${prefix} ${suffix}`; |
|
|
} |
|
|
|
|
|
|
|
|
function generateDescription() { |
|
|
const descriptor = descriptors[Math.floor(Math.random() * descriptors.length)]; |
|
|
return `A mysterious dimension ${descriptor}.`; |
|
|
} |
|
|
|
|
|
|
|
|
const patternGenerators = [ |
|
|
function(container, colors) { |
|
|
|
|
|
const angle = Math.floor(Math.random() * 4) * 45; |
|
|
const size = Math.floor(Math.random() * 30) + 20; |
|
|
container.style.background = ` |
|
|
linear-gradient(${angle}deg, currentColor 1px, transparent 1px), |
|
|
linear-gradient(${angle + 90}deg, currentColor 1px, transparent 1px) |
|
|
`; |
|
|
container.style.backgroundSize = `${size}px ${size}px`; |
|
|
return `background: linear-gradient(${angle}deg, var(--color-primary) 1px, transparent 1px), |
|
|
linear-gradient(${angle + 90}deg, var(--color-primary) 1px, transparent 1px); |
|
|
background-size: ${size}px ${size}px;`; |
|
|
}, |
|
|
function(container, colors) { |
|
|
|
|
|
container.style.background = ` |
|
|
radial-gradient(circle at 20% 30%, currentColor 0%, transparent 30%), |
|
|
radial-gradient(circle at 80% 70%, currentColor 0%, transparent 30%) |
|
|
`; |
|
|
return `background: radial-gradient(circle at 20% 30%, var(--color-primary) 0%, transparent 30%), |
|
|
radial-gradient(circle at 80% 70%, var(--color-primary) 0%, transparent 30%);`; |
|
|
}, |
|
|
function(container, colors) { |
|
|
|
|
|
container.innerHTML = ''; |
|
|
const particleCount = Math.floor(Math.random() * 30) + 20; |
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.style.position = 'absolute'; |
|
|
particle.style.color = colors[Math.floor(Math.random() * colors.length)].hsl; |
|
|
particle.style.opacity = Math.random() * 0.5 + 0.2; |
|
|
particle.style.width = `${Math.random() * 10 + 2}px`; |
|
|
particle.style.height = particle.style.width; |
|
|
particle.style.borderRadius = '50%'; |
|
|
particle.style.left = `${Math.random() * 100}%`; |
|
|
particle.style.top = `${Math.random() * 100}%`; |
|
|
container.appendChild(particle); |
|
|
} |
|
|
return `/* Particle effect requires JavaScript to implement */`; |
|
|
}, |
|
|
function(container, colors) { |
|
|
|
|
|
container.innerHTML = ''; |
|
|
const shapeCount = Math.floor(Math.random() * 8) + 3; |
|
|
for (let i = 0; i < shapeCount; i++) { |
|
|
const shape = document.createElement('div'); |
|
|
shape.style.position = 'absolute'; |
|
|
shape.style.color = colors[Math.floor(Math.random() * colors.length)].hsl; |
|
|
shape.style.opacity = Math.random() * 0.4 + 0.2; |
|
|
shape.style.fontSize = `${Math.random() * 40 + 20}px`; |
|
|
shape.style.left = `${Math.random() * 100}%`; |
|
|
shape.style.top = `${Math.random() * 100}%`; |
|
|
shape.style.transform = `rotate(${Math.random() * 360}deg) scale(${Math.random() * 1.5 + 0.5})`; |
|
|
|
|
|
const shapeTypes = ['fa-star', 'fa-cloud', 'fa-circle', 'fa-square', 'fa-heart', 'fa-certificate']; |
|
|
const randomShape = shapeTypes[Math.floor(Math.random() * shapeTypes.length)]; |
|
|
shape.innerHTML = `<i class="fas ${randomShape}"></i>`; |
|
|
|
|
|
container.appendChild(shape); |
|
|
} |
|
|
return `/* Organic shapes effect requires JavaScript to implement */`; |
|
|
}, |
|
|
function(container, colors) { |
|
|
|
|
|
const angle = Math.floor(Math.random() * 180); |
|
|
const width = Math.floor(Math.random() * 30) + 10; |
|
|
container.style.background = `repeating-linear-gradient(${angle}deg, currentColor 0px, currentColor ${width}px, transparent ${width}px, transparent ${width * 2}px)`; |
|
|
return `background: repeating-linear-gradient(${angle}deg, var(--color-primary) 0px, var(--color-primary) ${width}px, transparent ${width}px, transparent ${width * 2}px);`; |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
function createParticles(colors) { |
|
|
|
|
|
particlesContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
const particleCount = Math.floor(Math.random() * 50) + 30; |
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.className = 'particle'; |
|
|
|
|
|
|
|
|
const size = Math.random() * 6 + 2; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
particle.style.left = `${Math.random() * 100}%`; |
|
|
particle.style.top = `${Math.random() * 100}%`; |
|
|
|
|
|
|
|
|
particle.style.color = colors[Math.floor(Math.random() * colors.length)].hsl; |
|
|
|
|
|
|
|
|
const duration = Math.random() * 30 + 10; |
|
|
const delay = Math.random() * 10; |
|
|
const xMovement = (Math.random() - 0.5) * 200; |
|
|
const yMovement = (Math.random() - 0.5) * 200; |
|
|
|
|
|
particle.style.animation = ` |
|
|
float ${duration}s ease-in-out ${delay}s infinite, |
|
|
fade ${duration * 0.7}s ease-in-out infinite |
|
|
`; |
|
|
|
|
|
|
|
|
const keyframes = ` |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translate(0, 0); } |
|
|
50% { transform: translate(${xMovement}px, ${yMovement}px); } |
|
|
} |
|
|
@keyframes fade { |
|
|
0%, 100% { opacity: 0; } |
|
|
50% { opacity: ${Math.random() * 0.6 + 0.1}; } |
|
|
} |
|
|
`; |
|
|
|
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = keyframes; |
|
|
document.head.appendChild(style); |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addToHistory(theme) { |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.className = 'flex-shrink-0 w-24 h-24 rounded-xl overflow-hidden border-2 border-white/20 cursor-pointer transition-all hover:scale-105'; |
|
|
historyItem.style.background = `linear-gradient(135deg, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`; |
|
|
historyItem.title = theme.name; |
|
|
|
|
|
historyItem.addEventListener('click', () => { |
|
|
applyTheme(theme); |
|
|
}); |
|
|
|
|
|
historyContainer.insertBefore(historyItem, historyContainer.firstChild); |
|
|
|
|
|
|
|
|
if (historyContainer.children.length > 10) { |
|
|
historyContainer.removeChild(historyContainer.lastChild); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateCSSCode(theme) { |
|
|
let css = `:root { |
|
|
/* Color Variables */ |
|
|
--color-primary: ${theme.colors[0].hsl}; |
|
|
--color-secondary: ${theme.colors[1].hsl}; |
|
|
--color-accent: ${theme.colors[2].hsl}; |
|
|
--color-background: ${theme.colors[3].hsl}; |
|
|
--color-text: ${theme.colors[4].hsl}; |
|
|
|
|
|
/* Hex Codes */ |
|
|
/* Primary: ${theme.colors[0].hex} */ |
|
|
/* Secondary: ${theme.colors[1].hex} */ |
|
|
/* Accent: ${theme.colors[2].hex} */ |
|
|
/* Background: ${theme.colors[3].hex} */ |
|
|
/* Text: ${theme.colors[4].hex} */ |
|
|
} |
|
|
|
|
|
body { |
|
|
background: linear-gradient(to bottom right, var(--color-primary), var(--color-accent)); |
|
|
color: var(--color-text); |
|
|
} |
|
|
|
|
|
/* Pattern Styles */ |
|
|
.pattern { |
|
|
${theme.patternCSS} |
|
|
}`; |
|
|
|
|
|
return css; |
|
|
} |
|
|
|
|
|
|
|
|
function updateHexCodes(colors) { |
|
|
hexCodesContainer.innerHTML = ''; |
|
|
colors.forEach((color, index) => { |
|
|
const hexCode = document.createElement('div'); |
|
|
hexCode.className = 'flex items-center gap-1'; |
|
|
hexCode.innerHTML = ` |
|
|
<span class="inline-block w-3 h-3 rounded-full" style="background-color: ${color.hex}"></span> |
|
|
<span>${color.hex}</span> |
|
|
`; |
|
|
hexCodesContainer.appendChild(hexCode); |
|
|
}); |
|
|
|
|
|
|
|
|
colorElements.forEach((el, index) => { |
|
|
const tooltip = el.querySelector('.hex-tooltip'); |
|
|
if (tooltip) { |
|
|
tooltip.textContent = colors[index].hex; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function applyTheme(theme) { |
|
|
|
|
|
themeName.textContent = theme.name; |
|
|
themeIcon.innerHTML = `<i class="fas ${theme.icon}"></i>`; |
|
|
themeDescription.textContent = theme.description; |
|
|
|
|
|
|
|
|
theme.colors.forEach((color, index) => { |
|
|
colorElements[index].style.backgroundColor = color.hsl; |
|
|
}); |
|
|
|
|
|
|
|
|
updateHexCodes(theme.colors); |
|
|
|
|
|
|
|
|
const mainColor = theme.colors[0].hsl; |
|
|
themeDisplay.style.borderColor = `${mainColor}80`; |
|
|
|
|
|
|
|
|
patternDisplay.innerHTML = ''; |
|
|
patternDisplay.style.color = theme.colors[2].hsl; |
|
|
theme.patternCSS = theme.patternGenerator(patternDisplay, theme.colors); |
|
|
|
|
|
|
|
|
body.style.background = `linear-gradient(to bottom right, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`; |
|
|
|
|
|
|
|
|
createParticles(theme.colors); |
|
|
|
|
|
|
|
|
cssCode.textContent = generateCSSCode(theme); |
|
|
} |
|
|
|
|
|
|
|
|
function generateRandomTheme() { |
|
|
const colors = generateColorPalette(); |
|
|
|
|
|
const theme = { |
|
|
name: generateThemeName(), |
|
|
icon: icons[Math.floor(Math.random() * icons.length)], |
|
|
description: generateDescription(), |
|
|
colors: colors, |
|
|
patternGenerator: patternGenerators[Math.floor(Math.random() * patternGenerators.length)], |
|
|
patternCSS: '' |
|
|
}; |
|
|
|
|
|
addToHistory(theme); |
|
|
applyTheme(theme); |
|
|
} |
|
|
|
|
|
|
|
|
function copyToClipboard(text, button) { |
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
button.classList.add('copied'); |
|
|
button.innerHTML = '<i class="fas fa-check"></i> Copied!'; |
|
|
setTimeout(() => { |
|
|
button.classList.remove('copied'); |
|
|
if (button.id === 'copy-hex-btn') { |
|
|
button.innerHTML = '<i class="fas fa-copy"></i> Copy'; |
|
|
} else { |
|
|
button.innerHTML = '<i class="fas fa-copy"></i> Copy'; |
|
|
} |
|
|
}, 2000); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
generateRandomTheme(); |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', () => { |
|
|
|
|
|
generateBtn.classList.add('active:scale-95'); |
|
|
setTimeout(() => { |
|
|
generateBtn.classList.remove('active:scale-95'); |
|
|
}, 150); |
|
|
|
|
|
generateRandomTheme(); |
|
|
}); |
|
|
|
|
|
|
|
|
toggleCssBtn.addEventListener('click', () => { |
|
|
cssCodeContainer.classList.toggle('open'); |
|
|
if (cssCodeContainer.classList.contains('open')) { |
|
|
toggleCssBtn.innerHTML = '<i class="fas fa-code"></i> Hide CSS Code'; |
|
|
} else { |
|
|
toggleCssBtn.innerHTML = '<i class="fas fa-code"></i> Generate CSS Code'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
copyHexBtn.addEventListener('click', () => { |
|
|
const hexCodes = Array.from(hexCodesContainer.querySelectorAll('div')).map(div => { |
|
|
return div.textContent.trim().split('\n').pop().trim(); |
|
|
}).join('\n'); |
|
|
copyToClipboard(hexCodes, copyHexBtn); |
|
|
}); |
|
|
|
|
|
|
|
|
copyCssBtn.addEventListener('click', () => { |
|
|
copyToClipboard(cssCode.textContent, copyCssBtn); |
|
|
}); |
|
|
</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=druvx13/infinite-universe-explorer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
