commit
dd6d8a9f8d
GPG Key ID:
A28C6F51829932B9
3 changed files with 449 additions and 0 deletions
@ -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