auth.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script>
        (function () {
            const theme = localStorage.getItem('bibliodrift_theme');
            if (theme === 'night') {
                document.documentElement.setAttribute('data-theme', 'night');
            }
        })();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auth | BiblioDrift</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style-responsive.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Georgia&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .auth-container {
            max-width: 400px;
            margin: 8rem auto;
            background: var(--book-bg, #fff);
            padding: 3rem;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .auth-input {
            width: 100%;
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-family: 'Georgia', serif;
        }

        .auth-btn {
            width: 100%;
            padding: 1rem;
            background: #2c2c2c;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-family: 'Playfair Display', serif;
            font-size: 1.1rem;
        }

        .toggle-link {
            display: block;
            margin-top: 1.5rem;
            color: #666;
            font-size: 0.9rem;
            cursor: pointer;
            text-decoration: underline;
        }

        #nameField {
            display: none;
        }
    </style>
    <link rel="icon" href="../assets/images/biblioDrift_favicon.png" type="image/png">
    <!-- PWA -->
    <link rel="manifest" href="../manifest.json">
    <meta name="theme-color" content="#2c2420">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="BiblioDrift">
    <link rel="apple-touch-icon" href="../assets/images/biblioDrift_favicon.png">
</head>

<body>
    <header>
        <a href="index.html" class="logo">
            <img style="height: 40px" src="../assets/images/biblioDrift_favicon.png" alt="BiblioDrift Logo"> BiblioDrift
        </a>
        <div class="header-controls">
            <div class="search-bar">
                <input type="text" id="searchInput" class="search-input" placeholder="Search for a feeling...">
                <i class="fa-solid fa-search search-icon"></i>
            </div>
            <nav class="nav-links">
                <div class="tooltip">
                    <a href="index.html">Discovery</a>
                    <span class="tooltip-text"><i class="fa-solid fa-wand-magic-sparkles"></i> Explore books</span>
                </div>
                <div class="tooltip">
                    <a href="library.html">My Library</a>
                    <span class="tooltip-text"><i class="fa-solid fa-book"></i> My Library</span>
                </div>
                <div class="tooltip">
                    <a href="chat.html">Chat</a>
                    <span class="tooltip-text"><i class="fa-solid fa-comments"></i> Chat</span>
                </div>
                <div class="tooltip">
                    <a href="auth.html" class="active">Sign In</a>
                    <span class="tooltip-text"><i class="fa-solid fa-key"></i> Access account</span>
                </div>
            </nav>
            <button id="themeToggle" class="btn-icon" title="Toggle Theme">
                <i class="fa-solid fa-moon"></i>
            </button>
        </div>
    </header>

    <main>
        <!-- 
            =============================================================
            Authentication Container Area
            =============================================================
            This container encapsulates the core authentication workflow 
            for the application. 
            
            By default, it renders the 'Sign In' view, but dynamically 
            toggles to 'Registration' mode based on user interaction with 
            the 'toggleText' link below.

            Features:
            - Fully responsive design via 'auth-container' class.
            - JavaScript intercepts submission via 'handleAuth(event)'.
            - Name field is hidden by default and only shown during sign up.
            =============================================================
        -->
        <div class="auth-container">
            
            <!-- Dynamic Form Header -->
            <h2 id="authTitle" style="font-family: 'Playfair Display'; margin-bottom: 2rem;">
                Welcome Back
            </h2>
            
            <!-- Authentication Form: Handles both Sign In and Registration dynamically -->
            <form id="authForm" onsubmit="handleAuth(event)">
                
                <!-- Registration Specific Field (Hidden during Sign In) -->
                <div id="nameField">
                    <input type="text" id="username" class="auth-input" placeholder="Full Name">
                </div>
                
                <!-- Standard Credentials -->
                <div class="input-group" style="margin-bottom: 1rem;">
                    <input type="email" id="email" class="auth-input" placeholder="Email Address" value="demo@bibliodrift.com" required>
                </div>
                
                <div class="input-group" style="margin-bottom: 1rem;">
                    <input type="password" class="auth-input" placeholder="Password" value="demo123" required>
                </div>
                
                <!-- Primary Action Button -->
                <button type="submit" id="submitBtn" class="auth-btn">
                    Sign In
                </button>
            </form>
            
            <!-- Mode Toggle Link -->
            <div class="auth-footer" style="margin-top: 1.5rem;">
                <span id="toggleText" class="toggle-link">
                    No account? Create one.
                </span>
            </div>
            
        </div>
    </main>

    <script src="../js/config.js"></script>
    <script src="../js/footer.js"></script>
    <script src="../js/app.js"></script>
    <script src="../script/header-scroll.js"></script>
    <script>
        const toggleText = document.getElementById('toggleText');
        const authForm = document.getElementById('authForm');
        const authTitle = document.getElementById('authTitle');
        const nameField = document.getElementById('nameField');
        const submitBtn = document.getElementById('submitBtn');

        if (toggleText) {
            toggleText.addEventListener('click', () => {
                const isLogin = authForm.dataset.mode !== 'register';
                if (isLogin) {
                    authForm.dataset.mode = 'register';
                    authTitle.textContent = 'Create Account';
                    nameField.style.display = 'block';
                    submitBtn.textContent = 'Sign Up';
                    toggleText.textContent = 'Already have an account? Sign in.';
                } else {
                    authForm.dataset.mode = 'login';
                    authTitle.textContent = 'Welcome Back';
                    nameField.style.display = 'none';
                    submitBtn.textContent = 'Sign In';
                    toggleText.textContent = 'No account? Create one.';
                }
            });
        }
    </script>
    <script src="../js/pwa.js"></script>
</body>

</html>