Create index.html

Signed-off-by: gameprix <[email protected]>
gameprix · Jun 4, 2024 · 9054c09 · 9054c09
1 parent 8a3c1a4
commit 9054c09
Showing 1 changed file with 179 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="shortcut icon" href="logo.png" type="image/png" />
+    <title>gameprix</title>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5619094867326308"
+    crossorigin="anonymous"></script>
+    <meta name="google-adsense-account" content="ca-pub-5619094867326308">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/src/toastify.css"
+      integrity="sha256-8QICJWgidiDfvG0l4Dl8kzL/ehA0RfG3pCL9VojAcJM="
+      crossorigin="anonymous"
+    />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
+      html,
+      body {
+        margin: 0px;
+        padding: 0px;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-family: "Roboto", sans-serif;
+        background-color: #1e2329;
+        color: #adbac7;
+      }
+
+      #file {
+        display: none;
+      }
+
+      #dropzone {
+        font-size: 1.5em;
+        text-align: center;
+        border-radius: 5px;
+        background-color: #2d333b;
+        min-width: 70%;
+        position: relative;
+      }
+
+      #dropzone #text {
+        padding: 50px;
+      }
+
+      #progress {
+        position: absolute;
+        width: 0%;
+        height: 100%;
+        background-color: #242930;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        flex-direction: column;
+      }
+
+      span {
+        color: #539bf5;
+      }
+
+      span:hover {
+        color: #73b2ff;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="dropzone">
+      <div id="progress"></div>
+      <div id="text">Click here or drag and drop the file you want to upload.</div>
+    </div>
+    <br />
+    <span id="link"></span>
+
+    <input id="file" type="file" />
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/src/toastify.js"
+      integrity="sha256-pCkItLnasbvL3enBgu/dsT/4z/IA2c8w4PyxnJcyhqo="
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      let link = document.getElementById("link");
+      let dropzone = document.getElementById("dropzone");
+      let progressBar = document.getElementById("progress");
+      let text = document.getElementById("text");
+      let fileInput = document.getElementById("file");
+
+      link.addEventListener("click", (event) => {
+        navigator.clipboard
+          .writeText(link.innerText)
+          .then(() => {
+            Toastify({
+              text: "Link copied!",
+              gravity: "top",
+              position: "center",
+              backgroundColor: "#28a745",
+            }).showToast();
+          })
+          .catch(() => {
+            Toastify({
+              text: "Error coping the linkg!",
+              gravity: "top",
+              position: "center",
+              backgroundColor: "#dc3545",
+            }).showToast();
+          });
+      });
+
+      const resetDropZone = () => {
+        progressBar.innerHTML = "";
+        progressBar.style.width = "0%";
+        dropzone.style.background = "#2D333B";
+        text.innerText = "Click here or drag and drop the file you want to upload.";
+        fileInput.value = "";
+      };
+
+      const uploadFile = (file) => {
+        text.innerText = "";
+        link.innerText = "";
+        let req = new XMLHttpRequest();
+        req.onreadystatechange = () => {
+          if (req.readyState === 4) {
+            if (req.status === 200) {
+              link.innerText = window.location.href + req.response;
+            } else {
+              alert("File is too big!");
+            }
+            resetDropZone();
+          }
+        };
+        req.upload.addEventListener("progress", (progress) => {
+          let percent = Math.floor((progress.loaded / progress.total) * 100) + "%";
+          progressBar.style.width = percent;
+          progressBar.innerText = percent;
+        });
+        req.open("POST", "/" + file.name, true);
+        req.send(file);
+      };
+
+      window.addEventListener("drop", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        let file = event.dataTransfer.files[0];
+        uploadFile(file);
+      });
+
+      window.addEventListener("dragover", (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        dropzone.style.background = "#444c56";
+        text.innerText = "Drop it here!";
+      });
+
+      dropzone.addEventListener("dragleave", (event) => {
+        event.preventDefault();
+        resetDropZone();
+      });
+
+      dropzone.addEventListener("click", (event) => {
+        fileInput.click();
+      });
+
+      fileInput.addEventListener("change", (event) => {
+        let file = event.target.files[0];
+        uploadFile(file);
+      });
+    </script>
+  </body>
+</html>