Auto commit: 2026-02-15T18:03:50.045Z
This commit is contained in:
parent
787ae733a1
commit
66ecfcc69b
48
index.php
48
index.php
@ -69,41 +69,6 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
background: var(--bg-overlay);
|
background: var(--bg-overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animated Mic Background Elements */
|
|
||||||
.bg-elements {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-mic {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 2rem;
|
|
||||||
opacity: 0.2;
|
|
||||||
color: var(--primary-color);
|
|
||||||
animation: float-around 20s infinite linear;
|
|
||||||
filter: drop-shadow(0 0 10px currentColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float-around {
|
|
||||||
0% { transform: translate(0, 0) rotate(0deg); color: #38bdf8; }
|
|
||||||
25% { transform: translate(100px, 100px) rotate(90deg); color: #00e676; }
|
|
||||||
50% { transform: translate(200px, 0) rotate(180deg); color: #facc15; }
|
|
||||||
75% { transform: translate(100px, -100px) rotate(270deg); color: #f472b6; }
|
|
||||||
100% { transform: translate(0, 0) rotate(360deg); color: #38bdf8; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-mic:nth-child(1) { top: 10%; left: 10%; animation-duration: 25s; }
|
|
||||||
.floating-mic:nth-child(2) { top: 20%; left: 80%; animation-duration: 30s; animation-delay: -5s; }
|
|
||||||
.floating-mic:nth-child(3) { top: 70%; left: 15%; animation-duration: 22s; animation-delay: -10s; }
|
|
||||||
.floating-mic:nth-child(4) { top: 80%; left: 75%; animation-duration: 35s; animation-delay: -15s; }
|
|
||||||
.floating-mic:nth-child(5) { top: 40%; left: 40%; animation-duration: 28s; animation-delay: -2s; }
|
|
||||||
|
|
||||||
.app-container {
|
.app-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -655,13 +620,6 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
<div class="bg-elements">
|
|
||||||
<i class="bi bi-mic-fill floating-mic"></i>
|
|
||||||
<i class="bi bi-mic-fill floating-mic"></i>
|
|
||||||
<i class="bi bi-mic-fill floating-mic"></i>
|
|
||||||
<i class="bi bi-mic-fill floating-mic"></i>
|
|
||||||
<i class="bi bi-mic-fill floating-mic"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- Left Section: Player -->
|
<!-- Left Section: Player -->
|
||||||
@ -789,8 +747,8 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
this.y = Math.random() * canvas.height;
|
this.y = Math.random() * canvas.height;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.width = 4 + Math.random() * 6; // Un poco más grandes
|
this.width = 3 + Math.random() * 5;
|
||||||
this.height = 15 + Math.random() * 30;
|
this.height = 40 + Math.random() * 60; // Mucho más largas, como barras reales
|
||||||
this.speed = 1 + Math.random() * 2;
|
this.speed = 1 + Math.random() * 2;
|
||||||
this.hue = Math.random() * 360;
|
this.hue = Math.random() * 360;
|
||||||
this.opacity = 0.1 + Math.random() * 0.3;
|
this.opacity = 0.1 + Math.random() * 0.3;
|
||||||
@ -848,7 +806,7 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
|
|||||||
|
|
||||||
// Create background bars
|
// Create background bars
|
||||||
bars = [];
|
bars = [];
|
||||||
for(let i = 0; i < 40; i++) {
|
for(let i = 0; i < 80; i++) {
|
||||||
bars.push(new ColorBar());
|
bars.push(new ColorBar());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user