Init

aphexdotdev · Apr 27, 2024 · 6f1406e · 6f1406e
commit 6f1406e
Show file tree

Hide file tree

Showing 24 changed files with 509 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,198 @@
+/* Setup */
+@font-face {
+    font-family: 'ULTRAKILL';
+    src: url('../font/VCR_OSD.ttf');
+}
+
+/* Variables */
+:root {
+    --primary: #fe0000;
+    --shadow: #420600;
+    --highlight: #fa7218;
+    --textbox: #2b2a33;
+}
+
+body {
+    font-family: 'ULTRAKILL';
+    font-size: 20px;
+    color: aliceblue;
+    background-image: url('../img/bg.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    text-align: center;
+}
+
+button {
+    font-family: 'ULTRAKILL';
+    font-size: 20px;
+    width: 130px;
+    height: 50px;
+    background: linear-gradient(45deg, transparent 5%, var(--primary) 5%);
+    border: 0;
+    color: white;
+    letter-spacing: 3px;
+    border-top: solid var(--highlight) 4px;
+    border-right: solid var(--shadow) 4px;
+    filter: brightness(100%);
+    transition: 0.3s;
+    text-shadow: 2px 2px black;
+}
+
+button:hover {
+    cursor: pointer;
+    filter: brightness(70%);
+}
+
+/* File input */
+#inputFile {
+    width: 230px;
+}
+
+/* Grid */
+.parent {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 20px;
+    grid-row-gap: 10px;
+    height: 260px;
+}
+
+.topTextbox {
+    grid-area: 1 / 4 / 2 / 5;
+}
+
+.bottomTextbox {
+    grid-area: 2 / 4 / 3 / 5;
+}
+
+.attributesTextbox {
+    grid-area: 3 / 4 / 4 / 5;
+}
+
+.exportBtn {
+    grid-area: 2 / 5 / 4 / 6;
+}
+
+.previewBtn {
+    grid-area: 1 / 5 / 3 / 6;
+}
+
+.file {
+    grid-area: 1 / 3 / 2 / 4;
+}
+
+/* Text fields */
+#inputBottom,
+#inputTop {
+    height: 20px;
+}
+
+input {
+    border: none;
+    outline: none;
+    border-bottom: .2em solid var(--primary);
+    border-radius: .2em .2em 0 0;
+    padding: .4em;
+    color: white;
+    background-color: var(--textbox);
+    font-family: 'ULTRAKILL';
+    font-size: 18px;
+}
+
+img {
+    border-radius: 4px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+img:hover {
+    transition: 0.3s;
+    filter: brightness(80%);
+}
+
+/* Modal box */
+.bgs {
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    padding-top: 20px;
+    height: 60%;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+    -webkit-animation-name: fadeIn;
+    -webkit-animation-duration: 0.4s;
+    animation-name: fadeIn;
+    animation-duration: 0.4s
+}
+
+.bgs {
+    position: fixed;
+    bottom: 0;
+    background-color: #fefefe;
+    width: 100%;
+    -webkit-animation-name: slideIn;
+    -webkit-animation-duration: 0.4s;
+    animation-name: slideIn;
+    animation-duration: 0.4s
+}
+
+/* GitHub logo */
+.git {
+    float: right;
+}
+
+/* Add Animation */
+@-webkit-keyframes slideIn {
+    from {
+        bottom: -300px;
+        opacity: 0
+    }
+
+    to {
+        bottom: 0;
+        opacity: 1
+    }
+}
+
+@keyframes slideIn {
+    from {
+        bottom: -300px;
+        opacity: 0
+    }
+
+    to {
+        bottom: 0;
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0
+    }
+
+    to {
+        opacity: 1
+    }
+}
diff --git a/font/VCR_OSD.ttf b/font/VCR_OSD.ttf
diff --git a/img/P.png b/img/P.png
diff --git a/img/backgrounds/1-1.jpg b/img/backgrounds/1-1.jpg
diff --git a/img/backgrounds/1-4 (2).jpg b/img/backgrounds/1-4 (2).jpg
diff --git a/img/backgrounds/1-4 (3).jpg b/img/backgrounds/1-4 (3).jpg
diff --git a/img/backgrounds/1-4.jpg b/img/backgrounds/1-4.jpg
diff --git a/img/backgrounds/4-2.jpg b/img/backgrounds/4-2.jpg
diff --git a/img/backgrounds/5-1.jpg b/img/backgrounds/5-1.jpg
diff --git a/img/backgrounds/6-2 (3).jpg b/img/backgrounds/6-2 (3).jpg
diff --git a/img/backgrounds/6-2.jpg b/img/backgrounds/6-2.jpg
diff --git a/img/backgrounds/6.2 (2).jpg b/img/backgrounds/6.2 (2).jpg
diff --git a/img/backgrounds/7-1.jpg b/img/backgrounds/7-1.jpg
diff --git a/img/backgrounds/7-2.jpg b/img/backgrounds/7-2.jpg
diff --git a/img/backgrounds/7-4.jpg b/img/backgrounds/7-4.jpg
diff --git a/img/bg.png b/img/bg.png
diff --git a/img/github.png b/img/github.png
diff --git a/img/readme/showcase colors n bg.gif b/img/readme/showcase colors n bg.gif
diff --git a/img/readme/showcase speed.gif b/img/readme/showcase speed.gif
diff --git a/img/readme/showcase.gif b/img/readme/showcase.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Libraries-->
+    <!-- download.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.js"
+        integrity="sha512-mxCAjvjp0jvMdGRIEvAHOCGL6BOucqWpTBXwchElsPKNw7BEegHviDHPnYrOrzgzBiw3GD/Q1ibpA5nlFPYDMw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="icon" href="./img/P.png">
+
+</head>
+
+<body>
+
+    <!-- Draw text here -->
+    <canvas id="canvas" width="1800" height="600"
+        style="border: solid black 1px; margin: 10px; border-radius: 3px;"></canvas>
+
+    <!-- Grid -->
+    <div class="parent">
+
+        <!-- Top and Bottom text -->
+        <input class="topTextbox" type="text" id="inputTop" placeholder="Top text" size="50px">
+        <input class="bottomTextbox" type="text" id="inputBottom" placeholder="Bottom text" size="50px">
+
+        <!-- Speed and Color-->
+        <div class="attributesTextbox">
+            <input type="text" id="speed" placeholder="Speed (in milliseconds)" size="25px">
+            <input type="color" id="color" value="#ffffff">
+        </div>
+
+        <!-- Background -->
+        <button class="file" id="inputFile" onclick="showBGS()">Add background</button>
+
+        <!-- Output buttons -->
+        <button class="previewBtn" onclick="animation(color, speed, img)">Preview</button>
+        <button class="exportBtn" onclick="exportText(color, speed, img)">Export</button>
+
+    </div>
+
+    <!-- GitHub repo -->
+    <img src="./img/github.png" alt="GitHub" title="Star the repo if you can, it helps!" width="64" class="git">
+
+    <div class="modal" id="modal">
+        <div class="bgs">
+            <img width="400" onclick="updateBG(this)" alt="1-1 HEART OF THE SUNRISE" src="./img/backgrounds/1-1.jpg">
+            <img width="400" onclick="updateBG(this)" alt="1-4 CLAIR DE LUNE (arena)" src="./img/backgrounds/1-4.jpg">
+            <img width="400" onclick="updateBG(this)" alt="1-4 CLAIR DE LUNE (staircases)"
+                src="./img/backgrounds/1-4 (2).jpg">
+            <img width="400" onclick="updateBG(this)" alt="1-4 CLAIR DE LUNE (skulls entrance)"
+                src="./img/backgrounds/1-4 (3).jpg">
+            <img width="400" onclick="updateBG(this)" alt="4-2 GOD DAMN THE SUN" src="./img/backgrounds/4-2.jpg">
+            <img width="400" onclick="updateBG(this)" alt="5-1 IN THE WAKE OF POSEIDON" src="./img/backgrounds/5-1.jpg">
+            <img width="400" onclick="updateBG(this)" alt="6-2 AESTHETICS OF HATE (entrance)"
+                src="./img/backgrounds/6-2.jpg">
+            <img width="400" onclick="updateBG(this)" alt="6-2 AESTHETICS OF HATE (arena)"
+                src="./img/backgrounds/6.2 (2).jpg">
+            <img width="400" onclick="updateBG(this)" alt="6-2 AESTHETICS OF HATE (Gabriel)"
+                src="./img/backgrounds/6-2 (3).jpg">
+            <img width="400" onclick="updateBG(this)" alt="7-1 GARDEN OF FORKING PATHS" src="./img/backgrounds/7-1.jpg">
+            <img width="400" onclick="updateBG(this)" alt="7-2 LIGHT UP THE NIGHT" src="./img/backgrounds/7-2.jpg">
+            <img width="400" onclick="updateBG(this)" alt="7-4 ...LIKE ANTENNAS TO HEAVEN"
+                src="./img/backgrounds/7-4.jpg">
+
+            <p style="color: black;">For correct results, be sure your background is 1800x600 pixels</p>
+            <input type="file" id="inputBG" onchange="customBG(this.files[0]);">
+        </div>
+
+    </div>
+
+</body>
+
+<!-- Scripts -->
+<script src="./js/main.js"></script>
+<script src="./js/title.js"></script>
+<script src="./js/bg.js"></script>
+
+<!-- Get and update attributes -->
+<script>
+
+    let color; let speed;
+
+    let c = document.getElementById('canvas')
+    let context = c.getContext('2d')
+    let img = new Image()
+
+    function updateBG(bg) {
+        img.src = bg.src
+        context.drawImage(img, 0, 0)
+    }
+
+    function customBG(bg) {
+        img.src = URL.createObjectURL(bg)
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(img, 0, 0)
+    }
+
+    setInterval(() => {
+        color = document.getElementById('color').value
+        speed = document.getElementById('speed').value
+    }, 10);
+
+</script>
+
+</html>
diff --git a/js/bg.js b/js/bg.js
@@ -0,0 +1,15 @@
+// Backgrounds modal box
+const modal = document.getElementById('modal')
+const btn = document.getElementById('inputFile');
+
+// Open when clicking button
+btn.onclick = function () {
+    modal.style.display = 'block';
+}
+
+// Close when clicking outside modal
+window.onclick = function (event) {
+    if (event.target == modal) {
+        modal.style.display = 'none';
+    }
+}