115 lines
3.4 KiB
HTML
115 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Video Downloading</title>
|
|
</head>
|
|
<style>
|
|
.custom-btn {
|
|
width: 145px;
|
|
height: 60px;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
padding: 10px 25px;
|
|
font-family: 'Lato', sans-serif;
|
|
font-weight: 500;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
display: inline-block;
|
|
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
|
|
7px 7px 20px 0px rgba(0,0,0,.1),
|
|
4px 4px 5px 0px rgba(0,0,0,.1);
|
|
outline: none;
|
|
}
|
|
.btn-1 {
|
|
background: rgb(6,14,131);
|
|
background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
|
|
border: none;
|
|
}
|
|
.btn-1:hover {
|
|
background: rgb(0,3,255);
|
|
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
|
|
}
|
|
input {
|
|
width: 300px;
|
|
font-size: 13px;
|
|
padding: 6px 0 4px 10px;
|
|
border: 1px solid #cecece;
|
|
background: #F6F6f6;
|
|
border-radius: 8px;
|
|
}
|
|
.col {
|
|
background: #f0f0f0; /* Цвет фона */
|
|
width: 1000px; /* Ширина блока */
|
|
padding: 10px; /* Поля */
|
|
font-size: 1.5em; /* Размер шрифта */
|
|
word-wrap: break-word; /* Перенос слов */
|
|
}
|
|
@keyframes spinner-border {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.submit-spinner {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
vertical-align: -0.125em;
|
|
border: 0.2em solid currentColor;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
-webkit-animation: .75s linear infinite spinner-border;
|
|
animation: .75s linear infinite spinner-border;
|
|
}
|
|
|
|
.submit-spinner_hide {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<body>
|
|
<form method="post" action="/submit" id="download">
|
|
<input type="text" name="link">
|
|
<button type="submit" class="custom-btn btn-1"><span class="submit-spinner submit-spinner_hide"></span> Download</button>
|
|
</form>
|
|
<div class="col">
|
|
<p> Ссылка для скачивания:</p>
|
|
<br>
|
|
<a id="result" href="" download></a>
|
|
<div class="loader">
|
|
<div class="loader_inner"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
function sendForm() {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', document.forms.download.action);
|
|
xhr.responseType = 'json';
|
|
xhr.onload = () => {
|
|
document.forms.download.querySelector('[type="submit"]').disabled = false;
|
|
document.forms.download.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
|
|
if (xhr.status !== 200) {
|
|
return;
|
|
}
|
|
const response = xhr.response;
|
|
result.innerHTML = xhr.response.result;
|
|
result.href = xhr.response.result;
|
|
}
|
|
xhr.onerror = () => {
|
|
document.forms.download.querySelector('[type="submit"]').disabled = false;
|
|
document.forms.download.querySelector('.submit-spinner').classList.add('submit-spinner_hide');
|
|
};
|
|
document.forms.download.querySelector('[type="submit"]').disabled = true;
|
|
document.forms.download.querySelector('.submit-spinner').classList.remove('submit-spinner_hide');
|
|
xhr.send(new FormData(document.forms.download));
|
|
}
|
|
// при отправке формы
|
|
document.forms.download.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
sendForm();
|
|
});
|
|
</script>
|
|
</html> |