Browse Source

You wouldn't steal a website

master
Conor 4 months ago
commit
dd6d8a9f8d
Signed by: Snaddyvitch-Dispenser GPG Key ID: A28C6F51829932B9
  1. 103
      index.html
  2. 39
      scripts/piracy.js
  3. 307
      styles/piracy.css

103
index.html

@ -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>

39
scripts/piracy.js

@ -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");
}
}
});

307
styles/piracy.css

@ -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…
Cancel
Save