Commit e7c60b70 authored by 98WuG's avatar 98WuG
Browse files

simple about modal

parent 97eafec1
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment