|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>sayonyara's links from the underground</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--space-blue: #0d0221; |
|
|
--neon-purple: #9d00ff; |
|
|
--cosmic-blue: #2b00ff; |
|
|
--starlight: #f8f8ff; |
|
|
--mystic-purple: #6a00f4; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Courier New', monospace; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: var(--space-blue); |
|
|
color: var(--starlight); |
|
|
overflow-x: hidden; |
|
|
min-height: 100vh; |
|
|
perspective: 1000px; |
|
|
background-image: |
|
|
radial-gradient(circle at 20% 30%, rgba(154, 0, 255, 0.15) 0%, transparent 30%), |
|
|
radial-gradient(circle at 80% 70%, rgba(43, 0, 255, 0.15) 0%, transparent 30%); |
|
|
} |
|
|
|
|
|
.spiral-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.spiral { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
border: 1px solid var(--neon-purple); |
|
|
animation: spin var(--duration) linear infinite; |
|
|
filter: blur(0.5px); |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
padding: 2rem; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
header { |
|
|
text-align: center; |
|
|
margin-bottom: 3rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 1rem; |
|
|
color: var(--starlight); |
|
|
text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--cosmic-blue); |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
h1::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 60%; |
|
|
height: 3px; |
|
|
background: linear-gradient(90deg, transparent, var(--neon-purple), var(--cosmic-blue), transparent); |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.cat-icon { |
|
|
position: absolute; |
|
|
font-size: 1.8rem; |
|
|
animation: float 3s ease-in-out infinite; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.cat-icon:nth-child(1) { |
|
|
top: -20px; |
|
|
left: 10%; |
|
|
color: var(--neon-purple); |
|
|
animation-delay: 0s; |
|
|
} |
|
|
|
|
|
.cat-icon:nth-child(2) { |
|
|
top: 50px; |
|
|
right: 15%; |
|
|
color: var(--cosmic-blue); |
|
|
animation-delay: 0.5s; |
|
|
} |
|
|
|
|
|
.cat-icon:nth-child(3) { |
|
|
bottom: -30px; |
|
|
left: 20%; |
|
|
color: var(--mystic-purple); |
|
|
animation-delay: 1s; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) rotate(0deg); } |
|
|
50% { transform: translateY(-10px) rotate(5deg); } |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
font-style: italic; |
|
|
color: var(--mystic-purple); |
|
|
margin-bottom: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.links-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.link-card { |
|
|
background: rgba(13, 2, 33, 0.7); |
|
|
border: 1px solid var(--neon-purple); |
|
|
border-radius: 10px; |
|
|
padding: 1.5rem; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
|
|
|
.link-card:hover { |
|
|
transform: translateY(-5px) rotate(1deg); |
|
|
box-shadow: 0 5px 15px var(--neon-purple); |
|
|
border-color: var(--cosmic-blue); |
|
|
} |
|
|
|
|
|
.link-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: radial-gradient(circle, var(--neon-purple), transparent 70%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.5s ease; |
|
|
} |
|
|
|
|
|
.link-card:hover::before { |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.link-title { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 0.5rem; |
|
|
color: var(--starlight); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.link-icon { |
|
|
margin-right: 0.5rem; |
|
|
color: var(--cosmic-blue); |
|
|
} |
|
|
|
|
|
.link-description { |
|
|
font-size: 0.9rem; |
|
|
color: rgba(248, 248, 255, 0.7); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.link-url { |
|
|
display: inline-block; |
|
|
padding: 0.3rem 0.8rem; |
|
|
background: linear-gradient(90deg, var(--neon-purple), var(--cosmic-blue)); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 20px; |
|
|
font-size: 0.8rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.link-url:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 10px var(--neon-purple); |
|
|
} |
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
margin-top: 3rem; |
|
|
font-size: 0.8rem; |
|
|
color: var(--mystic-purple); |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.stars { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -2; |
|
|
} |
|
|
|
|
|
.star { |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
height: 2px; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
animation: twinkle 5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes twinkle { |
|
|
0%, 100% { opacity: 0.2; } |
|
|
50% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.mystic-eye { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: radial-gradient(circle, var(--neon-purple) 0%, var(--space-blue) 70%); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 0 15px var(--neon-purple); |
|
|
z-index: 10; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.mystic-eye:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.eye-pupil { |
|
|
width: 15px; |
|
|
height: 15px; |
|
|
background-color: var(--space-blue); |
|
|
border-radius: 50%; |
|
|
position: relative; |
|
|
animation: blink 5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 48%, 52%, 100% { transform: scaleY(1); } |
|
|
50% { transform: scaleY(0.1); } |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
h1 { |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
.links-container { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="stars" id="stars"></div> |
|
|
<div class="spiral-bg" id="spiral-bg"></div> |
|
|
|
|
|
<div class="container"> |
|
|
<header> |
|
|
<i class="fas fa-cat cat-icon"></i> |
|
|
<i class="fas fa-paw cat-icon"></i> |
|
|
<i class="fas fa-cat cat-icon"></i> |
|
|
<h1>sayonyara's links from the underground</h1> |
|
|
<p class="subtitle">mystic pathways through the digital cosmos</p> |
|
|
</header> |
|
|
|
|
|
<div class="links-container"> |
|
|
<div class="link-card"> |
|
|
<h3 class="link-title"><i class="fas fa-spider link-icon"></i> Web Weaving</h3> |
|
|
<p class="link-description">Explore the intricate webs of digital creation and mystical coding practices.</p> |
|
|
<a href="#" class="link-url">Enter the Web</a> |
|
|
</div> |
|
|
|
|
|
<div class="link-card"> |
|
|
<h3 class="link-title"><i class="fas fa-moon link-icon"></i> Lunar Codes</h3> |
|
|
<p class="link-description">Nocturnal programming rituals under the glow of the digital moon.</p> |
|
|
<a href="#" class="link-url">Moon Access</a> |
|
|
</div> |
|
|
|
|
|
<div class="link-card"> |
|
|
<h3 class="link-title"><i class="fas fa-paw link-icon"></i> Feline Scripts</h3> |
|
|
<p class="link-description">Ancient coding knowledge passed down by cybernetic cats.</p> |
|
|
<a href="#" class="link-url">Purr-view</a> |
|
|
</div> |
|
|
|
|
|
<div class="link-card"> |
|
|
<h3 class="link-title"><i class="fas fa-spinner link-icon"></i> Spiral Logic</h3> |
|
|
<p class="link-description">Fractal algorithms that spiral into infinite complexity.</p> |
|
|
<a href="#" class="link-url">Follow the Spiral</a> |
|
|
</div> |
|
|
|
|
|
<div class="link-card"> |
|
|
<h3 class="link-title"><i class="fas fa-space-shuttle link-icon"></i> Cosmic Nets</h3> |
|
|
<p class="link-description">Interstellar network connections through quantum tunnels.</p> |
|
|
<a href="#" class="link-url">Warp to Network</a> |
|
|
</div> |
|
|
|
|
|
<div class="link-card"> |
|
|
<h3 class="link-title"><i class="fas fa-hat-wizard link-icon"></i> Mystic Script</h3> |
|
|
<p class="link-description">Arcane programming languages from digital dimensions.</p> |
|
|
<a href="#" class="link-url">Cast Spell</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer> |
|
|
<p>🌀 digital spirals in the void · sayonyara 2023 · follow the white cat 🐈</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<div class="mystic-eye"> |
|
|
<div class="eye-pupil"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const spiralBg = document.getElementById('spiral-bg'); |
|
|
for (let i = 0; i < 10; i++) { |
|
|
const spiral = document.createElement('div'); |
|
|
spiral.classList.add('spiral'); |
|
|
|
|
|
const size = Math.random() * 300 + 100; |
|
|
const x = Math.random() * 100; |
|
|
const y = Math.random() * 100; |
|
|
const duration = Math.random() * 60 + 60; |
|
|
|
|
|
spiral.style.width = `${size}px`; |
|
|
spiral.style.height = `${size}px`; |
|
|
spiral.style.left = `${x}%`; |
|
|
spiral.style.top = `${y}%`; |
|
|
spiral.style.borderWidth = `${Math.random() * 3 + 1}px`; |
|
|
spiral.style.setProperty('--duration', `${duration}s`); |
|
|
|
|
|
spiralBg.appendChild(spiral); |
|
|
} |
|
|
|
|
|
|
|
|
const starsContainer = document.getElementById('stars'); |
|
|
for (let i = 0; i < 200; i++) { |
|
|
const star = document.createElement('div'); |
|
|
star.classList.add('star'); |
|
|
|
|
|
const size = Math.random() * 3; |
|
|
const x = Math.random() * 100; |
|
|
const y = Math.random() * 100; |
|
|
const delay = Math.random() * 5; |
|
|
const duration = Math.random() * 5 + 5; |
|
|
|
|
|
star.style.width = `${size}px`; |
|
|
star.style.height = `${size}px`; |
|
|
star.style.left = `${x}%`; |
|
|
star.style.top = `${y}%`; |
|
|
star.style.animationDelay = `${delay}s`; |
|
|
star.style.animationDuration = `${duration}s`; |
|
|
|
|
|
starsContainer.appendChild(star); |
|
|
} |
|
|
|
|
|
|
|
|
const mysticEye = document.querySelector('.mystic-eye'); |
|
|
mysticEye.addEventListener('click', () => { |
|
|
document.body.classList.toggle('show-secret'); |
|
|
alert('🌀 The all-seeing eye gazes upon you. The cosmic cats approve. 🐈⬛✨'); |
|
|
|
|
|
|
|
|
for (let i = 0; i < 10; i++) { |
|
|
const spiral = document.createElement('div'); |
|
|
spiral.classList.add('spiral'); |
|
|
|
|
|
const size = Math.random() * 200 + 50; |
|
|
const x = Math.random() * 80 + 10; |
|
|
const y = Math.random() * 80 + 10; |
|
|
const duration = Math.random() * 40 + 20; |
|
|
|
|
|
spiral.style.width = `${size}px`; |
|
|
spiral.style.height = `${size}px`; |
|
|
spiral.style.left = `${x}%`; |
|
|
spiral.style.top = `${y}%`; |
|
|
spiral.style.borderColor = `hsl(${Math.random() * 60 + 270}, 100%, 70%)`; |
|
|
spiral.style.position = 'fixed'; |
|
|
spiral.style.zIndex = '5'; |
|
|
spiral.style.setProperty('--duration', `${duration}s`); |
|
|
|
|
|
document.body.appendChild(spiral); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
spiral.remove(); |
|
|
}, duration * 1000); |
|
|
} |
|
|
}); |
|
|
</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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
