first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+   <head>
+      <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+      <meta content="utf-8" http-equiv="encoding">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+      <link rel="shortcut icon" href="angry_pepe.ico" type="image/x-icon">
+      <link rel="stylesheet" href="style.css">
+      <title>Bad Name Selector</title>
+   </head>
+   <body>
+      <div class="main">
+         <h1 class="roboto center">Please write your name... (good luck)</h1>
+         <p class="center roboto letter" type="button" id = "letter"></p>
+         <input type="button" class="center button selectElement" value="<" onclick="GPG_NotFun()">
+         <input type="button" class="confirm-button center selectElement" value="Ok" id="confirm-btn">
+         <input type="button" value=">" class="center button selectElement" onclick = "GFG_Fun()"  id = "next-btn">
+         <div>
+         </div>
+      </div>
+      <div class="result">
+      <p id="full-name" class="roboto textResult" ></p>
+      <button onclick="verifyName()" class="roboto submitBtn">Submit</button>
+      <div>
+      </div>
+      <script>
+         function GPG_NotFun(){
+         	var c = letter.innerHTML;
+         	letter.innerHTML = previousCharacter(c);
+         
+         	var e = previousCharacter(c);
+         	console.log(e);
+         }
+         
+         var letter = document.getElementById('letter');
+         letter.innerHTML = 'a';
+         
+         function previousCharacter(c){
+         	return String.fromCharCode(c.charCodeAt(0) - 1);
+         }
+         
+         function nextCharacter(c) {
+         	return String.fromCharCode(c.charCodeAt(0) + 1);
+         }
+         
+         function GFG_Fun() {
+         	globalThis.c = letter.innerHTML;
+         	letter.innerHTML = nextCharacter(c);
+         
+         	var d = nextCharacter(c);
+         	console.log(d);
+         }
+         
+         var confirmedBtn = document.getElementById('confirm-btn');
+         
+         var fullName = document.getElementById('full-name');
+         
+         //fullName.innerHTML ="testing purposes..."
+         
+         confirmedBtn.addEventListener("click", 
+         	function()
+         	{ 
+         
+         		screenOutput = fullName. innerHTML + letter.innerHTML
+         
+         		fullName.innerHTML = screenOutput;
+         	}
+         	); 
+         
+         function verifyName(){
+         	alert("Are you sure your name is " + screenOutput + "?");
+         
+         }
+         
+      </script>
+   </body>
+   <footer class="footer roboto">Made by <a href="https://github.com/imansour12/">Mohamed Iyed Mansour</a></footer>
+</html>
@@ -0,0 +1,123 @@
+.main {
+  background-color: white;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  border-radius: 5px 5px 5px 5px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+}
+
+.main:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap");
+.center {
+  text-align: center;
+  align-content: center;
+  margin-right: auto;
+  margin-left: auto;
+  left: 50%;
+  display: block;
+  vertical-align: middle;
+  align-items: center;
+}
+
+.roboto {
+  font-family: "Roboto", sans-serif;
+}
+
+.confirm-button {
+  background-color: #000000; /* Green */
+  border: none;
+  color: #ffffff;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.confirm-button:hover {
+  background-color: #90ee90;
+  transition: 0.5s;
+  color: black;
+}
+
+body {
+  background-color: #f0706a;
+}
+
+.letter {
+  font-size: 50px;
+}
+
+.button {
+  background-color: #000000; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.button:hover {
+  background-color: #7b9971;
+  transition: 0.5s;
+}
+
+.selectElement {
+  width: 30%;
+}
+
+.footer {
+  position: fixed;
+  padding: 10px 10px 0px 10px;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  float: right;
+}
+
+a {
+  color: blue;
+}
+.result {
+  background-color: #850101;
+  width: 50%;
+  margin: 0 auto;
+  border-radius: 5px 5px 5px 5px;
+  margin-top: 20px;
+}
+
+.submitBtn {
+  background-color: #4caf50; /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  align-content: center;
+  height: 100%;
+  display: flex;
+  cursor: pointer;
+}
+
+.textResult {
+  float: right;
+  overflow: hidden;
+  font-size: 20px;
+}
@@ -0,0 +1,58 @@
+<!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">
+  <title>Fan controlled cursor</title>
+  <link rel="stylesheet" href="./style.css">
+  <script defer src="./main.js"></script>
+</head>
+<body>
+  <div class="keyboard-wrapper">
+    <div id="text"></div>
+    <div id="keyboard">
+      <div class="key" data-key="A">A</div>
+      <div class="key" data-key="B">B</div>
+      <div class="key" data-key="C">C</div>
+      <div class="key" data-key="D">D</div>
+      <div class="key" data-key="E">E</div>
+      <div class="key" data-key="F">F</div>
+      <div class="key" data-key="G">G</div>
+      <div class="key" data-key="H">H</div>
+      <div class="key" data-key="I">I</div>
+      <div class="key" data-key="J">J</div>
+      <div class="key" data-key="K">K</div>
+      <div class="key" data-key="L">L</div>
+      <div class="key" data-key="M">M</div>
+      <div class="key" data-key="N">N</div>
+      <div class="key" data-key="O">O</div>
+      <div class="key" data-key="P">P</div>
+      <div class="key" data-key="Q">Q</div>
+      <div class="key" data-key="R">R</div>
+      <div class="key" data-key="S">S</div>
+      <div class="key" data-key="T">T</div>
+      <div class="key" data-key="U">U</div>
+      <div class="key" data-key="V">V</div>
+      <div class="key" data-key="W">W</div>
+      <div class="key" data-key="X">X</div>
+      <div class="key" data-key="Y">Y</div>
+      <div class="key" data-key="Z">Z</div>
+      <div class="key" data-key="0">0</div>
+      <div class="key" data-key="1">1</div>
+      <div class="key" data-key="2">2</div>
+      <div class="key" data-key="3">3</div>
+      <div class="key" data-key="4">4</div>
+      <div class="key" data-key="5">5</div>
+      <div class="key" data-key="6">6</div>
+      <div class="key" data-key="7">7</div>
+      <div class="key" data-key="8">8</div>
+      <div class="key" data-key="9">9</div>
+      <div class="key wide" data-key="&nbsp">Space</div>
+      <div class="key wide" id="clear-btn">Clear</div>
+    </div>
+  </div>
+  <img id="cursor" src="./assets/cursor.png" draggable="false">
+  <img id="fan" src="./assets/fan.png" draggable="false">
+</body>
+</html>
@@ -0,0 +1,139 @@
+const FAN_SPEED = 2;
+
+const textElem = document.getElementById("text");
+const keyElems = document.getElementsByClassName("key");
+const fanElem = document.getElementById("fan");
+const cursorElem = document.getElementById("cursor");
+const fanPos = { x: 50, y: 50 };
+const cursorPos = { x: 200, y: 112 };
+const cursorVel = { x: 0, y: 0 };
+let isFanClicked = false;
+
+fanElem.addEventListener('dragstart', (e) => e.preventDefault());
+fanElem.addEventListener("mousedown", () => isFanClicked = true);
+fanElem.addEventListener("mouseup", () => isFanClicked = false);
+document.addEventListener("mouseleave", () => isFanClicked = false);
+
+document.addEventListener("mousemove", (e) => {
+  if (!isFanClicked) return;
+  fanPos.x = e.pageX - fanElem.clientWidth/2;
+  fanPos.y = e.pageY - fanElem.clientHeight/2;
+  if (fanPos.x < -fanElem.clientWidth/2) {
+    fanPos.x = -fanElem.clientWidth/2;
+  } else if (fanPos.x > document.body.clientWidth - fanElem.clientWidth/2) {
+    fanPos.x = document.body.clientWidth - fanElem.clientWidth/2;
+  }
+  if (fanPos.y < -fanElem.clientHeight/2) {
+    fanPos.y = -fanElem.clientHeight/2;
+  } else if (fanPos.y > document.body.clientHeight - fanElem.clientHeight/2) {
+    fanPos.y = document.body.clientHeight - fanElem.clientHeight/2;
+  }
+});
+
+function blowCursor(deltaTime) {
+  // direction from the fan to the fan cursor
+  const direction = {
+    x: (cursorPos.x + cursorElem.clientWidth/2) - (fanPos.x + fanElem.clientWidth/2),
+    y: (cursorPos.y + cursorElem.clientHeight/2) - (fanPos.y + fanElem.clientHeight/2)
+  };
+  // distance between the fan and the fan cursor
+  const distance = Math.sqrt(Math.pow(direction.x, 2) + Math.pow(direction.y, 2));
+  // make the direction a unit vector
+  direction.x /= distance;
+  direction.y /= distance;
+  // calculate the force and apply it
+  const force = Math.pow(FAN_SPEED / 10, 2) / distance;
+  cursorVel.x += force * direction.x * deltaTime;
+  cursorVel.y += force * direction.y * deltaTime;
+}
+
+function decelerateCursor(deltaTime) {
+  // apply the viscous friction formula
+  const accX = 0.1 * Math.pow(cursorVel.x, 2) / 2;
+  const accY = 0.1 * Math.pow(cursorVel.y, 2) / 2;
+  if (Math.round(cursorVel.x * 1000) == 0) {
+    cursorVel.x = 0;
+  } else {
+    cursorVel.x += accX * (cursorVel.x > 0 ? -1 : 1);
+  }
+  if (Math.round(cursorVel.y * 1000) == 0) {
+    cursorVel.y = 0;
+  } else {
+    cursorVel.y += accY * (cursorVel.y > 0 ? -1 : 1);
+  }
+}
+
+function updateFan() {
+  // update fan position
+  fanElem.style.left = `${fanPos.x}px`;
+  fanElem.style.top = `${fanPos.y}px`;
+  // update fan rotation
+  const diffX = (cursorPos.x + cursorElem.clientWidth/2) - (fanPos.x + fanElem.clientWidth/2);
+  const diffY = (cursorPos.y + cursorElem.clientHeight/2) - (fanPos.y + fanElem.clientHeight/2);
+  let rotation = Math.atan(diffY / diffX) * 180 / Math.PI;
+  if(diffX < 0) rotation += 180;
+  if(diffY < 0) rotation += 360;
+  fanElem.style.transform = `rotate(${rotation}deg)`;
+}
+
+function updateCursor(deltaTime) {
+  cursorPos.x += cursorVel.x * deltaTime;
+  cursorPos.y += cursorVel.y * deltaTime;
+  if (cursorPos.x < 0) {
+    cursorPos.x = 0;
+  } else if (cursorPos.x > document.body.clientWidth - cursorElem.clientWidth) {
+    cursorPos.x = document.body.clientWidth - cursorElem.clientWidth;
+  }
+  if (cursorPos.y < 0) {
+    cursorPos.y = 0;
+  } else if (cursorPos.y > document.body.clientHeight - cursorElem.clientHeight) {
+    cursorPos.y = document.body.clientHeight - cursorElem.clientHeight;
+  }
+  cursorElem.style.left = `${cursorPos.x}px`;
+  cursorElem.style.top = `${cursorPos.y}px`;
+}
+
+function isCollision(rect1, rect2) {
+  return (rect1.top < rect2.bottom && rect1.bottom > rect2.top &&
+    rect1.left < rect2.right && rect1.right > rect2.left);
+}
+
+let lastKey = null;
+function handleCursorHover() {
+  for (const key of keyElems) {
+    if (isCollision(cursorElem.getBoundingClientRect(), key.getBoundingClientRect())) {
+      if (key === lastKey) {
+        return;
+      }
+      lastKey = key;
+      if (key.id === "clear-btn") {
+        textElem.innerText = "";
+      } else {
+        textElem.innerText += key.dataset.key;
+      }
+      key.classList.add("hover");
+      return;
+    }
+  }
+  lastKey?.classList.remove("hover");
+  lastKey = null;
+}
+
+let lastTime = null;
+function update(time) {
+  requestAnimationFrame(update);
+  if (!lastTime) {
+    lastTime = time;
+    return;
+  }
+  const deltaTime = time - lastTime;
+  lastTime = time;
+
+  blowCursor(deltaTime);
+  decelerateCursor(deltaTime);
+  updateFan();
+  updateCursor(deltaTime);
+  handleCursorHover();
+}
+
+requestAnimationFrame(update);
@@ -0,0 +1,77 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  font-family: "Segoe UI", Arial, sans-serif;
+}
+
+#fan {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6rem;
+  cursor: grab;
+}
+
+#fan:active {
+  cursor: grabbing;
+}
+
+#cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.5rem;
+}
+
+.keyboard-wrapper {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 71rem;
+}
+
+#text {
+  display: flex;
+  align-items: center;
+  width: 56rem;
+  height: 3rem;
+  font-size: 2rem;
+  background-color: gray;
+  color: white;
+  padding: 0 0.6rem;
+  margin: 2.2rem 0;
+  overflow: hidden;
+}
+
+#cursor, #fan, #keyboard {
+  user-select: none;
+}
+
+.key {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin: 2.2rem;
+  background-color: lightgray;
+  font-size: 1.2rem;
+}
+
+.key.hover {
+  background-color: gray;
+}
+
+.key.wide {
+  width: 9.5rem;
+}
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Full-Analog Clock</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+  <body>
+    <div id="main">
+      <div id="hourHand" class="hand">
+      </div>
+      <div id="minHand" class="hand">
+      </div>
+      <div id="secHand" class="hand">
+      </div>
+      <div id="stopper"></div>
+    </div>
+    <div id="controlArea">
+      <div class="controlRow">
+        <div id="hour" class="timeLabel">0</div>
+        <div id="min" class="timeLabel">0</div>
+        <div id="sec" class="timeLabel">0</div>
+      </div>
+      <div class="controlRow">
+        <button id="hourPush" type="button" class="push" onclick="push('hour')">Push</button>
+        <button id="minPush" type="button" class="push" onclick="push('min')">Push</button>
+        <button id="secPush" type="button" class="push" onclick="push('sec')">Push</button>
+      </div>
+    </div>
+    <script src="logic.js"></script>
+  </body>
+</html>
@@ -0,0 +1,112 @@
+"use strict";
+
+const main = document.getElementById('main')
+const numbers = [1,2,3,4,5,6,7,8,9,10,11,12]
+
+// Add numbers
+numbers.forEach((number) => {
+  let div = document.createElement('div')
+  div.innerText = number
+  div.classList.add('number')
+
+  div.style.setProperty('top', 'calc('+(50 - 50*Math.cos(number*Math.PI/6))+ '% - 8px)') 
+  div.style.setProperty('left', 'calc('+(50 + 50*Math.sin(number*Math.PI/6)) + '% - 4px')
+
+  main.append(div)
+})
+
+var hour = 0
+var min = 0
+var sec = 0
+
+const hourLabel = document.getElementById("hour")
+const minLabel = document.getElementById("min")
+const secLabel = document.getElementById("sec")
+
+const hourPush = document.getElementById("hourPush")
+const minPush = document.getElementById("minPush")
+const secPush = document.getElementById("secPush")
+
+const secHand = document.getElementById("secHand")
+const minHand = document.getElementById("minHand")
+const hourHand = document.getElementById("hourHand")
+
+var date = new Date()
+
+var currentSec = date.getSeconds()
+var currentMin = date.getMinutes()
+var currentHour = date.getHours() + currentMin/60
+
+secHand.style.setProperty('transform', 'rotate(' + currentSec*6 + 'deg)')
+minHand.style.setProperty('transform', 'rotate(' + currentMin*6 + 'deg)')
+hourHand.style.setProperty('transform', 'rotate(' + currentHour*30 + 'deg)')
+
+setInterval(()=>{
+  sec++
+  
+  if(sec%60 == 0 && sec != 0){
+    min++
+    sec = 0
+  }
+  if(min%60 == 0 && min != 0){
+    hour++
+    min = 0
+  }
+  
+  updateControlPanel()
+
+},1000)
+
+
+function updateControlPanel(){
+  secLabel.innerText = sec
+  minLabel.innerText = min
+  hourLabel.innerText = hour
+
+  if(sec > 0){
+    secLabel.classList.add("active")
+    secPush.classList.add("active")
+  }else{
+    secLabel.classList.remove("active")
+    secPush.classList.remove("active")
+  }
+
+  if(min > 0){
+    minLabel.classList.add("active")
+    minPush.classList.add("active")
+  }else{
+    minLabel.classList.remove("active")
+    minPush.classList.remove("active")
+  }
+
+  if(hour > 0){
+    hourLabel.classList.add("active")
+    hourPush.classList.add("active")
+  }else{
+    hourLabel.classList.remove("active")
+    hourPush.classList.remove("active")
+  }
+}
+
+function push(order){
+  switch (order) {
+    case 'hour':
+      currentHour += hour
+      hourHand.style.setProperty('transform', 'rotate(' + currentHour*30 + 'deg)')
+      hour = 0
+      break
+    case 'min':
+      currentMin += min
+      currentHour += min/60
+      minHand.style.setProperty('transform', 'rotate(' + currentMin*6 + 'deg)')
+      hourHand.style.setProperty('transform', 'rotate(' + currentHour*30 + 'deg)')
+      min = 0
+      break
+    case 'sec':
+      currentSec += sec
+      secHand.style.setProperty('transform', 'rotate(' + currentSec*6 + 'deg)')
+      sec = 0
+      break
+  }
+  updateControlPanel()
+}
@@ -0,0 +1,127 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background: #370067;
+  font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+#main {
+  position: relative;
+  width: 35%;
+  min-width: 250px;
+  aspect-ratio: 1;
+  justify-content: center;
+  margin-bottom: 5%;
+}
+
+.hand {
+  border-radius: 50% 50% 0% 0% / 85% 85% 0% 0% ;
+  position: absolute;
+  transform-origin: center bottom;
+  left: 52%;
+  transition: transform 2s;
+}
+
+.hand div {
+  flex: 1;
+}
+
+#hourHand {
+  top: 21.5%;
+  left: 48.5%;
+  height: 30%;
+  width: 3%;
+  background-color: black;
+}
+
+#minHand {
+  top: 11%;
+  left: 49%;
+  height: 40%;
+  width: 2%;
+  background-color: #fff300;
+}
+
+#secHand {
+  top: 5.5%;
+  left: 49.5%;
+  height: 45%;
+  width: 1%;
+  background-color: #B60084;
+}
+
+#stopper {
+  position: absolute;
+  width: 5%;
+  aspect-ratio: 1;
+  top: 48.5%;
+  left: 47.5%;
+  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 
+  background-color: black;
+}
+
+.number {
+  position: absolute;
+  color: white;
+  font-weight: bold;
+}
+
+#controlArea {
+  width: 30%;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+}
+
+.controlRow{
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  margin: 2% 0;
+}
+
+.controlRow * {
+  flex: 1;
+  margin: 0 5%;
+}
+
+.timeLabel{
+  text-align: center;
+  color:rgb(196, 194, 194);
+}
+
+.timeLabel.active {
+  color: #9fff94;
+  font-weight: bold;
+}
+
+button {
+  flex: 1;
+  border: none;
+  background: #fff;
+  color: #0a3d62;
+  border-radius: 0.3rem;
+  padding: 0.5rem;
+  /*cursor: pointer;*/
+}
+
+.push {
+  color: rgb(196, 194, 194);
+  background-color: gray;
+  cursor: not-allowed;
+  font: inherit;
+}
+
+.push.active {
+  color: #fff;
+  background-color: #0054d3;
+  cursor: pointer;
+}
@@ -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)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PassWordle</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Login</h1>
+  <div id="loginArea">
+    <div class="row">
+      <h2>Name</h2>
+      <input>
+    </div>
+    <div class="row">
+      <h2>Nick</h2>
+      <input>
+    </div>
+    <div style="width: 230px;">
+      <h2>Passw<span><img id="eye" src="icons/eye.png" onclick="eye()" width="20px"></span>rd</h2>
+    </div>
+    <div class="row">
+      <div id="password" contenteditable="true" spellcheck="false" onpaste="return false;"></div>
+    </div>
+    <button id="loginButton" onClick="window.location.reload()" disabled>LOGIN</button>
+  </div>
+
+  <script src="logic.js"></script>
+</body>
+</html>
@@ -0,0 +1,83 @@
+// Best regards to Josh Wardle the creator of Wordle
+
+const password = "jwardle";
+const maxLength = 15;
+
+
+var isEyeOpen = false;
+
+const passwordDiv = document.getElementById("password");
+
+passwordDiv.addEventListener("input", function() {
+  
+  var content = removeSpansAndGetContent(this);
+  content = content.slice(0, maxLength).replace(/\n/g, "");
+  var hiddenText = "";
+
+  let button = document.getElementById("loginButton");
+  
+  button.disabled = !(content == password);
+  
+  for (var i = 0; i < content.length; i++) {
+
+    let color = '#787c7e';
+
+    if (i > password.length-1) {
+      color = 'red';
+    } else if (content[i] == password [i]) {
+      color = '#6AAA64';
+    } else if(password.includes(content[i]) && checkBefore(content[i], content.slice(0, i)) && checkAfter(content[i], content.slice(i+1), i+1)) {
+      color = '#c9b458';
+    }
+    
+    hiddenText += '<span class="box" style = "background-color:' + color + '">' + content[i] + '</span>'
+  }
+
+  this.innerHTML = hiddenText; 
+  this.focus();
+  document.execCommand('selectAll', false, null);
+  document.getSelection().collapseToEnd();
+});
+
+function checkBefore(char, before) {
+  return charCount(char, before) < charCount(char, password);
+}
+
+function checkAfter(char, after, index) {
+  return !Array.from(after).some((c, i) => {
+    return (c == char && c == password[index + i]);
+  })
+}
+
+function charCount(char, text) {
+  return (text.split(char).length - 1);
+}
+
+function removeSpansAndGetContent(div) {
+  var spanElements = div.getElementsByTagName("span");
+  for (var i = spanElements.length - 1; i >= 0; i--) {
+    var span = spanElements[i];
+    var textContent = span.textContent || span.innerText;
+    var textNode = document.createTextNode(textContent);
+
+    if([...div.childNodes].includes(span))
+    div.replaceChild(textNode, span);
+  }
+
+  var content = div.textContent || div.innerText;
+  return content;
+}
+
+function eye() {
+  isEyeOpen = !isEyeOpen;
+
+  let eye = document.getElementById("eye");
+
+  if(isEyeOpen) {
+    eye.src = "icons/openEye.png";
+    passwordDiv.style.webkitTextSecurity = "none";
+  } else {
+    eye.src = "icons/eye.png";
+    passwordDiv.style.webkitTextSecurity = "disc";
+  }
+}
@@ -0,0 +1,100 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  gap: 1rem;
+}
+
+h1 {
+  font-size: 4rem;
+}
+
+h2 {
+  font-size: 1.1rem;
+}
+
+h1, h2 {
+  color: #121212;
+  margin: 0;
+  font-weight: bold;
+}
+
+#password, input {
+  outline: 0;
+  border: none;
+  border: 0.8px solid #6f6f6f;
+  border-radius: 0;
+  background: transparent;
+  width: 220px;
+  opacity: 1;
+}
+
+#password:focus, input:focus {
+  border: 1.5px solid rgb(18, 18, 18);
+}
+
+input {
+  padding: 10px 5px;
+  color: #000000;
+}
+
+#password {
+  padding: 10px 0;
+  width: fit-content;
+  min-width: 230px;
+  white-space: nowrap;
+  -webkit-text-security: disc;
+  color: #ffffff;
+}
+
+.row {
+  display: block !important;
+  margin-bottom: 15px;
+}
+
+.box {
+  display: inline-block;
+  width: 21.6px;
+  margin: 0 5px;
+  text-align: center;
+}
+
+#loginArea {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+button {
+  border: 0.0625em solid rgb(18, 18, 18);
+  background: #121212;
+  color: #ffffff;
+  border-radius: 0.3rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  position: relative;
+}
+
+button:disabled,
+button[disabled]{
+  border: 0.0625em solid #c4c4c4;
+  background-color: #e0e0e0;
+  color: #838383;
+}
+
+input, button, #password {
+  font: inherit;
+  margin-top: 5px;
+}
+
+#eye {
+  cursor: pointer;
+}
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Date Picker</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Sign Up</h1>
+  <div id="signupArea">
+    <h2>Name</h2>
+    <input>
+    <h2>Password</h2>
+    <input type="password">
+    <div>
+      <h2>Date of Birth</h2>
+      <button id="date">
+        <div></div>
+        <input type="checkbox">
+        <div id="datePicker">
+          <svg viewBox="0 0 350 166" >
+          <ellipse id="ellipse" cx="175" cy="83" rx="150" ry="73"
+          style="fill-opacity: 0;stroke:yellow;stroke-width:0.5" />  
+          <image id="earth" height="15" width="15" href="earth.png"></image>
+          <image id="sun" x="105" y="68" height="30" width="30" href="sun.png"></image>
+          </svg> 
+        </div>
+      </button>
+    </div>
+    <button onClick="window.location.reload()">SIGN UP</button>
+  </div>
+
+  <script src="logic.js"></script>
+</body>
+</html>
@@ -0,0 +1,116 @@
+/*
+  The formula I use is not the scientifically best formula.
+  If you want more correct result use Kepler’s laws.
+  Also I use center of circumcircle of ellipse because
+  orbit of the earth is not too much ellipse, it's almost a circle
+  and Sun is almost in the middle of the circle, you can use center of ellipse
+*/
+
+"use strict"
+
+const earth = document.getElementById("earth")
+const dateButton = document.getElementById("date")
+const datePicker = document.getElementById("datePicker")
+const ellipse = document.getElementById("ellipse")
+
+var isPressing = false
+
+const earthSize = 15
+const horizontalRadius = 150
+const verticalRadius = 73
+const horizontalMargin = 25
+const verticalMargin = 10
+
+var today = new Date()
+var year = today.getFullYear()
+var start = new Date(today.getFullYear(), 0, 0)
+var diff = today - start
+const oneDay = 1000 * 60 * 60 * 24
+var dayNumber = Math.floor(diff / oneDay)
+var date = dateFromDay(dayNumber)
+dateButton.children[0].innerText = addZero(date.getDate()) + "/" + addZero(date.getMonth()+1) + "/" + date.getFullYear()
+
+var angle = 2*Math.asin(((dayNumber-1)/(182.5 + (isLeapyear()?0.5:0)))-1)
+var x = horizontalRadius*Math.cos(angle)
+var y = verticalRadius*Math.sin(angle)
+
+earth.setAttribute("x",horizontalRadius + x - earthSize/2 + horizontalMargin)
+earth.setAttribute("y",verticalRadius - y - earthSize/2 + verticalMargin)
+
+
+earth.addEventListener("mousedown", mousedown)
+earth.addEventListener("touchstart", mousedown)
+
+addEventListener("mousemove", mousemove)
+addEventListener("touchmove", mousemove)
+
+addEventListener("mouseup", mouseup)
+addEventListener("touchend", mouseup)
+
+
+var dateButtonRect = dateButton.getBoundingClientRect()
+datePicker.style.top = dateButtonRect.height + "px"
+datePicker.style.right = 0
+dateButton.style.height = dateButtonRect.height + "px"
+
+function mousedown(e) {
+  isPressing = true
+}
+
+function mousemove(e) {
+  if(!isPressing)
+    return
+  
+  const { clientX, clientY } = e.touches != null ? e.touches[0] : e
+  
+  const rect = ellipse.getBoundingClientRect()
+  const ellipseCenterX = rect.x + rect.width/2 + horizontalMargin
+  const ellipseCenterY = rect.y + rect.height/2 + verticalMargin
+  angle = Math.atan2(ellipseCenterY - clientY, clientX - ellipseCenterX)
+
+  let x = horizontalRadius*Math.cos(angle)
+  let y = verticalRadius*Math.sin(angle)
+
+  earth.setAttribute("x", horizontalRadius + x - earthSize/2 + horizontalMargin)
+  earth.setAttribute("y", verticalRadius - y - earthSize/2 + verticalMargin)
+
+  let oldDate = date
+
+  var dayNumber = ((182.5 + (isLeapyear()?0.5:0))*(Math.sin((angle)/2) + 1) + 1)
+
+  date = dateFromDay(dayNumber)
+
+  if(oldDate.getDate() == 1 && oldDate.getMonth() == 0 && date.getDate() == 31 && date.getMonth() == 11){
+    year--
+  }else if(oldDate.getDate() == 31 && oldDate.getMonth() == 11 && date.getDate() == 1 && date.getMonth() == 0){
+    year++
+  }
+  
+  dayNumber = ((182.5 + (isLeapyear()?0.5:0))*(Math.sin((angle)/2)+1)+1)
+  date = dateFromDay(dayNumber)
+
+  if(date.getTime() > today.getTime()){
+    dateButton.children[0].classList.add("future")
+    dateButton.children[0].innerText = "Fuck you Kyle Reese" // We don't like time travelers!
+  }else{
+    dateButton.children[0].classList.remove("future")
+    dateButton.children[0].innerText = addZero(date.getDate()) + "/" + addZero(date.getMonth() + 1) + "/" + date.getFullYear()
+  }
+}
+
+function dateFromDay(day){
+  var date = new Date(year, 0)
+  return new Date(date.setDate(day))
+}
+
+function mouseup(e) {
+  isPressing = false
+}
+
+function addZero(num){
+  return num<10?"0"+num:num
+}
+
+function isLeapyear(){
+  return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0)
+}
@@ -0,0 +1,118 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background: #464646;
+  font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  gap: 1rem;
+}
+
+h1 {
+  color: #fff;
+  font-size: 4rem;
+  font-weight: 300;
+  margin: 0;
+}
+
+h2 {
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 300;
+  margin: 0;
+}
+
+input {
+  outline: 0;
+  border: none;
+  border-bottom: 1px solid #fff;
+  border-radius: 0;
+  background: transparent;
+  width: 220px;
+  padding: 0;
+  color: #fff;
+  -webkit-text-fill-color: #fff;
+  opacity: 1;
+}
+
+#signupArea {
+  display: flex;
+  flex-direction: column;
+}
+
+#signupArea > *{
+  margin-top: 15px;
+}
+
+#signupArea > div {
+  display: flex;
+  justify-content: space-between;
+}
+
+#datePicker {
+  display: flex;
+  gap: 1rem;
+  width: 75vw;
+  max-width: 400px;
+  position: absolute;
+  z-index: 99;
+
+  background-color: black;
+  border-radius: 60px 0px 60px 60px;
+
+  clip-path: circle(0% at 100% 0%);
+  transition: clip-path 0.7s;
+
+  cursor: grab;
+}
+
+svg {
+  width: 100%;
+}
+
+button {
+  
+  border: none;
+  background: #fff;
+  color: #464646;
+  border-radius: 0.3rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  position: relative;
+}
+
+#date {
+  width: 50%;
+  max-width: 50%;
+}
+
+#date input{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin:0;
+  border: none;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.future{
+  color: red;
+  font-size: 0.6rem;
+}
+
+#date input:checked ~ #datePicker{
+  clip-path: circle(150% at 100% 100%);
+}
+
+input, button {
+  font: inherit;
+}
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>BadUI</title>
+<link rel="stylesheet" href="../data/style.css">
+<link rel="icon" type="image/png" sizes="32x32" href="../data/media/icon_circle.png">
+</head>
+
+<script src="Image.js" defer></script>
+<script src="/data/js/bg.js" defer></script>
+
+<body class="homepage">
+
+  <video id="bg-video" autoplay muted loop playsinline ></video>
+  <img id="bg-image" alt="Background" >
+
+<div class="container">
+  <h1>Nixiews >:3</h1>
+
+  <div class="card">
+    <a href="Fan/" target="_blank">Ventilateur</a>
+  </div>
+
+  <div class="card">
+    <a href="BadName/" target="_blank">Username</a>
+  </div>
+
+  <div class="card">
+    <a href="ScientificDatePicker" target="_blank">Date ScIeNtIfIqUe</a>
+  </div>
+
+  <div class="card">
+    <a href="PassWordle/" target="_blank">PassWordle</a>
+  </div>
+
+  <div class="card">
+    <a href="FullAnalogClock/" target="_blank">Horloge analogique</a>
+  </div>
+
+  <div class="card">
+    <a href="LimitUsernameSize/" target="_blank">Limitation de la longeur du nom d'utilisateur</a>
+  </div>
+
+  <div class="card">
+    <a href="/" target="_blank">Racine</a>
+  </div>
+<!--
+  <div class="card">
+    <a href="stat_nav.html" target="_blank">Stats navigateurs</a>
+  </div>
+
+  <div class="card">
+    <a href="/" target="_blank">Racine</a>
+  </div>
+-->
+</div>
+<footer>Ce serveur fonktionne :)</footer>
+</body>
+</html>