-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
118 lines (115 loc) · 5.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube Video Downloader Online</title>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="shortcut icon" href="./youtubedownloadericon.png" type="image/png">
</head>
<body>
<header>
<img src="assets/images/youtubedownloader_navBaricon.png" alt="">
<h3>YouTube Downloader</h3>
<h5 >Beta Version!</h5>
</header>
<div class="container">
<h1 id="main-title">Paste the video <em>"URL"</em> in Search...</h1>
<div class="search-container">
<input type="text" class="search-input" id="searchInput" placeholder="Search...">
<span class="clear-icon" id="clear-icon" onclick="clearSearch()">✖</span>
<button type="button" class="search-button" id="search-button">DOWNLOAD</button>
</div>
<div class="norton">
<p>Scanned by</p>
<img src="assets/images/norton.svg">
<p>Norton<sup>TM</sup> Safe Web</p>
</div>
<!-- Loader container -->
<div id="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div id="error-code">
<h1 >Sorry Link Error! <h3>Kindly
Search Again with this link format: <em>youtube.com/watch?v=dQw4w9WgXcQ</em>
</h3>
</h1>
</div>
<!-- Connection Error -->
<div id="connection-error" >
<h1>Sorry Connection Error! <h3>Kindly
Check Your Internet Connection and then <strong>retry!</strong>
</h3>
</h1>
</div>
<div id="downloadContent-container">
<!-- Download Box -->
<div id="download-box">
<div id="image-container">
<img id="thumbnail-img" alt="" srcset="">
</div>
<div id="right-content">
<div id="title"></div>
<div id="duration"></div>
</div>
<div id="downloadBtn-container">
<div id="options-container">
<div class="dropdown-container">
<button class="dropdown-button" id="dropdownButton">
<div class="dropdown-arrow"></div>
</button>
<div class="dropdown-content" id="dropdownContent">
</div>
</div>
<button class="submit-button" id="download-btn">DOWNLOAD</button>
</div>
</div>
</div>
</div>
<div class="how-to-use-youtube-downloader">
<h2 class="top-green-border">How to Use the YouTube Downloader Online?</h2>
<p>With the YouTube Video Downloader Online, effortlessly capture your favorite videos and
music from the web without the need for extra software. Experience the convenience of online
video downloading without any added complications.</p>
<p>Whether it's videos, TV shows, or sports highlights, YouTube Downloader makes it easy. Just paste the
video URL into the provided field and click the Download button. For an even smoother
experience, try our Chrome extension tailored for easy video downloads.</p>
<h2>Save Videos in High-Quality MP4 Format</h2>
<p>Streaming videos are great when you have a high-speed internet connection. But for those
moments offline, you might want a reliable solution.</p>
<p>Our downloader lets you secure videos in crystal-clear high-definition, ready to be saved as
MP4 files for your viewing pleasure.</p>
</div>
<h2>Complete Tutorial: Effortlessly Download Videos Online in MP4 Format with HD
Quality</h2>
<div class="video-download-tutorial">
<div class="tutorial-steps">
<p><strong>Start by Copying the URL from </strong> of the video you're interested, from
<strong><a href="https://www.youtube.com/" target="_blank"><img width="18ch"
src="assets/images/youtube-logo.svg" alt=""> YouTube.com</a></strong>.
Then, back to this page and paste this URL into the provided input field (Search Box).
Hit "Enter" or select the "Download" button adjacent to the field to proceed.
</p>
<div class="how-to-use-middle-arrow"></div>
</div>
<div class="tutorial-img">
<img src="assets/images/step-to-download.png" alt="Step 1: Copy URL">
</div>
</div>
</div>
<footer>
<h4>© Copyright 2024 , Sharoon Honey Developement , Contact Us: <a
href="mailto:engr.sharoonhoney@gmail.com">engr.sharoonhoney@gmail.com</a></h4>
<!-- scripts -->
<script>
function toggleMenu() {
var menuItems = document.querySelector('.menu-items');
menuItems.style.display = (menuItems.style.display === 'block') ? 'none' : 'block';
}
</script>
<script type="module" src="assets/js/logic.js"></script>
</footer>
</body>
</html>