|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Etiquette | GroteskoGentleman</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Mono:wght@400;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Space Mono', monospace; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glitch-text { |
|
|
font-family: 'Major Mono Display', monospace; |
|
|
text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d; |
|
|
animation: glitch 2s infinite alternate; |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
border: 1px solid #00ff9d; |
|
|
box-shadow: 0 0 10px #00ff9d, inset 0 0 10px #00ff9d; |
|
|
} |
|
|
|
|
|
.decay-card { |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
backdrop-filter: blur(10px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.decay-card:hover { |
|
|
transform: translateY(-5px) rotate(1deg); |
|
|
box-shadow: 0 10px 20px rgba(0, 255, 157, 0.2); |
|
|
} |
|
|
|
|
|
.glitch-effect { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch-effect::before, .glitch-effect::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: black; |
|
|
} |
|
|
|
|
|
.glitch-effect::before { |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 #ff00c1; |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch-effect::after { |
|
|
left: -2px; |
|
|
text-shadow: -2px 0 #00f9ff; |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim2 5s infinite linear alternate-reverse; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-gray-300 min-h-screen"> |
|
|
<div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div> |
|
|
|
|
|
<header class="container mx-auto px-4 py-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="/index.html" class="glitch-text text-4xl md:text-6xl" data-text="GROTESKOGENTLEMAN">GROTESKOGENTLEMAN</a> |
|
|
<div class="flex gap-4"> |
|
|
<button id="theme-toggle" class="p-2 rounded-full neon-border"> |
|
|
<i data-feather="moon"></i> |
|
|
</button> |
|
|
<a href="/index.html" class="p-2 rounded-full neon-border hover:text-green-400 transition"> |
|
|
<i data-feather="home"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<section class="mb-16"> |
|
|
<div class="neon-border rounded-lg p-8 backdrop-blur-sm bg-black bg-opacity-50"> |
|
|
<h2 class="glitch-effect text-3xl mb-6" data-text="The Decayed Code">The Decayed Code</h2> |
|
|
<p class="mb-6">Modern etiquette for the digital gentleman in an age of corrosion</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> |
|
|
<div class="decay-card rounded-lg p-6 neon-border"> |
|
|
<h3 class="text-xl font-bold mb-4 text-green-400">01. The Rotting Handshake</h3> |
|
|
<p class="text-sm">A gentleman's virtual greeting should glitch just enough to show character, but not so much as to cause discomfort.</p> |
|
|
</div> |
|
|
<div class="decay-card rounded-lg p-6 neon-border"> |
|
|
<h3 class="text-xl font-bold mb-4 text-purple-400">02. Corrupted Correspondence</h3> |
|
|
<p class="text-sm">Emails should degrade elegantly over time, with carefully curated typos and formatting errors.</p> |
|
|
</div> |
|
|
<div class="decay-card rounded-lg p-6 neon-border"> |
|
|
<h3 class="text-xl font-bold mb-4 text-pink-400">03. Digital Decomposition</h3> |
|
|
<p class="text-sm">One must allow their online presence to decay at a dignified pace, like fine wine turning to vinegar.</p> |
|
|
</div> |
|
|
<div class="decay-card rounded-lg p-6 neon-border"> |
|
|
<h3 class="text-xl font-bold mb-4 text-blue-400">04. The Glitch Protocol</h3> |
|
|
<p class="text-sm">When encountering system errors, a gentleman maintains composure and treats them as aesthetic features.</p> |
|
|
</div> |
|
|
<div class="decay-card rounded-lg p-6 neon-border"> |
|
|
<h3 class="text-xl font-bold mb-4 text-yellow-400">05. Parasitic Politeness</h3> |
|
|
<p class="text-sm">Hover states should ooze with charm, transforming in unexpected yet delightful ways.</p> |
|
|
</div> |
|
|
<div class="decay-card rounded-lg p-6 neon-border"> |
|
|
<h3 class="text-xl font-bold mb-4 text-red-400">06. Necro-Navigation</h3> |
|
|
<p class="text-sm">Broken links should be treated as portals to serendipitous discovery rather than failures.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="neon-border rounded-lg p-8 mb-16 backdrop-blur-sm bg-black bg-opacity-50"> |
|
|
<h2 class="glitch-effect text-3xl mb-6" data-text="Submit Your Decay">Submit Your Decay</h2> |
|
|
<p class="mb-6">Contribute to our growing archive of corrupted courtesy</p> |
|
|
<form class="flex flex-col gap-6"> |
|
|
<input type="text" placeholder="Your name (optional)" class="bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-400"> |
|
|
<textarea placeholder="Your etiquette suggestion..." rows="4" class="bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-400"></textarea> |
|
|
<button type="submit" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-2 rounded-lg hover:opacity-90 transition">Submit for Corruption</button> |
|
|
</form> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer class="container mx-auto px-4 py-8 border-t border-gray-800"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-sm mb-4 md:mb-0">© 2023 GroteskoGentleman - Decay with dignity</p> |
|
|
<div class="flex gap-4"> |
|
|
<a href="/index.html" class="text-gray-400 hover:text-green-400 transition"><i data-feather="home"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-purple-400 transition"><i data-feather="instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-pink-400 transition"><i data-feather="github"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x00ff9d, |
|
|
backgroundColor: 0x0, |
|
|
size: 0.8 |
|
|
}); |
|
|
|
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
html.classList.toggle('dark'); |
|
|
const icon = themeToggle.querySelector('i'); |
|
|
if (html.classList.contains('dark')) { |
|
|
feather.replace(); |
|
|
} else { |
|
|
feather.replace(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
