139 lines
No EOL
6.8 KiB
HTML
139 lines
No EOL
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Event Calendar</title>
|
|
<link rel="stylesheet" href="style.css?v=3">
|
|
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Login Gate -->
|
|
<div id="login-gate" class="container">
|
|
<h1>Welcome to Event Calendar</h1>
|
|
<p>Keep track of your schedule with ease. Sign in to start managing your events.</p>
|
|
<button onclick="login()" class="btn-primary">Login with Authentik</button>
|
|
</div>
|
|
|
|
<!-- App Content (Hidden until auth) -->
|
|
<div id="app-content" class="container">
|
|
<header>
|
|
<div class="header-left">
|
|
<h1>Calendar Events</h1>
|
|
</div>
|
|
<nav class="view-switch">
|
|
<a href="/" class="active">List View</a>
|
|
<a href="/calendar.html">Calendar View</a>
|
|
</nav>
|
|
<div id="auth-status">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
</header>
|
|
|
|
<header class="page-header">
|
|
<h1>My Events</h1>
|
|
<button id="add-event-btn" class="btn-primary">Add Event</button>
|
|
</header>
|
|
|
|
<main id="event-list" class="event-grid">
|
|
<!-- Events will be loaded here -->
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal for adding/editing events -->
|
|
<div id="event-modal" class="modal">
|
|
<div class="modal-content">
|
|
<h2 id="modal-title">Add Event</h2>
|
|
<form id="event-form">
|
|
<input type="hidden" id="event-id">
|
|
<div class="form-group">
|
|
<label for="event-name">Name</label>
|
|
<input type="text" id="event-name" required placeholder="Enter event name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>From</label>
|
|
<div class="datetime-input-group">
|
|
<div class="date-input-container">
|
|
<input type="number" id="event-from-day" placeholder="DD" min="1" max="31">
|
|
<span>.</span>
|
|
<input type="number" id="event-from-month" placeholder="MM" min="1" max="12">
|
|
<span>.</span>
|
|
<input type="number" id="event-from-year" placeholder="YYYY" min="2000" max="2100">
|
|
<input type="date" id="event-from-picker" class="hidden-picker">
|
|
<button type="button" class="calendar-btn"
|
|
onclick="document.getElementById('event-from-picker').showPicker()">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2"
|
|
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="time-spinner" id="event-from-spinner">
|
|
<div class="spinner-highlight"></div>
|
|
<div class="spinner-column hours" id="event-from-hours"></div>
|
|
<div class="spinner-separator">:</div>
|
|
<div class="spinner-column minutes" id="event-from-minutes"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>To</label>
|
|
<div class="datetime-input-group">
|
|
<div class="date-input-container">
|
|
<input type="number" id="event-to-day" placeholder="DD" min="1" max="31">
|
|
<span>.</span>
|
|
<input type="number" id="event-to-month" placeholder="MM" min="1" max="12">
|
|
<span>.</span>
|
|
<input type="number" id="event-to-year" placeholder="YYYY" min="2000" max="2100">
|
|
<input type="date" id="event-to-picker" class="hidden-picker">
|
|
<button type="button" class="calendar-btn"
|
|
onclick="document.getElementById('event-to-picker').showPicker()">
|
|
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2"
|
|
fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="time-spinner" id="event-to-spinner">
|
|
<div class="spinner-highlight"></div>
|
|
<div class="spinner-column hours" id="event-to-hours"></div>
|
|
<div class="spinner-separator">:</div>
|
|
<div class="spinner-column minutes" id="event-to-minutes"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="button" id="cancel-btn" class="btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn-primary">Save Event</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirm-modal" class="modal">
|
|
<div class="modal-content confirm-modal-content">
|
|
<h3>Are you sure?</h3>
|
|
<p>Do you really want to delete this event? This action cannot be undone.</p>
|
|
<div class="modal-actions">
|
|
<button id="confirm-cancel-btn" class="btn-secondary">Cancel</button>
|
|
<button id="confirm-delete-btn" class="btn-primary"
|
|
style="background-color: var(--danger);">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js?v=3"></script>
|
|
</body>
|
|
|
|
</html> |