|
|
<!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"> |
|
|
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> |
|
|
<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); } |
|
|
} |
|
|
@keyframes rainbow { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.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; |
|
|
} |
|
|
.rainbow-text { |
|
|
background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); |
|
|
background-size: 400% 400%; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
animation: rainbow 8s ease infinite; |
|
|
} |
|
|
.history-item { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.history-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7)); |
|
|
} |
|
|
.history-item:hover::after { |
|
|
background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.7)); |
|
|
} |
|
|
.history-item-title { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
padding: 8px; |
|
|
font-size: 12px; |
|
|
text-align: center; |
|
|
z-index: 2; |
|
|
} |
|
|
.pattern-selector { |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.pattern-selector:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
.pattern-container:hover .pattern-selector { |
|
|
opacity: 1; |
|
|
} |
|
|
.scrollbar-hide::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
.scrollbar-hide { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
} |
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
.tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 120px; |
|
|
background-color: rgba(0,0,0,0.8); |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
.favorite-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.favorite-btn.active { |
|
|
color: #f59e0b; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.screenshot-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.screenshot-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.download-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.download-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.share-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.share-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.modal { |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
} |
|
|
.modal-enter { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
.modal-enter-active { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
.modal-exit { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
.modal-exit-active { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.main-content { |
|
|
flex-direction: column; |
|
|
} |
|
|
.pattern-container { |
|
|
order: -1; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
.pattern-selector { |
|
|
opacity: 1; |
|
|
bottom: 8px; |
|
|
} |
|
|
.pattern-btn { |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
font-size: 14px; |
|
|
} |
|
|
.color-grid { |
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
} |
|
|
.header-text { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
.subheader-text { |
|
|
font-size: 1rem; |
|
|
} |
|
|
.action-buttons { |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
.action-buttons button { |
|
|
width: 100%; |
|
|
} |
|
|
.history-item, .favorite-item { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
} |
|
|
.history-item-title { |
|
|
font-size: 10px; |
|
|
padding: 4px; |
|
|
} |
|
|
} |
|
|
</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 id="modal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 hidden opacity-0 transition-opacity duration-300"> |
|
|
<div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl max-w-2xl w-full p-6 shadow-2xl border border-white/10 transform transition-all duration-300"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold" id="modal-title">Modal Title</h3> |
|
|
<button id="close-modal" class="text-white/70 hover:text-white text-2xl">×</button> |
|
|
</div> |
|
|
<div class="mb-4" id="modal-content"> |
|
|
Modal content goes here |
|
|
</div> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button id="modal-cancel" class="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20">Cancel</button> |
|
|
<button id="modal-confirm" class="px-4 py-2 rounded-lg bg-gradient-to-r from-amber-400 to-pink-500 hover:opacity-90">Confirm</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8 sm:py-12"> |
|
|
<header class="text-center mb-8 sm:mb-16"> |
|
|
<div class="floating inline-block mb-4 sm:mb-6"> |
|
|
<div class="spinning text-4xl sm:text-6xl mb-2"> |
|
|
<i class="fas fa-infinity"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-3xl sm:text-5xl font-bold mb-2 sm:mb-4 tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-amber-300 to-pink-400 header-text"> |
|
|
Infinite Universe Explorer |
|
|
</h1> |
|
|
<p class="text-base sm:text-xl opacity-80 max-w-2xl mx-auto subheader-text"> |
|
|
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-8 sm:mb-12"> |
|
|
<div class="p-6 sm:p-8 md:p-12"> |
|
|
<div class="flex flex-col sm:flex-row gap-6 sm:gap-8 items-center main-content"> |
|
|
<div class="flex-1 w-full"> |
|
|
<div class="flex justify-between items-center mb-3 sm:mb-4"> |
|
|
<h2 class="text-2xl sm:text-3xl font-bold">Current Dimension</h2> |
|
|
<div class="flex gap-1 sm:gap-2"> |
|
|
<button id="favorite-btn" class="favorite-btn text-lg sm:text-xl p-1 sm:p-2 rounded-full hover:bg-white/10"> |
|
|
<i class="far fa-star"></i> |
|
|
</button> |
|
|
<button id="screenshot-btn" class="screenshot-btn text-lg sm:text-xl p-1 sm:p-2 rounded-full hover:bg-white/10 tooltip"> |
|
|
<i class="fas fa-camera"></i> |
|
|
<span class="tooltip-text">Take Screenshot</span> |
|
|
</button> |
|
|
<button id="share-btn" class="share-btn text-lg sm:text-xl p-1 sm:p-2 rounded-full hover:bg-white/10 tooltip"> |
|
|
<i class="fas fa-share-alt"></i> |
|
|
<span class="tooltip-text">Share Dimension</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="theme-display" class="mb-4 sm:mb-6 p-4 sm:p-6 rounded-xl bg-black/20 border border-white/10"> |
|
|
<div class="flex items-center gap-2 sm:gap-3 mb-2 sm:mb-4"> |
|
|
<span id="theme-icon" class="text-2xl sm:text-3xl"><i class="fas fa-question"></i></span> |
|
|
<span id="theme-name" class="text-xl sm:text-2xl font-medium">Unknown Dimension</span> |
|
|
</div> |
|
|
<p id="theme-description" class="opacity-80 text-sm sm:text-base"> |
|
|
Waiting to discover your first random dimension... |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-5 gap-1 sm:gap-2 mb-3 sm:mb-4 color-grid"> |
|
|
<div id="color1" class="h-10 sm: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-10 sm: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-10 sm: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-10 sm: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-10 sm: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-4 sm:mb-6"> |
|
|
<div id="hex-codes" class="text-xs sm:text-sm opacity-80 flex gap-1 sm:gap-2 flex-wrap"> |
|
|
|
|
|
</div> |
|
|
<button id="copy-hex-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-2 sm:px-3 py-1 rounded-full flex items-center gap-1"> |
|
|
<i class="fas fa-copy"></i> Copy |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex flex-col sm:flex-row gap-2 sm:gap-4 mb-3 sm:mb-4 action-buttons"> |
|
|
<button id="generate-btn" class="pulsing flex-1 py-3 sm:py-4 px-4 sm:px-6 bg-gradient-to-r from-amber-400 to-pink-500 rounded-xl font-bold text-base sm:text-lg hover:opacity-90 transition-all duration-300 shadow-lg hover:shadow-xl active:scale-95"> |
|
|
<i class="fas fa-random mr-1 sm:mr-2"></i> Explore New Dimension |
|
|
</button> |
|
|
<button id="download-btn" class="download-btn py-3 sm:py-4 px-4 sm:px-6 bg-white/5 hover:bg-white/10 rounded-xl font-bold text-base sm:text-lg transition-all duration-300 shadow hover:shadow-lg"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button id="toggle-css-btn" class="w-full py-2 sm:py-3 px-4 sm:px-6 bg-white/5 hover:bg-white/10 rounded-xl font-medium transition-all duration-300 flex items-center justify-center gap-1 sm:gap-2"> |
|
|
<i class="fas fa-code"></i> Generate CSS Code |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex-1 w-full relative pattern-container"> |
|
|
<div class="relative h-48 sm: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-4xl sm:text-6xl opacity-20"><i class="fas fa-star"></i></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pattern-selector absolute bottom-2 sm:bottom-4 left-0 right-0 flex justify-center gap-1 sm:gap-2"> |
|
|
<button data-pattern="0" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip"> |
|
|
<i class="fas fa-border-all text-sm sm:text-base"></i> |
|
|
<span class="tooltip-text">Grid Pattern</span> |
|
|
</button> |
|
|
<button data-pattern="1" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip"> |
|
|
<i class="fas fa-circle-notch text-sm sm:text-base"></i> |
|
|
<span class="tooltip-text">Radial Pattern</span> |
|
|
</button> |
|
|
<button data-pattern="2" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip"> |
|
|
<i class="fas fa-dot-circle text-sm sm:text-base"></i> |
|
|
<span class="tooltip-text">Particle Field</span> |
|
|
</button> |
|
|
<button data-pattern="3" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip"> |
|
|
<i class="fas fa-shapes text-sm sm:text-base"></i> |
|
|
<span class="tooltip-text">Organic Shapes</span> |
|
|
</button> |
|
|
<button data-pattern="4" class="pattern-btn bg-black/70 hover:bg-black/90 p-1 sm:p-2 rounded-full border border-white/20 tooltip"> |
|
|
<i class="fas fa-grip-lines text-sm sm:text-base"></i> |
|
|
<span class="tooltip-text">Stripes</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="css-code-container" class="code-container mt-4 sm:mt-6 bg-black/30 rounded-xl overflow-hidden"> |
|
|
<div class="p-3 sm:p-4 border-t border-white/10 flex justify-between items-center"> |
|
|
<h3 class="font-mono font-bold text-xs sm:text-sm">CSS Variables</h3> |
|
|
<button id="copy-css-btn" class="copy-btn text-xs bg-white/10 hover:bg-white/20 px-2 sm: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-3 sm:p-4 text-xs sm:text-sm font-mono overflow-auto max-h-64 bg-black/20"></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6 mb-8 sm:mb-12"> |
|
|
<div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all"> |
|
|
<div class="text-2xl sm:text-3xl mb-3 sm:mb-4 text-amber-300"><i class="fas fa-infinity"></i></div> |
|
|
<h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">Infinite Variety</h3> |
|
|
<p class="opacity-80 text-sm sm:text-base">Every dimension is completely unique with randomly generated colors and patterns.</p> |
|
|
</div> |
|
|
<div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all"> |
|
|
<div class="text-2xl sm:text-3xl mb-3 sm:mb-4 text-pink-400"><i class="fas fa-atom"></i></div> |
|
|
<h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">Quantum Colors</h3> |
|
|
<p class="opacity-80 text-sm sm:text-base">Colors are generated using quantum-inspired algorithms for maximum uniqueness.</p> |
|
|
</div> |
|
|
<div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 hover:bg-white/10 transition-all"> |
|
|
<div class="text-2xl sm:text-3xl mb-3 sm:mb-4 text-purple-300"><i class="fas fa-shapes"></i></div> |
|
|
<h3 class="text-lg sm:text-xl font-bold mb-1 sm:mb-2">Dynamic Patterns</h3> |
|
|
<p class="opacity-80 text-sm sm:text-base">Patterns are procedurally generated to match each dimension's unique properties.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 mb-8 sm:mb-12"> |
|
|
<div class="flex justify-between items-center mb-3 sm:mb-4"> |
|
|
<h2 class="text-xl sm:text-2xl font-bold">Dimension History</h2> |
|
|
<div class="flex gap-1 sm:gap-2"> |
|
|
<button id="clear-history" class="text-xs bg-red-500/20 hover:bg-red-500/30 text-red-300 px-2 sm:px-3 py-1 rounded-full flex items-center gap-1"> |
|
|
<i class="fas fa-trash"></i> Clear |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="history-container" class="flex overflow-x-auto pb-3 sm:pb-4 gap-3 sm:gap-4 gradient-mask scrollbar-hide"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white/5 backdrop-blur-sm p-4 sm:p-6 rounded-2xl border border-white/10 mb-8 sm:mb-12"> |
|
|
<h2 class="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">Favorites</h2> |
|
|
<div id="favorites-container" class="flex overflow-x-auto pb-3 sm:pb-4 gap-3 sm:gap-4 gradient-mask scrollbar-hide"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="text-center opacity-70 mt-12 sm:mt-20 pb-6 sm: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 favoritesContainer = document.getElementById('favorites-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 favoriteBtn = document.getElementById('favorite-btn'); |
|
|
const screenshotBtn = document.getElementById('screenshot-btn'); |
|
|
const shareBtn = document.getElementById('share-btn'); |
|
|
const downloadBtn = document.getElementById('download-btn'); |
|
|
const clearHistoryBtn = document.getElementById('clear-history'); |
|
|
const patternBtns = document.querySelectorAll('.pattern-btn'); |
|
|
const modal = document.getElementById('modal'); |
|
|
const modalTitle = document.getElementById('modal-title'); |
|
|
const modalContent = document.getElementById('modal-content'); |
|
|
const closeModal = document.getElementById('close-modal'); |
|
|
const modalCancel = document.getElementById('modal-cancel'); |
|
|
const modalConfirm = document.getElementById('modal-confirm'); |
|
|
|
|
|
|
|
|
const colorElements = [ |
|
|
document.getElementById('color1'), |
|
|
document.getElementById('color2'), |
|
|
document.getElementById('color3'), |
|
|
document.getElementById('color4'), |
|
|
document.getElementById('color5') |
|
|
]; |
|
|
|
|
|
|
|
|
let currentTheme = null; |
|
|
let favorites = JSON.parse(localStorage.getItem('favorites')) || []; |
|
|
let history = JSON.parse(localStorage.getItem('history')) || []; |
|
|
|
|
|
|
|
|
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 exists = history.some(t => t.name === theme.name && |
|
|
JSON.stringify(t.colors) === JSON.stringify(theme.colors)); |
|
|
|
|
|
if (!exists) { |
|
|
history.unshift({ |
|
|
name: theme.name, |
|
|
colors: theme.colors, |
|
|
icon: theme.icon, |
|
|
description: theme.description, |
|
|
patternIndex: theme.patternIndex, |
|
|
timestamp: new Date().toISOString() |
|
|
}); |
|
|
|
|
|
|
|
|
if (history.length > 20) { |
|
|
history.pop(); |
|
|
} |
|
|
|
|
|
localStorage.setItem('history', JSON.stringify(history)); |
|
|
renderHistory(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function addToFavorites(theme) { |
|
|
|
|
|
const exists = favorites.some(t => t.name === theme.name && |
|
|
JSON.stringify(t.colors) === JSON.stringify(theme.colors)); |
|
|
|
|
|
if (!exists) { |
|
|
favorites.unshift({ |
|
|
name: theme.name, |
|
|
colors: theme.colors, |
|
|
icon: theme.icon, |
|
|
description: theme.description, |
|
|
patternIndex: theme.patternIndex, |
|
|
timestamp: new Date().toISOString() |
|
|
}); |
|
|
|
|
|
localStorage.setItem('favorites', JSON.stringify(favorites)); |
|
|
renderFavorites(); |
|
|
|
|
|
|
|
|
showModal('Favorite Added', 'This dimension has been added to your favorites!'); |
|
|
} else { |
|
|
|
|
|
favorites = favorites.filter(t => !(t.name === theme.name && |
|
|
JSON.stringify(t.colors) === JSON.stringify(theme.colors))); |
|
|
|
|
|
localStorage.setItem('favorites', JSON.stringify(favorites)); |
|
|
renderFavorites(); |
|
|
|
|
|
|
|
|
showModal('Favorite Removed', 'This dimension has been removed from your favorites.'); |
|
|
} |
|
|
|
|
|
|
|
|
updateFavoriteButton(); |
|
|
} |
|
|
|
|
|
|
|
|
function isFavorite() { |
|
|
if (!currentTheme) return false; |
|
|
|
|
|
return favorites.some(t => t.name === currentTheme.name && |
|
|
JSON.stringify(t.colors) === JSON.stringify(currentTheme.colors)); |
|
|
} |
|
|
|
|
|
|
|
|
function updateFavoriteButton() { |
|
|
if (isFavorite()) { |
|
|
favoriteBtn.innerHTML = '<i class="fas fa-star"></i>'; |
|
|
favoriteBtn.classList.add('active'); |
|
|
} else { |
|
|
favoriteBtn.innerHTML = '<i class="far fa-star"></i>'; |
|
|
favoriteBtn.classList.remove('active'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function renderHistory() { |
|
|
historyContainer.innerHTML = ''; |
|
|
|
|
|
if (history.length === 0) { |
|
|
const emptyMessage = document.createElement('div'); |
|
|
emptyMessage.className = 'text-center w-full py-8 opacity-70'; |
|
|
emptyMessage.textContent = 'No history yet. Generate some dimensions!'; |
|
|
historyContainer.appendChild(emptyMessage); |
|
|
return; |
|
|
} |
|
|
|
|
|
history.forEach((theme, index) => { |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.className = 'flex-shrink-0 w-20 sm:w-24 h-20 sm:h-24 rounded-xl overflow-hidden border-2 border-white/20 cursor-pointer transition-all hover:scale-105 history-item'; |
|
|
historyItem.style.background = `linear-gradient(135deg, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`; |
|
|
|
|
|
const title = document.createElement('div'); |
|
|
title.className = 'history-item-title truncate'; |
|
|
title.textContent = theme.name; |
|
|
|
|
|
historyItem.appendChild(title); |
|
|
|
|
|
historyItem.addEventListener('click', () => { |
|
|
applyTheme(theme); |
|
|
}); |
|
|
|
|
|
historyContainer.appendChild(historyItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function renderFavorites() { |
|
|
favoritesContainer.innerHTML = ''; |
|
|
|
|
|
if (favorites.length === 0) { |
|
|
const emptyMessage = document.createElement('div'); |
|
|
emptyMessage.className = 'text-center w-full py-8 opacity-70'; |
|
|
emptyMessage.textContent = 'No favorites yet. Click the star button to add some!'; |
|
|
favoritesContainer.appendChild(emptyMessage); |
|
|
return; |
|
|
} |
|
|
|
|
|
favorites.forEach((theme, index) => { |
|
|
const favoriteItem = document.createElement('div'); |
|
|
favoriteItem.className = 'flex-shrink-0 w-20 sm:w-24 h-20 sm:h-24 rounded-xl overflow-hidden border-2 border-white/20 cursor-pointer transition-all hover:scale-105 history-item'; |
|
|
favoriteItem.style.background = `linear-gradient(135deg, ${theme.colors[0].hsl}, ${theme.colors[2].hsl})`; |
|
|
|
|
|
const title = document.createElement('div'); |
|
|
title.className = 'history-item-title truncate'; |
|
|
title.textContent = theme.name; |
|
|
|
|
|
favoriteItem.appendChild(title); |
|
|
|
|
|
favoriteItem.addEventListener('click', () => { |
|
|
applyTheme(theme); |
|
|
}); |
|
|
|
|
|
favoritesContainer.appendChild(favoriteItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function clearHistory() { |
|
|
history = []; |
|
|
localStorage.setItem('history', JSON.stringify(history)); |
|
|
renderHistory(); |
|
|
showModal('History Cleared', 'Your dimension history has been cleared.'); |
|
|
} |
|
|
|
|
|
|
|
|
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-2 sm:w-3 h-2 sm: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) { |
|
|
currentTheme = 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 = patternGenerators[theme.patternIndex](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); |
|
|
|
|
|
|
|
|
updateFavoriteButton(); |
|
|
} |
|
|
|
|
|
|
|
|
function generateRandomTheme() { |
|
|
const colors = generateColorPalette(); |
|
|
|
|
|
const theme = { |
|
|
name: generateThemeName(), |
|
|
icon: icons[Math.floor(Math.random() * icons.length)], |
|
|
description: generateDescription(), |
|
|
colors: colors, |
|
|
patternIndex: Math.floor(Math.random() * patternGenerators.length), |
|
|
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); |
|
|
}).catch(err => { |
|
|
console.error('Failed to copy text: ', err); |
|
|
showModal('Copy Failed', 'Failed to copy text to clipboard. Please try again.'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function showModal(title, content, isConfirm = false) { |
|
|
modalTitle.textContent = title; |
|
|
modalContent.textContent = content; |
|
|
|
|
|
if (isConfirm) { |
|
|
modalConfirm.style.display = 'block'; |
|
|
} else { |
|
|
modalConfirm.style.display = 'none'; |
|
|
} |
|
|
|
|
|
modal.classList.remove('hidden'); |
|
|
setTimeout(() => { |
|
|
modal.classList.add('opacity-100'); |
|
|
}, 10); |
|
|
} |
|
|
|
|
|
|
|
|
function hideModal() { |
|
|
modal.classList.remove('opacity-100'); |
|
|
setTimeout(() => { |
|
|
modal.classList.add('hidden'); |
|
|
}, 300); |
|
|
} |
|
|
|
|
|
|
|
|
function takeScreenshot() { |
|
|
showModal('Taking Screenshot', 'Preparing your dimension screenshot...'); |
|
|
|
|
|
|
|
|
const element = document.querySelector('.bg-white\\/10.backdrop-blur-lg.rounded-3xl'); |
|
|
|
|
|
html2canvas(element, { |
|
|
scale: 2, |
|
|
backgroundColor: null, |
|
|
logging: false, |
|
|
useCORS: true |
|
|
}).then(canvas => { |
|
|
|
|
|
const link = document.createElement('a'); |
|
|
link.download = `${currentTheme.name.toLowerCase().replace(/\s+/g, '-')}-screenshot.png`; |
|
|
link.href = canvas.toDataURL('image/png'); |
|
|
link.click(); |
|
|
|
|
|
showModal('Screenshot Saved', 'Your dimension screenshot has been downloaded!'); |
|
|
}).catch(err => { |
|
|
console.error('Failed to take screenshot: ', err); |
|
|
showModal('Screenshot Failed', 'Failed to capture screenshot. Please try again.'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function shareDimension() { |
|
|
if (!currentTheme) return; |
|
|
|
|
|
if (navigator.share) { |
|
|
|
|
|
navigator.share({ |
|
|
title: `Dimension: ${currentTheme.name}`, |
|
|
text: `Check out this amazing dimension I found: ${currentTheme.description}`, |
|
|
url: window.location.href |
|
|
}).then(() => { |
|
|
showModal('Shared Successfully', 'Thanks for sharing this dimension!'); |
|
|
}).catch(err => { |
|
|
console.error('Error sharing:', err); |
|
|
showModal('Share Failed', 'Could not share the dimension. Please try again.'); |
|
|
}); |
|
|
} else { |
|
|
|
|
|
const shareText = `Check out this amazing dimension: ${currentTheme.name} - ${currentTheme.description}`; |
|
|
copyToClipboard(shareText, shareBtn); |
|
|
showModal('Share Dimension', 'The dimension details have been copied to your clipboard. You can now paste it anywhere to share!'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function downloadTheme() { |
|
|
if (!currentTheme) return; |
|
|
|
|
|
const cssContent = generateCSSCode(currentTheme); |
|
|
const blob = new Blob([cssContent], { type: 'text/css' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `${currentTheme.name.toLowerCase().replace(/\s+/g, '-')}-theme.css`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
showModal('Download Complete', `The CSS for "${currentTheme.name}" has been downloaded.`); |
|
|
} |
|
|
|
|
|
|
|
|
function changePattern(index) { |
|
|
if (!currentTheme) return; |
|
|
|
|
|
currentTheme.patternIndex = index; |
|
|
currentTheme.patternGenerator = patternGenerators[index]; |
|
|
applyTheme(currentTheme); |
|
|
} |
|
|
|
|
|
|
|
|
generateRandomTheme(); |
|
|
renderHistory(); |
|
|
renderFavorites(); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
favoriteBtn.addEventListener('click', () => { |
|
|
if (currentTheme) { |
|
|
addToFavorites(currentTheme); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
screenshotBtn.addEventListener('click', takeScreenshot); |
|
|
|
|
|
|
|
|
shareBtn.addEventListener('click', shareDimension); |
|
|
|
|
|
|
|
|
downloadBtn.addEventListener('click', downloadTheme); |
|
|
|
|
|
|
|
|
clearHistoryBtn.addEventListener('click', () => { |
|
|
showModal('Clear History', 'Are you sure you want to clear your dimension history?', true); |
|
|
|
|
|
modalConfirm.onclick = () => { |
|
|
clearHistory(); |
|
|
hideModal(); |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
patternBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const patternIndex = parseInt(btn.dataset.pattern); |
|
|
changePattern(patternIndex); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
closeModal.addEventListener('click', hideModal); |
|
|
modalCancel.addEventListener('click', hideModal); |
|
|
modal.addEventListener('click', (e) => { |
|
|
if (e.target === modal) { |
|
|
hideModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tooltip').forEach(el => { |
|
|
el.addEventListener('mouseenter', () => { |
|
|
const tooltip = el.querySelector('.tooltip-text'); |
|
|
tooltip.style.visibility = 'visible'; |
|
|
tooltip.style.opacity = '1'; |
|
|
}); |
|
|
el.addEventListener('mouseleave', () => { |
|
|
const tooltip = el.querySelector('.tooltip-text'); |
|
|
tooltip.style.visibility = 'hidden'; |
|
|
tooltip.style.opacity = '0'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tooltip').forEach(el => { |
|
|
el.addEventListener('touchstart', () => { |
|
|
const tooltip = el.querySelector('.tooltip-text'); |
|
|
tooltip.style.visibility = 'visible'; |
|
|
tooltip.style.opacity = '1'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
tooltip.style.visibility = 'hidden'; |
|
|
tooltip.style.opacity = '0'; |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
</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> |
