129 lines
4.7 KiB
HTML
129 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>MCPanel</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Glow elements -->
|
|
<div class="cursor-glow" id="glow1"></div>
|
|
<div class="cursor-glow" id="glow2"></div>
|
|
<div class="cursor-glow" id="glow3"></div>
|
|
<div class="cursor-glow" id="glow4"></div>
|
|
<div class="cursor-glow" id="glow5"></div>
|
|
<div class="cursor-glow" id="glow6"></div>
|
|
|
|
<!-- Particle Background -->
|
|
<div id="particle-background"></div>
|
|
|
|
<nav class="top-nav">
|
|
<div class="nav-logo"><a href="/">MCPanel <h6>BETA</h6></a></div>
|
|
<div class="nav-links">
|
|
<a href="/dashboard">Panel</a>
|
|
<a style="color: cornflowerblue;" href="/donate">Donate</a>
|
|
<a href="/logout">Wyloguj</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="dashboard-card">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<div id="ad-banner" class="ad-banner"></div>
|
|
<p>Wersja: v0.2</p>
|
|
<script>
|
|
window.addEventListener('dragover', e => e.preventDefault());
|
|
window.addEventListener('drop', e => e.preventDefault());
|
|
|
|
const hoverSound = new Audio("/static/sounds/hover.wav");
|
|
//const clickSound = new Audio("/static/sounds/click.wav");
|
|
|
|
hoverSound.volume = 1.0;
|
|
//clickSound.volume = 0.5;
|
|
|
|
document.querySelectorAll('a, button, .clickable').forEach(el => {
|
|
el.addEventListener('mouseenter', () => {
|
|
hoverSound.currentTime = 0;
|
|
hoverSound.play();
|
|
});
|
|
|
|
//el.addEventListener('click', () => {
|
|
// clickSound.currentTime = 0;
|
|
// clickSound.play();
|
|
//});
|
|
});
|
|
|
|
const trails = [
|
|
document.getElementById('glow1'),
|
|
document.getElementById('glow2'),
|
|
document.getElementById('glow3'),
|
|
document.getElementById('glow4'),
|
|
document.getElementById('glow5'),
|
|
document.getElementById('glow6'),
|
|
];
|
|
|
|
let x = window.innerWidth / 2, y = window.innerHeight / 2;
|
|
const delays = trails.map(() => ({ x, y }));
|
|
const speeds = [0.9, 0.75, 0.6, 0.5, 0.4, 0.3];
|
|
|
|
window.addEventListener('mousemove', (e) => {
|
|
x = e.clientX;
|
|
y = e.clientY;
|
|
});
|
|
|
|
function animate() {
|
|
delays.forEach((d, i) => {
|
|
d.x += (x - d.x) * speeds[i];
|
|
d.y += (y - d.y) * speeds[i];
|
|
const size = trails[i].offsetWidth;
|
|
trails[i].style.transform = `translate(${d.x - size / 2}px, ${d.y - size / 2}px)`;
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
function createParticle() {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
document.getElementById('particle-background').appendChild(particle);
|
|
|
|
const size = Math.random() * 4 + 2;
|
|
const xPos = Math.random() * window.innerWidth;
|
|
const yPos = Math.random() * window.innerHeight;
|
|
const xMove = (Math.random() - 0.5) * 300;
|
|
const yMove = (Math.random() - 0.5) * 300;
|
|
const animationDuration = Math.random() * 2 + 2;
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${xPos}px`;
|
|
particle.style.top = `${yPos}px`;
|
|
particle.style.setProperty('--x-move', `${xMove}px`);
|
|
particle.style.setProperty('--y-move', `${yMove}px`);
|
|
particle.style.animationDuration = `${animationDuration}s`;
|
|
particle.style.animationDelay = `${Math.random() * 2}s`;
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
}, animationDuration * 1000);
|
|
}
|
|
setInterval(createParticle, 100);
|
|
|
|
fetch("/ads/list")
|
|
.then(response => response.json())
|
|
.then(images => {
|
|
if (images.length === 0) return;
|
|
const randomImage = images[Math.floor(Math.random() * images.length)];
|
|
const img = document.createElement("img");
|
|
img.src = randomImage;
|
|
img.alt = "Ad Banner";
|
|
img.style.maxWidth = "100%";
|
|
img.style.height = "auto";
|
|
img.style.borderRadius = "8px";
|
|
img.style.boxShadow = "0 0 12px rgba(0,0,0,0.3)";
|
|
document.getElementById("ad-banner").appendChild(img);
|
|
});
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html>
|