simple about modal

index.html

@@ -15,6 +15,9 @@
 		<!-- Material Design Bootstrap -->
 		<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
 
+		<!-- EmojiCSS -->
+		<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+
 		<!-- Cerebral CSS -->
 		<link rel="stylesheet" href="style.css">
 
@@ -40,6 +43,7 @@
 							</div>
 							<div class="col-lg-3 text-center">
 								<button type="submit" class="btn btn-primary" value="Download" id="download">Download <i class="fa fa-cloud-download ml-2"></i></button>
+								<a href="#aboutModal" data-toggle="modal" ><i class="fa fa-question-circle" style="font-size:20px"></i></a>
 							</div>
 						</div>
 					</div>
@@ -50,6 +54,82 @@
 			</div>
 		</div>
 
+		<div class="modal fade right" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel" aria-hidden="true">
+			<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<p class="heading lead">About</p>
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true" class="white-text">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<p class="h5 mt-1">A simple, responsive YouTube video downloading client</p>
+						<p class="mt-1">Made by Gerald Wu, powered by <code>youtube-dl</code>.</p>
+
+						<a data-toggle="collapse" href="#how" aria-expanded="false" aria-controls="how">
+							How does this work?
+						</a>
+						<div class="collapse" id="how">
+							<div class="mt-3">
+								Simply enter the YouTube URL you want to download and hit the 'download' button. After a few moments, a download link will appear with your video.
+							</div>
+						</div>
+
+						<p class="mt-2"></p>
+
+						<a data-toggle="collapse" href="#reallyhow" aria-expanded="false" aria-controls="how">
+							No really, <b><i>how does this work?</i></b>
+						</a>
+						<div class="collapse" id="reallyhow">
+							<div class="mt-3">
+								When you hit download, the page sends an AJAX request to a server-side php file, along with the URL you entered. This URL is passed on to a shell script that runs server side to cache the video using the <code>youtube-dl</code> program.<br>
+								After it's cached, the URL is passed back to client for you to download. The file remains cached until midnight, when a cronjob clears the cache folder.<br>
+								If you want to delve into the code yourself, the source code is available on GitHub <a href="https://github.com/98WuG/youtube-dl-web">here</a>. Or, you can close this box and click the GitHub triangle in the upper right-hand corner.
+							</div>
+						</div>
+
+						<p class="mt-2"></p>
+
+						<a data-toggle="collapse" href="#shell" aria-expanded="false" aria-controls="how">
+							Why in the <b>[expletive]</b> did you use a shell script instead of Python?
+						</a>
+						<div class="collapse" id="shell">
+							<div class="mt-3">
+								Because I don't know Python <i class="em em-slightly_smiling_face" style="font-size:11px"></i>. Although Python conversion is a future plan!<br>
+								I'm following in the footsteps of you, Alex Wang.
+							</div>
+						</div>
+
+						<p class="mt-2"></p>
+
+						<a data-toggle="collapse" href="#why" aria-expanded="false" aria-controls="how">
+							Why did you make this?
+						</a>
+						<div class="collapse" id="why">
+							<div class="mt-3">
+								I wanted an internet-connected, self-hosted YouTube downloading service. While I could use vanilla <code>youtube-dl</code>, I won't always have access to a machine with it installed. And other online YouTube downloading sites are sketchy and ad-ridden, to put it mildly. I can't really trust them. Thus, this project was born.<br>
+								Also, it was a nice exercise to get myself more familiar with fundamental web development.
+							</div>
+						</div>
+
+						<p class="mt-2"></p>
+
+						<a data-toggle="collapse" href="#DOS" aria-expanded="false" aria-controls="how">
+							I can DOS your site.
+						</a>
+						<div class="collapse" id="DOS">
+							<div class="mt-3">
+								Yes, I'm aware you can. Good on you. I can as well. You're not proving anything to yourself or anyone besides being able to ruin a free, open-source web service. Please don't do that. I'm sure you have better things to do with your life.
+							</div>
+						</div>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+					</div>
+			</div>
+		</div>
+
 		<!-- SCRIPTS -->
 		<!-- JQuery -->
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>