Spaces:
Running
Running
remove particle background, and replace with black background - Follow Up Deployment
Browse files- index.html +1 -50
index.html
CHANGED
|
@@ -30,7 +30,7 @@
|
|
| 30 |
|
| 31 |
body {
|
| 32 |
font-family: 'Montserrat', sans-serif;
|
| 33 |
-
background:
|
| 34 |
color: white;
|
| 35 |
overflow-x: hidden;
|
| 36 |
}
|
|
@@ -100,24 +100,6 @@
|
|
| 100 |
box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
|
| 101 |
}
|
| 102 |
|
| 103 |
-
.particles-container {
|
| 104 |
-
position: absolute;
|
| 105 |
-
top: 0;
|
| 106 |
-
left: 0;
|
| 107 |
-
width: 100%;
|
| 108 |
-
height: 100%;
|
| 109 |
-
pointer-events: none;
|
| 110 |
-
z-index: -1;
|
| 111 |
-
}
|
| 112 |
-
|
| 113 |
-
.particle {
|
| 114 |
-
position: absolute;
|
| 115 |
-
background: rgba(212, 175, 55, 0.8);
|
| 116 |
-
border-radius: 50%;
|
| 117 |
-
pointer-events: none;
|
| 118 |
-
opacity: 0.5;
|
| 119 |
-
}
|
| 120 |
-
|
| 121 |
.vip-gradient-bg {
|
| 122 |
background: linear-gradient(to right, #1A1A1A, #2D1420, #1A1A1A);
|
| 123 |
position: relative;
|
|
@@ -198,9 +180,6 @@
|
|
| 198 |
</style>
|
| 199 |
</head>
|
| 200 |
<body class="relative min-h-screen overflow-x-hidden">
|
| 201 |
-
<!-- Particles container -->
|
| 202 |
-
<div id="particles-container" class="particles-container"></div>
|
| 203 |
-
|
| 204 |
<!-- Navbar -->
|
| 205 |
<header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel">
|
| 206 |
<div class="flex items-center">
|
|
@@ -853,36 +832,8 @@
|
|
| 853 |
</footer>
|
| 854 |
|
| 855 |
<script>
|
| 856 |
-
// Create particle effect
|
| 857 |
-
function createParticles() {
|
| 858 |
-
const container = document.getElementById('particles-container');
|
| 859 |
-
const particleCount = 30;
|
| 860 |
-
|
| 861 |
-
for (let i = 0; i < particleCount; i++) {
|
| 862 |
-
const particle = document.createElement('div');
|
| 863 |
-
particle.classList.add('particle');
|
| 864 |
-
|
| 865 |
-
// Random properties
|
| 866 |
-
const size = Math.random() * 5 + 1;
|
| 867 |
-
const posX = Math.random() * 100;
|
| 868 |
-
const posY = Math.random() * 100;
|
| 869 |
-
const animationDuration = Math.random() * 10 + 5;
|
| 870 |
-
|
| 871 |
-
particle.style.width = `${size}px`;
|
| 872 |
-
particle.style.height = `${size}px`;
|
| 873 |
-
particle.style.left = `${posX}%`;
|
| 874 |
-
particle.style.top = `${posY}%`;
|
| 875 |
-
particle.style.animation = `floating ${animationDuration}s ease-in-out infinite`;
|
| 876 |
-
particle.style.animationDelay = `${Math.random() * 5}s`;
|
| 877 |
-
|
| 878 |
-
container.appendChild(particle);
|
| 879 |
-
}
|
| 880 |
-
}
|
| 881 |
-
|
| 882 |
// Initialize
|
| 883 |
document.addEventListener('DOMContentLoaded', () => {
|
| 884 |
-
createParticles();
|
| 885 |
-
|
| 886 |
// Category buttons interaction
|
| 887 |
const categoryButtons = document.querySelectorAll('.category-btn');
|
| 888 |
categoryButtons.forEach(button => {
|
|
|
|
| 30 |
|
| 31 |
body {
|
| 32 |
font-family: 'Montserrat', sans-serif;
|
| 33 |
+
background: #000000;
|
| 34 |
color: white;
|
| 35 |
overflow-x: hidden;
|
| 36 |
}
|
|
|
|
| 100 |
box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
|
| 101 |
}
|
| 102 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
.vip-gradient-bg {
|
| 104 |
background: linear-gradient(to right, #1A1A1A, #2D1420, #1A1A1A);
|
| 105 |
position: relative;
|
|
|
|
| 180 |
</style>
|
| 181 |
</head>
|
| 182 |
<body class="relative min-h-screen overflow-x-hidden">
|
|
|
|
|
|
|
|
|
|
| 183 |
<!-- Navbar -->
|
| 184 |
<header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel">
|
| 185 |
<div class="flex items-center">
|
|
|
|
| 832 |
</footer>
|
| 833 |
|
| 834 |
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 835 |
// Initialize
|
| 836 |
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
|
|
| 837 |
// Category buttons interaction
|
| 838 |
const categoryButtons = document.querySelectorAll('.category-btn');
|
| 839 |
categoryButtons.forEach(button => {
|