jeff-downloader/resources/views/index.edge
2020-08-30 19:41:17 +02:00

292 lines
16 KiB
Text

<!DOCTYPE html>
<html class="has-background-grey-dark" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta property="og:type" content="website">
<meta property="og:title" content="{{ antl.formatMessage('messages.title') }} v{{ version }}" />
<meta property="og:description" content="A simple video downloader without any ad or tracking." />
<meta property="og:url" content="https://namejeff.xyz/" />
<meta property="og:image" content="https://namejeff.xyz/asset/jeff.png" />
<meta name="theme-color" content="#3b2ccf" />
<link rel="icon" href="/asset/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="asset/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/background.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<title>{{ antl.formatMessage('messages.title') }} v{{ version }}</title>
</head>
<body class="gradientBG has-text-light">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<header>
<section class="section" id="announcement">
<div class="container">
@if(announcement || (day == '24' || day == '25') && month == '11')
<div class="message is-info">
<div class="message-header">
{{ antl.formatMessage('messages.announcement') }}
<button class="delete" onclick="fadeout('announcement')"></button>
</div>
<div class="message-body">
@if((day == '24' || day == '25') && month == '11')
<p class="title">{{ antl.formatMessage('messages.eggXmas') }}</p>
@endif
<p class="subtitle">{{ announcement }}</p>
</div>
</div>
@endif
</div>
</section>
</header>
<section class="section has-text-centered">
<div class="container ">
<div class="downloader form">
<h1 class="title has-text-light">{{ antl.formatMessage('messages.title') }} v{{ version }}</h1>
<form name="download-form" method="POST" action="/">
{{ csrfField() }}
<div class="field is-horizontal">
<div class="field-body">
<div class="field is-horizontal">
<div class="control">
<label class="radio" for="small">
<input class="radio" type="radio" name="quality" id="small" value="small">
{{ antl.formatMessage('messages.LQ') }}
</label>
<label class="radio" for="high">
<input class="radio" type="radio" name="quality" id="high" value="high" checked>
{{ antl.formatMessage('messages.HQ') }}
</label>
<label class="checkbox" for="alt">
<input class="checkbox" type="checkbox" name="alt" id="alt" title="Use this if download dosen't work">
{{ antl.formatMessage('messages.altDL') }}
</label>
<label class="checkbox" for="feed">
<input class="checkbox" type="checkbox" name="feed" id="feed" title="Use this if you don't want the video you are downloading to be public">
{{ antl.formatMessage('messages.feed') }}
</label>
</div>
</div>
</div>
</div>
<div class="field-body">
<div class="field is-expanded">
<div class="field has-addons">
<p class="control is-expanded">
<input type="text" id="URL" name="URL" class="downloadurl input is-rounded" placeholder="Link">
</p>
<p class="control">
<button type="button" class="downloadbtn button is-primary is-rounded" id="button" onclick="submitDownload()">{{ antl.formatMessage('messages.download') }}</button>
</p>
</div>
</div>
</div>
<div class="field has-addon">
<div class="control">
</div>
<div class="control">
</div>
</div>
<div class="field is-horizontal level">
<div class="control level-left">
<label class="radio" for="mp4">
<input class="radio" type="radio" name="format" value="mp4" id="mp4" checked>
Video?
</label>
<label class="radio" for="mp3">
<input class="radio" type="radio" name="format" value="mp3" id="mp3">
MP3?
</label>
<label class="radio" for="flac" title="This is pure placebo">
<input class="radio" type="radio" name="format" value="flac" id="flac" title="This is pure placebo">
FLAC?
</label>
</div>
<div class="field-body level-right">
<div class="field is-horizontal">
<div class="control">
<span>Proxy options:</span>
<label class="radio" for="none">
<input class="radio" type="radio" name="proxy" value="none" id="none" checked>
None
</label>
@each(proxy in proxy)
<label class="radio" for="{{ proxy.ip }}">
<input class="radio" type="radio" name="proxy" value="{{ proxy.ip }}" id="{{ proxy.ip }}">
{{ proxy.ip.substring(0, proxy.ip.length - 5) }} - {{ proxy.country }}
</label>
@endeach
</div>
</div>
</div>
</div>
</form>
<div class="container">
<div id="msg"></div>
@if(error)
<div class="notification is-danger fadein" id="error">
<button class="delete" onclick="fadeout('error')"></button>
{{ errormsg }}
</div>
@endif
</div>
</div>
</div>
</section>
@if(file != "")
<p class="title has-text-light has-text-centered">{{ antl.formatMessage('messages.recentFeed') }}</p>
<section class="section">
<div class="columns is-vcentered is-multiline fadein">
@each(file in file)
<div class="column hvr-grow">
<div class="column box notification is-dark">
<p class="subtitle">{{ file.name }}</p>
<div>
<video muted loop onmouseover="this.play()" onmouseout="this.pause();" oncanplay="this.muted=true" poster="{{ file.img }}" preload="metadata">
<source src="{{ file.location }}#t=0.5" >
<img src="{{ file.img }}" title="Your browser does not support the <video> tag">
</video>
</div>
<br>
<div class="content">
<div class="field has-addons is-centered">
<p class="control">
<a class="button is-link is-rounded" href="{{ file.location }}" download>{{ antl.formatMessage('messages.recentDownload') }}<i class="fas fa-fw fa-file-download" aria-hidden="true"></i></a>
</p>
<p class="control">
<button class="button is-link is-rounded" onclick="toClipboard('https:\/\/namejeff.xyz\/{{ file.location }}')">{{ antl.formatMessage('messages.recentCopy') }}<i class="fas fa-fw fa-clipboard" aria-hidden="true"></i></button>
</p>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<div class="tags has-addons">
<span class="tag">{{ antl.formatMessage('messages.recentFormat') }}</span>
<span class="tag is-primary">{{ file.ext }}</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">{{ antl.formatMessage('messages.recentSize') }}</span>
<span class="tag is-primary">{{ antl.formatNumber(file.size) }} {{ file.unit }}</span>
</div>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag">{{ antl.formatMessage('messages.recentDate') }}</span>
<span class="tag is-primary">{{ antl.formatDate(file.date) }}</span>
</div>
</div>
</div>
</div>
@endeach
</div>
</section>
@endif
<footer class="footer has-background-grey-dark has-text-light has-text-centered">
<p>{{ antl.formatMessage('messages.footer') }}</p>
@if(antl._locale == 'ar')
<bdi><p>{{ antl.formatMessage('messages.footer2p1') }} <a href="https://github.com/rg3/youtube-dl/">youtube-dl</a> - {{ antl.formatMessage('messages.footer2p2') }} <a href="https://discordapp.com/oauth2/authorize?client_id=377563711927484418&scope=bot&permissions=0">Haha yes</a> & <a href="https://twitter.com/ExplosmR">ExplosmRCG twitter bot</a> - {{ antl.formatMessage('messages.footer2p3') }}: {{ viewCounter }} - {{ antl.formatMessage('messages.footer2p4') }} <a href="https://discord.gg/cNRh5JQ">Supositware#1616</a> {{ antl.formatMessage('messages.footer2p5') }} </bdi></p>
<bdi><p>{{ antl.formatMessage('messages.footer3p1') }} <a href="https://www.paypal.me/supositware">Paypal</a> {{ antl.formatMessage('messages.footer3p2') }} <a href="https://basicattentiontoken.org/">BAT</a> {{ antl.formatMessage('messages.footer3p3') }} <a href="https://brave.com/nam120">Brave Browser </a> </bdi>
@else
<p>{{ antl.formatMessage('messages.footer2p1') }} <a href="https://github.com/rg3/youtube-dl/">youtube-dl</a> - {{ antl.formatMessage('messages.footer2p2') }} <a href="https://discordapp.com/oauth2/authorize?client_id=377563711927484418&scope=bot&permissions=0">Haha yes</a> & <a href="https://twitter.com/ExplosmR">ExplosmRCG twitter bot</a> - {{ antl.formatMessage('messages.footer2p3') }}: {{ viewCounter }} - {{ antl.formatMessage('messages.footer2p4') }} <a href="https://discord.gg/cNRh5JQ">Supositware#1616</a> {{ antl.formatMessage('messages.footer2p5') }}</p>
<p>{{ antl.formatMessage('messages.footer3p1') }} <a href="https://www.paypal.me/supositware">Paypal</a> {{ antl.formatMessage('messages.footer3p2') }} <a href="https://basicattentiontoken.org/">BAT</a> {{ antl.formatMessage('messages.footer3p3') }} <a href="https://brave.com/nam120">Brave Browser </a>
@endif
<p><a href="legacy">{{ antl.formatMessage('messages.footer4') }}</a></p>
</footer>
@if(month == '11')
<script src="JS/snow.js"></script>
@endif
</body>
<script>
function submitDownload() {
let frm = document.getElementsByName('download-form')[0];
frm.submit();
document.getElementById('msg').innerHTML = '<div class="notification is-success fadein" id="notif"></button>{{ antl.formatMessage('messages.dlStart') }}</div>';
setTimeout(() => {
fadeout('notif')
}, 2000);
frm.reset();
return false;
}
function fadeout(id) {
document.getElementById(id).classList.add('fadeout');
setTimeout(() => {
let element = document.getElementById(id);
element.parentNode.removeChild(element);
}, 2000);
}
function toClipboard(text) {
navigator.clipboard.writeText(text)
.catch(err => {
console.error(err);
document.getElementById('msg').innerHTML = '<div class="notification is-error fadein" id="notif">{{ antl.formatMessage('messages.errorCopy') }}</div>';
setTimeout(() => {
fadeout('notif')
}, 2000);
});
document.getElementById('msg').innerHTML = '<div class="notification is-success fadein" id="notif">{{ antl.formatMessage('messages.successCopy') }}</div>';
setTimeout(() => {
fadeout('notif')
}, 2000);
}
// If alt download block other settings since they don't work anyway
document.getElementById('alt').onclick = function() {
if(document.getElementById('alt').checked) {
document.getElementById('small').disabled = true;
document.getElementById('small').checked = false;
document.getElementById('mp3').disabled = true;
document.getElementById('mp3').checked = false;
document.getElementById('flac').disabled = true;
document.getElementById('flac').checked = false;
document.getElementById('mp4').checked = true;
document.getElementById('high').checked = true;
} else {
document.getElementById('small').disabled = false;
document.getElementById('mp3').disabled = false;
document.getElementById('flac').disabled = false;
}
}
// If user press enter do same thing as if pressing the button
let input = document.getElementById("URL");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("button").click();
}
});
</script>
</html>