-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (204 loc) · 8.54 KB
/
index.html
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="audio" content="autoplay">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The lore of Everglow, the Confluence Hegemon, and the galactic war that will decide the fate of the Milky Way.">
<meta name="author" content="Confluence Authority">
<title>Homepage - Hegemon: Everglow</title>
<link rel="icon" href="https://i.imgur.com/O81Aj4P.png" type="image/png">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<audio id="bgMusic" loop>
<source src="multimedia/Theme.mp3" type="audio/mpeg">
</audio>
<div class="video-background">
<video autoplay muted loop playsinline>
<source src="multimedia/Vid.mp4" type="video/mp4">
</video>
</div>
<!-- Header with logo and navigation -->
<header>
<div class="logo">
<a href="index.html" style="text-decoration: none; display: flex; align-items: center;">
<img src="https://i.imgur.com/wmX8oGB.png" alt="Confluence Logo" width="50">
<h1>Confluence Authority</h1>
</a>
</div>
<nav class="nav-links">
<div class="dropdown">
<a href="history.html" class="nav-link">History</a>
<div class="dropdown-content">
<a href="">Pre-2620</a>
<a href="">2620-2720</a>
<a href="">Interwar Period</a>
<a href="">2862-2873</a>
<a href="">2874</a>
<a href="">Post War</a>
</div>
</div>
<div class="dropdown">
<a href="characters.html" class="nav-link">Characters</a>
<div class="dropdown-content">
<a href="">Human Characters</a>
<a href="">Non-Human Characters</a>
</div>
</div>
<div class="dropdown">
<a href="universe.html" class="nav-link">Universe</a>
<div class="dropdown-content">
<a href="">Gallery</a>
<a href="">Broadcasts</a>
<a href="">The Xaltherans</a>
<a href="">Ascendants Deepdive</a>
<a href="">The Confluence</a>
<a href="">The Zal'kahn</a>
<a href="">The Krell</a>
<a href="">The Ashensura</a>
<a href="">Major Locations</a>
<a href="">Everglow System</a>
</div>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div class="main-content">
<h2>Hegemon</h2>
<h1>Everglow</h1>
<h3>Humanity's Greatest Struggle</h3>
<div class="main-container">
<p>
The <span class="highlight">Confluence Hegemon</span> is the ultimate testament to humanity's will to
survive, adapt, evolve, and dominate. Against insurmountable and impossible odds,
humanity once rose from the brink of extinction during the Iridian Wars.
Now, as the galaxy spirals into chaos once more, under the relentless onslaught of the genocidal
<span class="highlight">Koryx Pact</span>, only the Confluence can hold the line.
</p>
<p>
We must endure the flames of war. Or endless darkness will envelop the galaxy for all eternity.
</p>
<p>
We stand as humanity's bulwark against annihilation, with the might of
the <span class="highlight">Confluence Space Corps</span> and the
unparalleled power of the <span class="highlight">Ascendants</span>.
</p>
<p class="quote">
"The stars belong to the bold. We are humanity's boldest." - Primarch Custodian Nathaniel Dorian
</p>
</div>
<div class="container" id="confluence-pride">
<h4>Join the Confluence Space Corps. Become a Hero.</h4>
<img src="https://i.imgur.com/tNUtPef.png" alt="Confluence Propaganda Poster">
<p>
The Confluence Space Corps remains humanity's greatest achievement - its soldiers and fleets hold the line
against impossible odds. Every Marine a hero, each Ascendant a living legend - paragons of human evolution and a beacon
of hope for the galaxy's peoples.
</p>
<h4>Join the Fight!</h4>
<p>
The time has never been more dire to rally to the cause. The Hegemon needs every able body, every mind, every heart. Forge a future where humanity not only survives but thrives amidst the stars.
</p>
<p class="highlight">
FOR THE GLORY OF MANKIND. TODAY, TOMORROW, FOREVER.
</p>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="footer-text">
Authority Protects | Strength Through Obedience | Eternal Hegemony
</div>
<div class="version">Version: 1.04.2 indev-build</div>
<div class="changelog">
<a href="https://github.com/JackorSeventhen/Confluence-Authority-Website/blob/main/README.md">
Changelog
</a>
</div>
<div class="compat">
<a href="CompatWeb/inde.htm">
Compatibility Mode
</a>
</div>
<a href="https://discord.gg/Pb3JtNf2x9">
<img src="https://i.imgur.com/fy9nEQt.png" alt="Discord" class="discord-icon">
</a>
<img src="https://i.imgur.com/pPeGEEE.png" alt="Theme Toggle" class="theme-toggle" id="themeToggle">
<div class="audio-controls">
<button id="musicToggle" class="music-btn">
<span class="music-icon">🎵</span>
</button>
</div>
</footer>
<script>
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', function() {
// Change the icon
this.src = 'https://i.imgur.com/Xf6wYYS.png';
// Redirect to bright mode page
setTimeout(() => {
window.location.href = 'indexbright.html';
}, 100);
});
document.addEventListener('DOMContentLoaded', function() {
const audio = document.getElementById('bgMusic');
const musicToggle = document.getElementById('musicToggle');
// Function to get current timestamp before page unload
window.addEventListener('beforeunload', function() {
if (!audio.paused) {
localStorage.setItem('musicTime', audio.currentTime);
localStorage.setItem('musicPlaying', 'true');
}
});
function initializeMusic() {
const wasPlaying = localStorage.getItem('musicPlaying') === 'true';
const savedTime = parseFloat(localStorage.getItem('musicTime')) || '0';
audio.volume = 1;
audio.currentTime = savedTime;
if (wasPlaying) {
const playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
musicToggle.classList.add('playing');
})
.catch(error => {
console.log("Playback failed:", error);
musicToggle.classList.remove('playing');
});
}
}
updateButtonState(wasPlaying);
}
// Function to play/pause music
function toggleMusic() {
if (audio.paused) {
audio.play();
localStorage.setItem('musicPlaying', 'true');
musicToggle.classList.add('playing');
} else {
audio.pause();
localStorage.setItem('musicPlaying', 'false');
musicToggle.classList.remove('playing');
}
localStorage.setItem('musicTime', audio.currentTime);
}
function updateButtonState(isPlaying) {
if (isPlaying) {
musicToggle.classList.add('playing');
} else {
musicToggle.classList.remove('playing');
}
}
setInterval(() => {
if (!audio.paused) {
localStorage.setItem('musicTime', audio.currentTime);
}
}, '1000');
musicToggle.addEventListener('click', toggleMusic);
initializeMusic();
});
</script>
</body>
</html>