You wouldn't steal a website

4 months ago · dd6d8a9f8d
3 changed files with 449 additions and 0 deletions
--- a/index.html
+++ b/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>
--- a/scripts/piracy.js
+++ b/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");
+        }
+    }
+});
--- a/styles/piracy.css
+++ b/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;
+}