spitkov/sxbin
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

type-writer effect with no cursor woooo

Browse Source
This commit is contained in:
realcgcristi 2024-09-09 15:27:39 +03:00
parent f2e4d9a571
commit 25c0f89486
1 changed files with 106 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
templates/index.html
View File

@ -101,11 +101,45 @@
padding: 0 15px; 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> </style>
</head> </head>
<body> <body>
<div class="container"> <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"> <div class="upload-options">
<button id="textUploadBtn" onclick="showForm('text')">Upload Text</button> <button id="textUploadBtn" onclick="showForm('text')">Upload Text</button>
<button id="fileUploadBtn" onclick="showForm('file')">Upload File</button> <button id="fileUploadBtn" onclick="showForm('file')">Upload File</button>
@ -147,7 +181,75 @@
</div> </div>
</div> </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) { function showForm(type) {
document.querySelectorAll('.upload-form').forEach(form => { document.querySelectorAll('.upload-form').forEach(form => {
form.classList.remove('active'); form.classList.remove('active');
@ -225,8 +327,8 @@
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<p class="footer-text">Source code available on: <p class="footer-text">Source code available on:
<a href="https://github.com/realcgcristi/order" target="_blank">GitHub</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</a> <a href="https://git.spitkov.hu/cgcristi/aCloud" target="_blank">Spitkov's Git (main)</a>
</p> </p>
</div> </div>
</footer> </footer>