From 2f923d9e000634096c5eb072672d3b7ce3472d16 Mon Sep 17 00:00:00 2001
From: alexander <alexanderotnil8@gmail.com>
Date: Fri, 21 Nov 2025 08:43:56 +0700
Subject: [PATCH] Login page

---
 login page.html | 305 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 305 insertions(+)
 create mode 100644 login page.html
diff --git a/login page.html b/login page.html
new file mode 100644
index 0000000..8eab016
--- /dev/null
+++ b/login page.html	
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCA Gaming Hub - Login</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        /* Card decoration background */
+        body::before {
+            content: "♠ ♥ ♣ ♦";
+            position: absolute;
+            font-size: 120px;
+            opacity: 0.05;
+            top: 10%;
+            left: 5%;
+            animation: float 6s ease-in-out infinite;
+        }
+
+        body::after {
+            content: "21";
+            position: absolute;
+            font-size: 150px;
+            opacity: 0.08;
+            bottom: 10%;
+            right: 5%;
+            animation: float 8s ease-in-out infinite reverse;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(20px); }
+        }
+
+        .container {
+            position: relative;
+            z-index: 10;
+            width: 100%;
+            max-width: 400px;
+            padding: 20px;
+        }
+
+        .logo {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .logo h1 {
+            color: #FFD700;
+            font-size: 32px;
+            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+            margin-bottom: 5px;
+            letter-spacing: 2px;
+        }
+
+        .logo p {
+            color: #e0e0e0;
+            font-size: 12px;
+            letter-spacing: 1px;
+        }
+
+        .form-container {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 215, 0, 0.3);
+            border-radius: 15px;
+            padding: 40px;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            color: #FFD700;
+            font-size: 14px;
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+
+        input {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid rgba(255, 215, 0, 0.5);
+            background: rgba(255, 255, 255, 0.1);
+            color: #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+        }
+
+        input::placeholder {
+            color: rgba(224, 224, 224, 0.5);
+        }
+
+        input:focus {
+            outline: none;
+            border-color: #FFD700;
+            background: rgba(255, 255, 255, 0.15);
+            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
+        }
+
+        .button-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 30px;
+            align-items: center;
+        }
+
+        .btn {
+            padding: 12px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            letter-spacing: 1px;
+        }
+
+        .btn-signin {
+            background: linear-gradient(135deg, #FFD700, #FFA500);
+            color: #1a1a2e;
+            flex: 1;
+        }
+
+        .btn-signin:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
+        }
+
+        .btn-signup {
+            background: rgba(255, 215, 0, 0.2);
+            color: #FFD700;
+            border: 1px solid #FFD700;
+            font-size: 11px;
+            padding: 8px 12px;
+            min-width: 70px;
+        }
+
+        .btn-signup:hover {
+            background: rgba(255, 215, 0, 0.3);
+            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
+        }
+
+        .btn-back {
+            background: rgba(255, 215, 0, 0.2);
+            color: #FFD700;
+            border: 1px solid #FFD700;
+            font-size: 12px;
+            width: 100%;
+            margin-top: 15px;
+        }
+
+        .btn-back:hover {
+            background: rgba(255, 215, 0, 0.3);
+        }
+
+        .card-icon {
+            font-size: 48px;
+            text-align: center;
+            margin-bottom: 20px;
+            animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        .success-message {
+            color: #4ade80;
+            font-size: 12px;
+            text-align: center;
+            margin-top: 15px;
+            display: none;
+        }
+
+        .success-message.show {
+            display: block;
+        }
+
+        .error-message {
+            color: #ff6b6b;
+            font-size: 12px;
+            text-align: center;
+            margin-top: 15px;
+            display: none;
+        }
+
+        .error-message.show {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="logo">
+            <h1>♠ OCA GAMING HUB ♠</h1>
+            <p>BLACKJACK 21 CARD GAME</p>
+        </div>
+
+        <div class="form-container">
+            <div class="card-icon">🂡</div>
+
+            <!-- Main Page - Login Form -->
+            <div id="mainPage">
+                <div class="form-group">
+                    <label for="mainUsername">Username</label>
+                    <input type="text" id="mainUsername" placeholder="Enter your username" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="mainPassword">Password</label>
+                    <input type="password" id="mainPassword" placeholder="Enter your password" required>
+                </div>
+
+                <div class="button-group">
+                    <button type="button" class="btn btn-signin" onclick="goToSignUp()">Sign Up</button>
+                </div>
+
+                <div class="success-message" id="mainMessage"></div>
+                <div class="error-message" id="mainError"></div>
+            </div>
+
+            <!-- Sign Up Page -->
+            <form id="signupForm" style="display: none;">
+                <div class="form-group">
+                    <label for="signupUsername">Username</label>
+                    <input type="text" id="signupUsername" placeholder="Create a username" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="signupEmail">Email</label>
+                    <input type="email" id="signupEmail" placeholder="Enter your email" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="signupPassword">Password</label>
+                    <input type="password" id="signupPassword" placeholder="Create a password" required>
+                </div>
+
+                <button type="submit" class="btn btn-signin" style="width: 100%;">Create Account</button>
+                <button type="button" class="btn btn-back" onclick="goToMain()">Back</button>
+
+                <div class="success-message" id="signupMessage"></div>
+                <div class="error-message" id="signupError"></div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        function goToMain() {
+            document.getElementById('mainPage').style.display = 'block';
+            document.getElementById('signupForm').style.display = 'none';
+            // Clear messages
+            document.getElementById('mainMessage').classList.remove('show');
+            document.getElementById('mainError').classList.remove('show');
+        }
+
+        function goToSignUp() {
+            document.getElementById('mainPage').style.display = 'none';
+            document.getElementById('signupForm').style.display = 'block';
+        }
+
+        // Signup Form Handler
+        document.getElementById('signupForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const username = document.getElementById('signupUsername').value;
+            const email = document.getElementById('signupEmail').value;
+            const password = document.getElementById('signupPassword').value;
+            
+            if (username && email && password) {
+                const message = document.getElementById('signupMessage');
+                message.textContent = `✓ Account created successfully for ${username}!`;
+                message.classList.add('show');
+                
+                setTimeout(() => {
+                    alert(`Account created!\nUsername: ${username}\nEmail: ${email}`);
+                    // Add your redirect here
+                    goToMain();
+                }, 1500);
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
