jeff-downloader/resources/views/index.edge

311 lines
17 KiB
Text
Raw Normal View History

2020-09-03 00:59:21 +02:00
<!--
What are you doing here 😳😳😳😳
I guess have fun at looking at the html, no easter egg to find here.
Come take a look here https://gitlab.com/LoicBersier/jeff-downloader for all my bad coding
-->
2019-12-03 21:18:40 +01:00
<!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">
2020-01-24 22:03:13 +01:00
<meta property="og:title" content="{{ antl.formatMessage('messages.title') }} v{{ version }}" />
2019-12-03 21:18:40 +01:00
<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">
2020-08-27 20:32:37 +02:00
<link rel="stylesheet" type="text/css" href="css/background.css">
2019-12-03 21:18:40 +01:00
<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>
2020-01-24 22:03:13 +01:00
<title>{{ antl.formatMessage('messages.title') }} v{{ version }}</title>
2019-12-03 21:18:40 +01:00
</head>
2020-08-30 19:41:17 +02:00
<body class="gradientBG has-text-light">
2020-08-27 20:32:37 +02:00
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2019-12-03 21:18:40 +01:00
<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">
2020-01-24 01:58:43 +01:00
{{ antl.formatMessage('messages.announcement') }}
2019-12-03 21:18:40 +01:00
<button class="delete" onclick="fadeout('announcement')"></button>
</div>
<div class="message-body">
@if((day == '24' || day == '25') && month == '11')
2020-01-24 01:58:43 +01:00
<p class="title">{{ antl.formatMessage('messages.eggXmas') }}</p>
2019-12-03 21:18:40 +01:00
@endif
<p class="subtitle">{{ announcement }}</p>
</div>
2020-08-27 19:57:27 +02:00
</div>
2019-12-03 21:18:40 +01:00
@endif
</div>
</section>
</header>
<section class="section has-text-centered">
<div class="container ">
<div class="downloader form">
2020-01-24 22:03:13 +01:00
<h1 class="title has-text-light">{{ antl.formatMessage('messages.title') }} v{{ version }}</h1>
2019-12-03 21:18:40 +01:00
<form name="download-form" method="POST" action="/">
{{ csrfField() }}
2020-08-27 19:57:27 +02:00
2019-12-03 21:18:40 +01:00
<div class="field is-horizontal">
<div class="field-body">
<div class="field is-horizontal">
<div class="control">
<label class="radio" for="small">
2020-08-27 19:57:27 +02:00
<input class="radio" type="radio" name="quality" id="small" value="small">
2020-01-24 01:58:43 +01:00
{{ antl.formatMessage('messages.LQ') }}
2019-12-03 21:18:40 +01:00
</label>
2020-08-27 19:57:27 +02:00
2019-12-03 21:18:40 +01:00
<label class="radio" for="high">
2020-08-27 19:57:27 +02:00
<input class="radio" type="radio" name="quality" id="high" value="high" checked>
2020-01-24 01:58:43 +01:00
{{ antl.formatMessage('messages.HQ') }}
2019-12-03 21:18:40 +01:00
</label>
2020-08-27 19:57:27 +02:00
2019-12-03 21:18:40 +01:00
<label class="checkbox" for="alt">
<input class="checkbox" type="checkbox" name="alt" id="alt" title="Use this if download dosen't work">
2020-01-24 01:58:43 +01:00
{{ antl.formatMessage('messages.altDL') }}
2019-12-03 21:18:40 +01:00
</label>
2020-08-27 19:57:27 +02:00
2019-12-03 21:18:40 +01:00
<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">
2020-01-24 01:58:43 +01:00
{{ antl.formatMessage('messages.feed') }}
2019-12-03 21:18:40 +01:00
</label>
2020-08-31 03:13:33 +02:00
<label class="checkbox" for="sponsorBlock">
<input class="checkbox" type="checkbox" name="sponsorBlock" id="sponsorBlock" title="(Using sponsor.ajay.app)">
(W.I.P) Remove sponsors of video using <a href="https://sponsor.ajay.app/">SponsorBlock</a>
</label>
2019-12-03 21:18:40 +01:00
</div>
</div>
</div>
2020-08-27 19:57:27 +02:00
</div>
2019-12-03 21:18:40 +01:00
<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">
2020-01-24 01:58:43 +01:00
<button type="button" class="downloadbtn button is-primary is-rounded" id="button" onclick="submitDownload()">{{ antl.formatMessage('messages.download') }}</button>
2019-12-03 21:18:40 +01:00
</p>
</div>
</div>
</div>
2020-08-27 19:57:27 +02:00
2019-12-03 21:18:40 +01:00
<div class="field has-addon">
<div class="control">
</div>
<div class="control">
</div>
</div>
2020-08-27 19:57:27 +02:00
<div class="field is-horizontal level">
<div class="control level-left">
2019-12-03 21:18:40 +01:00
<label class="radio" for="mp4">
<input class="radio" type="radio" name="format" value="mp4" id="mp4" checked>
2019-12-18 19:30:14 +01:00
Video?
2019-12-03 21:18:40 +01:00
</label>
2020-08-27 19:57:27 +02:00
2019-12-03 21:18:40 +01:00
<label class="radio" for="mp3">
<input class="radio" type="radio" name="format" value="mp3" id="mp3">
MP3?
</label>
2020-08-27 19:57:27 +02:00
<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">
2019-12-03 21:18:40 +01:00
FLAC?
</label>
</div>
2020-08-27 19:57:27 +02:00
<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>
2019-12-03 21:18:40 +01:00
</div>
</form>
2020-08-27 19:57:27 +02:00
<div class="container">
<div id="msg"></div>
2019-12-03 21:18:40 +01:00
@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 != "")
2020-08-27 19:57:27 +02:00
<p class="title has-text-light has-text-centered">{{ antl.formatMessage('messages.recentFeed') }}</p>
2019-12-03 21:18:40 +01:00
<section class="section">
2020-01-23 04:26:17 +01:00
<div class="columns is-vcentered is-multiline fadein">
2019-12-03 21:18:40 +01:00
@each(file in file)
2020-01-23 04:26:17 +01:00
<div class="column hvr-grow">
<div class="column box notification is-dark level">
2019-12-03 21:18:40 +01:00
<p class="subtitle">{{ file.name }}</p>
2020-01-23 04:26:17 +01:00
<div>
2020-09-02 22:47:25 +02:00
<figure class="is-4by3">
<video muted loop onmouseover="this.play();" onmouseout="this.pause();this.currentTime = 0;" oncanplay="this.muted=true;" poster="{{ file.img }}" preload="metadata">
<source src="/thumbnail/{{ file.name }}.mp4#t=0.5" >
2020-01-23 04:26:17 +01:00
<img src="{{ file.img }}" title="Your browser does not support the <video> tag">
</video>
2020-09-02 22:47:25 +02:00
</figure>
2020-01-23 04:26:17 +01:00
</div>
2019-12-03 21:18:40 +01:00
<br>
<div class="content">
2020-01-23 04:26:17 +01:00
<div class="field has-addons is-centered">
<p class="control">
2020-01-24 01:58:43 +01:00
<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>
2020-01-23 04:26:17 +01:00
</p>
2020-08-27 19:57:27 +02:00
<p class="control">
2020-01-24 01:58:43 +01:00
<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>
2020-01-23 04:26:17 +01:00
</p>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<div class="tags has-addons">
2020-01-24 01:58:43 +01:00
<span class="tag">{{ antl.formatMessage('messages.recentFormat') }}</span>
2020-01-23 04:26:17 +01:00
<span class="tag is-primary">{{ file.ext }}</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
2020-01-24 01:58:43 +01:00
<span class="tag">{{ antl.formatMessage('messages.recentSize') }}</span>
2020-01-26 02:39:03 +01:00
<span class="tag is-primary">{{ antl.formatNumber(file.size) }} {{ file.unit }}</span>
2020-01-23 04:26:17 +01:00
</div>
</div>
2020-01-26 03:18:51 +01:00
</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>
2020-01-26 03:15:22 +01:00
</div>
2019-12-03 21:18:40 +01:00
</div>
2020-01-23 04:26:17 +01:00
</div>
2019-12-03 21:18:40 +01:00
</div>
@endeach
</div>
</section>
@endif
<footer class="footer has-background-grey-dark has-text-light has-text-centered">
2020-08-31 03:13:33 +02:00
<p>Uses SponsorBlock API from <a href="https://sponsor.ajay.app/">https://sponsor.ajay.app/</a></p>
2020-01-24 01:58:43 +01:00
<p>{{ antl.formatMessage('messages.footer') }}</p>
2020-08-27 19:57:27 +02:00
@if(antl._locale == 'ar')
2020-01-24 02:38:55 +01:00
<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>
2020-01-24 02:35:37 +01:00
@else
2020-01-24 01:58:43 +01:00
<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>
2020-08-27 19:57:27 +02:00
<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>
2020-01-24 02:35:37 +01:00
@endif
2020-09-03 00:59:21 +02:00
<p><a href="legacy">{{ antl.formatMessage('messages.footer4') }}</a> - <a href="https://gitlab.com/LoicBersier/jeff-downloader">Source code</a></p>
2019-12-03 21:18:40 +01:00
</footer>
@if(month == '11')
2019-12-03 22:58:24 +01:00
<script src="JS/snow.js"></script>
2019-12-03 21:18:40 +01:00
@endif
</body>
<script>
function submitDownload() {
let frm = document.getElementsByName('download-form')[0];
frm.submit();
2020-01-24 01:58:43 +01:00
document.getElementById('msg').innerHTML = '<div class="notification is-success fadein" id="notif"></button>{{ antl.formatMessage('messages.dlStart') }}</div>';
2019-12-03 21:18:40 +01:00
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);
2020-01-24 01:58:43 +01:00
document.getElementById('msg').innerHTML = '<div class="notification is-error fadein" id="notif">{{ antl.formatMessage('messages.errorCopy') }}</div>';
2019-12-03 21:18:40 +01:00
setTimeout(() => {
2020-08-27 19:57:27 +02:00
fadeout('notif')
2019-12-03 21:18:40 +01:00
}, 2000);
});
2020-01-24 01:58:43 +01:00
document.getElementById('msg').innerHTML = '<div class="notification is-success fadein" id="notif">{{ antl.formatMessage('messages.successCopy') }}</div>';
2019-12-03 21:18:40 +01:00
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;
2020-09-02 22:47:25 +02:00
document.getElementById('sponsorBlock').disable = true;
document.getElementById('sponsorBlock').disable = false;
2019-12-03 21:18:40 +01:00
document.getElementById('mp4').checked = true;
document.getElementById('high').checked = true;
2020-09-02 22:47:25 +02:00
2019-12-03 21:18:40 +01:00
} else {
document.getElementById('small').disabled = false;
document.getElementById('mp3').disabled = false;
document.getElementById('flac').disabled = false;
}
}
2020-08-27 19:57:27 +02:00
// If user press enter do same thing as if pressing the button
2019-12-03 21:18:40 +01:00
let input = document.getElementById("URL");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("button").click();
}
});
2020-09-03 01:04:03 +02:00
console.log('%cWhat are you doing here 😳😳😳😳', 'font-size: 40px;');
2019-12-03 21:18:40 +01:00
</script>
2020-08-27 19:57:27 +02:00
</html>