This is a cool personal profile page that shows Discord status in real time.
Live Discord Status
- Shows online, idle, or offline
- Displays current activity (like what game playing)
- Updates every 3 seconds automatically
How It Works
The page uses this JavaScript code to check my Discord status:
// YOU MUST BE IN THE DISCORD https://discord.gg/PHNVcmfDkB
// Checks my Discord status every 3 seconds
function fetchDiscordStatus() {
fetch('https://api.lanyard.rest/v1/users/USERID HERE')
.then(response => response.json())
.then(data => {
// Updates the status display
if (data.success) {
// Shows profile picture
// Changes the status color (green/yellow/red)
// Displays what you are currently doing
}
})
}
// Runs the check every 3 seconds
setInterval(fetchDiscordStatus, 3000);
It shows:
- profile picture
- username
- colored dot (green = online, yellow = away, red = busy/dnd)
- current activity (like “Playing Fortnite”)
Other Features
- Dark theme with nice green background (can customize background image)
- “Click to enter” animation (can customize text)
- Basic info about me (can customize text)
- Link to my forum profile (can customize links)
The page automatically updates without needing to refresh
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="https://flaw.sh/icon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@admin</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
body {
font-family: 'Inter', sans-serif;
color: #f5f5f5;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
justify-content: center;
padding-bottom: 0;
box-sizing: border-box;
position: relative;
overflow: hidden;
background-color: #121212;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://wallpapers.com/images/hd/dark-green-aesthetic-1366-x-768-background-bqavshdqxiiuknii.jpg');
background-size: cover;
background-position: center;
opacity: 0.4;
z-index: -1;
}
.social-icon:hover {
transform: scale(1.2);
transition: transform 0.2s ease-in-out;
}
.discord-status-badge {
border-radius: 9999px;
padding: 6px 12px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
color: white;
font-size: 0.8rem;
white-space: nowrap;
}
@keyframes pulse {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
.online {
background-color: #66FF99;
}
.idle {
background-color: #FFCC00;
color: #333;
}
.dnd {
background-color: #FF6666;
}
.offline {
background-color: #999999;
}
.profile-picture {
border-radius: 9999px;
width: 120px;
height: 120px;
object-fit: cover;
border: 5px solid #333;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
.discord-pfp {
border-radius: 9999px;
width: 80px;
height: 80px;
object-fit: cover;
border: 3px solid #333;
margin-bottom: 12px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.discord-section, .forums-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
text-align: center;
background-color: rgba(0, 0, 0, 0.144);
border-radius: 0.75rem;
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4), 0 8px 10px -4px rgba(0, 0, 0, 0.3);
margin-right: 0;
width: 250px;
margin-top: 20px;
position: relative;
margin-left: 0;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.forums-section {
margin-left: 40px;
}
.discord-name-global {
font-size: 1.1rem;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 4px;
}
.discord-name-user {
font-size: 0.875rem;
color: #a0aec0;
opacity: 0.8;
}
.main-content {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
width: 100%;
box-sizing: border-box;
max-width: 100%;
gap: 40px;
}
#audio-visualizer {
width: 100%;
height: 150px;
background-color: #4a5568;
border-radius: 0.5rem;
margin-bottom: 1rem;
display: block;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.controls button {
background-color: #6b7280;
color: #f5f5f5;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.controls button:hover {
background-color: #9ca3af;
}
.volume-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
input[type="range"] {
width: 100px;
}
#seek-bar {
width: 100%;
height: 0.5rem;
background-color: #4a5568;
border-radius: 0.25rem;
cursor: pointer;
margin-top: 1rem;
}
#seek-bar::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
background-color: #f5f5f5;
border-radius: 50%;
cursor: pointer;
}
#seek-bar::-moz-range-thumb {
width: 1rem;
height: 1rem;
background-color: #f5f5f5;
border-radius: 50%;
cursor: pointer;
border: none;
}
.text-center {
text-align: center;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.flex {
display: flex;
}
.justify-center {
justify-content: center;
}
.space-x-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.text-gray-600 {
color: #a0aec0;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-semibold {
font-weight: 600;
color: #ffffff;
}
.text-gray-800 {
color: #ffffff;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.bg-white {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
text-align: center;
background-color: rgba(0, 0, 0, 0.144);
border-radius: 0.75rem;
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4), 0 8px 10px -4px rgba(0, 0, 0, 0.3);
margin-right: 0;
width: 250px;
margin-top: 20px;
position: relative;
margin-left: 0;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.rounded-lg {
border-radius: 0.75rem;
}
.shadow-xl {
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.4), 0 8px 10px -4px rgba(0, 0, 0, 0.3);
}
.p-6 {
padding: 1.5rem;
}
.w-full {
width: 100%;
}
.max-w-md {
max-width: 28rem;
}
.status-circle {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
display: inline-block;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
animation: pulse 2s infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
100% {
transform: scale(1);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
}
.status-text {
font-size: 0.875rem;
color: #f5f5f5;
white-space: nowrap;
}
.online {
background-color: #66FF99;
}
.idle {
background-color: #FFCC00;
}
.dnd {
background-color: #FF6666;
}
.offline {
background-color: #999999;
}
.activities-container {
margin-top: 10px;
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.activity {
font-size: 0.7rem;
color: #a0aec0;
margin-bottom: 2px;
display: flex;
align-items: center;
padding-left: 0px;
position: relative;
text-align: left;
width: fit-content;
}
.activity::before {
content: '';
position: absolute;
left: 8px;
}
#click-to-enter-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
cursor: pointer;
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
#click-to-enter-text {
font-size: 2rem;
color: #fff;
}
.sparkle-container {
position: relative;
display: inline-block;
overflow: hidden;
}
.sparkle {
position: absolute;
background-color: white;
width: 2px;
height: 2px;
border-radius: 50%;
opacity: 0;
pointer-events: none;
box-shadow: 0 0 5px white;
}
@keyframes sparkle-animation {
0% {
opacity: 0;
transform: scale(0) translate(0, 0);
}
10% {
opacity: 1;
transform: scale(1.5) translate(-10px, -10px);
}
30% {
opacity: 0.8;
transform: scale(1) translate(10px, -5px);
}
50% {
opacity: 0.5;
transform: scale(0.8) translate(-10px, 5px);
}
70% {
opacity: 0.2;
transform: scale(0.5) translate(5px, 10px);
}
90% {
opacity: 0;
transform: scale(0.2) translate(-5px, -10px);
}
100% {
opacity: 0;
transform: scale(0) translate(0, 0);
}
}
.forums-section ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.forums-section ul li {
margin-bottom: 8px;
font-size: 0.9rem;
color: #a0aec0;
display: flex;
align-items: center;
}
.forums-section h3 {
font-size: 1.1rem;
font-weight: 600;
color: #e2e8f0;
margin-bottom: 12px;
text-align: center;
}
.x64-logo {
width: 16px;
height: 16px;
margin-right: 5px;
vertical-align: middle;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.discord-section, .forums-section {
margin-left: 0;
margin-right: 0;
width: 90%;
max-width: 350px;
}
.main-content {
width: 90%;
max-width: 350px;
}
.profile-picture {
width: 100px;
height: 100px;
}
.forums-section {
margin-top: 20px;
}
}
@media (max-width: 480px) {
#click-to-enter-text {
font-size: 1.5rem;
}
.discord-pfp {
width: 70px;
height: 70px;
}
.discord-section, .forums-section {
width: 95%;
}
.main-content {
width: 95%;
}
}
</style>
</head>
<body class="bg-gray-100">
<div id="click-to-enter-overlay">
<span id="click-to-enter-text">Click to Enter</span>
</div>
<audio id="background-music" src="d.mp3" loop preload="auto"></audio>
<div class="container">
<div id="discord-status" class="discord-section">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/49/A_black_image.jpg" alt="Discord PFP" class="discord-pfp">
<div class="discord-name-global">Loading...</div>
<div class="discord-name-user"></div>
<div class="mt-2 flex items-center justify-content-center discord-status-container">
<span class="status-circle offline"></span>
<span class="status-text">Offline</span>
</div>
<div class="activities-container">
</div>
</div>
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md main-content">
<div class="text-center mb-6">
<img src="https://i.pinimg.com/736x/31/74/cf/3174cf9bfe1e4df4879bfefe1604904e.jpg" alt="Profile Picture" class="profile-picture mx-auto mb-4">
<h1 class="text-2xl font-semibold text-white sparkle-container" id="sparkle-text">
0xA7F3B9D4C8
</h1>
<p class="text-white-600 mb-2">
@admin
</p>
<p class="text-white text-sm" style="margin-bottom: 0.5rem;">Born to die rich.</p>
<p class="text-white text-sm">
<i class="fas fa-map-pin" style="font-size: 0.75rem;"></i>
<span style="margin-left: 4px;">Beverly Hills, CA</span>
</p>
</div>
</div>
<div class="forums-section">
<h3>Forums I'm In</h3>
<ul>
<li>
<img class="x64-logo" src="https://x64.gg/uploads/default/optimized/1X/a39a21bd83e41b4ff16323ff60614b1377fbdedc_2_32x32.png" alt="x64 Logo">
<a href="https://x64.gg/u/sin/summary">x64.gg</a>
</li>
</ul>
</div>
</div>
<script>
const discordStatusDiv = document.getElementById('discord-status');
const discordGlobalNameDiv = document.querySelector('.discord-name-global');
const discordUserNameDiv = document.querySelector('.discord-name-user');
const discordPfpImg = document.querySelector('.discord-pfp');
const statusCircle = discordStatusDiv.querySelector('.status-circle');
const statusText = discordStatusDiv.querySelector('.status-text');
const activitiesContainer = document.querySelector('.activities-container');
const backgroundMusic = document.getElementById('background-music');
const clickToEnterOverlay = document.getElementById('click-to-enter-overlay');
const container = document.querySelector('.container');
const sparkleTextContainer = document.getElementById('sparkle-text');
clickToEnterOverlay.addEventListener('click', () => {
backgroundMusic.play().then(() => {
clickToEnterOverlay.style.opacity = '0';
setTimeout(() => {
clickToEnterOverlay.style.display = 'none';
}, 500);
}).catch(error => {
console.error("Playback prevented:", error);
});
});
function fetchDiscordStatus() {
// YOU MUST BE IN THE DISCORD https://discord.gg/PHNVcmfDkB /
fetch('https://api.lanyard.rest/v1/users/USERID HERE')
.then(response => response.json())
.then(data => {
if (data.success) {
const user = data.data;
let statusClass = 'offline';
let statusTextValue = 'Offline';
let circleColor = '#999999';
if (user.listening_to_spotify) {
statusClass = 'online';
statusTextValue = 'Listening to Spotify';
circleColor = '#66FF99';
}
else {
switch (user.discord_status) {
case 'online':
statusClass = 'online';
statusTextValue = 'Online';
circleColor = '#66FF99';
break;
case 'idle':
statusClass = 'idle';
statusTextValue = 'Idle';
circleColor = '#FFCC00';
break;
case 'dnd':
statusClass = 'dnd';
statusTextValue = 'Do Not Disturb';
circleColor = '#FF6666';
break;
case 'offline':
default:
statusClass = 'offline';
statusTextValue = 'Offline';
circleColor = '#999999';
}
}
let activityText = "Online";
if (user.activities && user.activities.length > 0) {
activitiesContainer.innerHTML = '';
user.activities.forEach(activity => {
let activityString = '';
if (activity.name === "Spotify") {
activityString = `Listening to ${activity.details} - ${activity.state} on Spotify`;
} else if (activity.type === 0) {
activityString = `Playing ${activity.name}`;
} else if (activity.type === 4) {
activityString = `${activity.state}`;
} else if (activity.type === 2) {
activityString = `Listening to ${activity.name}`;
} else {
activityString = "Online";
}
const activityDiv = document.createElement('div');
activityDiv.className = 'activity';
activityDiv.textContent = activityString;
activitiesContainer.appendChild(activityDiv);
});
}
else {
activitiesContainer.innerHTML = '';
}
const avatarUrl = `https://cdn.discordapp.com/avatars/${user.discord_user.id}/${user.discord_user.avatar}.png?size=80`;
discordPfpImg.src = avatarUrl;
discordGlobalNameDiv.textContent = user.discord_user.global_name || user.discord_user.username;
discordUserNameDiv.textContent = `${user.discord_user.username}#${user.discord_user.discriminator}`;
statusCircle.className = `status-circle ${statusClass}`;
statusText.textContent = statusTextValue;
statusCircle.style.backgroundColor = circleColor;
} else {
statusCircle.className = 'status-circle offline';
statusText.textContent = 'Offline';
statusCircle.style.backgroundColor = '#999999';
activitiesContainer.innerHTML = '';
}
})
.catch(error => {
console.error('Error fetching Discord status:', error);
statusCircle.className = 'status-circle offline';
statusText.textContent = 'Offline';
statusCircle.style.backgroundColor = '#999999';
activitiesContainer.innerHTML = '';
});
}
fetchDiscordStatus();
setInterval(fetchDiscordStatus, 3000);
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
document.addEventListener('keydown', function (e) {
if (
(e.key === 'F12') ||
(e.ctrlKey && e.shiftKey && e.key === 'I')
) {
e.preventDefault();
}
});
document.querySelectorAll('img').forEach(img => {
img.setAttribute('draggable', 'false');
});
function createSparkle(container) {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
container.appendChild(sparkle);
const textRect = container.getBoundingClientRect();
const x = textRect.left + Math.random()* textRect.width;
const y = textRect.top + Math.random() * textRect.height;
const directionX = Math.random() < 0.5 ? -1 : 1;
const directionY = Math.random() < 0.5 ? -1 : 1;
sparkle.style.left = `${x - container.offsetLeft}px`;
sparkle.style.top = `${y - container.offsetTop}px`;
sparkle.style.animation = `sparkle-animation 2s ease-in-out`;
sparkle.addEventListener('animationend', () => {
sparkle.remove();
});
}
setInterval(() => {
if (sparkleTextContainer) {
createSparkle(sparkleTextContainer);
}
}, 70);
</script>
</body>
</html>
