113 lines
5.0 KiB
HTML
113 lines
5.0 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}EduEvents - School Event Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 mb-5 mb-lg-0" style="z-index: 1;">
|
|
<h1 class="display-3 mb-4">Manage School Events with <span class="text-accent">Ease.</span></h1>
|
|
<p class="lead text-muted mb-5">The all-in-one platform for schools to create, manage, and track event registrations and attendance. Join the community today.</p>
|
|
<div class="d-flex gap-3">
|
|
<a href="#events" class="btn btn-primary btn-lg">Browse Events</a>
|
|
<a href="/admin/" class="btn btn-outline-dark btn-lg">School Portal</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 text-center">
|
|
<!-- Modern Graphic / Illustration Placeholder -->
|
|
<div class="position-relative">
|
|
<div class="bg-accent rounded-circle position-absolute top-50 start-50 translate-middle opacity-10" style="width: 400px; height: 400px;"></div>
|
|
<img src="https://img.freepik.com/free-vector/calendar-concept-illustration_114360-3277.jpg" alt="School Events" class="img-fluid rounded-4 shadow-lg position-relative" style="max-height: 450px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Events Section -->
|
|
<section id="events" class="py-5 mt-5">
|
|
<div class="container">
|
|
<div class="d-flex justify-content-between align-items-end mb-5">
|
|
<div>
|
|
<h2 class="section-title">Upcoming Events</h2>
|
|
<p class="text-muted">Stay informed about the latest assemblies, field trips, and school nights.</p>
|
|
</div>
|
|
<div class="mb-3 d-none d-md-block">
|
|
<select class="form-select border-0 shadow-sm" style="border-radius: 10px; padding: 10px 20px; min-width: 200px;">
|
|
<option>All Schools</option>
|
|
{% for school in schools %}
|
|
<option>{{ school.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
{% for event in events %}
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="event-card p-4 d-flex flex-column">
|
|
<div class="mb-2">
|
|
<span class="event-type-badge badge-{{ event.event_type }}">{{ event.get_event_type_display }}</span>
|
|
</div>
|
|
<h3 class="h4 mb-3">{{ event.title }}</h3>
|
|
<p class="text-muted small mb-4">{{ event.description|truncatewords:20 }}</p>
|
|
|
|
<div class="mb-4">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-event me-2 text-accent" viewBox="0 0 16 16">
|
|
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
|
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
|
</svg>
|
|
<span class="small fw-semibold">{{ event.start_date|date:"M d, Y @ H:i" }}</span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt me-2 text-accent" viewBox="0 0 16 16">
|
|
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
|
|
</svg>
|
|
<span class="small text-muted">{{ event.location }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-top pt-4 mt-auto">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="small text-muted fw-bold">{{ event.school.name }}</span>
|
|
<a href="{% url 'event_detail' event.id %}" class="btn btn-sm btn-link text-accent fw-bold text-decoration-none p-0">View Details →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12 text-center py-5">
|
|
<div class="p-5 bg-white rounded-4 shadow-sm">
|
|
<p class="text-muted mb-0">No upcoming events scheduled at the moment. Please check back later!</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="py-5 bg-white border-top border-bottom">
|
|
<div class="container">
|
|
<div class="row text-center g-4">
|
|
<div class="col-md-4">
|
|
<h2 class="display-4 text-accent">50+</h2>
|
|
<p class="text-muted fw-semibold">Schools Registered</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2 class="display-4 text-accent">10k+</h2>
|
|
<p class="text-muted fw-semibold">Events Managed</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2 class="display-4 text-accent">100k+</h2>
|
|
<p class="text-muted fw-semibold">Tickets Issued</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|