|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Floating Particles</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> |
|
.particle { |
|
position: absolute; |
|
pointer-events: none; |
|
opacity: 0; |
|
animation: float-up linear forwards; |
|
will-change: transform; |
|
} |
|
|
|
@keyframes float-up { |
|
0% { |
|
transform: translateY(0) rotate(0deg); |
|
opacity: 0; |
|
} |
|
10% { |
|
opacity: 1; |
|
} |
|
90% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: translateY(-100vh) rotate(360deg); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
.control-panel { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.control-panel.collapsed { |
|
transform: translateX(calc(100% - 40px)); |
|
} |
|
|
|
.toggle-btn { |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.control-panel.collapsed .toggle-btn { |
|
transform: rotate(180deg); |
|
} |
|
|
|
.clip-triangle { |
|
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
|
} |
|
|
|
body { |
|
overflow: hidden; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-900 min-h-screen relative"> |
|
<div id="particles-container" class="absolute inset-0 overflow-hidden"></div> |
|
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center z-10"> |
|
<h1 class="text-5xl font-bold text-white mb-4">Floating Particles</h1> |
|
<p class="text-xl text-gray-300">Customizable particle animation</p> |
|
</div> |
|
|
|
|
|
<div id="control-panel" class="control-panel fixed right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 p-4 rounded-l-lg shadow-lg z-50 w-64"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-xl font-bold text-white">Particle Settings</h2> |
|
<button id="toggle-panel" class="toggle-btn bg-gray-700 text-white p-2 rounded-full"> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="space-y-4"> |
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Particle Count</label> |
|
<input id="particle-count" type="range" min="1" max="500" value="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
<div class="flex justify-between text-xs text-gray-400"> |
|
<span>1</span> |
|
<span>500</span> |
|
</div> |
|
<div class="text-center text-sm text-gray-300 mt-1"> |
|
<span id="count-value">100</span> particles |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Particle Size</label> |
|
<input id="particle-size" type="range" min="2" max="30" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
<div class="flex justify-between text-xs text-gray-400"> |
|
<span>2px</span> |
|
<span>30px</span> |
|
</div> |
|
<div class="text-center text-sm text-gray-300 mt-1"> |
|
<span id="size-value">8</span>px |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Animation Duration (s)</label> |
|
<input id="animation-duration" type="range" min="2" max="20" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
<div class="flex justify-between text-xs text-gray-400"> |
|
<span>2</span> |
|
<span>20</span> |
|
</div> |
|
<div class="text-center text-sm text-gray-300 mt-1"> |
|
<span id="duration-value">8</span> seconds |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Spawn Rate</label> |
|
<input id="spawn-rate" type="range" min="100" max="2000" value="500" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
|
<div class="flex justify-between text-xs text-gray-400"> |
|
<span>Fast</span> |
|
<span>Slow</span> |
|
</div> |
|
<div class="text-center text-sm text-gray-300 mt-1"> |
|
<span id="rate-value">500</span>ms |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Particle Color</label> |
|
<div class="flex flex-wrap gap-2 mt-2"> |
|
<button data-color="#3B82F6" class="color-btn w-6 h-6 rounded-full bg-blue-500 border-2 border-transparent hover:border-white"></button> |
|
<button data-color="#EF4444" class="color-btn w-6 h-6 rounded-full bg-red-500 border-2 border-transparent hover:border-white"></button> |
|
<button data-color="#10B981" class="color-btn w-6 h-6 rounded-full bg-green-500 border-2 border-transparent hover:border-white"></button> |
|
<button data-color="#F59E0B" class="color-btn w-6 h-6 rounded-full bg-yellow-500 border-2 border-transparent hover:border-white"></button> |
|
<button data-color="#8B5CF6" class="color-btn w-6 h-6 rounded-full bg-purple-500 border-2 border-transparent hover:border-white"></button> |
|
<button data-color="#EC4899" class="color-btn w-6 h-6 rounded-full bg-pink-500 border-2 border-transparent hover:border-white"></button> |
|
<button data-color="#FFFFFF" class="color-btn w-6 h-6 rounded-full bg-white border-2 border-transparent hover:border-white"></button> |
|
<button data-color="random" class="color-btn w-6 h-6 rounded-full bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 border-2 border-transparent hover:border-white flex items-center justify-center"> |
|
<i class="fas fa-random text-xs text-white"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Particle Shape</label> |
|
<div class="flex flex-wrap gap-2 mt-2"> |
|
<button data-shape="circle" class="shape-btn w-8 h-8 rounded-full bg-gray-700 border-2 border-blue-500 flex items-center justify-center"> |
|
<div class="w-4 h-4 rounded-full bg-blue-500"></div> |
|
</button> |
|
<button data-shape="square" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
|
<div class="w-4 h-4 bg-blue-500"></div> |
|
</button> |
|
<button data-shape="triangle" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
|
<div class="w-4 h-4 bg-blue-500 clip-triangle"></div> |
|
</button> |
|
<button data-shape="star" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-star text-blue-500 text-xs"></i> |
|
</button> |
|
<button data-shape="heart" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-heart text-blue-500 text-xs"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<label class="block text-sm font-medium text-gray-300 mb-1">Movement Style</label> |
|
<select id="movement-style" class="w-full bg-gray-700 text-white rounded p-2 text-sm"> |
|
<option value="float">Float Up</option> |
|
<option value="swirl">Swirling</option> |
|
<option value="zigzag">Zigzag</option> |
|
<option value="expand">Expanding</option> |
|
</select> |
|
</div> |
|
|
|
<div class="pt-2 grid grid-cols-2 gap-2"> |
|
<button id="start-btn" class="bg-green-600 hover:bg-green-500 text-white py-2 px-4 rounded-lg transition"> |
|
<i class="fas fa-play mr-1"></i> Start |
|
</button> |
|
<button id="stop-btn" class="bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-lg transition"> |
|
<i class="fas fa-stop mr-1"></i> Stop |
|
</button> |
|
<button id="reset-btn" class="col-span-2 bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition"> |
|
<i class="fas fa-sync mr-1"></i> Reset |
|
</button> |
|
<button id="burst-btn" class="col-span-2 bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg transition"> |
|
<i class="fas fa-bolt mr-1"></i> Particle Burst |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
let settings = { |
|
count: 100, |
|
size: 8, |
|
duration: 8, |
|
spawnRate: 500, |
|
color: '#3B82F6', |
|
shape: 'circle', |
|
movement: 'float', |
|
randomColor: false, |
|
isRunning: false |
|
}; |
|
|
|
|
|
const container = document.getElementById('particles-container'); |
|
const countSlider = document.getElementById('particle-count'); |
|
const sizeSlider = document.getElementById('particle-size'); |
|
const durationSlider = document.getElementById('animation-duration'); |
|
const spawnRateSlider = document.getElementById('spawn-rate'); |
|
const movementStyle = document.getElementById('movement-style'); |
|
const colorButtons = document.querySelectorAll('.color-btn'); |
|
const shapeButtons = document.querySelectorAll('.shape-btn'); |
|
const startBtn = document.getElementById('start-btn'); |
|
const stopBtn = document.getElementById('stop-btn'); |
|
const resetBtn = document.getElementById('reset-btn'); |
|
const burstBtn = document.getElementById('burst-btn'); |
|
const togglePanelBtn = document.getElementById('toggle-panel'); |
|
const controlPanel = document.getElementById('control-panel'); |
|
|
|
|
|
const countValue = document.getElementById('count-value'); |
|
const sizeValue = document.getElementById('size-value'); |
|
const durationValue = document.getElementById('duration-value'); |
|
const rateValue = document.getElementById('rate-value'); |
|
|
|
|
|
let spawnInterval; |
|
let resizeTimeout; |
|
|
|
|
|
updateSliderValues(); |
|
updateValueDisplays(); |
|
setActiveColorButton(); |
|
setActiveShapeButton(); |
|
startAnimation(); |
|
|
|
|
|
window.addEventListener('resize', function() { |
|
clearTimeout(resizeTimeout); |
|
resizeTimeout = setTimeout(handleResize, 200); |
|
}); |
|
|
|
countSlider.addEventListener('input', function() { |
|
settings.count = parseInt(this.value); |
|
updateValueDisplays(); |
|
}); |
|
|
|
sizeSlider.addEventListener('input', function() { |
|
settings.size = parseInt(this.value); |
|
updateValueDisplays(); |
|
}); |
|
|
|
durationSlider.addEventListener('input', function() { |
|
settings.duration = parseInt(this.value); |
|
updateValueDisplays(); |
|
}); |
|
|
|
spawnRateSlider.addEventListener('input', function() { |
|
settings.spawnRate = parseInt(this.value); |
|
updateValueDisplays(); |
|
if (settings.isRunning) { |
|
restartAnimation(); |
|
} |
|
}); |
|
|
|
movementStyle.addEventListener('change', function() { |
|
settings.movement = this.value; |
|
}); |
|
|
|
colorButtons.forEach(btn => { |
|
btn.addEventListener('click', function() { |
|
const color = this.getAttribute('data-color'); |
|
if (color === 'random') { |
|
settings.randomColor = true; |
|
} else { |
|
settings.color = color; |
|
settings.randomColor = false; |
|
} |
|
setActiveColorButton(); |
|
}); |
|
}); |
|
|
|
shapeButtons.forEach(btn => { |
|
btn.addEventListener('click', function() { |
|
settings.shape = this.getAttribute('data-shape'); |
|
setActiveShapeButton(); |
|
}); |
|
}); |
|
|
|
startBtn.addEventListener('click', startAnimation); |
|
stopBtn.addEventListener('click', stopAnimation); |
|
resetBtn.addEventListener('click', resetSettings); |
|
burstBtn.addEventListener('click', createParticleBurst); |
|
togglePanelBtn.addEventListener('click', togglePanel); |
|
|
|
|
|
function createParticles() { |
|
const width = window.innerWidth; |
|
const height = window.innerHeight; |
|
|
|
for (let i = 0; i < settings.count; i++) { |
|
const particle = document.createElement('div'); |
|
particle.classList.add('particle'); |
|
|
|
|
|
const x = Math.random() * width; |
|
const y = Math.random() * height + height; |
|
particle.style.left = `${x}px`; |
|
particle.style.top = `${y}px`; |
|
|
|
|
|
const sizeVariation = Math.random() * settings.size * 0.5; |
|
const finalSize = settings.size + sizeVariation; |
|
particle.style.width = `${finalSize}px`; |
|
particle.style.height = `${finalSize}px`; |
|
|
|
|
|
let color; |
|
if (settings.randomColor) { |
|
color = getRandomColor(); |
|
} else { |
|
color = settings.color; |
|
} |
|
particle.style.backgroundColor = color; |
|
|
|
|
|
if (settings.shape === 'circle') { |
|
particle.style.borderRadius = '50%'; |
|
} else if (settings.shape === 'square') { |
|
particle.style.borderRadius = '0'; |
|
} else if (settings.shape === 'triangle') { |
|
particle.style.borderRadius = '0'; |
|
particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)'; |
|
} else if (settings.shape === 'star') { |
|
particle.style.backgroundColor = 'transparent'; |
|
particle.innerHTML = '<i class="fas fa-star"></i>'; |
|
adjustIconStyles(particle, color, finalSize); |
|
} else if (settings.shape === 'heart') { |
|
particle.style.backgroundColor = 'transparent'; |
|
particle.innerHTML = '<i class="fas fa-heart"></i>'; |
|
adjustIconStyles(particle, color, finalSize); |
|
} |
|
|
|
|
|
const durationVariation = Math.random() * settings.duration * 0.5; |
|
const finalDuration = settings.duration + durationVariation; |
|
particle.style.animationDuration = `${finalDuration}s`; |
|
|
|
|
|
let animationName = 'float-up'; |
|
let animationProperties = ''; |
|
|
|
switch(settings.movement) { |
|
case 'swirl': |
|
animationProperties = `cubic-bezier(0.4, 0, 0.2, 1) forwards`; |
|
particle.style.setProperty('--x-offset', `${(Math.random() - 0.5) * 200}px`); |
|
particle.style.animation = `swirl-up ${finalDuration}s ${animationProperties}`; |
|
break; |
|
case 'zigzag': |
|
animationProperties = `ease-in-out forwards`; |
|
particle.style.setProperty('--x-offset', `${(Math.random() - 0.5) * 300}px`); |
|
particle.style.animation = `zigzag-up ${finalDuration}s ${animationProperties}`; |
|
break; |
|
case 'expand': |
|
animationProperties = `ease-out forwards`; |
|
particle.style.animation = `expand-up ${finalDuration}s ${animationProperties}`; |
|
particle.style.setProperty('--scale-end', `${1 + Math.random() * 0.5}`); |
|
break; |
|
default: |
|
animationProperties = `linear forwards`; |
|
const xMovement = (Math.random() - 0.5) * 100; |
|
particle.style.setProperty('--x-movement', `${xMovement}px`); |
|
particle.style.animation = `float-up ${finalDuration}s ${animationProperties}`; |
|
} |
|
|
|
|
|
particle.style.animationDelay = `${Math.random() * 2}s`; |
|
|
|
container.appendChild(particle); |
|
|
|
|
|
setTimeout(() => { |
|
if (particle.parentNode) { |
|
particle.remove(); |
|
} |
|
}, finalDuration * 1000 + 2000); |
|
} |
|
} |
|
|
|
function adjustIconStyles(particle, color, size) { |
|
particle.style.display = 'flex'; |
|
particle.style.alignItems = 'center'; |
|
particle.style.justifyContent = 'center'; |
|
const icon = particle.querySelector('i'); |
|
if (icon) { |
|
icon.style.color = color; |
|
icon.style.fontSize = `${size}px`; |
|
} |
|
} |
|
|
|
function createParticleBurst() { |
|
const burstCount = Math.floor(settings.count * 1.5); |
|
const width = window.innerWidth; |
|
const height = window.innerHeight; |
|
|
|
for (let i = 0; i < burstCount; i++) { |
|
const particle = document.createElement('div'); |
|
particle.classList.add('particle'); |
|
|
|
|
|
const centerX = width / 2; |
|
const centerY = height / 2; |
|
particle.style.left = `${centerX}px`; |
|
particle.style.top = `${centerY}px`; |
|
|
|
|
|
const sizeVariation = Math.random() * settings.size * 0.8; |
|
const finalSize = settings.size + sizeVariation; |
|
particle.style.width = `${finalSize}px`; |
|
particle.style.height = `${finalSize}px`; |
|
|
|
|
|
let color; |
|
if (settings.randomColor) { |
|
color = getRandomColor(); |
|
} else { |
|
color = settings.color; |
|
} |
|
particle.style.backgroundColor = color; |
|
|
|
|
|
if (settings.shape === 'circle') { |
|
particle.style.borderRadius = '50%'; |
|
} else if (settings.shape === 'square') { |
|
particle.style.borderRadius = '0'; |
|
} else if (settings.shape === 'triangle') { |
|
particle.style.borderRadius = '0'; |
|
particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)'; |
|
} else if (settings.shape === 'star') { |
|
particle.style.backgroundColor = 'transparent'; |
|
particle.innerHTML = '<i class="fas fa-star"></i>'; |
|
adjustIconStyles(particle, color, finalSize); |
|
} else if (settings.shape === 'heart') { |
|
particle.style.backgroundColor = 'transparent'; |
|
particle.innerHTML = '<i class="fas fa-heart"></i>'; |
|
adjustIconStyles(particle, color, finalSize); |
|
} |
|
|
|
|
|
const angle = Math.random() * Math.PI * 2; |
|
const distance = 50 + Math.random() * 150; |
|
const burstDuration = 1 + Math.random() * 2; |
|
|
|
particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`; |
|
particle.style.transition = `transform ${burstDuration}s ease-out, opacity ${burstDuration}s ease-out`; |
|
particle.style.opacity = '0'; |
|
|
|
container.appendChild(particle); |
|
|
|
|
|
setTimeout(() => { |
|
if (particle.parentNode) { |
|
particle.remove(); |
|
} |
|
}, burstDuration * 1000 + 100); |
|
} |
|
} |
|
|
|
function getRandomColor() { |
|
const hue = Math.floor(Math.random() * 360); |
|
return `hsl(${hue}, 80%, 60%)`; |
|
} |
|
|
|
function setActiveColorButton() { |
|
colorButtons.forEach(btn => { |
|
const btnColor = btn.getAttribute('data-color'); |
|
if (settings.randomColor && btnColor === 'random') { |
|
btn.classList.add('border-white'); |
|
} else if (!settings.randomColor && btnColor === settings.color) { |
|
btn.classList.add('border-white'); |
|
} else { |
|
btn.classList.remove('border-white'); |
|
} |
|
}); |
|
} |
|
|
|
function setActiveShapeButton() { |
|
shapeButtons.forEach(btn => { |
|
const btnShape = btn.getAttribute('data-shape'); |
|
if (btnShape === settings.shape) { |
|
btn.classList.add('border-blue-500'); |
|
} else { |
|
btn.classList.remove('border-blue-500'); |
|
} |
|
}); |
|
} |
|
|
|
function startAnimation() { |
|
if (!settings.isRunning) { |
|
settings.isRunning = true; |
|
startBtn.disabled = true; |
|
stopBtn.disabled = false; |
|
createParticles(); |
|
spawnInterval = setInterval(createParticles, settings.spawnRate); |
|
} |
|
} |
|
|
|
function stopAnimation() { |
|
if (settings.isRunning) { |
|
settings.isRunning = false; |
|
startBtn.disabled = false; |
|
stopBtn.disabled = true; |
|
clearInterval(spawnInterval); |
|
} |
|
} |
|
|
|
function restartAnimation() { |
|
stopAnimation(); |
|
startAnimation(); |
|
} |
|
|
|
function resetSettings() { |
|
stopAnimation(); |
|
|
|
settings = { |
|
count: 100, |
|
size: 8, |
|
duration: 8, |
|
spawnRate: 500, |
|
color: '#3B82F6', |
|
shape: 'circle', |
|
movement: 'float', |
|
randomColor: false, |
|
isRunning: false |
|
}; |
|
|
|
countSlider.value = settings.count; |
|
sizeSlider.value = settings.size; |
|
durationSlider.value = settings.duration; |
|
spawnRateSlider.value = settings.spawnRate; |
|
movementStyle.value = settings.movement; |
|
|
|
updateValueDisplays(); |
|
setActiveColorButton(); |
|
setActiveShapeButton(); |
|
|
|
|
|
container.innerHTML = ''; |
|
} |
|
|
|
function togglePanel() { |
|
controlPanel.classList.toggle('collapsed'); |
|
} |
|
|
|
function updateSliderValues() { |
|
countSlider.value = settings.count; |
|
sizeSlider.value = settings.size; |
|
durationSlider.value = settings.duration; |
|
spawnRateSlider.value = settings.spawnRate; |
|
movementStyle.value = settings.movement; |
|
} |
|
|
|
function updateValueDisplays() { |
|
countValue.textContent = settings.count; |
|
sizeValue.textContent = settings.size; |
|
durationValue.textContent = settings.duration; |
|
rateValue.textContent = settings.spawnRate; |
|
} |
|
|
|
function handleResize() { |
|
|
|
} |
|
|
|
|
|
const styleElement = document.createElement('style'); |
|
styleElement.textContent = ` |
|
@keyframes swirl-up { |
|
0% { |
|
transform: translateY(0) rotate(0deg) translateX(0); |
|
opacity: 0; |
|
} |
|
10% { |
|
opacity: 1; |
|
} |
|
90% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: translateY(-100vh) rotate(720deg) translateX(var(--x-offset)); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes zigzag-up { |
|
0%, 100% { |
|
transform: translateY(0) translateX(0); |
|
opacity: 0; |
|
} |
|
10% { |
|
opacity: 1; |
|
} |
|
20% { |
|
transform: translateY(-20vh) translateX(-50px); |
|
} |
|
40% { |
|
transform: translateY(-40vh) translateX(50px); |
|
} |
|
60% { |
|
transform: translateY(-60vh) translateX(-30px); |
|
} |
|
80% { |
|
transform: translateY(-80vh) translateX(30px); |
|
} |
|
90% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: translateY(-100vh) translateX(var(--x-offset)); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes expand-up { |
|
0% { |
|
transform: translateY(0) scale(1); |
|
opacity: 0; |
|
} |
|
10% { |
|
opacity: 1; |
|
} |
|
90% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: translateY(-100vh) scale(var(--scale-end)); |
|
opacity: 0; |
|
} |
|
} |
|
`; |
|
document.head.appendChild(styleElement); |
|
}); |
|
</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=hikkann/fp-test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
