hi

2025-02-25 16:26:49 +00:00
parent 9b824679cc
commit ba96c2a70c
5 changed files with 210 additions and 1 deletions
@@ -0,0 +1 @@
+# userlogins-for-fun-miles
@@ -0,0 +1,96 @@
+// Initialize Userbase
+userbase.init({ appId: '7cd8e25b-723d-4af7-8bdf-ef558bd0dfcc' }); // Replace with your Userbase app ID
+
+document.getElementById('signup-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const email = document.getElementById('signup-email').value;
+    const password = document.getElementById('signup-password').value;
+
+    try {
+        const user = await userbase.signUp({ username: email, password });
+        // Save user info in cookies
+        document.cookie = `user=${user.username}; path=/;`;
+        alert('Signup successful!');
+    } catch (error) {
+        console.error('Signup error:', error);
+        alert('Signup failed: ' + error.message);
+    }
+});
+
+document.getElementById('login-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const email = document.getElementById('login-email').value;
+    const password = document.getElementById('login-password').value;
+
+    try {
+        const user = await userbase.signIn({ username: email, password });
+        // Save user info in cookies
+        document.cookie = `user=${user.username}; path=/;`;
+        alert('Login successful!');
+        document.getElementById('form-container').style.display = 'none';
+        document.getElementById('notes-container').style.display = 'block';
+        loadNotes();
+    } catch (error) {
+        console.error('Login error:', error);
+        alert('Login failed: ' + error.message);
+    }
+});
+
+// Function to load cookies
+function loadCookies() {
+    const cookies = document.cookie.split('; ');
+    const userCookie = cookies.find(row => row.startsWith('user='));
+    if (userCookie) {
+        const user = userCookie.split('=')[1];
+        alert(`Welcome back, ${user}!`);
+        document.getElementById('form-container').style.display = 'none';
+        document.getElementById('notes-container').style.display = 'block';
+        loadNotes();
+    }
+}
+
+// Load notes from local storage
+function loadNotes() {
+    const notes = JSON.parse(localStorage.getItem('userNotes')) || [];
+    const savedNotesDiv = document.getElementById('saved-notes');
+    savedNotesDiv.innerHTML = '';
+    notes.forEach((note, index) => {
+        const noteDiv = document.createElement('div');
+        noteDiv.className = 'note';
+        noteDiv.textContent = note;
+
+        const deleteButton = document.createElement('button');
+        deleteButton.textContent = 'Delete';
+        deleteButton.className = 'delete-note';
+        deleteButton.onclick = () => deleteNote(index);
+
+        noteDiv.appendChild(deleteButton);
+        savedNotesDiv.appendChild(noteDiv);
+    });
+}
+
+// Delete note from local storage
+function deleteNote(index) {
+    const notes = JSON.parse(localStorage.getItem('userNotes')) || [];
+    notes.splice(index, 1);
+    localStorage.setItem('userNotes', JSON.stringify(notes));
+    loadNotes();
+}
+
+// Save note to local storage
+document.getElementById('save-note').addEventListener('click', () => {
+    const noteInput = document.getElementById('note-input');
+    const note = noteInput.value;
+    if (note) {
+        const notes = JSON.parse(localStorage.getItem('userNotes')) || [];
+        notes.push(note);
+        localStorage.setItem('userNotes', JSON.stringify(notes));
+        noteInput.value = '';
+        loadNotes();
+    } else {
+        alert('Please enter a note.');
+    }
+});
+
+// Load cookies on page load
+window.onload = loadCookies;
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Userbase Login/Signup</title>
+    <link rel="stylesheet" href="styles.css">
+    <script type="text/javascript" src="https://sdk.userbase.com/2/userbase.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Userbase Login/Signup</h1>
+        <div id="form-container">
+            <form id="signup-form">
+                <h2>Sign Up</h2>
+                <input type="email" id="signup-email" placeholder="Email" required>
+                <input type="password" id="signup-password" placeholder="Password" required>
+                <button type="submit">Sign Up</button>
+            </form>
+            <form id="login-form">
+                <h2>Login</h2>
+                <input type="email" id="login-email" placeholder="Email" required>
+                <input type="password" id="login-password" placeholder="Password" required>
+                <button type="submit">Login</button>
+            </form>
+        </div>
+        <div id="notes-container" style="display: none;">
+            <h2>Your Notes</h2>
+            <textarea id="note-input" placeholder="Write your note here..."></textarea>
+            <button id="save-note">Save Note</button>
+            <div id="saved-notes"></div>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
@@ -0,0 +1,71 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 600px;
+    margin: auto;
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1, h2 {
+    color: #333;
+}
+
+form {
+    margin-bottom: 20px;
+}
+
+input[type="email"],
+input[type="password"],
+textarea {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    padding: 10px 15px;
+    background-color: #5cb85c;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #4cae4c;
+}
+
+#saved-notes {
+    margin-top: 20px;
+}
+
+.note {
+    background: #e9ecef;
+    padding: 10px;
+    margin: 5px 0;
+    border-radius: 4px;
+}
+
+.delete-note {
+    margin-left: 10px;
+    padding: 5px 10px;
+    background-color: #d9534f;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.delete-note:hover {
+    background-color: #c9302c;
+}
@@ -78,7 +78,12 @@ const mainContentData = [
    name: "Contact Us",
    image: "/",
    link: "/Contact.html",
-  }
+  },
+  {
+    name: "login",
+    image: "/images.png",
+    link: "/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/index.html",
+  },
 ];
 mainContentData.forEach(item => {
  let newDiv = `