-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathevent.html
More file actions
148 lines (130 loc) · 6.52 KB
/
Copy pathevent.html
File metadata and controls
148 lines (130 loc) · 6.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Compass World | Event Archive</title>
<!-- SEO -->
<meta name="description" content="Browse the Compass World event archive — mission logs, key battles, and pivotal moments in the world's history." />
<meta name="keywords" content="Compass World, events, event archive, mission logs, battles, history, lore, timeline" />
<meta name="author" content="Compass World" />
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Compass World" />
<meta property="og:title" content="Compass World | Event Archive" />
<meta property="og:description" content="Browse the Compass World event archive — mission logs, key battles, and pivotal moments in the world's history." />
<meta property="og:image" content="contents/indexphoto/rotate.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Compass World | Event Archive" />
<meta name="twitter:description" content="Browse the Compass World event archive — mission logs, key battles, and pivotal moments in the world's history." />
<meta name="twitter:image" content="contents/indexphoto/rotate.png" />
<link rel="icon" type="image/x-icon" href="contents/indexphoto/rotate.png" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Bangers&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/event.css" />
<script defer src="assets/scripts/components.js"></script>
<script src="assets/scripts/heroJson.js"></script>
<script src="assets/scripts/villainJson.js"></script>
<script src="assets/scripts/eventsData.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script defer src="assets/scripts/event.js"></script>
<script defer src="assets/scripts/translate.js"></script>
<script defer src="assets/scripts/animations.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body class="bg-dark text-white">
<div id="nav-placeholder"></div>
<div id="google_translate_element" class="container mt-3" aria-label="Language selector"></div>
<header class="container py-4 text-center">
<h1 class="display-4 text-warning mb-2">Event Archive</h1>
<p class="lead text-secondary mb-0">Cinematic records from the Compass World timeline</p>
</header>
<main id="event-body" class="container pb-5">
<section class="event-banner mb-4" data-animate="reveal">
<img id="event-banner-image" src="contents/historyImg/2023.webp" alt="Event banner" />
<div class="event-banner-overlay"></div>
<div class="event-banner-content">
<h2 id="event-title" class="h2 mb-1">Loading event...</h2>
<div id="event-subtitle" class="event-subtitle">Mission Archive</div>
</div>
</section>
<section class="row g-4" data-animate="reveal">
<div class="col-12 col-lg-4">
<article class="glass p-3 rounded-4 h-100">
<h3 class="h5 text-warning mb-3"><i class="bi bi-table me-1"></i>Quick Info</h3>
<table class="quick-info-table" aria-label="Quick event information">
<tbody>
<tr><th>Date</th><td id="event-date">-</td></tr>
<tr><th>Location</th><td id="event-location">-</td></tr>
<tr><th>Result</th><td id="event-result">-</td></tr>
</tbody>
</table>
</article>
</div>
<div class="col-12 col-lg-8">
<article class="glass p-3 rounded-4 h-100">
<h3 class="h5 text-warning mb-3"><i class="bi bi-journal-text me-1"></i>The Narrative</h3>
<div class="d-grid gap-3">
<section class="narrative-block">
<h3>Prelude</h3>
<p id="event-prelude" class="mb-0 text-secondary"></p>
</section>
<section class="narrative-block">
<h3>The Clash</h3>
<p id="event-clash" class="mb-0 text-secondary"></p>
</section>
<section class="narrative-block">
<h3>Aftermath</h3>
<p id="event-aftermath" class="mb-0 text-secondary"></p>
</section>
</div>
</article>
</div>
</section>
<section class="row g-4 mt-1" data-animate="reveal">
<div class="col-12 col-lg-8">
<article class="glass p-3 rounded-4">
<h3 class="h5 text-warning mb-3"><i class="bi bi-people me-1"></i>Participants</h3>
<div id="event-participants" class="participants-wrap"></div>
</article>
</div>
<div class="col-12 col-lg-4">
<article class="glass p-3 rounded-4 h-100">
<h3 class="h5 text-warning mb-3"><i class="bi bi-box-seam me-1"></i>Items</h3>
<div id="event-items" class="items-wrap"></div>
</article>
</div>
</section>
<section class="glass p-3 rounded-4 mt-4" data-animate="reveal">
<h3 class="h5 text-warning mb-3"><i class="bi bi-collection me-1"></i>All Event Logs</h3>
<div id="all-events" class="event-list-grid"></div>
</section>
</main>
<footer class="site-footer py-4 mt-auto border-top-dark">
<div class="container footer-layout">
<div class="footer-meta text-secondary small">
<div>© <span id="year"></span> Compass World. All rights reserved.</div>
</div>
<div class="footer-logo">
<img src="contents/art2025/symbol.png" alt="Compass symbol" class="logo-glow" loading="lazy" />
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1LV563TQEJ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-1LV563TQEJ');
</script>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>