commit
dd6d8a9f8d
GPG Key ID:
A28C6F51829932B9
@ -0,0 +1,103 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Free Feature Films</title>
|
||||
<link href="styles/piracy.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">Feature Films</h1>
|
||||
<div class="blue-underline-one"><div></div></div>
|
||||
<div class="blue-underline-two"><div></div></div>
|
||||
<div class="blue-underline-three"><div></div></div>
|
||||
|
||||
<div class="flexbox-rows">
|
||||
<div class="row-one">
|
||||
<h2 class="new-releases">New Releases:</h2>
|
||||
<div class="list-new">
|
||||
<ul>
|
||||
<li>The Matrix Revolutions</li>
|
||||
<li>Return Of The King</li>
|
||||
<li>Cold Mountain</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="celebrity-title">Celebrity Spotlight:</p>
|
||||
<p class="celebrity-name">Nicole Kidman</p>
|
||||
</div>
|
||||
<div class="row-two">
|
||||
<h3>TOP 10 MOST DOWNLOADED</h3>
|
||||
<ol>
|
||||
<li>Return Of The King</li>
|
||||
<li>The Cat In The Hat</li>
|
||||
<li>The Matrix Revolutions</li>
|
||||
<li>Paycheck</li>
|
||||
<li>Cheaper By The Dozen</li>
|
||||
<li>Peter Pan</li>
|
||||
<li>Cold Mountain</li>
|
||||
<li>Master And Commander</li>
|
||||
<li>The Last Samaurai</li>
|
||||
<li>Mona Lisa Smile</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="row-three">
|
||||
<div class="favourite-downloads">
|
||||
<h3>Download Your Favourite</h3>
|
||||
<ul>
|
||||
<li>Trailers</li>
|
||||
<li>Featurettes</li>
|
||||
<li>Movie Posters</li>
|
||||
<li>Celebrity Photos</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="poll">
|
||||
<h3>Today's Celebrity Poll:</h3>
|
||||
<p>Who is your favourite Director?</p>
|
||||
<label><input type=radio name="fav">Steven Spielberg</label>
|
||||
<label><input type=radio name="fav">Martin Scorsese</label>
|
||||
<label><input type=radio name="fav">Clint Eastwood</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="genres">
|
||||
<span class="genre-title">genres:</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="item">DRAMA</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="item">COMEDY</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="item">ACTION</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="item">HORROR</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="item">WESTERN</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="item">THRILLER</span>
|
||||
</div>
|
||||
|
||||
<div id="show-only">
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-outer">
|
||||
<div class="progress-bar-box-shadow">
|
||||
<div id="progress-bar-progress" style="width: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download">
|
||||
<span class="hidden" id="download-cancelled">Download Cancelled</span>
|
||||
<button id="download">DOWNLOAD</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="download-done" class="hidden">
|
||||
<h2>Your download is done: </h2>
|
||||
<iframe width="1280" height="720" src="https://www.youtube-nocookie.com/embed/_FtE0S-IyY0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<p><a href="https://git.dbuidl.com/Snaddyvitch-Dispenser/you-wouldnt-steal-a-website">Get the code for this site from Gitea</a></p>
|
||||
</div>
|
||||
|
||||
<script src="scripts/piracy.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
"use strict";
|
||||
|
||||
let interval;
|
||||
let progress = 0;
|
||||
let download = document.getElementById("download");
|
||||
let progressBar = document.getElementById("progress-bar-progress");
|
||||
let cancelledText = document.getElementById("download-cancelled");
|
||||
let downloadDone = document.getElementById("download-done");
|
||||
let showOnCancel = document.getElementById("show-only");
|
||||
|
||||
download.addEventListener("click", function (event) {
|
||||
if (!download.classList.contains("evil")) {
|
||||
download.innerHTML = "CANCEL";
|
||||
download.classList.add("evil");
|
||||
|
||||
interval = setInterval(function() {
|
||||
progress++;
|
||||
progressBar.style.width = progress + "%";
|
||||
|
||||
if (progress === 100) {
|
||||
clearInterval(interval);
|
||||
downloadDone.classList.remove("hidden");
|
||||
}
|
||||
}, 50);
|
||||
} else {
|
||||
if (progress < 100) {
|
||||
download.classList.remove("evil");
|
||||
download.classList.add("hidden");
|
||||
download.innerHTML = "DOWNLOAD";
|
||||
clearInterval(interval);
|
||||
|
||||
progressBar.style.width = "0%";
|
||||
|
||||
cancelledText.classList.remove("hidden");
|
||||
|
||||
showOnCancel.classList.add("only-showing");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,307 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&display=swap');
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: "Arial", serif;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1200px;
|
||||
box-sizing: content-box;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-family: 'Lato', serif;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-size: 64px;
|
||||
transform: scaleX(2.79);
|
||||
text-transform: uppercase;
|
||||
width: 35.7%;
|
||||
transform-origin: 0 0;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.blue-underline-one {
|
||||
background-color: #061CE3;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.blue-underline-two {
|
||||
background-color: #0055E6;
|
||||
width: 70%;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.blue-underline-three {
|
||||
background-color: #0079F9;
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.flexbox-rows {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flexbox-rows>div {
|
||||
align-items: stretch;
|
||||
flex: 100% 1 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.flexbox-rows div:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.row-one {
|
||||
background-color: darkorange;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.new-releases {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.list-new {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.list-new>ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.list-new>ul>li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.celebrity-title {
|
||||
margin: 5px 0;
|
||||
margin-top: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.celebrity-name {
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin: 5px 0;
|
||||
margin-left: 10%;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.row-two {
|
||||
background-color: #464445;
|
||||
}
|
||||
|
||||
.row-two h3 {
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row-two ol {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.row-two li {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.row-three {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row-three>div {
|
||||
flex: calc(50% - 3px) 1 1;
|
||||
margin-bottom: 6px;
|
||||
background-color: #2D2D2D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.row-three>div:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.poll {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.poll h3 {
|
||||
margin: 5px 0;
|
||||
margin-bottom: 1px;
|
||||
margin-top: 0;
|
||||
padding-top: 2px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.poll p {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.poll label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin-left: 15%;
|
||||
text-align: left;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.favourite-downloads ul {
|
||||
list-style: none;
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.favourite-downloads li {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.favourite-downloads h3 {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.genres {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.genres .spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.genre-title {
|
||||
color: #FCA300;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
margin-top: 100px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.progress-bar-outer {
|
||||
border-top: 5px solid grey;
|
||||
border-left: 10px solid grey;
|
||||
border-right: 10px solid grey;
|
||||
border-bottom: 5px solid grey;
|
||||
border-radius: 10px;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
#progress-bar-progress {
|
||||
height: 100%;
|
||||
background: rgb(0,117,194);
|
||||
background: linear-gradient(180deg, rgba(0,117,194,1) 46%, rgba(0,0,0,1) 100%);
|
||||
transition-property: width;
|
||||
transition-delay: 0.01s
|
||||
}
|
||||
|
||||
.progress-bar-box-shadow {
|
||||
height: 20px;
|
||||
box-shadow: -3px 3px 5px 4px rgba(0,0,0,0.75) inset;
|
||||
}
|
||||
|
||||
|
||||
.download {
|
||||
margin-top: 50px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#download {
|
||||
margin: 0 auto;
|
||||
background-color: #007205;
|
||||
border: 5px outset #007205;
|
||||
border-left-width: 10px;
|
||||
font-size: 48px;
|
||||
border-right-width: 10px;
|
||||
}
|
||||
|
||||
#download:hover {
|
||||
border: 5px solid #007205;
|
||||
border-left-width: 10px;
|
||||
border-right-width: 10px;
|
||||
box-shadow: 2px 1px 5px 6px rgba(0,0,0,0.75) inset;
|
||||
}
|
||||
|
||||
#download.evil {
|
||||
border-color: #FF3700;
|
||||
background-color: #FF3700;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#download-cancelled {
|
||||
color: #FF3700;
|
||||
font-size: 48px;
|
||||
animation: flash 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% {opacity: 0;}
|
||||
24% {opacity: 0;}
|
||||
25% {opacity: 1;}
|
||||
75% {opacity: 1;}
|
||||
76% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
#download-done {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.only-showing {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
Loading…
Reference in new issue