From 25c0f894869cafa1ffdb475d974831fc13c3942a Mon Sep 17 00:00:00 2001
From: realcgcristi <github@cgcristi.xyz>
Date: Mon, 9 Sep 2024 15:27:39 +0300
Subject: [PATCH] type-writer effect with no cursor woooo

---
 templates/index.html | 110 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 106 insertions(+), 4 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 9ff8997..1272161 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -101,11 +101,45 @@
             padding: 0 15px;
         }
 
+.typewriter-container {
+    font-size: 23px; 
+    text-align: center;
+    white-space: nowrap; 
+    overflow: hidden;
+    position: relative; 
+}
+
+.typewriter-text {
+    display: inline-block;
+    white-space: nowrap; 
+}
+
+.cursor {
+    display: inline-block;
+    width: 10px;
+    height: 1em;
+    background-color: #ff69b4; 
+    animation: blink 0.7s step-end infinite;
+    position: absolute; 
+    right: 0; 
+    bottom: 0; 
+}
+
+@keyframes blink {
+    50% {
+        background-color: transparent;
+    }
+}
     </style>
 </head>
 <body>
+
     <div class="container">
-        <h1>aCloud</h1>
+        <div class="typewriter-container">
+            <span id="typewriter-text" class="typewriter-text"></span><span id="cursor" class="cursor"></span>
+        </div>
+    </br>
+</br>
         <div class="upload-options">
             <button id="textUploadBtn" onclick="showForm('text')">Upload Text</button>
             <button id="fileUploadBtn" onclick="showForm('file')">Upload File</button>
@@ -147,7 +181,75 @@
             </div>
         </div>
     </div>
-    <script>
+
+
+<script>
+
+document.addEventListener("DOMContentLoaded", function() {
+    const message1 = "Welcome to aCloud.";
+    const message2 = "\n A simple toolbox for file uploading,\n URL shortening and pastebin.";
+    const typewriterTextElement = document.getElementById('typewriter-text');
+    const cursorElement = document.getElementById('cursor');
+    const typingSpeed = 70;
+
+    function typeMessage(message, callback) {
+        let index = 0;
+
+        function typeCharacter() {
+            if (index < message.length) {
+                if (message[index] === '\n') {
+                    typewriterTextElement.innerHTML += '<br>';
+                } else {
+                    typewriterTextElement.innerHTML += message[index]; 
+                }
+                index++;
+                updateCursorPosition(); 
+                setTimeout(typeCharacter, typingSpeed);
+            } else if (callback) {
+                setTimeout(callback, typingSpeed);
+            }
+        }
+
+        typeCharacter();
+    }
+
+    function updateCursorPosition() {
+
+        const textRect = typewriterTextElement.getBoundingClientRect();
+        cursorElement.style.left = (textRect.width + textRect.left - cursorElement.offsetWidth) + 'px';
+    }
+
+    typeMessage(message1, function() {
+        typeMessage(message2);
+    });
+});;
+
+
+document.getElementById('uploadForm').onsubmit = function(e) {
+    e.preventDefault();
+    var formData = new FormData(this);
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', '/upload/file', true);
+
+    xhr.upload.onprogress = function(e) {
+        if (e.lengthComputable) {
+            var percentComplete = (e.loaded / e.total) * 100;
+            document.getElementById('progressBar').style.display = 'block';
+            document.getElementById('progressBar').value = percentComplete;
+        }
+    };
+
+    xhr.onload = function() {
+        if (xhr.status === 200) {
+            alert('Upload complete!');
+            document.getElementById('progressBar').style.display = 'none';
+        } else {
+            alert('Upload failed.');
+        }
+    };
+    xhr.send(formData);
+};
+
         function showForm(type) {
             document.querySelectorAll('.upload-form').forEach(form => {
                 form.classList.remove('active');
@@ -225,8 +327,8 @@
 <footer class="footer">
     <div class="container">
         <p class="footer-text">Source code available on: 
-            <a href="https://github.com/realcgcristi/order" target="_blank">GitHub</a> | 
-            <a href="https://git.spitkov.hu/cgcristi/aCloud" target="_blank">Spitkov's Git</a>
+            <a href="https://github.com/realcgcristi/order" target="_blank">GitHub (not up-to-date)</a> | 
+            <a href="https://git.spitkov.hu/cgcristi/aCloud" target="_blank">Spitkov's Git (main)</a>
         </p>
     </div>
 </footer>
