first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -0,0 +1,61 @@
+*{
+	margin: 0;
+	box-sizing: border-box;
+	font-family: sans-serif;
+}
+
+input{
+    height: 30px;
+    width: 150px;
+    outline: 0;
+    border-radius: 15px;
+    margin-left: 10px;
+    padding: 0 10px;
+}
+
+#userNameInput{
+    border-right: 0;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    padding-right: 0;
+}
+
+button{
+    width: 75px;
+    border-radius: 25px;
+    cursor: pointer;
+}
+
+button, input{
+    outline: 0;
+}
+
+#main{
+    margin: 20px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+}
+
+.itemDiv{
+    display: flex;
+    width: 150px;
+    margin-top: 10px;
+    justify-content: center;
+}
+
+.fallingDiv{
+    position: absolute;
+    height: 20px;
+    font-size: 13.3333px;
+    transform: rotate(0deg);
+}
+
+img{
+    width: 150px;
+    height: 180px;
+    position: relative;
+    margin-top: 20px;
+    left: 100px;
+    z-index: 5;
+}
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Bad UI</title>
+    <link rel="stylesheet" href="css.css"/>
+</head>
+<body>
+    <div id="main">
+        <div class="itemDiv">
+            <input id="userNameInput" placeholder="Username"/>
+        </div>
+        <div class="itemDiv">
+            <input type="password" placeholder="Password"/>
+        </div>
+        <div class="itemDiv">
+            <button href="/secret/one.mp4">Sign Up</button>
+        </div>
+        <img id="bin" src="bin.png">
+    </div>
+<script src="js.js"></script>
+</body>
+</html>
@@ -0,0 +1,37 @@
+var input = document.getElementById('userNameInput')
+        var y = input.getBoundingClientRect().top + 10
+        var x = input.getBoundingClientRect().left + 150
+
+        var mainDiv = document.getElementById('main')
+
+        var fallingDivs = []
+
+        input.addEventListener('input', () => {
+            while(isOverflown(input)){
+                let fallingChar = input.value.substr(-1)
+                input.value = input.value.slice(0,-1)
+
+                let fallingDiv = document.createElement('div')
+                fallingDiv.innerText = fallingChar
+
+                fallingDiv.classList.add('fallingDiv')
+                fallingDiv.style.top = y +'px'
+                fallingDiv.style.left = x + 'px'
+
+                mainDiv.append(fallingDiv)
+                fallingDivs.push(fallingDiv)
+            }
+        })
+
+        function isOverflown(element) {
+            return element.scrollWidth > element.clientWidth;
+        }
+
+        setInterval(() => {
+            fallingDivs.forEach(fallingDiv => {
+                if(Number(fallingDiv.style.top.slice(0,-2)) < document.getElementById('bin').getBoundingClientRect().top + 10){
+                fallingDiv.style.top = Number(fallingDiv.style.top.slice(0,-2)) + 5 + 'px'
+                fallingDiv.style.transform = 'rotate(' + (Number(fallingDiv.style.transform.slice(7,fallingDiv.style.transform.indexOf('d')))+5)+'deg)'
+               }
+            })
+        },40)