<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Fixa Team Systems — Secure Access</title>
<meta name="theme-color" content="#0a0011">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Firebase SDKs (Compat version for easier standalone usage) -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>
<style>
:root {
--bg-deep: #050011;
--primary: #9d00ff;
--accent: #00f3ff;
--danger: #ff2a6d;
--glass-bg: rgba(20, 5, 35, 0.65);
--glass-border: rgba(157, 0, 255, 0.25);
--text-main: #ffffff;
--text-muted: #a0a0b0;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
body {
background-color: var(--bg-deep);
color: var(--text-main);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
/* Mencegah seleksi teks saat menahan avatar */
user-select: none;
-webkit-user-select: none;
}
/* --- Background --- */
#canvas-bg {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: -1;
background: radial-gradient(circle at 50% 100%, #1a0033 0%, #050011 80%);
}
/* --- Container --- */
.container { width: 90%; max-width: 420px; z-index: 10; padding: 20px 0; }
/* --- Card --- */
.card {
position: relative;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 30px;
padding: 40px 25px;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(157, 0, 255, 0.1), inset 0 0 20px rgba(157, 0, 255, 0.05);
overflow: hidden;
transform: translateY(20px); opacity: 0;
animation: cardEntry 0.8s var(--ease-out) forwards;
}
.card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity: 0.7;
}
/* --- Profile --- */
.profile-section { position: relative; margin-bottom: 25px; }
.avatar-wrapper { position: relative; width: 110px; height: 110px; margin: 0 auto 15px; }
/* Avatar style - Cursor default agar tidak terlihat bisa diklik orang lain */
.avatar {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
border: 3px solid rgba(255,255,255,0.1); position: relative; z-index: 2;
box-shadow: 0 0 20px rgba(157, 0, 255, 0.3);
cursor: default;
transition: border-color 0.3s;
}
/* Efek saat sedang ditahan admin */
.avatar.holding {
border-color: var(--accent);
box-shadow: 0 0 30px var(--accent);
}
.ring { position: absolute; top: -5px; left: -5px; width: 120px; height: 120px; border-radius: 50%; z-index: 1; pointer-events: none; }
.ring-1 { border: 2px dashed var(--primary); animation: spin 12s linear infinite; }
.ring-2 { top: -10px; left: -10px; width: 130px; height: 130px; border: 2px dotted var(--accent); animation: spinReverse 18s linear infinite; opacity: 0.5; }
h1.name {
font-family: 'Rajdhani', sans-serif; font-size: 2.2rem; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 5px;
background: linear-gradient(to right, #fff, var(--accent));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.status-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255, 42, 109, 0.1); color: var(--danger);
padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 600;
border: 1px solid rgba(255, 42, 109, 0.3); margin-bottom: 20px; animation: pulseRed 2s infinite; cursor: pointer;
}
.status-badge i { font-size: 0.6rem; }
/* --- Links --- */
.link-list { display: flex; flex-direction: column; gap: 14px; }
.btn-link {
position: relative; display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px;
text-decoration: none; color: var(--text-main); transition: all 0.3s ease;
overflow: hidden; opacity: 0; transform: translateY(15px);
}
.btn-link:hover {
background: rgba(157, 0, 255, 0.1); border-color: var(--primary);
transform: scale(1.02) !important; box-shadow: 0 0 20px rgba(157, 0, 255, 0.2);
}
.btn-left { display: flex; align-items: center; gap: 15px; }
.icon-box {
width: 36px; height: 36px; background: rgba(255,255,255,0.05); border-radius: 10px;
display: flex; align-items: center; justify-content: center; color: var(--accent);
font-size: 1.1rem; transition: 0.3s;
}
.btn-link:hover .icon-box { background: var(--primary); color: #fff; box-shadow: 0 0 10px var(--primary); }
.btn-text { font-weight: 500; letter-spacing: 0.5px; }
.arrow-icon { color: var(--text-muted); font-size: 0.8rem; transition: 0.3s; }
.btn-link:hover .arrow-icon { color: #fff; transform: translateX(5px); }
/* --- Main Action Button --- */
.main-action {
margin-top: 30px; width: 100%; padding: 18px; border: none; border-radius: 16px;
background: linear-gradient(135deg, var(--primary), #6a00ff); color: white;
font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700;
letter-spacing: 1px; cursor: pointer; position: relative; overflow: hidden;
box-shadow: 0 10px 25px rgba(157, 0, 255, 0.4); transition: transform 0.2s;
opacity: 0; animation: fadeIn 0.8s ease forwards 0.6s; text-decoration: none; display: block;
}
.main-action:active { transform: scale(0.98); }
.main-action i { margin-right: 8px; }
.btn-help {
margin-top: 15px; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px; background: transparent; color: var(--text-muted); font-family: 'Poppins', sans-serif;
font-size: 0.9rem; font-weight: 500; cursor: pointer; display: flex; align-items: center;
justify-content: center; gap: 8px; transition: all 0.3s ease;
}
.btn-help:hover { border-color: var(--accent); color: var(--accent); background: rgba(0, 243, 255, 0.05); }
/* --- Footer --- */
footer {
margin-top: 25px; font-size: 0.7rem; color: var(--text-muted);
opacity: 0.6; letter-spacing: 1px; position: relative; cursor: default;
}
/* --- Modals --- */
.modal-overlay {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 10000;
justify-content: center; align-items: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.active { display: flex; opacity: 1; }
.modal-box {
background: #151020; border: 1px solid var(--primary); padding: 25px; border-radius: 20px;
max-width: 360px; width: 100%; text-align: left;
box-shadow: 0 0 30px rgba(157, 0, 255, 0.2); transform: scale(0.9); transition: transform 0.3s ease;
}
.modal-overlay.active .modal-box { transform: scale(1); }
.modal-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;
}
.modal-title {
font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700;
color: var(--accent); text-transform: uppercase;
}
.close-btn { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }
/* --- Admin Forms --- */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 0.75rem; color: var(--accent); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.form-input {
width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
color: #fff; padding: 10px; border-radius: 8px; font-family: 'Poppins', sans-serif;
font-size: 0.9rem; transition: 0.3s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 8px rgba(157,0,255,0.2); }
.btn-save {
width: 100%; padding: 12px; background: var(--accent); border: none; border-radius: 10px;
color: #000; font-weight: 700; font-family: 'Rajdhani', sans-serif; text-transform: uppercase;
cursor: pointer; margin-top: 10px; transition: 0.3s;
}
.btn-save:hover { background: #fff; box-shadow: 0 0 15px var(--accent); }
/* --- Toast --- */
#toast-container {
position: fixed; top: 20px; right: 20px; z-index: 9999;
display: flex; flex-direction: column; gap: 10px;
}
.toast {
background: rgba(10, 0, 20, 0.9); border: 1px solid var(--primary); color: #fff;
padding: 12px 20px; border-radius: 8px; font-size: 0.9rem;
display: flex; align-items: center; gap: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
animation: slideIn 0.3s ease forwards; backdrop-filter: blur(5px); min-width: 250px;
}
/* --- Animations --- */
@keyframes cardEntry { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spinReverse { 100% { transform: rotate(-360deg); } }
@keyframes pulseRed { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
</style>
</head>
<body>
<!-- Background -->
<canvas id="canvas-bg"></canvas>
<!-- Toast Container -->
<div id="toast-container"></div>
<!-- Admin Login Modal -->
<div id="login-modal" class="modal-overlay">
<div class="modal-box" style="text-align: center;">
<div class="modal-header">
<span class="modal-title">Admin Access</span>
<button class="close-btn" onclick="toggleModal('login-modal')">×</button>
</div>
<p style="margin-bottom: 15px; font-size: 0.9rem; color: #ccc;">Masukkan kode akses untuk mengedit data.</p>
<div class="form-group">
<input type="password" id="admin-pass" class="form-input" placeholder="Password Admin" style="text-align: center;">
</div>
<button class="btn-save" onclick="checkAdmin()" style="background: var(--primary); color: white;">LOGIN</button>
</div>
</div>
<!-- Admin Dashboard Modal -->
<div id="admin-modal" class="modal-overlay">
<div class="modal-box">
<div class="modal-header">
<span class="modal-title">Edit Config</span>
<button class="close-btn" onclick="toggleModal('admin-modal')">×</button>
</div>
<div class="modal-content" style="max-height: 60vh; overflow-y: auto; padding-right: 5px;">
<div class="form-group">
<label>Nama Profil</label>
<input type="text" id="input-name" class="form-input">
</div>
<div class="form-group">
<label>Link WhatsApp (Full URL)</label>
<input type="text" id="input-wa" class="form-input">
</div>
<div class="form-group">
<label>Link Telegram</label>
<input type="text" id="input-tele" class="form-input">
</div>
<div class="form-group">
<label>Link Instagram</label>
<input type="text" id="input-ig" class="form-input">
</div>
<div class="form-group">
<label>Link Saluran/Cheat</label>
<input type="text" id="input-channel" class="form-input">
</div>
<div class="form-group">
<label>Donet/Support</label>
<input type="text" id="input-channel" class="form-input">
</div>
<div class="form-group">
<label>Link Toko (Store)</label>
<input type="text" id="input-store" class="form-input">
</div>
<div class="form-group">
<label>URL Avatar</label>
<input type="text" id="input-avatar" class="form-input">
</div>
</div>
<button class="btn-save" onclick="saveConfig()"><i class="fas fa-save"></i> SIMPAN KE DATABASE</button>
<p style="text-align: center; margin-top: 10px; font-size: 0.7rem; color: #666;">Data akan tersimpan ke Firebase Realtime DB</p>
</div>
</div>
<!-- Help Modal (Panduan) -->
<div id="help-modal" class="modal-overlay">
<div class="modal-box">
<div class="modal-header">
<span class="modal-title">Panduan Akses</span>
<button class="close-btn" onclick="toggleModal('help-modal')">×</button>
</div>
<div class="modal-content">
<p>Jika tombol di atas <strong>ERROR</strong> atau tidak bisa diklik, ikuti langkah ini:</p>
<ul class="step-list" style="list-style: none; margin-bottom: 20px; padding-left: 0;">
<li style="display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start;">
<div class="step-icon" style="background: var(--primary); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; flex-shrink: 0; margin-top: 2px;">1</div>
<div class="step-text" style="font-size: 0.85rem; color: #ccc;"><strong>Klik Titik 3</strong> Temukan ikon titik tiga di pojok kanan atas layar.</div>
</li>
<li style="display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start;">
<div class="step-icon" style="background: var(--primary); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; flex-shrink: 0; margin-top: 2px;">2</div>
<div class="step-text" style="font-size: 0.85rem; color: #ccc;"><strong>Pilih "Buka di Browser"</strong> Pilih Chrome atau Safari.</div>
</li>
</ul>
<button class="btn-modal-action" style="width: 100%; padding: 12px; background: var(--primary); border: none; border-radius: 10px; color: white; font-weight: 600; cursor: pointer;" onclick="toggleModal('help-modal')">Mengerti</button>
</div>
</div>
</div>
<!-- Security Overlay -->
<div id="security-overlay" class="modal-overlay">
<div class="modal-box" style="text-align: center; border-color: var(--danger);">
<i class="fas fa-shield-alt" style="font-size: 3rem; color: var(--danger); margin-bottom: 15px; display:block;"></i>
<h3 style="font-family: 'Rajdhani'; text-transform:uppercase; margin-bottom:10px;">Peringatan Sistem</h3>
<p>Kamu menggunakan browser dalam aplikasi (TikTok/IG). Fitur dibatasi.</p>
<button class="btn-modal-action" style="background: var(--danger);" onclick="document.getElementById('security-overlay').classList.remove('active')">Tutup</button>
</div>
</div>
<div class="container">
<main class="card">
<div class="profile-section">
<div class="avatar-wrapper">
<div class="ring ring-1"></div>
<div class="ring ring-2"></div>
<!-- ID: disp-avatar untuk trigger admin -->
<img id="disp-avatar" src="https://raw.githubusercontent.com/FixaOnly/JapanKey/main/berlin.png" alt="Fixa Only" class="avatar">
</div>
<h1 class="name" id="disp-name">Fixa Only</h1>
<div class="status-badge" onclick="toggleModal('help-modal')">
<i class="fas fa-exclamation-triangle"></i>
<span>LINK ERROR? KLIK SINI</span>
</div>
</div>
<nav class="link-list">
<a id="link-wa" href="https://wa.me/6283865004077" target="_blank" class="btn-link" style="animation-delay: 0.1s">
<div class="btn-left">
<div class="icon-box"><i class="fab fa-whatsapp"></i></div>
<span class="btn-text">WhatsApp</span>
</div>
<i class="fas fa-chevron-right arrow-icon"></i>
</a>
<a id="link-tele" href="https://t.me/FixaOnly" target="_blank" class="btn-link" style="animation-delay: 0.2s">
<div class="btn-left">
<div class="icon-box"><i class="fab fa-telegram"></i></div>
<span class="btn-text">Telegram</span>
</div>
<i class="fas fa-chevron-right arrow-icon"></i>
</a>
<a id="link-ig" href="https://instagram.com/fixaxiterz" target="_blank" class="btn-link" style="animation-delay: 0.3s">
<div class="btn-left">
<div class="icon-box"><i class="fab fa-instagram"></i></div>
<span class="btn-text">Instagram</span>
</div>
<i class="fas fa-chevron-right arrow-icon"></i>
</a>
<a id="link-channel" href="https://sociabuzz.com/fixa/tribe" target="_blank" class="btn-link" style="animation-delay: 0.4s">
<div class="btn-left">
<div class="icon-box"><i class="fas fa-gift"></i></div>
<span class="btn-text">Donet/Support</span>
</div>
<i class="fas fa-chevron-right arrow-icon"></i>
</a>
<a id="link-channel" href="https://whatsapp.com/channel/0029VaxH8JoJf05kyXjGB20A" target="_blank" class="btn-link" style="animation-delay: 0.4s">
<div class="btn-left">
<div class="icon-box"><i class="fas fa-gift"></i></div>
<span class="btn-text">Saluran & Cheat</span>
</div>
<i class="fas fa-chevron-right arrow-icon"></i>
</a>
</nav>
<a id="link-store" href="https://fixateam.store" target="_blank" class="main-action">
<i class="fas fa-store"></i> BUKA LIST HARGA
</a>
<button class="btn-help" onclick="toggleModal('help-modal')">
<i class="fas fa-question-circle"></i> Butuh Bantuan? (Cara Buka)
</button>
<footer>
⚡ FIXA Systems — Encrypted Environment
<!-- Tombol admin trigger DIHAPUS dari sini -->
</footer>
</main>
</div>
<script>
function antiDownload() {
const isFile = location.protocol === "file:"; // save page / download mode
if (isFile) {
// ambil HTML asli
let raw = document.documentElement.outerHTML;
// escape jadi text
raw = raw
.replace(/</g, "<")
.replace(/>/g, ">");
document.body.innerHTML = `
<pre style="
background:#0d0f12;
color:#00eaff;
font-size:12px;
font-family:monospace;
width:100vw;
height:100vh;
padding:20px;
overflow:auto;
white-space:pre-wrap;
">${raw}</pre>
`;
}
}
window.addEventListener("load", antiDownload);
</script>
<script>
window.onbeforeprint = () => { document.body.innerHTML = ""; }
</script>
<script>
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
return false;
}
});
</script>
<script>
/* ============================
CONFIGURATION FIREBASE
============================ */
const firebaseConfig = {
apiKey: "AIzaSyCaNc6L_5AkvmXmrn3DtmR--xGFM7jvnv4",
authDomain: "vipxit-82c84.firebaseapp.com",
databaseURL: "https://vipxit-82c84-default-rtdb.firebaseio.com",
projectId: "vipxit-82c84",
storageBucket: "vipxit-82c84.firebasestorage.app",
messagingSenderId: "311219711928",
appId: "1:311219711928:web:f2cca4c9ba49b0c5eea94d",
measurementId: "G-BSYHPK2WC3"
};
/* ============================ */
// Initialize Firebase
let db = null;
let isFirebaseActive = false;
try {
if (firebaseConfig.apiKey !== "ISI_API_KEY_KAMU_DISINI" && firebaseConfig.databaseURL.includes("http")) {
firebase.initializeApp(firebaseConfig);
db = firebase.database();
isFirebaseActive = true;
console.log("Firebase Connected");
listenForChanges();
} else {
console.warn("Firebase belum dikonfigurasi. Menggunakan mode statis.");
showToast("⚠️ Firebase Config belum diset");
}
} catch (e) {
console.error("Firebase Error:", e);
}
// --- LOGIC DATA & FIREBASE ---
function listenForChanges() {
if(!db) return;
const ref = db.ref('config');
ref.on('value', (snapshot) => {
const data = snapshot.val();
if (data) {
updateUI(data);
}
});
}
function updateUI(data) {
if(data.name) document.getElementById('disp-name').innerText = data.name;
if(data.avatar) document.getElementById('disp-avatar').src = data.avatar;
if(data.wa_link) document.getElementById('link-wa').href = data.wa_link;
if(data.tele_link) document.getElementById('link-tele').href = data.tele_link;
if(data.ig_link) document.getElementById('link-ig').href = data.ig_link;
if(data.channel_link) document.getElementById('link-channel').href = data.channel_link;
if(data.store_link) document.getElementById('link-store').href = data.store_link;
}
const ADMIN_PASS = "140808";
function checkAdmin() {
const pass = document.getElementById('admin-pass').value;
if (pass === ADMIN_PASS) {
toggleModal('login-modal');
loadAdminForm();
toggleModal('admin-modal');
showToast("✅ Login Admin Berhasil");
} else {
showToast("❌ Password Salah!");
}
}
function loadAdminForm() {
document.getElementById('input-name').value = document.getElementById('disp-name').innerText;
document.getElementById('input-avatar').value = document.getElementById('disp-avatar').src;
document.getElementById('input-wa').value = document.getElementById('link-wa').href;
document.getElementById('input-tele').value = document.getElementById('link-tele').href;
document.getElementById('input-ig').value = document.getElementById('link-ig').href;
document.getElementById('input-channel').value = document.getElementById('link-channel').href;
document.getElementById('input-store').value = document.getElementById('link-store').href;
}
function saveConfig() {
if(!isFirebaseActive) {
showToast("⛔ Error: Firebase belum aktif");
return;
}
const newData = {
name: document.getElementById('input-name').value,
avatar: document.getElementById('input-avatar').value,
wa_link: document.getElementById('input-wa').value,
tele_link: document.getElementById('input-tele').value,
ig_link: document.getElementById('input-ig').value,
channel_link: document.getElementById('input-channel').value,
store_link: document.getElementById('input-store').value,
updated_at: new Date().toISOString()
};
const btn = document.querySelector('.btn-save');
const originalText = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> MENYIMPAN...';
db.ref('config').set(newData)
.then(() => {
showToast("✅ Data berhasil diupdate!");
btn.innerHTML = originalText;
toggleModal('admin-modal');
})
.catch((error) => {
console.error(error);
showToast("❌ Gagal menyimpan: " + error.message);
btn.innerHTML = originalText;
});
}
/* ============================
SECRET ADMIN TRIGGER (HIDDEN)
Tahan Avatar 15 Detik
============================ */
const avatar = document.getElementById('disp-avatar');
let holdTimer;
const holdTime = 30000; // 15 Detik
function startHold(e) {
e.preventDefault(); // Mencegah drag image
avatar.classList.add('holding');
holdTimer = setTimeout(() => {
avatar.classList.remove('holding');
toggleModal('login-modal');
showToast("�� Akses Admin Terbuka");
}, holdTime);
}
function endHold() {
clearTimeout(holdTimer);
avatar.classList.remove('holding');
}
// Event Listeners untuk Desktop dan Mobile
avatar.addEventListener('mousedown', startHold);
avatar.addEventListener('touchstart', startHold);
avatar.addEventListener('mouseup', endHold);
avatar.addEventListener('mouseleave', endHold);
avatar.addEventListener('touchend', endHold);
/* ============================
UI INTERACTIONS & UTILS
============================ */
function toggleModal(id) {
const modal = document.getElementById(id);
if (modal.classList.contains('active')) {
modal.classList.remove('active');
} else {
modal.classList.add('active');
}
}
function showToast(message) {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = 'toast';
toast.innerHTML = `<i class="fas fa-info-circle"></i> <span>${message}</span>`;
container.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'slideIn 0.3s reverse forwards';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
function antiDownload() {
const isFile = location.protocol === "file:";
if (isFile) {
let raw = document.documentElement.outerHTML;
raw = raw.replace(/</g, "<").replace(/>/g, ">");
document.body.innerHTML = `<pre style="background:#0d0f12;color:#00eaff;font-size:12px;font-family:monospace;width:100vw;height:100vh;padding:20px;overflow:auto;white-space:pre-wrap;">${raw}</pre>`;
}
}
window.addEventListener("load", antiDownload);
document.addEventListener("DOMContentLoaded", () => {
const links = document.querySelectorAll('.btn-link');
links.forEach((link, index) => {
link.style.animation = `fadeInUp 0.6s var(--ease-out) forwards ${0.1 + (index * 0.1)}s`;
});
const styleSheet = document.createElement("style");
styleSheet.innerText = `@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`;
document.head.appendChild(styleSheet);
});
/* --- SECURITY --- */
document.addEventListener('contextmenu', e => {
e.preventDefault();
showToast("⛔ Akses Ditolak");
});
document.onkeydown = function(e) {
if (e.keyCode == 123 || (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) || (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))) {
showToast("⛔ Diblokir");
return false;
}
};
function antiClone() {
if (!navigator.onLine || location.protocol === "file:") {
document.body.innerHTML = `<div id="antiClone" style="display:flex;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;background:#020203;color:#ff2a3a;font-family:'Rajdhani',sans-serif;font-size:40px;font-weight:900;text-transform:uppercase;letter-spacing:3px;text-align:center;">Fuck off, cloner.<span style="font-size:18px;margin-top:10px;opacity:.8;letter-spacing:1px;text-transform:none;font-weight:400;">You're not fucking welcome here.</span></div>`;
let fx = document.createElement("style");
fx.innerHTML = `#antiClone { text-shadow: 0 0 12px rgba(255,0,32,.65), 0 0 25px rgba(255,0,32,.45), 0 0 45px rgba(255,0,32,.35); } #antiClone::after { content:''; position:absolute; top:0;left:0; width:100%;height:100%; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px); pointer-events:none; opacity:.35; }`;
document.head.appendChild(fx);
}
}
window.addEventListener("load", antiClone);
function checkBrowser() {
const ua = navigator.userAgent || navigator.vendor || window.opera;
if (/tiktok|instagram|fb_iab|fban|twitter|line|snapchat/i.test(ua)) {
document.getElementById('security-overlay').classList.add('active');
}
}
window.addEventListener('load', checkBrowser);
/* --- CANVAS ANIMATION --- */
const canvas = document.getElementById('canvas-bg');
const ctx = canvas.getContext('2d');
let width, height, particles = [];
function getParticleCount() {
return window.innerWidth < 768 ? Math.floor((window.innerWidth * window.innerHeight) / 15000) : Math.floor((window.innerWidth * window.innerHeight) / 9000);
}
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
initParticles();
}
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.vx = (Math.random() - 0.5) * 0.3;
this.vy = (Math.random() - 0.5) * 0.3;
this.size = Math.random() * 2;
this.color = Math.random() > 0.5 ? 'rgba(157, 0, 255,' : 'rgba(0, 243, 255,';
this.alpha = Math.random() * 0.5 + 0.2;
}
update() {
this.x += this.vx; this.y += this.vy;
if (this.x < 0 || this.x > width) this.vx *= -1;
if (this.y < 0 || this.y > height) this.vy *= -1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color + this.alpha + ')';
ctx.fill();
}
}
function initParticles() {
particles = [];
for (let i = 0; i < getParticleCount(); i++) particles.push(new Particle());
}
function animate() {
ctx.clearRect(0, 0, width, height);
for (let i = 0; i < particles.length; i++) {
particles[i].update(); particles[i].draw();
if (window.innerWidth > 600) {
for (let j = i; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distance = Math.sqrt(dx*dx + dy*dy);
if (distance < 100) {
ctx.beginPath();
ctx.strokeStyle = `rgba(157, 0, 255, ${0.15 * (1 - distance/100)})`;
ctx.lineWidth = 0.5;
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
}
requestAnimationFrame(animate);
}
window.addEventListener('resize', resize);
resize();
animate();
</script>
</body>
</html>