Scribd
Importer
6 vues23 pages

Gestionnaire d'événements universitaires

Le document présente le code HTML et CSS d'une application web nommée 'EventEase', un gestionnaire d'événements pour les universités. Il inclut des styles pour une interface utilisateur moderne avec des animations, des sections pour les événements, ainsi qu'un système de navigation et de modal. Les éléments visuels sont conçus pour être réactifs et attrayants, utilisant des dégradés et des effets de flou.

Transféré par

prajwalihaggad84
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
6 vues23 pages

Gestionnaire d'événements universitaires

Le document présente le code HTML et CSS d'une application web nommée 'EventEase', un gestionnaire d'événements pour les universités. Il inclut des styles pour une interface utilisateur moderne avec des animations, des sections pour les événements, ainsi qu'un système de navigation et de modal. Les éléments visuels sont conçus pour être réactifs et attrayants, utilisant des dégradés et des effets de flou.

Transféré par

prajwalihaggad84
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EventEase - College Event Manager</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--primary-color: #6366f1;
--secondary-color: #f43f5e;
--accent-color: #06d6a0;
--dark-bg: #0f172a;
--light-bg: #f8fafc;
--text-light: #e2e8f0;
--text-dark: #334155;
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: var(--text-light);
overflow-x: hidden;
scroll-behavior: smooth;
}

/* Animated Background */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
z-index: -2;
}

.bg-animation::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%,
transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%,
transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3) 0%,
transparent 50%);
animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
0%, 100% { transform: rotate(0deg) scale(1); }
33% { transform: rotate(5deg) scale(1.1); }
66% { transform: rotate(-3deg) scale(0.95); }
}

/* Floating Particles */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}

.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 15s infinite ease-in-out;
}

@keyframes float {
0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* Navigation */
nav {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 50px;
padding: 15px 30px;
z-index: 1000;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 40px;
}

nav ul {
display: flex;
list-style: none;
gap: 30px;
}

nav a {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
padding: 8px 16px;
border-radius: 25px;
}

nav a:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}

nav [Link] {
background: linear-gradient(45deg, var(--primary-color), var(--
secondary-color));
color: white;
}

.auth-buttons {
display: flex;
gap: 10px;
}

.auth-btn {
padding: 8px 20px;
border-radius: 25px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border: none;
font-size: 0.9rem;
}

.login-btn {
background: transparent;
color: var(--text-light);
border: 1px solid var(--glass-border);
}

.signup-btn {
background: linear-gradient(45deg, var(--primary-color), var(--
secondary-color));
color: white;
}

.auth-btn:hover {
transform: translateY(-2px);
}

/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
padding: 0 20px;
}

.hero-content h1 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 800;
background: linear-gradient(45deg, #fff, #a78bfa, #fbbf24);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
animation: titleSlide 1s ease-out;
}

@keyframes titleSlide {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}

.hero-content p {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
animation: fadeInUp 1s ease-out 0.3s both;
}

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.6s both;
}

.btn {
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
position: relative;
overflow: hidden;
}

.btn-primary {
background: linear-gradient(45deg, var(--primary-color), var(--
secondary-color));
color: white;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}
.btn-secondary {
background: var(--glass-bg);
color: var(--text-light);
border: 2px solid var(--glass-border);
backdrop-filter: blur(10px);
}

.btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Section Styles */
section {
padding: 100px 0;
position: relative;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.section-title {
text-align: center;
font-size: 3rem;
font-weight: 700;
margin-bottom: 60px;
background: linear-gradient(45deg, var(--primary-color), var(--accent-
color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Events Section */
.events {
background: rgba(15, 23, 42, 0.3);
backdrop-filter: blur(20px);
min-height: 100vh;
}

.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}

.event-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.event-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.event-image {
height: 250px;
background-size: cover;
background-position: center;
position: relative;
}

.event-badge {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(45deg, var(--primary-color), var(--
secondary-color));
color: white;
padding: 8px 16px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
}

.event-content {
padding: 30px;
}

.event-content h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--text-light);
}

.event-meta {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
}

.event-meta-item {
display: flex;
align-items: center;
gap: 8px;
}

.event-content p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
}

.event-tech {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}

.tech-tag {
background: rgba(99, 102, 241, 0.2);
color: var(--primary-color);
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
}

/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
z-index: 2000;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.[Link] {
display: flex;
align-items: center;
justify-content: center;
}

.modal-content {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 40px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: slideUp 0.3s ease;
}

@keyframes slideUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: var(--text-light);
font-size: 1.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}

.modal-close:hover {
background: var(--secondary-color);
transform: rotate(90deg);
}

.modal-title {
font-size: 2rem;
margin-bottom: 30px;
background: linear-gradient(45deg, var(--primary-color), var(--accent-
color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-light);
font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 15px 20px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 15px;
color: var(--text-light);
font-size: 1rem;
transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}

.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
}

.checkbox-group input[type="checkbox"] {
width: auto;
cursor: pointer;
}

/* Footer */
footer {
text-align: center;
padding: 40px 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(20px);
color: rgba(255, 255, 255, 0.6);
}

/* Page Transitions */
.page {
display: none;
}

.[Link] {
display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 15px;
padding: 15px 20px;
}

nav ul {
gap: 15px;
}

nav a {
padding: 6px 12px;
font-size: 0.9rem;
}

.hero-content h1 {
font-size: 3rem;
}

.events-grid {
grid-template-columns: 1fr;
}

.section-title {
font-size: 2rem;
}

.modal-content {
padding: 30px 20px;
}
}

/* Scroll animations */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}

.[Link] {
opacity: 1;
transform: translateY(0);
}

/* Interests Page */
.interests-section {
min-height: 100vh;
padding-top: 120px;
}

.interests-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}

.interest-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 2px solid var(--glass-border);
border-radius: 20px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}

.interest-card:hover {
transform: translateY(-10px);
border-color: var(--primary-color);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}

.[Link] {
background: linear-gradient(45deg, var(--primary-color), var(--
secondary-color));
border-color: transparent;
}
.interest-icon {
font-size: 3rem;
margin-bottom: 15px;
}

.interest-card h3 {
font-size: 1.3rem;
margin-bottom: 10px;
}

.interest-card p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}

.[Link] p {
color: rgba(255, 255, 255, 0.9);
}
</style>
</head>
<body>
<!-- Animated Background -->
<div class="bg-animation"></div>

<!-- Floating Particles -->


<div class="particles" id="particles"></div>

<!-- Navigation -->


<nav>
<ul>
<li><a href="#" class="nav-link active" data-page="home">Home</a></li>
<li><a href="#" class="nav-link" data-page="events">Events</a></li>
<li><a href="#" class="nav-link" data-page="interests">My
Interests</a></li>
</ul>
<div class="auth-buttons">
<button class="auth-btn login-btn"
onclick="openModal('loginModal')">Login</button>
<button class="auth-btn signup-btn"
onclick="openModal('signupModal')">Sign Up</button>
</div>
</nav>

<!-- Home Page -->


<div class="page active" id="home">
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>EventEase</h1>
<p>Never Miss Another College Event Again</p>
<div class="cta-buttons">
<a href="#" class="btn btn-primary"
onclick="switchPage('events')">Explore Events</a>
<a href="#" class="btn btn-secondary"
onclick="openModal('signupModal')">Get Started</a>
</div>
</div>
</section>
</div>
<!-- Events Page -->
<div class="page" id="events">
<section class="events">
<div class="container">
<h2 class="section-title">Upcoming Events</h2>
<div class="events-grid">
<!-- Event 1 -->
<div class="event-card">
<div class="event-image" style="background: linear-
gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('[Link]
1540575467063-178a50c2df87?w=800') center/cover;">
<div class="event-badge">Technical</div>
</div>
<div class="event-content">
<h3>Tech Hackathon 2025</h3>
<div class="event-meta">
<div class="event-meta-item">📅 March 15, 2025</div>
<div class="event-meta-item">⏰ 9:00 AM - 6:00
PM</div>
<div class="event-meta-item">📍 Computer Lab, Block
A</div>
</div>
<p>24-hour coding competition with amazing prizes.
Build innovative solutions to real-world problems.</p>
<div class="event-tech">
<span class="tech-tag">Coding</span>
<span class="tech-tag">Innovation</span>
<span class="tech-tag">Prizes</span>
</div>
<button class="btn btn-primary"
onclick="openRegistrationModal('Tech Hackathon 2025', 'March 15, 2025', '9:00 AM -
6:00 PM')">Register Now</button>
</div>
</div>

<!-- Event 2 -->


<div class="event-card">
<div class="event-image" style="background: linear-
gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('[Link]
1511578314322-379afb476865?w=800') center/cover;">
<div class="event-badge">Cultural</div>
</div>
<div class="event-content">
<h3>Spring Fest 2025</h3>
<div class="event-meta">
<div class="event-meta-item">📅 March 20-22,
2025</div>
<div class="event-meta-item">⏰ 10:00 AM - 8:00
PM</div>
<div class="event-meta-item">📍 Main
Auditorium</div>
</div>
<p>Three days of cultural extravaganza featuring music,
dance, drama, and art competitions.</p>
<div class="event-tech">
<span class="tech-tag">Music</span>
<span class="tech-tag">Dance</span>
<span class="tech-tag">Art</span>
</div>
<button class="btn btn-primary"
onclick="openRegistrationModal('Spring Fest 2025', 'March 20-22, 2025', '10:00 AM -
8:00 PM')">Register Now</button>
</div>
</div>

<!-- Event 3 -->


<div class="event-card">
<div class="event-image" style="background: linear-
gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('[Link]
1505373877841-8d25f7d46678?w=800') center/cover;">
<div class="event-badge">Workshop</div>
</div>
<div class="event-content">
<h3>AI & Machine Learning Workshop</h3>
<div class="event-meta">
<div class="event-meta-item">📅 March 18, 2025</div>
<div class="event-meta-item">⏰ 2:00 PM - 5:00
PM</div>
<div class="event-meta-item">📍 Seminar Hall
101</div>
</div>
<p>Hands-on workshop on AI fundamentals, ML algorithms,
and practical implementations with industry experts.</p>
<div class="event-tech">
<span class="tech-tag">AI</span>
<span class="tech-tag">Machine Learning</span>
<span class="tech-tag">Hands-on</span>
</div>
<button class="btn btn-primary"
onclick="openRegistrationModal('AI & Machine Learning Workshop', 'March 18, 2025',
'2:00 PM - 5:00 PM')">Register Now</button>
</div>
</div>

<!-- Event 4 -->


<div class="event-card">
<div class="event-image" style="background: linear-
gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('[Link]
1591123120675-6f7f1aae0e5b?w=800') center/cover;">
<div class="event-badge">Sports</div>
</div>
<div class="event-content">
<h3>Inter-College Sports Meet</h3>
<div class="event-meta">
<div class="event-meta-item">📅 March 25-27,
2025</div>
<div class="event-meta-item">⏰ 7:00 AM - 6:00
PM</div>
<div class="event-meta-item">📍 Sports Complex</div>
</div>
<p>Annual sports championship featuring cricket,
football, basketball, and athletics competitions.</p>
<div class="event-tech">
<span class="tech-tag">Cricket</span>
<span class="tech-tag">Football</span>
<span class="tech-tag">Athletics</span>
</div>
<button class="btn btn-primary"
onclick="openRegistrationModal('Inter-College Sports Meet', 'March 25-27, 2025',
'7:00 AM - 6:00 PM')">Register Now</button>
</div>
</div>

<!-- Event 5 -->


<div class="event-card">
<div class="event-image" style="background: linear-
gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('[Link]
1475721027785-f74eccf877e2?w=800') center/cover;">
<div class="event-badge">Seminar</div>
</div>
<div class="event-content">
<h3>Career Guidance Seminar</h3>
<div class="event-meta">
<div class="event-meta-item">📅 March 22, 2025</div>
<div class="event-meta-item">⏰ 11:00 AM - 1:00
PM</div>
<div class="event-meta-item">📍 Main
Auditorium</div>
</div>
<p>Expert career counseling session with industry
leaders discussing career paths and opportunities.</p>
<div class="event-tech">
<span class="tech-tag">Career</span>
<span class="tech-tag">Guidance</span>
<span class="tech-tag">Networking</span>
</div>
<button class="btn btn-primary"
onclick="openRegistrationModal('Career Guidance Seminar', 'March 22, 2025', '11:00
AM - 1:00 PM')">Register Now</button>
</div>
</div>

<!-- Event 6 -->


<div class="event-card">
<div class="event-image" style="background: linear-
gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('[Link]
1523580494863-6f3031224c94?w=800') center/cover;">
<div class="event-badge">Competition</div>
</div>
<div class="event-content">
<h3>Photography Exhibition</h3>
<div class="event-meta">
<div class="event-meta-item">📅 March 28, 2025</div>
<div class="event-meta-item">⏰ 10:00 AM - 5:00
PM</div>
<div class="event-meta-item">📍 Art Gallery</div>
</div>
<p>Showcase your photography skills and win amazing
prizes. Theme: "Campus Life Through My Lens".</p>
<div class="event-tech">
<span class="tech-tag">Photography</span>
<span class="tech-tag">Exhibition</span>
<span class="tech-tag">Competition</span>
</div>
<button class="btn btn-primary"
onclick="openRegistrationModal('Photography Exhibition', 'March 28, 2025', '10:00
AM - 5:00 PM')">Register Now</button>
</div>
</div>
</div>
</div>
</section>
</div>

<!-- Interests Page -->


<div class="page" id="interests">
<section class="interests-section">
<div class="container">
<h2 class="section-title">Select Your Interests</h2>
<p style="text-align: center; color: rgba(255,255,255,0.8); margin-
bottom: 40px;">Choose event categories you're interested in to receive personalized
notifications</p>
<div class="interests-grid">
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">💻</div>
<h3>Technical</h3>
<p>Hackathons, coding competitions, tech talks</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">🎭</div>
<h3>Cultural</h3>
<p>Music, dance, drama, and art events</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">📚</div>
<h3>Workshops</h3>
<p>Skill development and training sessions</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">⚽</div>
<h3>Sports</h3>
<p>Athletic competitions and sports meets</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">💼</div>
<h3>Career</h3>
<p>Seminars, networking, and guidance sessions</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">🏆</div>
<h3>Competitions</h3>
<p>Contests, challenges, and tournaments</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">🎨</div>
<h3>Arts</h3>
<p>Photography, painting, and creative arts</p>
</div>
<div class="interest-card" onclick="toggleInterest(this)">
<div class="interest-icon">🌱</div>
<h3>Social</h3>
<p>Community service and volunteering</p>
</div>
</div>
<div style="text-align: center; margin-top: 40px;">
<button class="btn btn-primary" onclick="saveInterests()">Save
Preferences</button>
</div>
</div>
</section>
</div>

<!-- Login Modal -->


<div class="modal" id="loginModal">
<div class="modal-content">
<button class="modal-close"
onclick="closeModal('loginModal')">×</button>
<h2 class="modal-title">Welcome Back!</h2>
<form onsubmit="handleLogin(event)">
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="[Link]@[Link]"
required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Enter your password"
required>
</div>
<div class="checkbox-group">
<input type="checkbox" id="remember">
<label for="remember">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;
margin-top: 20px;">Login</button>
<p style="text-align: center; margin-top: 20px; color:
rgba(255,255,255,0.7);">
Don't have an account? <a href="#"
onclick="closeModal('loginModal'); openModal('signupModal');" style="color: var(--
accent-color);">Sign up</a>
</p>
</form>
</div>
</div>

<!-- Signup Modal -->


<div class="modal" id="signupModal">
<div class="modal-content">
<button class="modal-close"
onclick="closeModal('signupModal')">×</button>
<h2 class="modal-title">Create Account</h2>
<form onsubmit="handleSignup(event)">
<div class="form-group">
<label>Full Name</label>
<input type="text" placeholder="John Doe" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="[Link]@[Link]"
required>
</div>
<div class="form-group">
<label>College ID</label>
<input type="text" placeholder="STU2025001" required>
</div>
<div class="form-group">
<label>Department</label>
<select required>
<option value="">Select Department</option>
<option>Computer Science</option>
<option>Electronics and Communication</option>
<option>Mechanical</option>
<option>Civil</option>
<option>Electrical and Electronics</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Create a strong password"
required>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" placeholder="Re-enter password"
required>
</div>
<div class="checkbox-group">
<input type="checkbox" id="terms" required>
<label for="terms">I agree to terms and conditions</label>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;
margin-top: 20px;">Sign Up</button>
<p style="text-align: center; margin-top: 20px; color:
rgba(255,255,255,0.7);">
Already have an account? <a href="#"
onclick="closeModal('signupModal'); openModal('loginModal');" style="color: var(--
accent-color);">Login</a>
</p>
</form>
</div>
</div>

<!-- Registration Modal -->


<div class="modal" id="registrationModal">
<div class="modal-content">
<button class="modal-close"
onclick="closeModal('registrationModal')">×</button>
<h2 class="modal-title">Event Registration</h2>
<div id="eventDetails" style="background: rgba(255,255,255,0.05);
padding: 20px; border-radius: 15px; margin-bottom: 30px;">
<h3 id="modalEventName" style="color: var(--accent-color); margin-
bottom: 10px;"></h3>
<p id="modalEventDate" style="color: rgba(255,255,255,0.7);"></p>
<p id="modalEventTime" style="color: rgba(255,255,255,0.7);"></p>
</div>
<form onsubmit="handleRegistration(event)">
<div class="form-group">
<label>Full Name</label>
<input type="text" placeholder="Your full name" required>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="[Link]@[Link]"
required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" placeholder="+91 98765 43210" required>
</div>
<div class="form-group">
<label>College ID</label>
<input type="text" placeholder="STU2025001" required>
</div>
<div class="form-group">
<label>Department</label>
<select required>
<option value="">Select Department</option>
<option>Computer Science</option>
<option>Electronics and Communication</option>
<option>Mechanical</option>
<option>Civil</option>
<option>Electrical and Electronics</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label>Year of Study</label>
<select required>
<option value="">Select Year</option>
<option>1st Year</option>
<option>2nd Year</option>
<option>3rd Year</option>
<option>4th Year</option>
</select>
</div>
<div class="form-group">
<label>Why do you want to attend this event?</label>
<textarea placeholder="Tell us your motivation..."
required></textarea>
</div>
<div class="form-group">
<label>Team Registration (if applicable)</label>
<input type="text" placeholder="Team name (leave blank for
individual)">
</div>
<div class="checkbox-group">
<input type="checkbox" id="notifications" checked>
<label for="notifications">Send me reminders about this
event</label>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;
margin-top: 20px;">Complete Registration</button>
</form>
</div>
</div>

<!-- Footer -->


<footer>
<div class="container">
<p>&copy; 2025 EventEase. Making College Events Accessible to
Everyone 🎉</p>
</div>
</footer>

<script>
// Page Navigation
function switchPage(pageName) {
[Link]();
[Link]('.page').forEach(page =>
[Link]('active'));
[Link](pageName).[Link]('active');

[Link]('.nav-link').forEach(link =>
[Link]('active'));
[Link](`[data-page="$
{pageName}"]`).[Link]('active');

[Link]({ top: 0, behavior: 'smooth' });


}

[Link]('.nav-link').forEach(link => {
[Link]('click', (e) => {
[Link]();
const page = [Link]('data-page');
switchPage(page);
});
});

// Modal Functions
function openModal(modalId) {
[Link](modalId).[Link]('active');
[Link] = 'hidden';
}

function closeModal(modalId) {
[Link](modalId).[Link]('active');
[Link] = 'auto';
}

// Close modal on outside click


[Link]('.modal').forEach(modal => {
[Link]('click', (e) => {
if ([Link] === modal) {
closeModal([Link]);
}
});
});

// Registration Modal
function openRegistrationModal(eventName, eventDate, eventTime) {
[Link]('modalEventName').textContent = eventName;
[Link]('modalEventDate').textContent = '📅 ' +
eventDate;
[Link]('modalEventTime').textContent = '⏰ ' +
eventTime;
openModal('registrationModal');
}

// Form Handlers
function handleLogin(e) {
[Link]();
const btn = [Link]('button[type="submit"]');
const originalText = [Link];

[Link] = 'Logging in...';


[Link] = '0.7';

setTimeout(() => {
[Link] = 'Login Successful! ✓';
[Link] = 'linear-gradient(45deg, #10b981, #059669)';

setTimeout(() => {
closeModal('loginModal');
[Link] = originalText;
[Link] = '1';
[Link] = '';
[Link]();
alert('Welcome back! You are now logged in.');
}, 1500);
}, 1500);
}

function handleSignup(e) {
[Link]();
const btn = [Link]('button[type="submit"]');
const originalText = [Link];

[Link] = 'Creating Account...';


[Link] = '0.7';

setTimeout(() => {
[Link] = 'Account Created! ✓';
[Link] = 'linear-gradient(45deg, #10b981, #059669)';

setTimeout(() => {
closeModal('signupModal');
[Link] = originalText;
[Link] = '1';
[Link] = '';
[Link]();
alert('Account created successfully! Please login to
continue.');
openModal('loginModal');
}, 1500);
}, 1500);
}

function handleRegistration(e) {
[Link]();
const btn = [Link]('button[type="submit"]');
const originalText = [Link];

[Link] = 'Processing...';
[Link] = '0.7';

setTimeout(() => {
[Link] = 'Registration Successful! ✓';
[Link] = 'linear-gradient(45deg, #10b981, #059669)';
setTimeout(() => {
closeModal('registrationModal');
[Link] = originalText;
[Link] = '1';
[Link] = '';
[Link]();
alert('🎉 Registration successful! You will receive a
confirmation email shortly with event details and reminders.');
}, 1500);
}, 1500);
}

// Interests Selection
function toggleInterest(card) {
[Link]('selected');
}

function saveInterests() {
const selectedInterests = [Link]('.interest-
[Link]');
if ([Link] === 0) {
alert('Please select at least one interest category');
return;
}

const interests = [Link](selectedInterests).map(card =>


[Link]('h3').textContent
);

alert(`✓ Preferences saved!\n\nYou will receive notifications for:\n$


{[Link](', ')}`);
}

// Floating Particles Animation


function createParticles() {
const particlesContainer = [Link]('particles');
const particleCount = 50;

for (let i = 0; i < particleCount; i++) {


const particle = [Link]('div');
[Link] = 'particle';

const size = [Link]() * 6 + 2;


const left = [Link]() * [Link];
const animationDuration = [Link]() * 15 + 10;
const delay = [Link]() * 15;

[Link] = `${size}px`;
[Link] = `${size}px`;
[Link] = `${left}px`;
[Link] = `${animationDuration}s`;
[Link] = `${delay}s`;

[Link](particle);
}
}

// Scroll Animations
function animateOnScroll() {
const elements = [Link]('.fade-in');

[Link](element => {
const elementTop = [Link]().top;
const elementVisible = 150;

if (elementTop < [Link] - elementVisible) {


[Link]('visible');
}
});
}

// Event card animations


[Link]('.event-card').forEach(card => {
[Link]('mousemove', (e) => {
const rect = [Link]();
const x = [Link] - [Link];
const y = [Link] - [Link];
const centerX = [Link] / 2;
const centerY = [Link] / 2;
const rotateX = (y - centerY) / 20;
const rotateY = (centerX - x) / 20;

[Link] = `perspective(1000px) rotateX(${rotateX}deg)


rotateY(${rotateY}deg) translateY(-10px)`;
});

[Link]('mouseleave', () => {
[Link] = '';
});
});

// Dynamic background color change


function updateBackgroundOnScroll() {
const scrollPercent = [Link] /
([Link] - [Link]);
const hue = 220 + (scrollPercent * 140);

[Link]('.bg-animation').[Link] =
`linear-gradient(135deg, hsl(${hue}, 70%, 60%) 0%, hsl(${hue + 40},
65%, 55%) 100%)`;
}

// Initialize
[Link]('load', () => {
createParticles();
});

[Link]('scroll', () => {
animateOnScroll();
updateBackgroundOnScroll();
});

[Link]('resize', () => {
[Link]('particles').innerHTML = '';
createParticles();
});

// Keyboard shortcuts
[Link]('keydown', (e) => {
if ([Link] === 'Escape') {
[Link]('.[Link]').forEach(modal => {
closeModal([Link]);
});
}
});
</script>

<script type="module">
import { db } from "./[Link]";
import { collection, getDocs } from
"[Link]

async function loadEvents() {


const querySnapshot = await getDocs(collection(db, "events"));
[Link]((doc) => {
[Link]([Link], " => ", [Link]());
});
}

loadEvents();
</script>

</body>
</html>

Vous aimerez peut-être aussi