|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>β
πππππ π β
</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #0f0f17; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(45deg, #ff4d4d, #f9cb28); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.profile-card { |
|
|
background: rgba(20, 20, 30, 0.8); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); |
|
|
} |
|
|
|
|
|
.status-indicator { |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
border-radius: 50%; |
|
|
background-color: #747f8d; |
|
|
} |
|
|
|
|
|
.online { |
|
|
background-color: #3ba55d; |
|
|
} |
|
|
|
|
|
.discord-badge { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.discord-badge:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.avatar-container { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.avatar-container::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 60%; |
|
|
height: 10px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
filter: blur(10px); |
|
|
border-radius: 50%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex items-center justify-center p-4 relative"> |
|
|
<div id="particles-js" class="absolute inset-0 -z-10"></div> |
|
|
<div class="profile-card w-full max-w-md rounded-xl overflow-hidden transition-all duration-300 bg-transparent"> |
|
|
|
|
|
<div class="h-40 bg-gradient-to-r from-purple-900 to-pink-700 relative overflow-hidden"> |
|
|
<video autoplay loop muted playsinline class="w-full h-full object-cover" aria-label="Profile banner video"> |
|
|
<source src="https://files.catbox.moe/gkh7l3.mp4" type="video/mp4"> |
|
|
<track kind="captions" src="" srclang="en" label="English" default> |
|
|
<p>Your browser does not support HTML5 video. Here is a <a href="https://files.catbox.moe/gkh7l3.mp4">link to the video</a> instead.</p> |
|
|
</video> |
|
|
<div class="absolute inset-0 bg-black/20"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 pt-2 bg-transparent"> |
|
|
|
|
|
<div class="flex flex-col items-center -mt-16 mb-4"> |
|
|
<div class="avatar-container"> |
|
|
<div class="relative"> |
|
|
<img src="https://files.catbox.moe/n919cw.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-purple-900/50 object-cover"> |
|
|
<div class="status-indicator online absolute bottom-0 right-0 border-2 border-gray-900"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h1 class="text-2xl font-bold mt-4 gradient-text">β
πππππ π β
</h1> |
|
|
<p class="text-gray-400 text-sm">@nesta_lacamora</p> |
|
|
<p class="text-center text-gray-300 mt-2 max-w-xs">Nesta the Alien is the best programmer, cheater, and philosopher of all time.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-center my-4"> |
|
|
<div class="h-px bg-gray-700 w-full"></div> |
|
|
<span class="px-3 text-xs text-gray-500">ππ πππππππ πππππ</span> |
|
|
<div class="h-px bg-gray-700 w-full"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-center gap-3 mb-6"> |
|
|
<img src="https://cdn.discordapp.com/badge-icons/3aa41de486fa12454c3761e8e223442e.png" alt="Discord Nitro badge" class="discord-badge w-8 h-8"> |
|
|
<img src="https://cdn.discordapp.com/badge-icons/2ba85e8026a8614b640c2837bcdfe21b.png" alt="Discord Boost badge" class="discord-badge w-8 h-8"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center gap-4"> |
|
|
<a href="https://discordapp.com/users/1266836131962552371" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-900 transition-colors" aria-label="Discord profile"> |
|
|
<i class="fab fa-discord text-white" aria-hidden="true"></i> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition-colors" aria-label="Instagram profile"> |
|
|
<i class="fab fa-instagram text-white" aria-hidden="true"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900/50 p-3 text-center text-xs text-gray-500"> |
|
|
Profile made by <a href="https://d4kdlma.netlify.app/" class="text-purple-400 hover:underline" lang="en">D4K Dlma</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const gradientText = document.querySelector('.gradient-text'); |
|
|
let hue = 0; |
|
|
|
|
|
setInterval(() => { |
|
|
hue = (hue + 1) % 360; |
|
|
gradientText.style.background = `linear-gradient(45deg, hsl(${hue}, 100%, 70%), hsl(${(hue + 30) % 360}, 100%, 70%))`; |
|
|
gradientText.style.webkitBackgroundClip = 'text'; |
|
|
gradientText.style.backgroundClip = 'text'; |
|
|
}, 50); |
|
|
}); |
|
|
</script> |
|
|
<audio autoplay loop id="bgMusic"> |
|
|
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> |
|
|
Your browser does not support the audio element. |
|
|
</audio> |
|
|
<style> |
|
|
#bgMusic { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
width: 200px; |
|
|
opacity: 0.7; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
#bgMusic:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
<script> |
|
|
|
|
|
document.addEventListener('click', function() { |
|
|
document.getElementById('bgMusic').play(); |
|
|
}, { once: true }); |
|
|
|
|
|
particlesJS('particles-js', { |
|
|
particles: { |
|
|
number: { value: 80, density: { enable: true, value_area: 800 } }, |
|
|
color: { value: "#ffffff" }, |
|
|
shape: { type: "circle" }, |
|
|
opacity: { value: 0.5, random: true }, |
|
|
size: { value: 3, random: true }, |
|
|
line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 }, |
|
|
move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" } |
|
|
}, |
|
|
interactivity: { |
|
|
detect_on: "canvas", |
|
|
events: { |
|
|
onhover: { enable: true, mode: "repulse" }, |
|
|
onclick: { enable: true, mode: "push" } |
|
|
} |
|
|
} |
|
|
}); |
|
|
</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=dlma/nn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
