From 3b1183f8b3b41eca1621e2e3a07518cb40fa7524 Mon Sep 17 00:00:00 2001
From: matt <matt@br0tkasten.de>
Date: Thu, 6 Feb 2025 19:12:44 +0100
Subject: [PATCH] login

---
 login/index.html | 174 +++++++++++++++++++++++++++++++++++++++++++++++
 login/test.html  | 122 +++++++++++++++++++++++++++++++++
 2 files changed, 296 insertions(+)
 create mode 100644 login/index.html
 create mode 100644 login/test.html
diff --git a/login/index.html b/login/index.html
new file mode 100644
index 0000000..3846bdb
--- /dev/null
+++ b/login/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Form</title>
+    <style>
+        /* From Uiverse.io by Praashoo7 */ 
+        .form {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          width: 290.73px;
+          height: 370.56px;
+          padding-left: 2em;
+          padding-right: 2em;
+          padding-bottom: 0.4em;
+          background-color: #171717;
+          border-radius: 25px;
+          transition: .4s ease-in-out;
+        }
+
+        .form:hover {
+          transform: scale(1.05);
+          border: 1px solid black;
+        }
+
+        #heading {
+          text-align: center;
+          margin: 2em;
+          color: rgb(255, 255, 255);
+          font-size: 1.2em;
+        }
+
+        .field {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5em;
+          border-radius: 25px;
+          padding: 0.6em;
+          border: none;
+          outline: none;
+          color: white;
+          background-color: #171717;
+          box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
+        }
+
+        .input-icon {
+          height: 1.3em;
+          width: 1.3em;
+          fill: white;
+        }
+
+        .input-field {
+          background: none;
+          border: none;
+          outline: none;
+          width: 100%;
+          color: #d3d3d3;
+        }
+
+        .form .btn {
+          display: flex;
+          justify-content: center;
+          flex-direction: row;
+          margin-top: 2.5em;
+        }
+
+        .button1 {
+          padding: 0.5em;
+          padding-left: 1.1em;
+          padding-right: 1.1em;
+          border-radius: 5px;
+          margin-right: 0.5em;
+          border: none;
+          outline: none;
+          transition: .4s ease-in-out;
+          background-color: #252525;
+          color: white;
+        }
+
+        .button1:hover {
+          background-color: black;
+          color: white;
+        }
+
+        .button2 {
+          padding: 0.5em;
+          padding-left: 2.3em;
+          padding-right: 2.3em;
+          border-radius: 5px;
+          border: none;
+          outline: none;
+          transition: .4s ease-in-out;
+          background-color: #252525;
+          color: white;
+        }
+
+        .button2:hover {
+          background-color: black;
+          color: white;
+        }
+
+        .button3 {
+          margin-bottom: 3em;
+          padding: 0.5em;
+          border-radius: 5px;
+          border: none;
+          outline: none;
+          transition: .4s ease-in-out;
+          background-color: #252525;
+          color: white;
+        }
+
+        .button3:hover {
+          background-color: red;
+          color: white;
+        }
+    </style>
+</head>
+<body>
+    <!-- From Uiverse.io by Praashoo7 --> 
+    <form class="form" action="SERVER_ADDRESS" method="post" id="loginForm">
+        <p id="heading">Login</p>
+        <div class="field">
+            <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"></path>
+            </svg>
+            <input autocomplete="off" placeholder="Username" class="input-field" type="text" name="username">
+        </div>
+        <div class="field">
+            <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>
+            </svg>
+            <input placeholder="Password" class="input-field" type="password" name="password">
+        </div>
+        <div class="btn">
+            <button class="button1" type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
+            <button class="button2" type="button" onclick="signUp()">Sign Up</button>
+        </div>
+        <button class="button3" type="button" onclick="forgotPassword()">Forgot Password</button>
+    </form>
+
+    <script>
+        document.getElementById("loginForm").addEventListener("submit", function(event){
+            event.preventDefault(); // Verhindert das Standardverhalten
+
+            const formData = new FormData(this);
+
+            fetch('SERVER_ADDRESS', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                console.log(data);
+                // hier können Sie die Antwortdaten weiterverarbeiten
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        });
+
+        function signUp() {
+            window.open('URL_ZUM_SIGN_UP_FENSTER', '_blank');
+        }
+
+        function forgotPassword() {
+            window.open('URL_ZUM_FORGOT_PASSWORD_FENSTER', '_blank');
+        }
+    </script>
+</body>
+</html>
diff --git a/login/test.html b/login/test.html
new file mode 100644
index 0000000..561a4e1
--- /dev/null
+++ b/login/test.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #e3f2fd;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .form {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            padding: 2em;
+            background-color: #ffffff;
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            transition: transform 0.3s ease-in-out;
+        }
+        .form:hover {
+            transform: scale(1.02);
+        }
+        #heading {
+            text-align: center;
+            margin: 0;
+            color: #1565c0;
+            font-size: 1.5em;
+            font-weight: 600;
+        }
+        .field {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 0.75em 1em;
+            background-color: #bbdefb;
+            border-radius: 5px;
+        }
+        .input-icon {
+            height: 1.5em;
+            width: 1.5em;
+            fill: #1565c0;
+        }
+        .input-field {
+            width: 100%;
+            background: none;
+            border: none;
+            outline: none;
+            color: #1565c0;
+            font-size: 1em;
+        }
+        .btn {
+            display: flex;
+            justify-content: center;
+        }
+        .button {
+            padding: 0.75em 2em;
+            border: none;
+            outline: none;
+            border-radius: 5px;
+            background-color: #1565c0; /* Blue Button */
+            color: #ffffff;
+            font-size: 1em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.3s ease-in-out;
+        }
+        .button:hover {
+            background-color: #0d47a1; /* Darker blue on hover */
+        }
+    </style>
+</head>
+<body>
+    <div class="form">
+        <h2 id="heading">Login</h2>
+        <div class="field">
+            <input type="text" id="username" placeholder="Username" required class="input-field">
+        </div>
+        <div class="field">
+            <input type="email" id="email" placeholder="Email" required class="input-field">
+        </div>
+        <div class="field">
+            <input type="password" id="password" placeholder="Password" required class="input-field">
+        </div>
+        <div class="field">
+            <input type="password" id="confirm_password" placeholder="Confirm Password" required class="input-field">
+        </div>
+        <div class="btn">
+            <button class="button" onclick="login()">Login</button>
+        </div>
+    </div>
+    <script>
+        function login() {
+            var username = document.getElementById('username').value;
+            var email = document.getElementById('email').value;
+            var password = document.getElementById('password').value;
+            var confirmPassword = document.getElementById('confirm_password').value;
+
+            if (password !== confirmPassword) {
+                alert("Passwords do not match.");
+                return;
+            }
+
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "http://YOUR_SERVER_ADDRESS/login", true); // Replace "YOUR_SERVER_ADDRESS" with your actual server address
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === XMLHttpRequest.DONE) {
+                    document.body.innerHTML = xhr.responseText;
+                }
+            };
+            xhr.send("username=" + encodeURIComponent(username) + "&email=" + encodeURIComponent(email) + "&password=" + encodeURIComponent(password));
+        }
+    </script>
+</body>
+</html>
