308 lines
12 KiB
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> · <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">⋮
|
|
</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> · <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>
|