Skip to content

Commit

Permalink
Update main.py
Browse files Browse the repository at this point in the history
  • Loading branch information
ositoMalvado committed Nov 4, 2024
1 parent c972095 commit 6512641
Showing 1 changed file with 98 additions and 102 deletions.
200 changes: 98 additions & 102 deletions main.py
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ def handle_one_request(self):
except BrokenPipeError:
# Ignorar errores de pipe roto
pass

def generate_html(self):
files = os.listdir(upload_dir)
html_content = f"""
Expand Down Expand Up @@ -88,7 +87,7 @@ def generate_html(self):
animation: gradient 15s ease infinite;
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
padding: 20px;
color: white;
overflow-x: hidden;
Expand All @@ -109,20 +108,29 @@ def generate_html(self):
border-radius: 20px;
padding: 30px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
transform-style: preserve-3d;
perspective: 1000px;
animation: container-entrance 1s ease-out;
margin-top: 20px;
transition: transform 0.3s ease;
}}
@keyframes container-entrance {{
from {{
opacity: 0;
transform: translateY(20px);
}}
to {{
opacity: 1;
transform: translateY(0);
}}
.table-container {{
max-height: 70vh;
overflow-y: auto;
border-radius: 15px;
padding-right: 5px;
}}
.table-container::-webkit-scrollbar {{
width: 8px;
}}
.table-container::-webkit-scrollbar-track {{
background: var(--glass-bg);
border-radius: 10px;
}}
.table-container::-webkit-scrollbar-thumb {{
background: var(--glass-border);
border-radius: 10px;
}}
h1 {{
Expand All @@ -137,27 +145,24 @@ def generate_html(self):
}}
@keyframes title-glow {{
0%, 100% {{
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}}
50% {{
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}}
0%, 100% {{ text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }}
50% {{ text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); }}
}}
table {{
width: 100%;
border-collapse: separate;
border-spacing: 0 8px;
margin-top: 20px;
}}
tr {{
transition: transform 0.3s ease;
transition: all 0.2s ease;
opacity: 0;
transform: translateY(10px);
}}
tr:hover {{
transform: scale(1.02);
transform: translateX(5px) !important;
}}
th, td {{
Expand All @@ -168,10 +173,14 @@ def generate_html(self):
}}
th {{
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 10;
}}
td:first-child, th:first-child {{
Expand All @@ -196,23 +205,8 @@ def generate_html(self):
overflow: hidden;
}}
.download-btn::before {{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: 0.5s;
}}
.download-btn:hover::before {{
left: 100%;
}}
.download-btn:hover {{
transform: translateY(-3px);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}}
Expand Down Expand Up @@ -240,13 +234,7 @@ def generate_html(self):
height: 100%;
pointer-events: none;
z-index: -1;
}}
.particle {{
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
pointer-events: none;
opacity: 0.5;
}}
</style>
</head>
Expand All @@ -255,88 +243,96 @@ def generate_html(self):
<div class="container">
<h1>Servidor Archivos (july 🐎)</h1>
{"<p class='empty-message'>No hay archivos disponibles para descargar.</p>" if not files else f'''
<table>
<tr>
<th>Nombre del archivo</th>
<th>Acciones</th>
</tr>
{"".join([self.generate_file_row(file) for file in files])}
</table>
<div class="table-container">
<table>
<tr>
<th>Nombre del archivo</th>
<th>Acciones</th>
</tr>
{"".join([self.generate_file_row(file) for file in files])}
</table>
</div>
'''}
</div>
<script>
function createParticles() {{
const particlesContainer = document.getElementById('particles');
const particleCount = 50;
const particleCount = 30; // Reduced particle count
for (let i = 0; i < particleCount; i++) {{
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 4 + 2;
particle.style.width = `${{size}}px`;
particle.style.height = `${{size}}px`;
particle.style.width = '3px';
particle.style.height = '3px';
particle.style.background = 'rgba(255, 255, 255, 0.5)';
particle.style.borderRadius = '50%';
particle.style.position = 'absolute';
particle.style.left = `${{Math.random() * 100}}vw`;
particle.style.top = `${{Math.random() * 100}}vh`;
const duration = Math.random() * 20 + 10;
const delay = Math.random() * -20;
particle.style.animation = `
float ${{duration}}s ${{delay}}s infinite linear,
fade 20s infinite linear
`;
particlesContainer.appendChild(particle);
animateParticle(particle);
}}
}}
function handleMouseMove(e) {{
function animateParticle(particle) {{
const duration = 10 + Math.random() * 20;
const startX = parseFloat(particle.style.left);
const startY = parseFloat(particle.style.top);
gsap.to(particle, {{
duration: duration,
x: -20 + Math.random() * 40,
y: -20 + Math.random() * 40,
opacity: gsap.utils.random(0.3, 0.7),
ease: "none",
repeat: -1,
yoyo: true
}});
}}
function handleHover() {{
const container = document.querySelector('.container');
const {{ left, top, width, height }} = container.getBoundingClientRect();
const x = e.clientX - left;
const y = e.clientY - top;
const rotateX = (y - height/2) / 20;
const rotateY = -(x - width/2) / 20;
container.addEventListener('mousemove', (e) => {{
const rect = container.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
gsap.to(container, {{
duration: 0.5,
rotationY: x * 5, // Reduced rotation
rotationX: -y * 5, // Reduced rotation
ease: "power2.out"
}});
}});
container.style.transform = `
perspective(1000px)
rotateX(${{rotateX}}deg)
rotateY(${{rotateY}}deg)
`;
container.addEventListener('mouseleave', () => {{
gsap.to(container, {{
duration: 0.5,
rotationY: 0,
rotationX: 0,
ease: "power2.out"
}});
}});
}}
document.addEventListener('DOMContentLoaded', () => {{
createParticles();
document.addEventListener('mousemove', handleMouseMove);
handleHover();
gsap.from("tr", {{
duration: 0.8,
opacity: 0,
y: 20,
stagger: 0.1,
ease: "power3.out"
// Animate table rows
const rows = document.querySelectorAll('tr');
gsap.to(rows, {{
opacity: 1,
y: 0,
duration: 0.5,
stagger: 0.05,
ease: "power2.out"
}});
}});
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(`
@keyframes float {{
0% {{ transform: translate(0, 0); }}
50% {{ transform: translate(20px, -20px); }}
100% {{ transform: translate(0, 0); }}
}}
`, styleSheet.cssRules.length);
styleSheet.insertRule(`
@keyframes fade {{
0%, 100% {{ opacity: 0; }}
50% {{ opacity: 0.8; }}
}}
`, styleSheet.cssRules.length);
</script>
</body>
</html>
Expand Down

0 comments on commit 6512641

Please sign in to comment.