|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Devilish Chronicles</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Syne+Mono&display=swap'); |
|
|
|
|
|
.devil-text { |
|
|
font-family: 'Major Mono Display', monospace; |
|
|
text-shadow: 0 0 10px rgba(255, 0, 0, 0.7); |
|
|
} |
|
|
|
|
|
.typing-effect { |
|
|
overflow: hidden; |
|
|
white-space: nowrap; |
|
|
border-right: 0.15em solid #ff0000; |
|
|
animation: typing 2.5s steps(40, end), blink-caret 0.75s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #ff0000 } |
|
|
} |
|
|
|
|
|
.glow { |
|
|
animation: glow 2s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes glow { |
|
|
from { |
|
|
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff0000, 0 0 20px #ff0000; |
|
|
} |
|
|
to { |
|
|
text-shadow: 0 0 10px #fff, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000; |
|
|
} |
|
|
} |
|
|
|
|
|
.devil-bg { |
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(255, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
transform: scale(1.2) rotate(10deg); |
|
|
color: #ff0000 !important; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="devil-bg min-h-screen text-gray-200"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="devil-text text-4xl md:text-6xl font-bold mb-4 glow"> |
|
|
Ｄᴇᴠɪʟɪѕʜ ｃʜʀᴏɴɪᴄʟᴇѕ |
|
|
</h1> |
|
|
<div class="w-full max-w-md mx-auto h-px bg-gradient-to-r from-transparent via-red-500 to-transparent"></div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="flex flex-col items-center justify-center"> |
|
|
<div class="relative mb-6 group"> |
|
|
<div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-purple-900 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-200"></div> |
|
|
<div class="relative bg-black rounded-lg p-1"> |
|
|
<img src="https://avatars.githubusercontent.com/u/43078934?v=4" alt="Devil Avatar" |
|
|
class="w-48 h-48 rounded-lg border-2 border-red-900 object-cover filter grayscale hover:grayscale-0 transition duration-500"> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="font-medium mb-2 text-red-400 typing-effect" id="devilTitle"></h3> |
|
|
<p class="text-sm text-gray-400 italic">i._.become_a_devil</p> |
|
|
|
|
|
<button id="darkModeToggle" class="mt-6 px-4 py-2 bg-red-900 hover:bg-red-800 rounded-lg transition-colors duration-300 flex items-center"> |
|
|
<i class="fas fa-moon mr-2"></i> Dark Ritual |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="col-span-1 md:col-span-2"> |
|
|
<div class="bg-gradient-to-br from-gray-900 to-black rounded-xl p-6 shadow-lg border border-gray-800 card-hover transition-all duration-300"> |
|
|
<h2 class="devil-text text-2xl font-bold mb-6 text-center border-b border-red-900 pb-2"> |
|
|
₊‧.°.⋆ 「 ✦ Devil ✦ 」 |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="bg-gray-900 rounded-lg p-4 border-l-4 border-red-700"> |
|
|
<h3 class="text-red-400 font-bold mb-2">₊‧.° am i alive??✦</h3> |
|
|
<p class="text-gray-300">"Code is my canvas, darkness my inspiration. Walking the line between reality and digital chaos. Creating what shouldn't exist, breaking what does."</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-900 rounded-lg p-4 border-l-4 border-purple-700"> |
|
|
<h3 class="text-purple-400 font-bold mb-2">⊹₊ ㆍ✿ ㆍ₊⊹</h3> |
|
|
<p class="text-gray-300"> |
|
|
Specializing in JavaScript frameworks with a focus on creating unconventional applications that challenge the norm. When the world sleeps, my code comes alive. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 flex justify-center space-x-6"> |
|
|
<a href="https://github.com/Darknessking13" target="_blank" class="social-icon text-2xl hover:text-red-500"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="https://discord.com/users/1083342294951927881" target="_blank" class="social-icon text-2xl hover:text-indigo-500"> |
|
|
<i class="fab fa-discord"></i> |
|
|
</a> |
|
|
<a href="https://x.com/Darknessking132" target="_blank" class="social-icon text-2xl hover:text-blue-400"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<div class="inline-block bg-black bg-opacity-50 rounded-lg px-6 py-2 border border-gray-800"> |
|
|
<div id="clock" class="text-xl font-mono text-red-400"></div> |
|
|
<div id="date" class="text-sm text-gray-400"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-16 text-center text-gray-500 text-sm"> |
|
|
<div class="w-full max-w-md mx-auto h-px bg-gradient-to-r from-transparent via-red-900 to-transparent mb-4"></div> |
|
|
<p>The darkness takes many forms... choose yours wisely.</p> |
|
|
<p class="mt-2">© <span id="year"></span> Devilish Chronicles</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const text = "₊‧.°.⋆ 「 ✦ Devil ✦ 」"; |
|
|
let i = 0; |
|
|
const typingEffect = () => { |
|
|
if (i < text.length) { |
|
|
document.getElementById("devilTitle").innerHTML += text.charAt(i); |
|
|
i++; |
|
|
setTimeout(typingEffect, 100); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
typingEffect(); |
|
|
|
|
|
|
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
|
let isDark = true; |
|
|
|
|
|
darkModeToggle.addEventListener('click', () => { |
|
|
isDark = !isDark; |
|
|
if (!isDark) { |
|
|
document.body.classList.remove('devil-bg'); |
|
|
document.body.classList.add('bg-gray-100', 'text-gray-900'); |
|
|
darkModeToggle.innerHTML = '<i class="fas fa-sun mr-2"></i> Light Mode'; |
|
|
darkModeToggle.classList.remove('bg-red-900', 'hover:bg-red-800'); |
|
|
darkModeToggle.classList.add('bg-yellow-500', 'hover:bg-yellow-400'); |
|
|
} else { |
|
|
document.body.classList.add('devil-bg'); |
|
|
document.body.classList.remove('bg-gray-100', 'text-gray-900'); |
|
|
darkModeToggle.innerHTML = '<i class="fas fa-moon mr-2"></i> Dark Ritual'; |
|
|
darkModeToggle.classList.add('bg-red-900', 'hover:bg-red-800'); |
|
|
darkModeToggle.classList.remove('bg-yellow-500', 'hover:bg-yellow-400'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function updateClock() { |
|
|
const now = new Date(); |
|
|
const timeStr = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); |
|
|
const dateStr = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }); |
|
|
|
|
|
document.getElementById('clock').textContent = timeStr; |
|
|
document.getElementById('date').textContent = dateStr; |
|
|
} |
|
|
|
|
|
updateClock(); |
|
|
setInterval(updateClock, 1000); |
|
|
|
|
|
|
|
|
const socialIcons = document.querySelectorAll('.social-icon'); |
|
|
setInterval(() => { |
|
|
socialIcons.forEach(icon => { |
|
|
if (Math.random() > 0.7) { |
|
|
icon.classList.add('glow'); |
|
|
setTimeout(() => icon.classList.remove('glow'), 2000); |
|
|
} |
|
|
}); |
|
|
}, 3000); |
|
|
}); |
|
|
</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=PyxiLabs/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
