30f3ecc6ad
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> This commit refactors the entire application to replace the 'parties' concept with 'events'. All controllers, models, views, and related files have been updated to reflect this change. The parties table has been replaced with an events table, and all related functionality has been updated accordingly.
627 lines
22 KiB
HTML
Executable File
627 lines
22 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>APERONIGHT - RADICAL EVENT BOOKING</title>
|
|
<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=Space+Grotesk:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<link rel="stylesheet" href="neo_brutalist_theme.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
line-height: 1.4;
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.hero {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--secondary) 0px,
|
|
var(--secondary) 20px,
|
|
transparent 20px,
|
|
transparent 40px
|
|
), var(--background);
|
|
padding: 100px 0;
|
|
text-align: center;
|
|
position: relative;
|
|
border-bottom: 6px solid var(--border);
|
|
box-shadow: 0 6px 0px 0px var(--accent);
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
border: 4px solid var(--border);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.5rem, 8vw, 6rem);
|
|
font-weight: 900;
|
|
margin-bottom: var(--space-8);
|
|
color: var(--foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.02em;
|
|
text-shadow: 4px 4px 0px var(--accent);
|
|
animation: glitch 3s infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0%, 100% { transform: translateX(0); }
|
|
20% { transform: translateX(-2px); }
|
|
40% { transform: translateX(2px); }
|
|
60% { transform: translateX(-1px); }
|
|
80% { transform: translateX(1px); }
|
|
}
|
|
|
|
.hero p {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-12);
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.cta-section {
|
|
display: flex;
|
|
gap: var(--space-8);
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
position: relative;
|
|
}
|
|
|
|
.section {
|
|
padding: var(--space-20) 0;
|
|
position: relative;
|
|
}
|
|
|
|
.section:nth-child(odd) {
|
|
background: linear-gradient(135deg, var(--secondary) 25%, transparent 25%),
|
|
linear-gradient(225deg, var(--secondary) 25%, transparent 25%),
|
|
linear-gradient(45deg, var(--secondary) 25%, transparent 25%),
|
|
linear-gradient(315deg, var(--secondary) 25%, var(--background) 25%);
|
|
background-size: 40px 40px;
|
|
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(2rem, 6vw, 4rem);
|
|
font-weight: 900;
|
|
text-align: center;
|
|
margin-bottom: var(--space-16);
|
|
color: var(--foreground);
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
display: block;
|
|
width: 100px;
|
|
height: 8px;
|
|
background: var(--accent);
|
|
margin: var(--space-4) auto 0;
|
|
box-shadow: var(--shadow-brutal);
|
|
}
|
|
|
|
.events-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: var(--space-12);
|
|
margin-bottom: var(--space-16);
|
|
}
|
|
|
|
.brutal-event-card {
|
|
background: var(--background);
|
|
border: 4px solid var(--border);
|
|
position: relative;
|
|
transition: all 0.1s ease;
|
|
overflow: visible;
|
|
}
|
|
|
|
.brutal-event-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
right: -20px;
|
|
bottom: -20px;
|
|
background: var(--primary);
|
|
z-index: -1;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
.brutal-event-card:hover {
|
|
transform: translate(8px, 8px);
|
|
}
|
|
|
|
.brutal-event-card:hover::before {
|
|
transform: translate(-8px, -8px);
|
|
background: var(--accent);
|
|
}
|
|
|
|
.event-image {
|
|
width: 100%;
|
|
height: 250px;
|
|
object-fit: cover;
|
|
border-bottom: 4px solid var(--border);
|
|
}
|
|
|
|
.event-content {
|
|
padding: var(--space-8);
|
|
}
|
|
|
|
.event-title {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 900;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.event-date {
|
|
color: var(--foreground);
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.event-description {
|
|
color: var(--foreground);
|
|
margin-bottom: var(--space-6);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.event-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.event-price {
|
|
font-weight: 900;
|
|
font-size: var(--text-2xl);
|
|
color: var(--foreground);
|
|
background: var(--secondary);
|
|
padding: var(--space-2) var(--space-4);
|
|
border: 3px solid var(--border);
|
|
box-shadow: var(--shadow-brutal);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--space-12);
|
|
}
|
|
|
|
.brutal-feature {
|
|
text-align: center;
|
|
padding: var(--space-8);
|
|
background: var(--background);
|
|
border: 4px solid var(--border);
|
|
position: relative;
|
|
box-shadow: var(--shadow-brutal-lg);
|
|
}
|
|
|
|
.brutal-feature::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -12px;
|
|
left: -12px;
|
|
right: -24px;
|
|
bottom: -24px;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--accent) 0px,
|
|
var(--accent) 10px,
|
|
transparent 10px,
|
|
transparent 20px
|
|
);
|
|
z-index: -1;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: 4px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto var(--space-6);
|
|
box-shadow: var(--shadow-brutal);
|
|
}
|
|
|
|
.brutal-feature h3 {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 900;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.brutal-feature p {
|
|
color: var(--foreground);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.stats {
|
|
background: var(--foreground);
|
|
color: var(--background);
|
|
padding: var(--space-20) 0;
|
|
border-top: 6px solid var(--accent);
|
|
border-bottom: 6px solid var(--accent);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-12);
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-item {
|
|
padding: var(--space-8);
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
border: 4px solid var(--background);
|
|
box-shadow: var(--shadow-brutal-xl);
|
|
position: relative;
|
|
}
|
|
|
|
.stat-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -8px;
|
|
left: -8px;
|
|
right: -16px;
|
|
bottom: -16px;
|
|
background: var(--accent);
|
|
z-index: -1;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
|
font-weight: 900;
|
|
color: var(--primary);
|
|
display: block;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.stat-label {
|
|
color: var(--foreground);
|
|
margin-top: var(--space-2);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.footer {
|
|
background: var(--border);
|
|
color: var(--background);
|
|
padding: var(--space-16) 0;
|
|
border-top: 6px solid var(--primary);
|
|
}
|
|
|
|
.footer-content {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-8);
|
|
margin-bottom: var(--space-8);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--background);
|
|
text-decoration: none;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: var(--space-2) var(--space-4);
|
|
border: 3px solid var(--background);
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
background: var(--background);
|
|
color: var(--border);
|
|
box-shadow: 4px 4px 0px 0px var(--accent);
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
.noise-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.03;
|
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.cta-section {
|
|
flex-direction: column;
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.events-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-6);
|
|
}
|
|
|
|
.footer-links {
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="noise-overlay"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<div class="container">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0;">
|
|
<div style="display: flex; align-items: center; gap: var(--space-4);">
|
|
<div style="width: 50px; height: 50px; background: var(--primary); border: 4px solid var(--border); display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; box-shadow: var(--shadow-brutal); font-size: var(--text-xl);">A</div>
|
|
<span style="font-size: var(--text-2xl); font-weight: 900; color: var(--foreground); text-transform: uppercase; letter-spacing: -0.02em;">APERONIGHT</span>
|
|
</div>
|
|
<div style="display: flex; gap: var(--space-4); align-items: center;">
|
|
<a href="#" class="nav-link">EVENTS</a>
|
|
<a href="#" class="nav-link">ABOUT</a>
|
|
<a href="#" class="nav-link">CONTACT</a>
|
|
<button class="btn-primary">SIGN IN</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1 class="glitch-text" data-text="RADICAL EVENTS">RADICAL EVENTS</h1>
|
|
<p>BREAK THE BORING. JOIN THE REVOLUTION. EXPERIENCE EVENTS THAT MATTER.</p>
|
|
<div class="cta-section">
|
|
<button class="btn-primary">FIND EVENTS</button>
|
|
<div style="width: 4px; height: 60px; background: var(--border); box-shadow: var(--shadow-brutal);"></div>
|
|
<button class="btn-secondary">HOST EVENT</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Events -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">FEATURED CHAOS</h2>
|
|
<div class="events-grid">
|
|
<div class="brutal-event-card">
|
|
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=250&fit=crop" alt="TECH CHAOS" class="event-image">
|
|
<div class="event-content">
|
|
<h3 class="event-title">TECH CHAOS NIGHT</h3>
|
|
<div class="event-date">
|
|
<i data-lucide="zap" style="width: 24px; height: 24px;"></i>
|
|
THU MAR 15 • 6PM
|
|
</div>
|
|
<p class="event-description">SMASH NETWORKING BARRIERS. CODE. DRINKS. CHAOS. REPEAT.</p>
|
|
<div class="event-footer">
|
|
<span class="event-price">€25</span>
|
|
<div style="display: flex; gap: var(--space-3);">
|
|
<span class="badge-available">LIVE</span>
|
|
<button class="btn-destructive" style="padding: var(--space-3) var(--space-4);">GRAB IT</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="brutal-event-card">
|
|
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=250&fit=crop" alt="SOUND ASSAULT" class="event-image">
|
|
<div class="event-content">
|
|
<h3 class="event-title">SOUND ASSAULT</h3>
|
|
<div class="event-date">
|
|
<i data-lucide="volume-2" style="width: 24px; height: 24px;"></i>
|
|
SAT MAR 18 • 8PM
|
|
</div>
|
|
<p class="event-description">UNDERGROUND BEATS. ROOF ACCESS. CITY DOMINATION.</p>
|
|
<div class="event-footer">
|
|
<span class="event-price">€35</span>
|
|
<div style="display: flex; gap: var(--space-3);">
|
|
<span class="badge-featured">★ HOT</span>
|
|
<button class="btn-primary" style="padding: var(--space-3) var(--space-4);">INVADE</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="brutal-event-card">
|
|
<img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=250&fit=crop" alt="ART REBELLION" class="event-image">
|
|
<div class="event-content">
|
|
<h3 class="event-title">ART REBELLION</h3>
|
|
<div class="event-date">
|
|
<i data-lucide="paintbrush" style="width: 24px; height: 24px;"></i>
|
|
FRI MAR 22 • 7PM
|
|
</div>
|
|
<p class="event-description">DESTROY CONVENTIONS. CREATE CHAOS. WINE INCLUDED.</p>
|
|
<div class="event-footer">
|
|
<span class="event-price">€20</span>
|
|
<div style="display: flex; gap: var(--space-3);">
|
|
<span class="badge-sold-out">DANGER</span>
|
|
<button class="btn-secondary" style="padding: var(--space-3) var(--space-4);">RISK IT</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<button class="btn-secondary" style="font-size: var(--text-xl); padding: var(--space-4) var(--space-8);">MORE CHAOS</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">WHY WE RULE</h2>
|
|
<div class="features-grid">
|
|
<div class="brutal-feature">
|
|
<div class="feature-icon">
|
|
<i data-lucide="skull" style="width: 40px; height: 40px;"></i>
|
|
</div>
|
|
<h3>CURATED MADNESS</h3>
|
|
<p>HANDPICKED EVENTS THAT DESTROY BORING AND CREATE LEGENDS.</p>
|
|
</div>
|
|
<div class="brutal-feature">
|
|
<div class="feature-icon">
|
|
<i data-lucide="shield" style="width: 40px; height: 40px;"></i>
|
|
</div>
|
|
<h3>BULLETPROOF BOOKING</h3>
|
|
<p>SECURE PAYMENTS. INSTANT TICKETS. NO BULLSHIT REFUNDS.</p>
|
|
</div>
|
|
<div class="brutal-feature">
|
|
<div class="feature-icon">
|
|
<i data-lucide="rocket" style="width: 40px; height: 40px;"></i>
|
|
</div>
|
|
<h3>ZERO FRICTION</h3>
|
|
<p>FIND EVENT. BOOK TICKET. DESTROY EXPECTATIONS. REPEAT.</p>
|
|
</div>
|
|
<div class="brutal-feature">
|
|
<div class="feature-icon">
|
|
<i data-lucide="users" style="width: 40px; height: 40px;"></i>
|
|
</div>
|
|
<h3>TRIBE BUILDING</h3>
|
|
<p>CONNECT WITH REBELS WHO GET IT. BUILD YOUR EMPIRE.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats -->
|
|
<section class="stats">
|
|
<div class="container">
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-number">50+</span>
|
|
<div class="stat-label">EVENTS MONTHLY</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">2.5K</span>
|
|
<div class="stat-label">REBELS JOINED</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">100+</span>
|
|
<div class="stat-label">VENUES CONQUERED</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">95%</span>
|
|
<div class="stat-label">MINDS BLOWN</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-links">
|
|
<a href="#">ABOUT</a>
|
|
<a href="#">EVENTS</a>
|
|
<a href="#">SUPPORT</a>
|
|
<a href="#">PRIVACY</a>
|
|
<a href="#">TERMS</a>
|
|
</div>
|
|
<p style="font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;">© 2024 APERONIGHT. CHAOS RESERVED.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Add brutal animations on scroll
|
|
const observerOptions = {
|
|
threshold: 0.2,
|
|
rootMargin: '0px 0px -100px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animation = 'none';
|
|
entry.target.offsetHeight; // Trigger reflow
|
|
entry.target.style.animation = 'shake-brutal 0.5s ease-in-out';
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.brutal-event-card, .brutal-feature, .stat-item').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Add random glitch effects
|
|
setInterval(() => {
|
|
const elements = document.querySelectorAll('.section-title, .event-title');
|
|
const randomElement = elements[Math.floor(Math.random() * elements.length)];
|
|
if (randomElement && Math.random() > 0.9) {
|
|
randomElement.style.animation = 'glitch 0.3s ease-in-out';
|
|
setTimeout(() => {
|
|
randomElement.style.animation = '';
|
|
}, 300);
|
|
}
|
|
}, 2000);
|
|
</script>
|
|
</body>
|
|
</html> |