Added info/help modal.

Css/main.css

@@ -102,7 +102,7 @@ body { margin: 0; }
 
 #title-container { margin-bottom: 2px; }
 
-#other-controls-container { display: flex; width: 550px; justify-content: center; z-index: 10; }
+#other-controls-container { display: flex; width: 550px; justify-content: center; align-items: center; z-index: 10; }
 
 #select-mission { min-width: 0; }
 
@@ -132,7 +132,7 @@ body { margin: 0; }
 
 #mission-modal #mission-ids div { display: flex; align-items: center; }
 
-#modal-buttons { bottom: 0; margin-top: 10px; width: 100%; display: flex; justify-content: space-between; }
+#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; }
 
 @media screen and (max-width: 812px) {
 	#modal-container { top: 0; bottom: 0; left: 0; right: 0; transform: none; }
@@ -140,6 +140,10 @@ body { margin: 0; }
 	#other-controls-container { width: 100vw; }
 }
 
+@media screen and (max-width: 411px) {
+	#volume-range { width: 100px; }
+}
+
 @media screen and (max-height: 600px) {
 	#mission-modal #mission-detail { display: none; }
 	#mission-modal #mission-icon { display: block; max-height: 20%; margin: 10px 0 10px 0; object-fit: contain; }

Js/Main.js

@@ -202,6 +202,10 @@ function closeMissionModal(event, wasStarted) {
 	} else {
 		prevMission = document.getElementById('select-mission').value;
 	}
+	closeModal(event);
+}
+
+function closeModal(event) {
 	let cont = document.getElementById("modal-container");
 	document.getElementById("click-catcher").style.cssText = 'display: none;';
 	cont.style.cssText = 'display: none;';
@@ -334,6 +338,35 @@ function onBodyKey(event) {
 	}
 }
 
+function openHelpModal(event) {
+	let cont = document.getElementById("modal-container");
+	cont.innerHTML = `
+	<div id="mission-modal" class="modal">
+		<span class="mission-title">YameteTomete XDUPlayer V1.0</span>
+		<div>
+			<div style="margin: 5px;">Browser Support:<br/>
+			Chromium: 57+, May work earlier with no audio<br/>
+			Firefox: 52+, 57+ recommended<br/>
+			Edge: 17+, older may not have audio<br/>
+			Safari: 11+, no audio<br/>
+			IE: Never
+			</div>
+			<div style="margin: 5px;">Mobile:<br/>
+			Android: 5+, Updated Chrome/Firefox/Edge<br/>
+			iOS: 11+, no audio<br/>
+			Recommended to request desktop site
+			</div>
+		</div>
+		<div style="margin-top: auto; text-align: center;">All Symphogear content belongs to its respective owners</div>
+		<div id="modal-buttons">
+			<button onclick="closeModal(event)">Close</button>
+			<a href="https://git.poweris.moe/xduplayer.git/" target="_blank">Source</a>
+		</div>
+	</div>`;
+	document.getElementById("click-catcher").style.cssText = 'display: flex;';
+	cont.style.cssText = 'display: flex;';
+}
+
 function toggleMute(event) {
 	isMuted = !isMuted;
 	if(audio) {

Player.html

@@ -28,6 +28,7 @@
 				</div>
 				<select id="select-mission" onchange="missionDropDownChanged(event);"></select>
 				<select id="select-language" onchange="languageChanged(event);"></select>
+				<a style="font-size: 20px; margin-left: 5px;" title="info/help" onclick="openHelpModal(event)">?</a>
 			</div>
 			<!-- Im doing weird shit so that text container is always the base resolution of XDU (1334, 750). 
 			The canvas then resizes as the canvas does and the text-container uses transform scale based off this resolution -->