From 532ef22e48467e1a30b2474200e4ec514a832986 Mon Sep 17 00:00:00 2001
From: AdamBasly <159331030+AdamBasly@users.noreply.github.com>
Date: Thu, 21 Nov 2024 20:30:41 +0100
Subject: [PATCH] Add files via upload

---
 en/en.html         | 135 +++++++++++++++++++++++++++++++
 en/mainlab_en.html | 194 +++++++++++++++++++++++++++++++++++++++++++++
 en/sign_up_en.html | 162 +++++++++++++++++++++++++++++++++++++
 3 files changed, 491 insertions(+)
 create mode 100644 en/en.html
 create mode 100644 en/mainlab_en.html
 create mode 100644 en/sign_up_en.html
diff --git a/en/en.html b/en/en.html
new file mode 100644
index 0000000..304817c
--- /dev/null
+++ b/en/en.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: url('../img/mc_background.png') no-repeat center center fixed;
+            background-size: contain; /* Change 'cover' to 'contain' */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .container {
+            background-color: #fff;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 350px;
+            text-align: center;
+        }
+
+        .container h2 {
+            margin-bottom: 20px;
+            font-size: 24px;
+            color: #333;
+        }
+
+        .container input {
+            width: 100%;
+            padding: 15px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+
+        .container button {
+            width: 100%;
+            padding: 15px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 10px;
+            transition: background-color 0.3s;
+        }
+
+        .container button:hover {
+            background-color: #0056b3;
+        }
+
+        #message {
+            margin-top: 15px;
+            color: #e74c3c;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Login</h2>
+        <a href="sign_up_en.html" id="connection">No account yet?</a>
+        <br><br>
+        <form onsubmit="return startLogin()">
+            <input type="text" id="username" placeholder="Username" required>
+            <input type="password" id="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+        </form>
+        <p id="message"></p>
+    </div>
+
+    <div class="container" id="verificationContainer" style="display: none;">
+        <h2>Verification Code</h2>
+        <form onsubmit="return verifyCode()">
+            <input type="text" id="verificationCode" placeholder="Verification Code" required>
+            <button type="submit">Verify</button>
+        </form>
+        <p id="verificationMessage"></p>
+    </div>
+
+    <script>
+        let userEmail = '';
+
+        function sendVerificationCode(email) {
+            const verificationCode = Math.floor(100000 + Math.random() * 900000);
+            sessionStorage.setItem('verificationCode', verificationCode);
+
+            // Debug: Display code in console
+            console.log(`Verification code: ${verificationCode}`);
+            alert(`Verification code: ${verificationCode}`); // Temporarily use alert for testing
+        }
+
+        function startLogin() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const message = document.getElementById('message');
+
+            let users = JSON.parse(localStorage.getItem('users')) || {};
+            if (users[username] && users[username].password === password) {
+                userEmail = users[username].email; // Assuming email is stored during registration
+                sendVerificationCode(userEmail);
+                document.querySelector('form').style.display = 'none';
+                document.getElementById('verificationContainer').style.display = 'block';
+                return false; // Prevent form submission
+            } else {
+                message.textContent = 'Invalid username or password. Please try again.';
+                return false;
+            }
+        }
+
+        function verifyCode() {
+            const enteredCode = document.getElementById('verificationCode').value;
+            const storedCode = sessionStorage.getItem('verificationCode');
+            const verificationMessage = document.getElementById('verificationMessage');
+
+            if (enteredCode === storedCode) {
+                sessionStorage.setItem('isLoggedIn', 'true'); // Save login status
+                window.location.href = "./mainlab_en.html";
+                return false; // Prevent form submission
+            } else {
+                verificationMessage.textContent = 'Invalid verification code. Please try again.';
+                return false;
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/en/mainlab_en.html b/en/mainlab_en.html
new file mode 100644
index 0000000..3fc5937
--- /dev/null
+++ b/en/mainlab_en.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Search</title>
+    <style>
+        body {
+            background-color: #f0f0f0;
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+
+        .container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            margin-top: 50px;
+            max-width: 1000px;
+            width: 100%;
+            margin: 0 auto;
+        }
+
+        .search-bar {
+            margin-bottom: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        }
+
+            .search-bar input {
+                padding: 15px;
+                width: 400px;
+                border: 2px solid #ccc;
+                border-radius: 30px 0 0 30px;
+                outline: none;
+                font-size: 16px;
+            }
+
+            .search-bar button {
+                padding: 15px 20px;
+                background-color: #007BFF;
+                color: white;
+                border: none;
+                border-radius: 0 30px 30px 0;
+                cursor: pointer;
+                font-size: 16px;
+                transition: background-color 0.3s;
+            }
+
+                .search-bar button:hover {
+                    background-color: #0056b3;
+                }
+
+        .link-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            width: 100%;
+            justify-items: center;
+            text-align: center;
+        }
+
+            .link-container a {
+                text-decoration: none;
+                transition: transform 0.3s;
+            }
+
+                .link-container a:hover {
+                    transform: scale(1.05);
+                }
+
+            .link-container img {
+                border: 4px solid #bbb;
+                border-radius: 10px;
+                width: 100%;
+                max-width: 250px;
+                height: 150px;
+                object-fit: cover;
+            }
+
+            .link-container h1 {
+                background-color: #007BFF;
+                color: white;
+                border: 4px solid #bbb;
+                border-radius: 10px;
+                margin: 10px 0 0;
+                padding: 10px;
+                font-size: 16px;
+                width: 100%;
+            }
+
+        .taskbar {
+            width: 100%;
+            background-color: #333;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
+            padding: 10px 0;
+        }
+
+            .taskbar a {
+                padding: 10px 20px;
+                display: block;
+                color: white;
+                text-align: center;
+                text-decoration: none;
+                transition: background-color 0.3s;
+            }
+
+                .taskbar a:hover {
+                    background-color: #555;
+                }
+    </style>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            if (sessionStorage.getItem('isLoggedIn') !== 'true') {
+                alert("You must log in to access this page.");
+                window.location.href = "index.html"; // Path to the login page
+            } else {
+                // Set timeout: 60000 milliseconds = 60 seconds
+                setTimeout(function() {
+                    alert("Time limit reached. You will be redirected to the login page.");
+                    window.location.href = "index.html"; // Path to the login page
+                }, 360000);
+            }
+        });
+
+        function searchWeb() {
+            const query = document.getElementById("query").value;
+            if (query) {
+                window.open("https://www.google.com/search?q=" + encodeURIComponent(query), "_blank");
+            } else {
+                alert("Please enter a search term.");
+            }
+        }
+    </script>
+</head>
+<body>
+    <div class="container">
+        <div class="search-bar">
+            <input type="text" id="query" placeholder="Search the web...">
+            <button onclick="searchWeb()">Search</button>
+        </div>
+        <div class="link-container">
+            <a id="py" href="../pyexec.html">
+                <img src="..\\img\\OIP.jpeg">
+                <h1>Python Lab</h1>
+            </a>
+            <a id="py" href="https://www.udemy.com">
+                <img src="..\\img\\udemy.jpeg">
+                <h1>UdemyContent</h1>
+            </a>
+            <a id="py" href="https://preply.com/de/home">
+                <img src="..\\img\\preply.jpeg">
+                <h1>Preply</h1>
+            </a>
+            <a id="py" href="https://www.office.com/">
+                <img src="..\\img\\365.jpeg">
+                <h1>Microsoft 365 online</h1>
+            </a>
+            <a id="py" href="https://www.bycs.de/">
+                <img src="..\\img\\bycs.png">
+                <h1>ByCS</h1>
+            </a>
+            <a id="py" href="../Scratchgames.html">
+                <img src="..\\img\\R.jpeg">
+                <h1>Scratch</h1>
+            </a>
+            <a id="py" href="https://programmieren.wdrmaus.de/projekt/neu">
+                <img src="..\\img\\maus.jpeg">
+                <h1>Programming with the Mouse</h1>
+            </a>
+        </div>
+    </div>
+    <div class="taskbar">
+        <a href="../index.html">Log Out</a>
+        <a href="../pyexec.html">Python Lab</a>
+        <a href="https://www.udemy.com">Udemy</a>
+        <a href="ms-word:ofe|u|https://www.office.com/">Libre Office</a>
+        <a href="../painter.html">Paint</a>
+        <a href="../texteditor.html">Text Editor</a>
+        <a href="../admin_authentication.html">Admin control</a>
+    </div>
+</body>
+</html>
diff --git a/en/sign_up_en.html b/en/sign_up_en.html
new file mode 100644
index 0000000..f99cd41
--- /dev/null
+++ b/en/sign_up_en.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create Account</title>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Ubuntu', sans-serif;
+            background-color: #f0f0f0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            padding: 20px;
+        }
+        .container {
+            background-color: #fff;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+        }
+        .container h2 {
+            margin-bottom: 20px;
+            font-size: 28px;
+            color: #333;
+        }
+        .container input, .container textarea {
+            width: 100%;
+            padding: 15px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        .container button {
+            width: 100%;
+            padding: 15px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 10px;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+        .container button:hover {
+            background-color: #0056b3;
+            transform: translateY(-2px);
+        }
+        .container a {
+            display: block;
+            text-decoration: none;
+            background-color: #dc3545;
+            color: white;
+            padding: 15px;
+            border-radius: 5px;
+            font-size: 16px;
+            margin-top: 20px;
+            transition: background-color 0.3s, transform 0.3s;
+        }
+        .container a:hover {
+            background-color: #c82333;
+            transform: translateY(-2px);
+        }
+        .container label {
+            display: block;
+            margin-top: 10px;
+            font-size: 14px;
+            color: #555;
+        }
+        #message {
+            margin-top: 15px;
+            color: #e74c3c;
+            font-size: 14px;
+        }
+        .success {
+            color: #28a745;
+        }
+        .error {
+            color: #e74c3c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Create Account</h2>
+        <form onsubmit="return createAccount()">
+            <input type="text" id="username" placeholder="Username" required>
+            <input type="password" id="password" placeholder="Password" required>
+            <label>
+                <input type="checkbox" id="privacyPolicy" required> I accept the <a href="#">Privacy Policy</a>
+            </label>
+            <label>
+                <input type="checkbox" id="termsOfService" required> I accept the <a href="#">Terms of Service</a>
+            </label>
+            <button type="submit">Create Account</button>
+        </form>
+        <p id="message"></p>
+    </div>
+    <script>
+        function notify(message) {
+            if (Notification.permission !== "granted") {
+                Notification.requestPermission().then(function(permission) {
+                    if (permission === "granted") {
+                        new Notification('Notification', {
+                            body: message,
+                        });
+                    }
+                });
+            } else {
+                new Notification('Notification', {
+                    body: message,
+                });
+            }
+        }
+
+        function isStrongPassword(password) {
+            const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+            return regex.test(password);
+        }
+
+        function createAccount() {
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            const privacyPolicy = document.getElementById('privacyPolicy').checked;
+            const termsOfService = document.getElementById('termsOfService').checked;
+            const message = document.getElementById('message');
+
+            if (username && password && privacyPolicy && termsOfService) {
+                let users = JSON.parse(localStorage.getItem('users')) || {};
+                if (users[username]) {
+                    message.textContent = 'Username already exists. Please choose another.';
+                    message.className = 'error';
+                } else {
+                    users[username] = { password: password, acceptedPrivacy: privacyPolicy, acceptedTerms: termsOfService };
+                    localStorage.setItem('users', JSON.stringify(users));
+                    localStorage.setItem('acceptedPrivacy_' + username, privacyPolicy);
+                    localStorage.setItem('acceptedTerms_' + username, termsOfService);
+                    notify("Account created successfully!");
+                    message.innerHTML = 'Account created successfully. <a href="index.html">Back to Login Page</a>';
+                    message.className = 'success';
+                }
+            } else {
+                message.textContent = 'Please fill out all fields and accept the Privacy Policy and Terms of Service.';
+                message.className = 'error';
+            }
+            return false; // Prevent form submission
+        }
+
+        if (Notification.permission !== "granted") {
+            Notification.requestPermission();
+        }
+    </script>
+</body>
+</html>
