first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -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;
+}