tytd-web/index.html

308 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tesses YouTube Downloader</title>
<link rel="manifest" href="manifest.webmanifest" crossorigin="use-credentials">
<link rel="stylesheet" href="css/styles.css" crossorigin="use-credentials">
<link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="use-credentials">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-danger navbar-dark">
<div class="container">
<a href="#" data-target="home" class="navbar-brand spalnk">Tesses YouTube Downloader</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Media
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item spalink" href="#" data-target="videos">Videos</a></li>
<li><a class="dropdown-item" href="my_videos.html">My Videos</a><span class="badge badge-secondary">42</span></li>
<li><a class="dropdown-item spalink" href="#" data-target="playlists">YouTube Playlists</a></li>
<li><a class="dropdown-item spalink" href="#" data-target="personalplaylists">Personal Playlists</a></li>
</ul>
</li>
</ul>
</div>
<li class="nav-item">
<a href="#" data-target="queue" class="nav-link spalnk">Queue</a>
</li>
<li class="nav-item">
<a href="#" data-target="settings" class="nav-link spalnk">Settings</a>
</li>
<li class="nav-item">
<a href="upload.html" class="nav-link">Upload</a>
</li>
<li class="nav-item">
<a href="legacy.html" class="nav-link">Legacy Mode</a>
</li>
<li class="nav-item">
<a href="extensions.html" class="nav-link">Extensions</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="modal" tabindex="-1" role="dialog" id="modal1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="video_title_modal" class="modal-title">Video Name</h5>
</div>
<div class="modal-body">
<form>
<input type="radio" name="res" value="1" id="res-sd" checked>
<label for="res-sd">SD</label>
<br>
<input type="radio" name="res" value="0" id="res-hd">
<label for="res-hd">HD</label>
<br>
<input type="radio" name="res" value="2" id="res-au">
<label for="res-au">Audio</label>
<input type="hidden" id="video_id_modal">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="play();">Play</button>
<button type="button" class="btn btn-secondary" onclick="download();">Download</button>
</div>
</div>
</div>
</div>
<section class="bg-danger text-light p-3">
<div class="container">
<div>
<div>
<h3>
Download YouTube Videos, Playlists or Channels
</h3>
</div>
</div>
</div>
</section>
<section class="bg-light text-dark p-3">
<!-- <div class="dropdown-menu">
<a class="dropdown-item" href="#">Server Download (SD)</a>
<a class="dropdown-item" href="#">Server Download (HD)</a>
<a class="dropdown-item" href="#">Server Download (Audio Only)</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Download To Device (SD)</a>
<a class="dropdown-item" href="#">Download To Device (HD)</a>
<a class="dropdown-item" href="#">Download To Device (Audio Only)</a>
</div>-->
<div class="input-group">
<input type="text" id="download_text_box" class="form-control" placeholder="https://www.youtube.com/watch?v=il9nqWw9W3Y" aria-label="Text input with segmented dropdown button">
<select class="form-control custom-select" id="selector" style="max-width: 6em;">
<option selected value=0>YouTube</option>
<!--<option value=1>Playlist</option>
<option value=2>Channel</option>
<option value=3>User</option>-->
<option value=4>Download</option>
<option value=5>Play</option>
</select>
<select class="form-control custom-select" id="res_selector" style="max-width: 5em;">
<option selected value=1>SD</option>
<option value=0>HD</option>
<option value=2>Audio</option>
</select>
<div class="input-group-append">
<button id="download_button" type="button" class="btn btn-primary">Download</button>
</div>
</div>
</section>
<div class="page" id="home">
<!--Home Page-->
<section class="bg-danger text-light p-3" style="height: 100%;">
<div class="container">
<h3 id="date">00/00/0000</h3>
<h3 id="views">42 views - 0 likes - 0 dislikes</h3>
<hr>
Keywords: <span id="keywords"></span>
<hr>
<p id="description">
</p>
</div>
</section>
</div>
<div class="page" id="videos">
<br>
<div class="container">
<template id="video_template">
<card>
<div class="row">
<div class="col">
<img class="image" width="256" height="144">
</div>
<div class="col-8">
<h4>
<a class="video_link" style="text-decoration: none" class="text-dark">
</a></h4>
<span class="views"></span> &middot; <span class="date"></span> <br>
<span class="video_author"></span>
</div>
<div class="col-1">
<h4>
<a class="video_link_alt" style="text-decoration: none" class="text-dark">&vellip;
</a></h4>
</div>
</div>
<br>
</card>
</template>
<div id="videos_list">
</div>
</div>
</div>
<div class="page" id="playlists">
<br>
<div class="container">
<div id="playlists_list">
</div>
</div>
</div>
<div class="page" id="view_videos_list">
<br>
<div class="container">
<div id="videos_list_view">
</div>
</div>
</div>
<div class="page" id="settings">
<section class="bg-danger text-light p-3">
<div class="container">
<div>
<div>
<h3>
Settings
</h3>
</div>
</div>
</div>
</section>
<section class="bg-success text-light p-3">
<div class="container">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="enable_thumbnails">
<label class="form-check-label" for="enable_thumbnails">Enable Thumbnails</label>
</div>
Startup Page: <select class="custom-select" id="starting_page"></select>
</div>
</section>
</div>
<div class="page" id="queue">
<template id="video_template_queue">
<card>
<div class="row">
<div class="col">
<img class="image" width="256" height="144">
</div>
<div class="col-8">
<h4>
<a class="video_link" style="text-decoration: none" class="text-dark">
</a></h4>
<span class="views"></span> &middot; <span class="date"></span> <br>
<span class="video_author"></span>
</div>
<div class="col-1">
<a class="video_link_alt oi oi-trash text-dark" style="text-decoration: none">
</a>
<a class="video_link_alt_up oi oi-arrow-thick-top text-dark" style="text-decoration: none">
</a>
<a class="video_link_alt_down oi oi-arrow-thick-bottom text-dark" style="text-decoration: none">
</a>
</div>
</div>
<br>
</card>
</template>
<div class="container dragable-container" id="queue_list">
</div>
</div>
</main>
<footer class="fixed-bottom bg-danger text-light" id="footer">
<div class="container">
<h5 id="video_title" class="video_title"><a id="video_link" style="text-decoration: none" class="text-light" href="/">No Title</a> by <a id="channel_link" class="text-light" style="text-decoration: none" href="/">No Channel</a></a></h5>
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" id="progress_bar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="js/lazyload.js"></script>
<script src="js/spa.js"></script>
<script src="js/new_main.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/download_video.js"></script>
</body>
</html>