Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Space | Joni</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
<style>
:root {
/* Tema Gelap Keunguan */
--glass-bg: rgba(20, 10, 40, 0.4);
--glass-border: rgba(168, 85, 247, 0.2);
--accent-purple: #a855f7;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #0a0118; /* Latar belakang lebih gelap */
color: #f8fafc;
overflow-x: hidden;
}
.font-mono { font-family: 'JetBrains Mono', monospace; }
/* Background Aurora Animasi dengan warna ungu/indigo */
.aurora {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
z-index: -1; filter: blur(120px); opacity: 0.4;
}
.blob {
position: absolute; width: 600px; height: 600px; border-radius: 50%;
animation: move 25s infinite alternate;
}
.blob-1 { background: #581c87; top: -15%; left: -10%; }
.blob-2 { background: #312e81; bottom: -15%; right: -10%; animation-delay: -7s; }
@keyframes move {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(150px, 150px) scale(1.3); }
}
/* Gaya Glassmorphism Ungu Gelap */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}
.glass-hover:hover {
background: rgba(168, 85, 247, 0.1);
border-color: rgba(168, 85, 247, 0.4);
transform: translateY(-4px);
box-shadow: 0 12px 40px 0 rgba(168, 85, 247, 0.15);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Logika Tab */
.tab-content { display: none; animation: fadeIn 0.5s ease-out forwards; }
.tab-content.active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* Animasi Rotasi Musik */
.rotating { animation: spin 5s linear infinite; }
.paused { animation-play-state: paused; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Sembunyikan scrollbar */
::-webkit-scrollbar { width: 0px; }
/* Form styling */
input, textarea {
background: rgba(0, 0, 0, 0.3) !important;
border: 1px solid rgba(168, 85, 247, 0.2) !important;
}
</style>
</head>
<body class="flex justify-center min-h-screen p-4 md:p-8">
<div class="aurora">
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
</div>
<div class="w-full max-w-lg space-y-6">
<!-- Pemutar Musik -->
<div class="glass rounded-3xl p-4 flex items-center justify-between border-purple-500/30">
<div class="flex items-center gap-4">
<div id="musicDisc" class="w-12 h-12 rounded-full bg-gradient-to-tr from-purple-600 to-indigo-600 flex items-center justify-center rotating paused shadow-[0_0_20px_rgba(168,85,247,0.4)] overflow-hidden">
<i data-lucide="music" class="w-6 h-6 text-white"></i>
</div>
<div>
<p class="text-[10px] font-bold text-purple-400 uppercase tracking-widest">Memutar Musik</p>
<p id="songTitle" class="text-sm font-semibold truncate w-32 md:w-48 text-purple-50">Gulu Pedot</p>
</div>
</div>
<button onclick="toggleMusic()" id="playBtn" class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center hover:bg-purple-500/40 transition-all border border-purple-500/30">
<i data-lucide="play" id="playIcon" class="w-5 h-5 fill-current text-purple-300"></i>
</button>
<audio id="mainAudio" loop src="https://files.catbox.moe/a4htep.mp3"></audio>
</div>
<!-- Profil Utama -->
<header class="glass rounded-[2.5rem] p-8 text-center relative overflow-hidden">
<div class="relative inline-block mb-4 group">
<div class="absolute inset-0 bg-purple-600 blur-3xl opacity-30 group-hover:opacity-50 transition-opacity"></div>
<div class="w-24 h-24 rounded-full p-1 bg-gradient-to-tr from-purple-500 via-indigo-500 to-pink-500 relative z-10">
<div class="w-full h-full rounded-full bg-[#0a0118] flex items-center justify-center overflow-hidden border-4 border-[#0a0118]">
<img src="https://i.ibb.co.com/SDz0DGnM/eb223c5da71347bca6f6cb153ac0bbde.jpg" alt="Profil Joni" class="w-full h-full object-cover">
</div>
</div>
</div>
<h1 class="text-3xl font-bold tracking-tight text-white mb-1">Joni</h1>
<p class="text-purple-400 font-medium mb-8 uppercase text-[10px] tracking-[0.3em]">Multimedia Enthusiast</p>
<nav class="flex justify-center gap-1 p-1 bg-black/40 rounded-2xl border border-purple-500/10">
<button onclick="showTab('links')" id="btn-links" class="tab-btn flex-1 py-2.5 rounded-xl text-xs font-bold transition-all bg-purple-600/20 text-white">Links</button>
<button onclick="showTab('bio')" id="btn-bio" class="tab-btn flex-1 py-2.5 rounded-xl text-xs font-bold transition-all text-slate-400 hover:text-purple-300">Bio</button>
<button onclick="showTab('gallery')" id="btn-gallery" class="tab-btn flex-1 py-2.5 rounded-xl text-xs font-bold transition-all text-slate-400 hover:text-purple-300">Gallery</button>
<button onclick="showTab('contact')" id="btn-contact" class="tab-btn flex-1 py-2.5 rounded-xl text-xs font-bold transition-all text-slate-400 hover:text-purple-300">Contact</button>
</nav>
</header>
<!-- Konten: Link -->
<div id="tab-links" class="tab-content active space-y-3">
<a href="https://instagram.com/GANTI_USERNAME" target="_blank" class="glass glass-hover flex items-center p-5 rounded-2xl group border-l-4 border-l-pink-500/50">
<div class="w-10 h-10 rounded-xl bg-pink-500/20 flex items-center justify-center shadow-[0_0_15px_rgba(236,72,153,0.2)]"><i data-lucide="instagram" class="w-5 h-5 text-pink-500"></i></div>
<span class="ml-4 font-bold text-sm text-slate-200">Instagram</span>
<i data-lucide="external-link" class="ml-auto w-4 h-4 text-slate-600 group-hover:text-pink-400 transition-colors"></i>
</a>
<a href="https://wa.me/GANTI_NOMOR" target="_blank" class="glass glass-hover flex items-center p-5 rounded-2xl group border-l-4 border-l-green-500/50">
<div class="w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center shadow-[0_0_15px_rgba(34,197,94,0.2)]"><i data-lucide="message-circle" class="w-5 h-5 text-green-500"></i></div>
<span class="ml-4 font-bold text-sm text-slate-200">WhatsApp</span>
<i data-lucide="external-link" class="ml-auto w-4 h-4 text-slate-600 group-hover:text-green-400 transition-colors"></i>
</a>
<a href="https://tiktok.com/@GANTI_USERNAME" target="_blank" class="glass glass-hover flex items-center p-5 rounded-2xl group border-l-4 border-l-white/50">
<div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center shadow-[0_0_15px_rgba(255,255,255,0.1)]"><i data-lucide="music-2" class="w-5 h-5 text-white"></i></div>
<span class="ml-4 font-bold text-sm text-slate-200">TikTok</span>
<i data-lucide="external-link" class="ml-auto w-4 h-4 text-slate-600 group-hover:text-white transition-colors"></i>
</a>
</div>
<!-- Konten: Bio -->
<div id="tab-bio" class="tab-content space-y-4">
<div class="glass rounded-3xl p-8 relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<i data-lucide="quote" class="w-20 h-20 text-purple-500"></i>
</div>
<div class="flex items-center gap-2 mb-6 text-purple-400">
<i data-lucide="terminal" class="w-5 h-5"></i>
<h3 class="font-mono font-bold tracking-tighter">joni_profile.exe</h3>
</div>
<div class="space-y-6">
<p class="text-2xl font-bold font-mono text-purple-300 leading-tight">"Loading 99%..."</p>
<p class="text-slate-300 leading-relaxed text-sm">
Ngedit random, tapi luwih sering buka Instagram, njeketek bablas nggulung Reels.
</p>
<div class="p-4 bg-purple-500/10 border border-purple-500/30 rounded-2xl">
<p class="text-purple-300 text-xs font-medium italic">
Multimedia Enthusiast — yen mood-e ora lagi <span class="font-bold underline tracking-widest text-pink-400">Error 404</span>.
</p>
</div>
</div>
<div class="mt-8 grid grid-cols-2 gap-3">
<div class="bg-black/40 border border-purple-500/20 p-4 rounded-2xl text-center">
<p class="text-[9px] text-purple-500 uppercase font-black tracking-widest mb-1">Keahlian</p>
<p class="text-xs font-bold text-slate-200">Ngising</p>
</div>
<div class="bg-black/40 border border-purple-500/20 p-4 rounded-2xl text-center">
<p class="text-[9px] text-purple-500 uppercase font-black tracking-widest mb-1">Status</p>
<p class="text-xs font-bold text-slate-200">Gabut</p>
</div>
</div>
</div>
</div>
<!-- Konten: Galeri -->
<div id="tab-gallery" class="tab-content space-y-4">
<div class="grid grid-cols-2 gap-3">
<div class="glass rounded-2xl overflow-hidden aspect-square relative group cursor-pointer border-purple-500/20">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-100 group-hover:scale-110" alt="Work 1">
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
<p class="text-[10px] font-bold text-white uppercase tracking-tighter">Setup</p>
</div>
</div>
<div class="glass rounded-2xl overflow-hidden aspect-square relative group cursor-pointer border-purple-500/20">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-100 group-hover:scale-110" alt="Work 2">
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
<p class="text-[10px] font-bold text-white uppercase tracking-tighter">Hobby</p>
</div>
</div>
<div class="glass rounded-2xl overflow-hidden aspect-square relative group cursor-pointer border-purple-500/20">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-100 group-hover:scale-110" alt="Work 3">
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
<p class="text-[10px] font-bold text-white uppercase tracking-tighter">Coding</p>
</div>
</div>
<div class="glass rounded-2xl overflow-hidden aspect-square relative group cursor-pointer border-purple-500/20">
<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-100 group-hover:scale-110" alt="Work 4">
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
<p class="text-[10px] font-bold text-white uppercase tracking-tighter">Editing</p>
</div>
</div>
</div>
</div>
<!-- Konten: Kontak -->
<div id="tab-contact" class="tab-content space-y-4">
<div class="glass rounded-3xl p-8">
<h3 class="font-bold mb-6 flex items-center gap-2 text-purple-100"><i data-lucide="send" class="w-5 h-5 text-purple-400"></i> Drop a message</h3>
<form class="space-y-4">
<input type="text" placeholder="Nama Sampeyan" class="w-full rounded-xl p-4 text-sm text-white focus:ring-2 focus:ring-purple-500 outline-none transition-all placeholder-slate-500">
<textarea placeholder="Opo sing pengen diomongke?" rows="3" class="w-full rounded-xl p-4 text-sm text-white focus:ring-2 focus:ring-purple-500 outline-none transition-all placeholder-slate-500"></textarea>
<button type="button" class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 py-4 rounded-xl font-bold text-sm text-white hover:brightness-110 transition-all shadow-lg shadow-purple-900/20 active:scale-95 border border-purple-400/20">Kirim Sekarang</button>
</form>
</div>
</div>
<!-- Footer -->
<footer class="pt-8 pb-12 text-center">
<p class="text-[9px] uppercase tracking-[0.5em] font-black text-purple-900/60">Built dengan Turu & GoodDayFreeze 🤩</p>
</footer>
</div>
<script>
// Inisialisasi Ikon
lucide.createIcons();
const = document.getElementById('main');
const playIcon = document.getElementById('playIcon');
const disc = document.getElementById('musicDisc');
// Fungsi Putar Musik
function toggleMusic() {
if (.paused) {
.play();
playIcon.setAttribute('data-lucide', 'pause');
disc.classList.remove('paused');
} else {
.pause();
playIcon.setAttribute('data-lucide', 'play');
disc.classList.add('paused');
}
lucide.createIcons();
}
// Fungsi Ganti Tab
function showTab(tabId) {
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('bg-purple-600/20', 'text-white');
b.classList.add('text-slate-400');
});
document.getElementById('tab-' + tabId).classList.add('active');
document.getElementById('btn-' + tabId).classList.add('bg-purple-600/20', 'text-white');
document.getElementById('btn-' + tabId).classList.remove('text-slate-400');
}
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
13
Requests
8
Domains
12311KB
Transfer Size
12877KB
Content Size
1,208.0ms
Dom Content Loaded
1,512.0ms
First Paint
1,698.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...