-
Loading…
+
+
+
+
+
Embeddable calendar widget
+
Show visitors exactly where your business will be on any day.
+
A polished public calendar for your website, plus secure staff-only tools for publishing event dates, times, and direct event links.
+
+
+
+
+ Secure updates
+ Only logged-in staff can add or change events.
+
+
+
+
+ Click any day
+ Visitors get event names, times, and helpful links in a modal.
+
+
+
+
+ Embed ready
+ Drop the iframe into your existing HTML website in minutes.
+
+
+
+
+
-
AppWizzy AI is collecting your requirements and applying the first changes.
-
This page will refresh automatically as the plan is implemented.
-
- Runtime: Django {{ django_version }} · Python {{ python_version }}
- — UTC {{ current_time|date:"Y-m-d H:i:s" }}
-
+
+
+
+
+
+
Public calendar
+
A visitor-friendly monthly schedule
+
Each day opens a clean detail modal so guests can confirm where you will be and jump straight to the event page.
+
+
+
+ {% include "core/includes/calendar_widget.html" with calendar_variant="landing" %}
+
+
+
+
+
+ Upcoming stops
+
Events your audience can scan in seconds
+
+
+ {% for event in upcoming_events %}
+
+
+ {{ event.start|date:"D, M j" }}
+ {{ event.name }}
+ {{ event.start|date:"g:i A" }} – {{ event.end|date:"g:i A" }}
+ {{ event.location|default:"Location announced soon" }}
+ {{ event.summary|default:"Event details will appear here as soon as your team adds them."|truncatechars:120 }}
+
+
+
+ {% empty %}
+
+
+
No public events yet
+
Create events from the secure dashboard or Django admin, then they will automatically appear on the landing page and embed widget.
+
Staff login
+
+
+ {% endfor %}
+
+
+
+
+
+
+
+
+
Embed on your HTML site
+
Paste one iframe and you are live
+
Use the ready-made widget page below inside your existing HTML website. It stays read-only for visitors, while your team updates dates privately.
+
+
+
+
+
+
+
{{ iframe_snippet }}
+
+
+
+
+{% endblock %}
diff --git a/core/templates/registration/login.html b/core/templates/registration/login.html
new file mode 100644
index 0000000..933ec3c
--- /dev/null
+++ b/core/templates/registration/login.html
@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+
+{% block title %}Staff Login | Roadshow Calendar{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/core/tests.py b/core/tests.py
index 7ce503c..20438a9 100644
--- a/core/tests.py
+++ b/core/tests.py
@@ -1,3 +1,90 @@
-from django.test import TestCase
+from datetime import datetime
-# Create your tests here.
+from django.contrib.auth.models import User
+from django.test import Client, TestCase
+from django.urls import reverse
+from django.utils import timezone
+
+from .models import Event
+
+
+class EventModelTests(TestCase):
+ def test_slug_is_created_on_save(self):
+ event = Event.objects.create(
+ name='City Market',
+ start=timezone.make_aware(datetime(2026, 4, 10, 10, 0)),
+ end=timezone.make_aware(datetime(2026, 4, 10, 14, 0)),
+ )
+ self.assertTrue(event.slug.startswith('city-market-2026-04-10'))
+
+
+class CalendarViewTests(TestCase):
+ def setUp(self):
+ Event.objects.create(
+ name='Riverfront Market',
+ location='Riverfront Pavilion',
+ start=timezone.make_aware(datetime(2026, 4, 10, 10, 0)),
+ end=timezone.make_aware(datetime(2026, 4, 10, 16, 0)),
+ is_published=True,
+ )
+
+ def test_home_page_renders(self):
+ response = self.client.get(reverse('home'))
+ self.assertEqual(response.status_code, 200)
+ self.assertContains(response, 'Show visitors exactly where your business will be on any day.')
+
+ def test_staff_dashboard_requires_login(self):
+ response = self.client.get(reverse('event_dashboard'))
+ self.assertEqual(response.status_code, 302)
+ self.assertIn(reverse('login'), response.url)
+
+ def test_staff_dashboard_for_staff_user(self):
+ staff = User.objects.create_user(username='staffer', password='pass12345', is_staff=True)
+ client = Client()
+ client.login(username='staffer', password='pass12345')
+ response = client.get(reverse('event_dashboard'))
+ self.assertEqual(response.status_code, 200)
+ self.assertContains(response, 'Manage your public event calendar securely')
+
+
+class EventDashboardMutationTests(TestCase):
+ def setUp(self):
+ self.staff = User.objects.create_user(username='staffer', password='pass12345', is_staff=True)
+ self.event = Event.objects.create(
+ name='Editable Market',
+ location='Town Square',
+ start=timezone.make_aware(datetime(2026, 4, 12, 9, 0)),
+ end=timezone.make_aware(datetime(2026, 4, 12, 12, 0)),
+ is_published=True,
+ )
+
+ def test_staff_can_open_edit_page(self):
+ self.client.login(username='staffer', password='pass12345')
+ response = self.client.get(reverse('event_edit', args=[self.event.slug]))
+ self.assertEqual(response.status_code, 200)
+ self.assertContains(response, 'Save changes')
+
+ def test_staff_can_update_event(self):
+ self.client.login(username='staffer', password='pass12345')
+ response = self.client.post(
+ reverse('event_edit', args=[self.event.slug]),
+ {
+ 'name': 'Updated Market',
+ 'location': 'Town Square',
+ 'start': '2026-04-12T09:00',
+ 'end': '2026-04-12T13:00',
+ 'event_url': 'https://example.com/event',
+ 'summary': 'Updated details',
+ 'is_published': 'on',
+ },
+ )
+ self.assertRedirects(response, reverse('event_dashboard_detail', args=[self.event.slug]))
+ self.event.refresh_from_db()
+ self.assertEqual(self.event.name, 'Updated Market')
+ self.assertEqual(self.event.summary, 'Updated details')
+
+ def test_staff_can_delete_event(self):
+ self.client.login(username='staffer', password='pass12345')
+ response = self.client.post(reverse('event_delete', args=[self.event.slug]))
+ self.assertRedirects(response, reverse('event_dashboard'))
+ self.assertFalse(Event.objects.filter(pk=self.event.pk).exists())
diff --git a/core/urls.py b/core/urls.py
index 6299e3d..4f0ba4c 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -1,7 +1,34 @@
+from django.contrib.auth import views as auth_views
from django.urls import path
-from .views import home
+from .views import (
+ calendar_embed,
+ calendar_page,
+ event_create,
+ event_dashboard,
+ event_dashboard_detail,
+ event_delete,
+ event_detail,
+ event_edit,
+ event_list,
+ home,
+)
urlpatterns = [
- path("", home, name="home"),
+ path('', home, name='home'),
+ path('calendar/', calendar_page, name='calendar_page'),
+ path('calendar/embed/', calendar_embed, name='calendar_embed'),
+ path('events/', event_list, name='event_list'),
+ path('events/
/', event_detail, name='event_detail'),
+ path('dashboard/events/', event_dashboard, name='event_dashboard'),
+ path('dashboard/events/new/', event_create, name='event_create'),
+ path('dashboard/events//edit/', event_edit, name='event_edit'),
+ path('dashboard/events//delete/', event_delete, name='event_delete'),
+ path('dashboard/events//', event_dashboard_detail, name='event_dashboard_detail'),
+ path(
+ 'login/',
+ auth_views.LoginView.as_view(template_name='registration/login.html', redirect_authenticated_user=True),
+ name='login',
+ ),
+ path('logout/', auth_views.LogoutView.as_view(), name='logout'),
]
diff --git a/core/views.py b/core/views.py
index c9aed12..a5bd905 100644
--- a/core/views.py
+++ b/core/views.py
@@ -1,25 +1,286 @@
-import os
-import platform
+import calendar
+from collections import defaultdict
+from datetime import datetime, time, timedelta
-from django import get_version as django_version
-from django.shortcuts import render
+from django.contrib import messages
+from django.contrib.auth.decorators import login_required
+from django.core.exceptions import PermissionDenied
+from django.shortcuts import get_object_or_404, redirect, render
+from django.urls import reverse
from django.utils import timezone
+from .forms import EventForm
+from .models import Event
+
+
+PROJECT_NAME = 'Roadshow Calendar'
+DEFAULT_META_DESCRIPTION = 'Track where your business will be each day with a polished public calendar and secure staff-only event management.'
+
+
+def _parse_month(month_value: str | None):
+ today = timezone.localdate()
+ if month_value:
+ try:
+ parsed = datetime.strptime(month_value, '%Y-%m').date()
+ return parsed.replace(day=1)
+ except ValueError:
+ pass
+ return today.replace(day=1)
+
+
+def _next_month(month_start):
+ return (month_start.replace(day=28) + timedelta(days=4)).replace(day=1)
+
+
+def _previous_month(month_start):
+ return (month_start - timedelta(days=1)).replace(day=1)
+
+
+def _build_month_context(month_value=None):
+ month_start = _parse_month(month_value)
+ next_month = _next_month(month_start)
+ tz = timezone.get_current_timezone()
+ range_start = timezone.make_aware(datetime.combine(month_start, time.min), tz)
+ range_end = timezone.make_aware(datetime.combine(next_month, time.min), tz)
+
+ events = list(
+ Event.objects.filter(is_published=True, start__lt=range_end, end__gte=range_start).order_by('start', 'name')
+ )
+
+ event_map = defaultdict(list)
+ for event in events:
+ start_local = timezone.localtime(event.start)
+ end_local = timezone.localtime(event.end)
+ current_day = start_local.date()
+ final_day = end_local.date()
+ while current_day <= final_day:
+ event_map[current_day.isoformat()].append(
+ {
+ 'name': event.name,
+ 'location': event.location,
+ 'time': f"{start_local:%I:%M %p} – {end_local:%I:%M %p}" if start_local.date() == end_local.date() else f"{start_local:%b %d, %I:%M %p} – {end_local:%b %d, %I:%M %p}",
+ 'summary': event.summary,
+ 'event_url': event.event_url,
+ 'detail_url': reverse('event_detail', kwargs={'slug': event.slug}),
+ }
+ )
+ current_day += timedelta(days=1)
+
+ month_calendar = calendar.Calendar(firstweekday=6)
+ today = timezone.localdate()
+ calendar_weeks = []
+ for week in month_calendar.monthdatescalendar(month_start.year, month_start.month):
+ week_days = []
+ for day in week:
+ iso = day.isoformat()
+ day_events = event_map.get(iso, [])
+ week_days.append(
+ {
+ 'date': day,
+ 'iso': iso,
+ 'day': day.day,
+ 'in_month': day.month == month_start.month,
+ 'is_today': day == today,
+ 'event_count': len(day_events),
+ 'has_events': bool(day_events),
+ }
+ )
+ calendar_weeks.append(week_days)
+
+ return {
+ 'calendar_weeks': calendar_weeks,
+ 'calendar_events': dict(event_map),
+ 'month_label': month_start.strftime('%B %Y'),
+ 'month_value': month_start.strftime('%Y-%m'),
+ 'prev_month': _previous_month(month_start).strftime('%Y-%m'),
+ 'next_month': next_month.strftime('%Y-%m'),
+ 'today_value': today.strftime('%Y-%m'),
+ }
+
+
+def _base_context(**extra):
+ context = {
+ 'project_name': PROJECT_NAME,
+ 'meta_description': DEFAULT_META_DESCRIPTION,
+ }
+ context.update(extra)
+ return context
+
+
+@login_required(login_url='login')
+def event_dashboard(request):
+ if not request.user.is_staff:
+ raise PermissionDenied
+ events = Event.objects.all().order_by('start', 'name')
+ return render(
+ request,
+ 'core/event_dashboard.html',
+ _base_context(
+ page_title='Manage events',
+ events=events,
+ dashboard_count=events.count(),
+ ),
+ )
+
+
+@login_required(login_url='login')
+def event_create(request):
+ if not request.user.is_staff:
+ raise PermissionDenied
+
+ if request.method == 'POST':
+ form = EventForm(request.POST)
+ if form.is_valid():
+ event = form.save()
+ messages.success(request, 'Event saved and ready for the public calendar.')
+ return redirect('event_dashboard_detail', slug=event.slug)
+ else:
+ form = EventForm()
+
+ return render(
+ request,
+ 'core/event_form.html',
+ _base_context(
+ page_title='Add event',
+ form=form,
+ form_mode='create',
+ form_title='Add a new stop to the calendar',
+ form_intro='Once saved, published events immediately power the landing page, public calendar, and embeddable widget.',
+ submit_label='Save event',
+ ),
+ )
+
+
+@login_required(login_url='login')
+def event_edit(request, slug):
+ if not request.user.is_staff:
+ raise PermissionDenied
+
+ event = get_object_or_404(Event, slug=slug)
+ if request.method == 'POST':
+ form = EventForm(request.POST, instance=event)
+ if form.is_valid():
+ event = form.save()
+ messages.success(request, 'Event updated successfully.')
+ return redirect('event_dashboard_detail', slug=event.slug)
+ else:
+ form = EventForm(instance=event)
+
+ return render(
+ request,
+ 'core/event_form.html',
+ _base_context(
+ page_title=f'Edit {event.name}',
+ form=form,
+ event=event,
+ form_mode='edit',
+ form_title='Update this calendar stop',
+ form_intro='Change dates, copy, publication status, or the event link without leaving the custom dashboard.',
+ submit_label='Save changes',
+ ),
+ )
+
+
+@login_required(login_url='login')
+def event_delete(request, slug):
+ if not request.user.is_staff:
+ raise PermissionDenied
+
+ event = get_object_or_404(Event, slug=slug)
+ if request.method == 'POST':
+ event_name = event.name
+ event.delete()
+ messages.success(request, f'{event_name} was deleted.')
+ return redirect('event_dashboard')
+
+ return render(
+ request,
+ 'core/event_confirm_delete.html',
+ _base_context(
+ page_title=f'Delete {event.name}',
+ event=event,
+ ),
+ )
+
+
+@login_required(login_url='login')
+def event_dashboard_detail(request, slug):
+ if not request.user.is_staff:
+ raise PermissionDenied
+ event = get_object_or_404(Event, slug=slug)
+ return render(
+ request,
+ 'core/event_dashboard_detail.html',
+ _base_context(
+ page_title=event.name,
+ event=event,
+ ),
+ )
+
def home(request):
- """Render the landing screen with loader and environment details."""
- host_name = request.get_host().lower()
- agent_brand = "AppWizzy" if host_name == "appwizzy.com" else "Flatlogic"
- now = timezone.now()
+ month_context = _build_month_context(request.GET.get('month'))
+ upcoming_events = list(Event.objects.filter(is_published=True, end__gte=timezone.now()).order_by('start', 'name')[:6])
+ embed_url = request.build_absolute_uri(reverse('calendar_embed'))
+ iframe_snippet = f''
+ return render(
+ request,
+ 'core/index.html',
+ _base_context(
+ page_title=PROJECT_NAME,
+ hero_events=upcoming_events[:3],
+ upcoming_events=upcoming_events,
+ embed_url=embed_url,
+ iframe_snippet=iframe_snippet,
+ **month_context,
+ ),
+ )
- context = {
- "project_name": "New Style",
- "agent_brand": agent_brand,
- "django_version": django_version(),
- "python_version": platform.python_version(),
- "current_time": now,
- "host_name": host_name,
- "project_description": os.getenv("PROJECT_DESCRIPTION", ""),
- "project_image_url": os.getenv("PROJECT_IMAGE_URL", ""),
- }
- return render(request, "core/index.html", context)
+
+def calendar_page(request):
+ month_context = _build_month_context(request.GET.get('month'))
+ return render(
+ request,
+ 'core/calendar_page.html',
+ _base_context(
+ page_title='Public calendar',
+ **month_context,
+ ),
+ )
+
+
+def calendar_embed(request):
+ month_context = _build_month_context(request.GET.get('month'))
+ return render(
+ request,
+ 'core/calendar_embed.html',
+ _base_context(
+ page_title='Embeddable calendar',
+ embedded=True,
+ **month_context,
+ ),
+ )
+
+
+def event_list(request):
+ events = Event.objects.filter(is_published=True).order_by('start', 'name')
+ return render(
+ request,
+ 'core/event_list.html',
+ _base_context(
+ page_title='Upcoming events',
+ events=events,
+ ),
+ )
+
+
+def event_detail(request, slug):
+ event = get_object_or_404(Event, slug=slug, is_published=True)
+ return render(
+ request,
+ 'core/event_detail.html',
+ _base_context(
+ page_title=event.name,
+ event=event,
+ ),
+ )
diff --git a/static/css/custom.css b/static/css/custom.css
index 925f6ed..75d37a1 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,4 +1,803 @@
-/* Custom styles for the application */
-body {
- font-family: system-ui, -apple-system, sans-serif;
+/* Brand system */
+:root {
+ --brand-ink: #122023;
+ --brand-primary: #e76f51;
+ --brand-primary-dark: #cb5a3e;
+ --brand-secondary: #0f766e;
+ --brand-accent: #f3c96b;
+ --brand-surface: rgba(255, 249, 243, 0.8);
+ --brand-surface-strong: #fffdf9;
+ --brand-border: rgba(18, 32, 35, 0.08);
+ --brand-muted: #5d6c70;
+ --brand-bg: #f8efe6;
+ --brand-bg-deep: #f1e6dc;
+ --brand-shadow: 0 24px 60px rgba(18, 32, 35, 0.12);
+ --radius-lg: 28px;
+ --radius-md: 20px;
+ --radius-sm: 14px;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: 0;
+ font-family: 'Inter', system-ui, sans-serif;
+ color: var(--brand-ink);
+ background:
+ radial-gradient(circle at top left, rgba(243, 201, 107, 0.33), transparent 28%),
+ radial-gradient(circle at top right, rgba(15, 118, 110, 0.18), transparent 24%),
+ linear-gradient(180deg, #fffaf4 0%, var(--brand-bg) 52%, #fffaf4 100%);
+ min-height: 100vh;
+ position: relative;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.navbar-brand,
+.section-title {
+ font-family: 'Manrope', 'Inter', sans-serif;
+ letter-spacing: -0.03em;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+p,
+a,
+button,
+input,
+textarea,
+label,
+small,
+span {
+ font-family: 'Inter', system-ui, sans-serif;
+}
+
+.page-glow {
+ position: fixed;
+ border-radius: 999px;
+ filter: blur(90px);
+ opacity: 0.6;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.page-glow-one {
+ width: 280px;
+ height: 280px;
+ background: rgba(231, 111, 81, 0.22);
+ top: 4rem;
+ left: -4rem;
+}
+
+.page-glow-two {
+ width: 360px;
+ height: 360px;
+ background: rgba(15, 118, 110, 0.15);
+ right: -5rem;
+ top: 18rem;
+}
+
+.site-header,
+.site-footer,
+.hero-section,
+.section-shell {
+ position: relative;
+ z-index: 1;
+}
+
+.site-header {
+ padding-top: 1.25rem;
+}
+
+.navbar {
+ background: rgba(255, 253, 249, 0.78);
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ border-radius: 999px;
+ padding-left: 1.1rem;
+ padding-right: 1.1rem;
+ box-shadow: 0 16px 40px rgba(18, 32, 35, 0.08);
+ backdrop-filter: blur(18px);
+}
+
+.brand-mark {
+ color: var(--brand-ink);
+ font-weight: 800;
+ font-size: 1.2rem;
+ text-decoration: none;
+}
+
+.brand-mark span {
+ color: var(--brand-primary);
+}
+
+.nav-link {
+ color: var(--brand-ink);
+ font-weight: 600;
+ opacity: 0.88;
+}
+
+.nav-link:hover,
+.nav-link:focus,
+.footer-links a:hover,
+.footer-links a:focus,
+.text-link:hover,
+.text-link:focus {
+ color: var(--brand-secondary);
+}
+
+.calendar-toggler {
+ border: 0;
+ box-shadow: none !important;
+}
+
+.message-stack {
+ margin-top: 1rem;
+}
+
+.hero-section {
+ padding: 2rem 0 1rem;
+}
+
+.hero-card {
+ position: relative;
+ overflow: hidden;
+ background: linear-gradient(135deg, rgba(18, 32, 35, 0.95), rgba(18, 32, 35, 0.82));
+ color: #fff8f1;
+ border-radius: calc(var(--radius-lg) + 6px);
+ padding: clamp(2rem, 4vw, 4rem);
+ min-height: 620px;
+ box-shadow: var(--brand-shadow);
+ display: grid;
+ gap: 2rem;
+ align-items: center;
+ grid-template-columns: minmax(0, 1.1fr) minmax(280px, 420px);
+}
+
+.hero-card::before {
+ content: '';
+ position: absolute;
+ inset: auto auto -80px -60px;
+ width: 220px;
+ height: 220px;
+ border-radius: 42px;
+ background: linear-gradient(145deg, rgba(231, 111, 81, 0.35), rgba(243, 201, 107, 0.12));
+ transform: rotate(18deg);
+}
+
+.hero-card::after {
+ content: '';
+ position: absolute;
+ top: 40px;
+ right: 100px;
+ width: 170px;
+ height: 170px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: rgba(255, 255, 255, 0.06);
+}
+
+.hero-copy,
+.hero-panel {
+ position: relative;
+ z-index: 1;
+}
+
+.eyebrow-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ padding: 0.45rem 0.9rem;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.12);
+ color: inherit;
+ font-size: 0.86rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+
+.hero-copy h1 {
+ font-size: clamp(2.7rem, 5vw, 4.8rem);
+ line-height: 0.97;
+ margin: 1.2rem 0 1.2rem;
+ max-width: 10ch;
+}
+
+.hero-lead,
+.section-copy,
+.footer-copy,
+.event-summary,
+.detail-body p,
+.form-help {
+ color: rgba(18, 32, 35, 0.74);
+ line-height: 1.7;
+}
+
+.hero-lead {
+ color: rgba(255, 248, 241, 0.82);
+ font-size: 1.08rem;
+ max-width: 50ch;
+}
+
+.hero-actions,
+.compact-actions,
+.dashboard-banner-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.85rem;
+ margin-top: 1.7rem;
+}
+
+.btn {
+ border-radius: 999px;
+ font-weight: 700;
+ padding: 0.8rem 1.25rem;
+ border-width: 1px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.btn:hover,
+.btn:focus {
+ transform: translateY(-1px);
+ box-shadow: 0 12px 25px rgba(18, 32, 35, 0.12);
+}
+
+.btn-primary-brand {
+ background: linear-gradient(135deg, var(--brand-primary), #f08f5b);
+ color: #fff;
+ border-color: transparent;
+}
+
+.btn-primary-brand:hover,
+.btn-primary-brand:focus {
+ background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
+ color: #fff;
+}
+
+.btn-ghost {
+ background: rgba(255, 255, 255, 0.68);
+ color: var(--brand-ink);
+ border-color: rgba(18, 32, 35, 0.08);
+ backdrop-filter: blur(14px);
+}
+
+.hero-card .btn-ghost {
+ background: rgba(255, 255, 255, 0.1);
+ color: #fff8f1;
+ border-color: rgba(255, 255, 255, 0.18);
+}
+
+.card-surface,
+.calendar-card,
+.embed-shell-card,
+.detail-card,
+.dashboard-banner,
+.table-card,
+.form-card,
+.empty-state,
+.event-card {
+ background: rgba(255, 253, 249, 0.82);
+ border: 1px solid rgba(255, 255, 255, 0.9);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--brand-shadow);
+ backdrop-filter: blur(18px);
+}
+
+.hero-stats {
+ margin-top: 2rem;
+}
+
+.stat-card {
+ height: 100%;
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: var(--radius-md);
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.stat-card strong,
+.mini-event-list strong,
+.event-card h2,
+.event-card h3,
+.detail-card strong {
+ font-weight: 800;
+}
+
+.stat-card span,
+.mini-event-list small,
+.event-meta,
+.toolbar-label,
+.modal-label,
+.footer-title,
+.status-pill,
+.form-label {
+ color: rgba(255, 248, 241, 0.72);
+}
+
+.hero-panel {
+ min-height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.mini-widget {
+ position: relative;
+ width: 100%;
+ max-width: 360px;
+ padding: 1.6rem;
+ background: rgba(255, 253, 249, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.mini-label {
+ font-size: 0.78rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: rgba(255, 248, 241, 0.65);
+ margin-bottom: 1rem;
+}
+
+.mini-event-list {
+ display: grid;
+ gap: 0.9rem;
+}
+
+.mini-event-list li {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.9rem;
+ align-items: start;
+}
+
+.mini-event-list span {
+ min-width: 52px;
+ padding: 0.45rem 0.65rem;
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.12);
+ color: #fff8f1;
+ font-weight: 700;
+}
+
+.empty-note {
+ color: rgba(255, 248, 241, 0.76);
+ line-height: 1.6;
+}
+
+.floating-orb {
+ position: absolute;
+ border-radius: 999px;
+ filter: blur(6px);
+ opacity: 0.85;
+}
+
+.orb-one {
+ width: 118px;
+ height: 118px;
+ background: linear-gradient(145deg, rgba(243, 201, 107, 0.95), rgba(231, 111, 81, 0.6));
+ right: 12px;
+ top: 12px;
+}
+
+.orb-two {
+ width: 78px;
+ height: 78px;
+ background: linear-gradient(145deg, rgba(15, 118, 110, 0.9), rgba(255, 255, 255, 0.2));
+ left: -18px;
+ bottom: 44px;
+}
+
+.section-shell,
+.embed-section {
+ padding: 1.5rem 0 3.2rem;
+}
+
+.page-top-space {
+ padding-top: 2rem;
+}
+
+.section-soft {
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(243, 201, 107, 0.06));
+}
+
+.section-heading {
+ margin-bottom: 1.5rem;
+}
+
+.section-title {
+ font-size: clamp(2rem, 3vw, 3.1rem);
+ color: var(--brand-ink);
+ margin-top: 0.9rem;
+ margin-bottom: 0.7rem;
+}
+
+.section-copy,
+.footer-copy,
+.event-summary,
+.form-help,
+.field-error,
+.text-link {
+ color: var(--brand-muted);
+}
+
+.calendar-card {
+ padding: 1.35rem;
+}
+
+.calendar-toolbar {
+ margin-bottom: 1.2rem;
+}
+
+.calendar-title {
+ font-size: 1.9rem;
+ color: var(--brand-ink);
+}
+
+.toolbar-label,
+.modal-label,
+.event-meta,
+.footer-title,
+.form-label,
+.detail-meta-grid span {
+ color: var(--brand-muted);
+ font-weight: 600;
+ letter-spacing: 0.01em;
+}
+
+.calendar-weekdays,
+.calendar-grid {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ gap: 0.85rem;
+}
+
+.calendar-weekdays {
+ margin-bottom: 0.85rem;
+}
+
+.calendar-weekdays span {
+ text-align: center;
+ padding: 0.35rem 0;
+ font-size: 0.88rem;
+ font-weight: 700;
+ color: var(--brand-muted);
+}
+
+.calendar-day {
+ min-height: 124px;
+ border-radius: 22px;
+ border: 1px solid rgba(18, 32, 35, 0.08);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 241, 233, 0.9));
+ padding: 0.95rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: left;
+ gap: 0.75rem;
+ color: var(--brand-ink);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.calendar-day:hover,
+.calendar-day:focus {
+ border-color: rgba(231, 111, 81, 0.3);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 244, 235, 1));
+ outline: none;
+}
+
+.calendar-day-number {
+ font-family: 'Manrope', sans-serif;
+ font-size: 1.45rem;
+ font-weight: 800;
+}
+
+.calendar-day.is-muted {
+ opacity: 0.5;
+}
+
+.calendar-day.is-today {
+ border-color: rgba(15, 118, 110, 0.3);
+ box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
+}
+
+.calendar-day.has-events {
+ background: linear-gradient(180deg, rgba(255, 245, 238, 1), rgba(255, 251, 244, 1));
+}
+
+.calendar-badge {
+ display: inline-flex;
+ align-items: center;
+ align-self: flex-start;
+ gap: 0.35rem;
+ padding: 0.45rem 0.7rem;
+ border-radius: 999px;
+ background: rgba(231, 111, 81, 0.12);
+ color: var(--brand-primary-dark);
+ font-size: 0.82rem;
+ font-weight: 700;
+}
+
+.calendar-badge-empty {
+ background: rgba(15, 118, 110, 0.08);
+ color: var(--brand-secondary);
+}
+
+.event-modal {
+ border: 0;
+ border-radius: 28px;
+ background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(248, 239, 230, 0.96));
+ box-shadow: 0 40px 90px rgba(18, 32, 35, 0.2);
+}
+
+.event-modal .modal-body {
+ padding-bottom: 1.6rem;
+}
+
+.modal-event-card {
+ background: rgba(255, 255, 255, 0.76);
+ border: 1px solid rgba(18, 32, 35, 0.06);
+ border-radius: 22px;
+ padding: 1.15rem;
+ margin-bottom: 0.9rem;
+}
+
+.modal-event-card:last-child {
+ margin-bottom: 0;
+}
+
+.modal-event-card h4 {
+ margin-bottom: 0.45rem;
+ font-size: 1.2rem;
+}
+
+.modal-event-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.8rem;
+ color: var(--brand-muted);
+ font-size: 0.95rem;
+ margin-bottom: 0.7rem;
+}
+
+.embed-shell-card {
+ padding: 1.2rem;
+ margin: 1.2rem auto;
+ max-width: 1200px;
+}
+
+.embed-section .calendar-card {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ padding: 0;
+}
+
+.event-card,
+.detail-card,
+.form-card,
+.dashboard-banner,
+.table-card,
+.embed-copy-card,
+.code-card,
+.empty-state {
+ padding: 1.5rem;
+}
+
+.event-card {
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+}
+
+.event-date-chip,
+.status-pill {
+ display: inline-flex;
+ align-self: flex-start;
+ align-items: center;
+ justify-content: center;
+ padding: 0.45rem 0.8rem;
+ border-radius: 999px;
+ font-size: 0.82rem;
+ font-weight: 800;
+}
+
+.event-date-chip {
+ background: rgba(243, 201, 107, 0.24);
+ color: #8c6423;
+}
+
+.status-live {
+ background: rgba(15, 118, 110, 0.12);
+ color: var(--brand-secondary);
+}
+
+.status-draft {
+ background: rgba(93, 108, 112, 0.14);
+ color: var(--brand-muted);
+}
+
+.detail-meta-grid {
+ display: grid;
+ gap: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ margin: 1.5rem 0;
+}
+
+.detail-meta-grid strong {
+ display: block;
+ color: var(--brand-ink);
+ margin-top: 0.35rem;
+}
+
+.code-card {
+ background: linear-gradient(180deg, rgba(18, 32, 35, 0.96), rgba(18, 32, 35, 0.88));
+ color: #fff8f1;
+}
+
+.code-card-header strong {
+ color: #fff8f1;
+}
+
+.code-card .btn-ghost {
+ background: rgba(255, 255, 255, 0.08);
+ color: #fff8f1;
+ border-color: rgba(255, 255, 255, 0.12);
+}
+
+.code-snippet {
+ white-space: pre-wrap;
+ word-break: break-word;
+ margin-top: 1rem;
+ padding: 1.1rem;
+ border-radius: 20px;
+ background: rgba(255, 255, 255, 0.06);
+ color: #fff2df;
+}
+
+.dashboard-banner {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1.25rem;
+}
+
+.dashboard-table th {
+ color: var(--brand-muted);
+ font-weight: 700;
+}
+
+.dashboard-table td,
+.dashboard-table th {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ border-color: rgba(18, 32, 35, 0.06);
+ background: transparent;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="url"],
+input[type="datetime-local"],
+textarea,
+.form-control,
+.form-check-input {
+ border-radius: 16px;
+ border-color: rgba(18, 32, 35, 0.12);
+ padding: 0.85rem 1rem;
+ background: rgba(255, 255, 255, 0.94);
+}
+
+.form-control:focus,
+.form-check-input:focus,
+.btn:focus,
+.nav-link:focus,
+.text-link:focus {
+ border-color: rgba(15, 118, 110, 0.4);
+ box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.14);
+}
+
+.form-check-input {
+ width: 1.2rem;
+ height: 1.2rem;
+}
+
+.card-check {
+ background: rgba(243, 201, 107, 0.08);
+ border: 1px solid rgba(243, 201, 107, 0.32);
+ border-radius: 18px;
+ padding: 1rem;
+}
+
+.form-check-label {
+ margin-left: 0.45rem;
+ font-weight: 700;
+}
+
+.field-error {
+ margin-top: 0.4rem;
+ color: #b6412b;
+ font-size: 0.92rem;
+ font-weight: 600;
+}
+
+.text-link {
+ text-decoration: none;
+ font-weight: 700;
+}
+
+.site-footer {
+ padding: 0.4rem 0 2rem;
+}
+
+.footer-title {
+ color: var(--brand-ink);
+ font-weight: 800;
+}
+
+.footer-links a {
+ color: var(--brand-muted);
+ text-decoration: none;
+ font-weight: 600;
+}
+
+@media (max-width: 991.98px) {
+ .hero-card {
+ grid-template-columns: 1fr;
+ min-height: auto;
+ }
+
+ .dashboard-banner {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .calendar-weekdays,
+ .calendar-grid {
+ gap: 0.55rem;
+ }
+}
+
+@media (max-width: 767.98px) {
+ .navbar {
+ border-radius: 28px;
+ }
+
+ .hero-copy h1,
+ .section-title {
+ max-width: none;
+ }
+
+ .calendar-weekdays {
+ display: none;
+ }
+
+ .calendar-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .calendar-day {
+ min-height: 112px;
+ }
+
+ .hero-section,
+ .section-shell,
+ .embed-section {
+ padding-bottom: 2.3rem;
+ }
}
diff --git a/static/js/calendar.js b/static/js/calendar.js
new file mode 100644
index 0000000..0d7c6c2
--- /dev/null
+++ b/static/js/calendar.js
@@ -0,0 +1,106 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const dataElement = document.getElementById('calendar-events-data');
+ const modalElement = document.getElementById('dayEventsModal');
+ let calendarEvents = {};
+
+ const escapeHtml = (value) => String(value || '')
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+
+ const safeExternalUrl = (value) => {
+ if (!value) return '';
+ try {
+ const url = new URL(value, window.location.origin);
+ return ['http:', 'https:'].includes(url.protocol) ? url.href : '';
+ } catch (error) {
+ return '';
+ }
+ };
+
+ if (dataElement) {
+ try {
+ calendarEvents = JSON.parse(dataElement.textContent);
+ } catch (error) {
+ calendarEvents = {};
+ }
+ }
+
+ if (modalElement && window.bootstrap) {
+ const modal = new window.bootstrap.Modal(modalElement);
+ const titleNode = modalElement.querySelector('[data-calendar-title]');
+ const bodyNode = modalElement.querySelector('[data-calendar-body]');
+
+ const renderEvents = (isoDate) => {
+ const selectedEvents = calendarEvents[isoDate] || [];
+ const titleDate = new Date(`${isoDate}T12:00:00`);
+ titleNode.textContent = titleDate.toLocaleDateString(undefined, {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ });
+
+ if (!selectedEvents.length) {
+ bodyNode.innerHTML = `
+
+
No event scheduled
+
This date is currently open. Check another day or revisit after the next update.
+
${escapeHtml(event.summary)}
` : '';
+ const detailUrl = escapeHtml(event.detail_url || '#');
+ const eventUrl = safeExternalUrl(event.event_url);
+ return `
+
+ ${name}
+
+ ${time}
+ ${location}
+
+ ${summary}
+
+
+ `;
+ })
+ .join('');
+ };
+
+ document.querySelectorAll('[data-calendar-date]').forEach((button) => {
+ button.addEventListener('click', () => {
+ renderEvents(button.dataset.calendarDate);
+ modal.show();
+ });
+ });
+ }
+
+ document.querySelectorAll('[data-copy-snippet]').forEach((button) => {
+ button.addEventListener('click', async () => {
+ const target = document.querySelector(button.dataset.copyTarget);
+ if (!target) return;
+ try {
+ await navigator.clipboard.writeText(target.textContent.trim());
+ const original = button.textContent;
+ button.textContent = 'Copied';
+ window.setTimeout(() => {
+ button.textContent = original;
+ }, 1600);
+ } catch (error) {
+ button.textContent = 'Copy manually';
+ }
+ });
+ });
+});
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index 108056f..75d37a1 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,21 +1,803 @@
-
+/* Brand system */
:root {
- --bg-color-start: #6a11cb;
- --bg-color-end: #2575fc;
- --text-color: #ffffff;
- --card-bg-color: rgba(255, 255, 255, 0.01);
- --card-border-color: rgba(255, 255, 255, 0.1);
+ --brand-ink: #122023;
+ --brand-primary: #e76f51;
+ --brand-primary-dark: #cb5a3e;
+ --brand-secondary: #0f766e;
+ --brand-accent: #f3c96b;
+ --brand-surface: rgba(255, 249, 243, 0.8);
+ --brand-surface-strong: #fffdf9;
+ --brand-border: rgba(18, 32, 35, 0.08);
+ --brand-muted: #5d6c70;
+ --brand-bg: #f8efe6;
+ --brand-bg-deep: #f1e6dc;
+ --brand-shadow: 0 24px 60px rgba(18, 32, 35, 0.12);
+ --radius-lg: 28px;
+ --radius-md: 20px;
+ --radius-sm: 14px;
}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
body {
margin: 0;
- font-family: 'Inter', sans-serif;
- background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
- color: var(--text-color);
- display: flex;
- justify-content: center;
- align-items: center;
+ font-family: 'Inter', system-ui, sans-serif;
+ color: var(--brand-ink);
+ background:
+ radial-gradient(circle at top left, rgba(243, 201, 107, 0.33), transparent 28%),
+ radial-gradient(circle at top right, rgba(15, 118, 110, 0.18), transparent 24%),
+ linear-gradient(180deg, #fffaf4 0%, var(--brand-bg) 52%, #fffaf4 100%);
min-height: 100vh;
- text-align: center;
- overflow: hidden;
position: relative;
}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.navbar-brand,
+.section-title {
+ font-family: 'Manrope', 'Inter', sans-serif;
+ letter-spacing: -0.03em;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+p,
+a,
+button,
+input,
+textarea,
+label,
+small,
+span {
+ font-family: 'Inter', system-ui, sans-serif;
+}
+
+.page-glow {
+ position: fixed;
+ border-radius: 999px;
+ filter: blur(90px);
+ opacity: 0.6;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.page-glow-one {
+ width: 280px;
+ height: 280px;
+ background: rgba(231, 111, 81, 0.22);
+ top: 4rem;
+ left: -4rem;
+}
+
+.page-glow-two {
+ width: 360px;
+ height: 360px;
+ background: rgba(15, 118, 110, 0.15);
+ right: -5rem;
+ top: 18rem;
+}
+
+.site-header,
+.site-footer,
+.hero-section,
+.section-shell {
+ position: relative;
+ z-index: 1;
+}
+
+.site-header {
+ padding-top: 1.25rem;
+}
+
+.navbar {
+ background: rgba(255, 253, 249, 0.78);
+ border: 1px solid rgba(255, 255, 255, 0.7);
+ border-radius: 999px;
+ padding-left: 1.1rem;
+ padding-right: 1.1rem;
+ box-shadow: 0 16px 40px rgba(18, 32, 35, 0.08);
+ backdrop-filter: blur(18px);
+}
+
+.brand-mark {
+ color: var(--brand-ink);
+ font-weight: 800;
+ font-size: 1.2rem;
+ text-decoration: none;
+}
+
+.brand-mark span {
+ color: var(--brand-primary);
+}
+
+.nav-link {
+ color: var(--brand-ink);
+ font-weight: 600;
+ opacity: 0.88;
+}
+
+.nav-link:hover,
+.nav-link:focus,
+.footer-links a:hover,
+.footer-links a:focus,
+.text-link:hover,
+.text-link:focus {
+ color: var(--brand-secondary);
+}
+
+.calendar-toggler {
+ border: 0;
+ box-shadow: none !important;
+}
+
+.message-stack {
+ margin-top: 1rem;
+}
+
+.hero-section {
+ padding: 2rem 0 1rem;
+}
+
+.hero-card {
+ position: relative;
+ overflow: hidden;
+ background: linear-gradient(135deg, rgba(18, 32, 35, 0.95), rgba(18, 32, 35, 0.82));
+ color: #fff8f1;
+ border-radius: calc(var(--radius-lg) + 6px);
+ padding: clamp(2rem, 4vw, 4rem);
+ min-height: 620px;
+ box-shadow: var(--brand-shadow);
+ display: grid;
+ gap: 2rem;
+ align-items: center;
+ grid-template-columns: minmax(0, 1.1fr) minmax(280px, 420px);
+}
+
+.hero-card::before {
+ content: '';
+ position: absolute;
+ inset: auto auto -80px -60px;
+ width: 220px;
+ height: 220px;
+ border-radius: 42px;
+ background: linear-gradient(145deg, rgba(231, 111, 81, 0.35), rgba(243, 201, 107, 0.12));
+ transform: rotate(18deg);
+}
+
+.hero-card::after {
+ content: '';
+ position: absolute;
+ top: 40px;
+ right: 100px;
+ width: 170px;
+ height: 170px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: rgba(255, 255, 255, 0.06);
+}
+
+.hero-copy,
+.hero-panel {
+ position: relative;
+ z-index: 1;
+}
+
+.eyebrow-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+ padding: 0.45rem 0.9rem;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.12);
+ color: inherit;
+ font-size: 0.86rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+
+.hero-copy h1 {
+ font-size: clamp(2.7rem, 5vw, 4.8rem);
+ line-height: 0.97;
+ margin: 1.2rem 0 1.2rem;
+ max-width: 10ch;
+}
+
+.hero-lead,
+.section-copy,
+.footer-copy,
+.event-summary,
+.detail-body p,
+.form-help {
+ color: rgba(18, 32, 35, 0.74);
+ line-height: 1.7;
+}
+
+.hero-lead {
+ color: rgba(255, 248, 241, 0.82);
+ font-size: 1.08rem;
+ max-width: 50ch;
+}
+
+.hero-actions,
+.compact-actions,
+.dashboard-banner-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.85rem;
+ margin-top: 1.7rem;
+}
+
+.btn {
+ border-radius: 999px;
+ font-weight: 700;
+ padding: 0.8rem 1.25rem;
+ border-width: 1px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
+}
+
+.btn:hover,
+.btn:focus {
+ transform: translateY(-1px);
+ box-shadow: 0 12px 25px rgba(18, 32, 35, 0.12);
+}
+
+.btn-primary-brand {
+ background: linear-gradient(135deg, var(--brand-primary), #f08f5b);
+ color: #fff;
+ border-color: transparent;
+}
+
+.btn-primary-brand:hover,
+.btn-primary-brand:focus {
+ background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary));
+ color: #fff;
+}
+
+.btn-ghost {
+ background: rgba(255, 255, 255, 0.68);
+ color: var(--brand-ink);
+ border-color: rgba(18, 32, 35, 0.08);
+ backdrop-filter: blur(14px);
+}
+
+.hero-card .btn-ghost {
+ background: rgba(255, 255, 255, 0.1);
+ color: #fff8f1;
+ border-color: rgba(255, 255, 255, 0.18);
+}
+
+.card-surface,
+.calendar-card,
+.embed-shell-card,
+.detail-card,
+.dashboard-banner,
+.table-card,
+.form-card,
+.empty-state,
+.event-card {
+ background: rgba(255, 253, 249, 0.82);
+ border: 1px solid rgba(255, 255, 255, 0.9);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--brand-shadow);
+ backdrop-filter: blur(18px);
+}
+
+.hero-stats {
+ margin-top: 2rem;
+}
+
+.stat-card {
+ height: 100%;
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: var(--radius-md);
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.stat-card strong,
+.mini-event-list strong,
+.event-card h2,
+.event-card h3,
+.detail-card strong {
+ font-weight: 800;
+}
+
+.stat-card span,
+.mini-event-list small,
+.event-meta,
+.toolbar-label,
+.modal-label,
+.footer-title,
+.status-pill,
+.form-label {
+ color: rgba(255, 248, 241, 0.72);
+}
+
+.hero-panel {
+ min-height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.mini-widget {
+ position: relative;
+ width: 100%;
+ max-width: 360px;
+ padding: 1.6rem;
+ background: rgba(255, 253, 249, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.mini-label {
+ font-size: 0.78rem;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: rgba(255, 248, 241, 0.65);
+ margin-bottom: 1rem;
+}
+
+.mini-event-list {
+ display: grid;
+ gap: 0.9rem;
+}
+
+.mini-event-list li {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.9rem;
+ align-items: start;
+}
+
+.mini-event-list span {
+ min-width: 52px;
+ padding: 0.45rem 0.65rem;
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.12);
+ color: #fff8f1;
+ font-weight: 700;
+}
+
+.empty-note {
+ color: rgba(255, 248, 241, 0.76);
+ line-height: 1.6;
+}
+
+.floating-orb {
+ position: absolute;
+ border-radius: 999px;
+ filter: blur(6px);
+ opacity: 0.85;
+}
+
+.orb-one {
+ width: 118px;
+ height: 118px;
+ background: linear-gradient(145deg, rgba(243, 201, 107, 0.95), rgba(231, 111, 81, 0.6));
+ right: 12px;
+ top: 12px;
+}
+
+.orb-two {
+ width: 78px;
+ height: 78px;
+ background: linear-gradient(145deg, rgba(15, 118, 110, 0.9), rgba(255, 255, 255, 0.2));
+ left: -18px;
+ bottom: 44px;
+}
+
+.section-shell,
+.embed-section {
+ padding: 1.5rem 0 3.2rem;
+}
+
+.page-top-space {
+ padding-top: 2rem;
+}
+
+.section-soft {
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(243, 201, 107, 0.06));
+}
+
+.section-heading {
+ margin-bottom: 1.5rem;
+}
+
+.section-title {
+ font-size: clamp(2rem, 3vw, 3.1rem);
+ color: var(--brand-ink);
+ margin-top: 0.9rem;
+ margin-bottom: 0.7rem;
+}
+
+.section-copy,
+.footer-copy,
+.event-summary,
+.form-help,
+.field-error,
+.text-link {
+ color: var(--brand-muted);
+}
+
+.calendar-card {
+ padding: 1.35rem;
+}
+
+.calendar-toolbar {
+ margin-bottom: 1.2rem;
+}
+
+.calendar-title {
+ font-size: 1.9rem;
+ color: var(--brand-ink);
+}
+
+.toolbar-label,
+.modal-label,
+.event-meta,
+.footer-title,
+.form-label,
+.detail-meta-grid span {
+ color: var(--brand-muted);
+ font-weight: 600;
+ letter-spacing: 0.01em;
+}
+
+.calendar-weekdays,
+.calendar-grid {
+ display: grid;
+ grid-template-columns: repeat(7, minmax(0, 1fr));
+ gap: 0.85rem;
+}
+
+.calendar-weekdays {
+ margin-bottom: 0.85rem;
+}
+
+.calendar-weekdays span {
+ text-align: center;
+ padding: 0.35rem 0;
+ font-size: 0.88rem;
+ font-weight: 700;
+ color: var(--brand-muted);
+}
+
+.calendar-day {
+ min-height: 124px;
+ border-radius: 22px;
+ border: 1px solid rgba(18, 32, 35, 0.08);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 241, 233, 0.9));
+ padding: 0.95rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: left;
+ gap: 0.75rem;
+ color: var(--brand-ink);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+}
+
+.calendar-day:hover,
+.calendar-day:focus {
+ border-color: rgba(231, 111, 81, 0.3);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 244, 235, 1));
+ outline: none;
+}
+
+.calendar-day-number {
+ font-family: 'Manrope', sans-serif;
+ font-size: 1.45rem;
+ font-weight: 800;
+}
+
+.calendar-day.is-muted {
+ opacity: 0.5;
+}
+
+.calendar-day.is-today {
+ border-color: rgba(15, 118, 110, 0.3);
+ box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
+}
+
+.calendar-day.has-events {
+ background: linear-gradient(180deg, rgba(255, 245, 238, 1), rgba(255, 251, 244, 1));
+}
+
+.calendar-badge {
+ display: inline-flex;
+ align-items: center;
+ align-self: flex-start;
+ gap: 0.35rem;
+ padding: 0.45rem 0.7rem;
+ border-radius: 999px;
+ background: rgba(231, 111, 81, 0.12);
+ color: var(--brand-primary-dark);
+ font-size: 0.82rem;
+ font-weight: 700;
+}
+
+.calendar-badge-empty {
+ background: rgba(15, 118, 110, 0.08);
+ color: var(--brand-secondary);
+}
+
+.event-modal {
+ border: 0;
+ border-radius: 28px;
+ background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(248, 239, 230, 0.96));
+ box-shadow: 0 40px 90px rgba(18, 32, 35, 0.2);
+}
+
+.event-modal .modal-body {
+ padding-bottom: 1.6rem;
+}
+
+.modal-event-card {
+ background: rgba(255, 255, 255, 0.76);
+ border: 1px solid rgba(18, 32, 35, 0.06);
+ border-radius: 22px;
+ padding: 1.15rem;
+ margin-bottom: 0.9rem;
+}
+
+.modal-event-card:last-child {
+ margin-bottom: 0;
+}
+
+.modal-event-card h4 {
+ margin-bottom: 0.45rem;
+ font-size: 1.2rem;
+}
+
+.modal-event-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.8rem;
+ color: var(--brand-muted);
+ font-size: 0.95rem;
+ margin-bottom: 0.7rem;
+}
+
+.embed-shell-card {
+ padding: 1.2rem;
+ margin: 1.2rem auto;
+ max-width: 1200px;
+}
+
+.embed-section .calendar-card {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ padding: 0;
+}
+
+.event-card,
+.detail-card,
+.form-card,
+.dashboard-banner,
+.table-card,
+.embed-copy-card,
+.code-card,
+.empty-state {
+ padding: 1.5rem;
+}
+
+.event-card {
+ display: flex;
+ flex-direction: column;
+ gap: 0.8rem;
+}
+
+.event-date-chip,
+.status-pill {
+ display: inline-flex;
+ align-self: flex-start;
+ align-items: center;
+ justify-content: center;
+ padding: 0.45rem 0.8rem;
+ border-radius: 999px;
+ font-size: 0.82rem;
+ font-weight: 800;
+}
+
+.event-date-chip {
+ background: rgba(243, 201, 107, 0.24);
+ color: #8c6423;
+}
+
+.status-live {
+ background: rgba(15, 118, 110, 0.12);
+ color: var(--brand-secondary);
+}
+
+.status-draft {
+ background: rgba(93, 108, 112, 0.14);
+ color: var(--brand-muted);
+}
+
+.detail-meta-grid {
+ display: grid;
+ gap: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ margin: 1.5rem 0;
+}
+
+.detail-meta-grid strong {
+ display: block;
+ color: var(--brand-ink);
+ margin-top: 0.35rem;
+}
+
+.code-card {
+ background: linear-gradient(180deg, rgba(18, 32, 35, 0.96), rgba(18, 32, 35, 0.88));
+ color: #fff8f1;
+}
+
+.code-card-header strong {
+ color: #fff8f1;
+}
+
+.code-card .btn-ghost {
+ background: rgba(255, 255, 255, 0.08);
+ color: #fff8f1;
+ border-color: rgba(255, 255, 255, 0.12);
+}
+
+.code-snippet {
+ white-space: pre-wrap;
+ word-break: break-word;
+ margin-top: 1rem;
+ padding: 1.1rem;
+ border-radius: 20px;
+ background: rgba(255, 255, 255, 0.06);
+ color: #fff2df;
+}
+
+.dashboard-banner {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1.25rem;
+}
+
+.dashboard-table th {
+ color: var(--brand-muted);
+ font-weight: 700;
+}
+
+.dashboard-table td,
+.dashboard-table th {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ border-color: rgba(18, 32, 35, 0.06);
+ background: transparent;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="url"],
+input[type="datetime-local"],
+textarea,
+.form-control,
+.form-check-input {
+ border-radius: 16px;
+ border-color: rgba(18, 32, 35, 0.12);
+ padding: 0.85rem 1rem;
+ background: rgba(255, 255, 255, 0.94);
+}
+
+.form-control:focus,
+.form-check-input:focus,
+.btn:focus,
+.nav-link:focus,
+.text-link:focus {
+ border-color: rgba(15, 118, 110, 0.4);
+ box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.14);
+}
+
+.form-check-input {
+ width: 1.2rem;
+ height: 1.2rem;
+}
+
+.card-check {
+ background: rgba(243, 201, 107, 0.08);
+ border: 1px solid rgba(243, 201, 107, 0.32);
+ border-radius: 18px;
+ padding: 1rem;
+}
+
+.form-check-label {
+ margin-left: 0.45rem;
+ font-weight: 700;
+}
+
+.field-error {
+ margin-top: 0.4rem;
+ color: #b6412b;
+ font-size: 0.92rem;
+ font-weight: 600;
+}
+
+.text-link {
+ text-decoration: none;
+ font-weight: 700;
+}
+
+.site-footer {
+ padding: 0.4rem 0 2rem;
+}
+
+.footer-title {
+ color: var(--brand-ink);
+ font-weight: 800;
+}
+
+.footer-links a {
+ color: var(--brand-muted);
+ text-decoration: none;
+ font-weight: 600;
+}
+
+@media (max-width: 991.98px) {
+ .hero-card {
+ grid-template-columns: 1fr;
+ min-height: auto;
+ }
+
+ .dashboard-banner {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .calendar-weekdays,
+ .calendar-grid {
+ gap: 0.55rem;
+ }
+}
+
+@media (max-width: 767.98px) {
+ .navbar {
+ border-radius: 28px;
+ }
+
+ .hero-copy h1,
+ .section-title {
+ max-width: none;
+ }
+
+ .calendar-weekdays {
+ display: none;
+ }
+
+ .calendar-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .calendar-day {
+ min-height: 112px;
+ }
+
+ .hero-section,
+ .section-shell,
+ .embed-section {
+ padding-bottom: 2.3rem;
+ }
+}
diff --git a/staticfiles/js/calendar.js b/staticfiles/js/calendar.js
new file mode 100644
index 0000000..0d7c6c2
--- /dev/null
+++ b/staticfiles/js/calendar.js
@@ -0,0 +1,106 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const dataElement = document.getElementById('calendar-events-data');
+ const modalElement = document.getElementById('dayEventsModal');
+ let calendarEvents = {};
+
+ const escapeHtml = (value) => String(value || '')
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+
+ const safeExternalUrl = (value) => {
+ if (!value) return '';
+ try {
+ const url = new URL(value, window.location.origin);
+ return ['http:', 'https:'].includes(url.protocol) ? url.href : '';
+ } catch (error) {
+ return '';
+ }
+ };
+
+ if (dataElement) {
+ try {
+ calendarEvents = JSON.parse(dataElement.textContent);
+ } catch (error) {
+ calendarEvents = {};
+ }
+ }
+
+ if (modalElement && window.bootstrap) {
+ const modal = new window.bootstrap.Modal(modalElement);
+ const titleNode = modalElement.querySelector('[data-calendar-title]');
+ const bodyNode = modalElement.querySelector('[data-calendar-body]');
+
+ const renderEvents = (isoDate) => {
+ const selectedEvents = calendarEvents[isoDate] || [];
+ const titleDate = new Date(`${isoDate}T12:00:00`);
+ titleNode.textContent = titleDate.toLocaleDateString(undefined, {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ });
+
+ if (!selectedEvents.length) {
+ bodyNode.innerHTML = `
+
+
No event scheduled
+
This date is currently open. Check another day or revisit after the next update.
+
${escapeHtml(event.summary)}
` : '';
+ const detailUrl = escapeHtml(event.detail_url || '#');
+ const eventUrl = safeExternalUrl(event.event_url);
+ return `
+
+ ${name}
+
+ ${time}
+ ${location}
+
+ ${summary}
+
+
+ `;
+ })
+ .join('');
+ };
+
+ document.querySelectorAll('[data-calendar-date]').forEach((button) => {
+ button.addEventListener('click', () => {
+ renderEvents(button.dataset.calendarDate);
+ modal.show();
+ });
+ });
+ }
+
+ document.querySelectorAll('[data-copy-snippet]').forEach((button) => {
+ button.addEventListener('click', async () => {
+ const target = document.querySelector(button.dataset.copyTarget);
+ if (!target) return;
+ try {
+ await navigator.clipboard.writeText(target.textContent.trim());
+ const original = button.textContent;
+ button.textContent = 'Copied';
+ window.setTimeout(() => {
+ button.textContent = original;
+ }, 1600);
+ } catch (error) {
+ button.textContent = 'Copy manually';
+ }
+ });
+ });
+});