<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corporate Intranet Portal</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f2f4eb 0%, #ebd7f8 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

        .company-info h1 {
            font-size: 1.5rem;
            color: #2d3748;
            margin-bottom: 0.25rem;
        }

        .company-info p {
            color: #718096;
            font-size: 0.875rem;
        }

        .user-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 1rem;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 25px;
            border: 1px solid rgba(102, 126, 234, 0.2);
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.875rem;
        }

        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #4a5568;
        }

        .btn-secondary:hover {
            background: #cbd5e0;
        }

        /* Main Content */
        .main-content {
            padding: 3rem 0;
        }

        .welcome-section {
            text-align: center;
            margin-bottom: 4rem;
        }

        .welcome-title {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1rem;
        }

        .welcome-subtitle {
            font-size: 1.25rem;
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
            margin: 0 auto 2rem;
            line-height: 1.6;
        }

        .user-badge {
            display: inline-block;
            background: rgba(72, 187, 120, 0.2);
            color: #22543d;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.875rem;
            font-weight: 600;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(72, 187, 120, 0.3);
        }

        /* Applications Grid */
        .apps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .app-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            padding: 2rem;
            cursor: pointer;
            transition: all 0.4s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .app-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--app-color);
        }

        .app-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .app-card.locked {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .app-card.locked:hover {
            transform: none;
        }

        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .app-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            background: var(--app-color);
            position: relative;
        }

        .lock-icon {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            background: #e53e3e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }

        .access-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-authorized {
            background: #c6f6d5;
            color: #22543d;
        }

        .badge-denied {
            background: #fed7d7;
            color: #742a2a;
        }

        .badge-login {
            background: #e2e8f0;
            color: #4a5568;
        }

        .app-content h3 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #2d3748;
        }

        .app-content p {
            color: #718096;
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .app-access {
            font-size: 0.75rem;
            color: #a0aec0;
            font-style: italic;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            width: 90%;
            max-width: 400px;
            position: relative;
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .modal-header h2 {
            font-size: 1.25rem;
            color: #2d3748;
        }

        .close-btn {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #718096;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #4a5568;
            font-weight: 600;
        }

        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .error-message {
            background: #fed7d7;
            color: #742a2a;
            padding: 0.75rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            font-size: 0.875rem;
        }

        .modal-footer {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            margin-top: 2rem;
        }

        /* Demo Section */
        .demo-section {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 2rem;
            margin-top: 3rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .demo-section h3 {
            color: white;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
        }

        .demo-credential {
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .demo-credential strong {
            color: #ffd89b;
            display: block;
            margin-bottom: 0.25rem;
        }

        .demo-credential span {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.875rem;
        }

        /* Loading */
        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding: 2rem;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #e2e8f0;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Toast */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            z-index: 3000;
            animation: toastSlideIn 0.3s ease;
        }

        .toast.success {
            background: #48bb78;
        }

        .toast.error {
            background: #e53e3e;
        }

        .toast.info {
            background: #4299e1;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }

            .welcome-title {
                font-size: 2rem;
            }

            .apps-grid {
                grid-template-columns: 1fr;
            }

            .demo-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo-section">
                    <div class="logo">
                        <img src="C:\Users\Administrator\Downloads\Logo.png" alt="S&A">
                    </div>
                    <div class="company-info">
                        <h1>S&A</h1>
                        <p>Your gateway to company applications</p>
                    </div>
                </div>
                <div class="user-section" id="userSection">
                    <button class="btn btn-primary" onclick="openLoginModal()">
                        👤 Login
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <div class="container">
            <section class="welcome-section">
                <h1 class="welcome-title">Welcome S&A Law Offices</h1>
                <p class="welcome-subtitle">
                    INtranet
                </p>
                <div id="userBadge" style="display: none;"></div>
            </section>

            <section class="apps-section">
                <div class="apps-grid" id="appsGrid">
                    <!-- Apps will be populated by JavaScript -->
                </div>
            </section>

            <!-- <section class="demo-section">
                <h3>🔑 Demo Credentials</h3>
                <div class="demo-grid">
                    <div class="demo-credential">
                        <strong>IT Admin:</strong>
                        <span>Username: john.doe | Password: password123</span>
                    </div>
                    <div class="demo-credential">
                        <strong>HR Manager:</strong>
                        <span>Username: jane.smith | Password: hr2024</span>
                    </div>
                    <div class="demo-credential">
                        <strong>Leadership:</strong>
                        <span>Username: mike.wilson | Password: lead123</span>
                    </div>
                    <div class="demo-credential">
                        <strong>Employee:</strong>
                        <span>Username: sarah.brown | Password: emp2024</span>
                    </div>
                </div>
            </section> -->
        </div>
    </main>

    <!-- Login Modal -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <button class="close-btn" onclick="closeLoginModal()">&times;</button>
            <div class="modal-header">
                <span style="font-size: 1.5rem;">👤</span>
                <h2>Login Required</h2>
            </div>
            <div id="loginError" class="error-message" style="display: none;"></div>
            <form id="loginForm">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" id="username" placeholder="Enter your username" required>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" placeholder="Enter your password" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="closeLoginModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="loginBtn">Login</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Loading Modal -->
    <div class="modal" id="loadingModal">
        <div class="modal-content">
            <div class="loading">
                <div class="spinner"></div>
                <h3 id="loadingText">Launching Application...</h3>
                <p>Please wait while we prepare your application</p>
            </div>
        </div>
    </div>

    <script>
        // Mock MongoDB-like data structure
        const mockUsers = [
            {
                id: 1,
                username: 'ankita',
                password: 'password123',
                name: 'Ankita Yadav',
                department: 'IT',
                role: 'admin',
                permissions: ['asset_management', 'hr_referral', 'project_tracker', 'analytics', 'communication']
            },
            {
                id: 2,
                username: 'ankita',
                password: 'hr123',
                name: 'Ankita Yadav',
                department: 'HR',
                role: 'hr_manager',
                permissions: ['hr_referral', 'communication']
            },
            {
                id: 3,
                username: 'gunita',
                password: 'lead123',
                name: 'Gunita Pahwa',
                department: 'Leadership',
                role: 'manager',
                permissions: ['asset_management', 'analytics', 'project_tracker', 'communication']
            },
            {
                id: 4,
                username: 'sarah.brown',
                password: 'emp2024',
                name: 'Sarah Brown',
                department: 'Marketing',
                role: 'employee',
                permissions: ['communication']
            }
        ];

        const applications = [
            {
                id: 'asset_management',
                name: 'BD Submisions',
                description: 'description',
                icon: '🛡️',
                color: 'linear-gradient(135deg, #3182ce, #2c5aa0)',
                requiredRoles: ['IT', 'Leadership'],
                url: '/asset-management'
            },
            {
                id: 'hr_referral',
                name: 'Referral Portal - KHOJ',
                description: 'Employee referral management system',
                icon: '👥',
                color: 'linear-gradient(135deg, #38a169, #2f855a)',
                requiredRoles: ['HR'],
                url: '/hr-referral'
            },
            {
                id: 'project_tracker',
                name: 'Quest',
                description: 'DESP',
                icon: '📋',
                color: 'linear-gradient(135deg, #805ad5, #6b46c1)',
                requiredRoles: ['IT', 'Leadership', 'Marketing'],
                url: '/project-tracker'
            },
            {
                id: 'analytics',
                name: 'License Management',
                description: 'DESP',
                icon: '📊',
                color: 'linear-gradient(135deg, #dd6b20, #c05621)',
                requiredRoles: ['Leadership', 'IT'],
                url: '/analytics'
            },
            {
                id: 'communication',
                name: 'Patent',
                description: 'DESP',
                icon: '💬',
                color: 'linear-gradient(135deg, #319795, #2c7a7b)',
                requiredRoles: ['HR', 'IT', 'Leadership', 'Patent'],
                url: '/communication'
            }
        ];

        let currentUser = null;

        // Initialize the application
        function init() {
            console.log('Connecting to MongoDB...');
            renderApps();
        }

        // Render applications
        function renderApps() {
            const appsGrid = document.getElementById('appsGrid');
            appsGrid.innerHTML = '';

            applications.forEach(app => {
                const hasAccess = currentUser && currentUser.permissions.includes(app.id);
                const isLocked = currentUser && !hasAccess;

                const appCard = document.createElement('div');
                appCard.className = `app-card ${isLocked ? 'locked' : ''}`;
                appCard.style.setProperty('--app-color', app.color);
                appCard.onclick = () => handleAppClick(app);

                let badge = '';
                if (!currentUser) {
                    badge = '<span class="access-badge badge-login">Login Required</span>';
                } else if (isLocked) {
                    badge = '<span class="access-badge badge-denied">No Access</span>';
                } else if (hasAccess) {
                    badge = '<span class="access-badge badge-authorized">Authorized</span>';
                }

                appCard.innerHTML = `
                    <div class="app-header">
                        <div class="app-icon" style="background: ${app.color}">
                            ${app.icon}
                            ${isLocked ? '<div class="lock-icon">🔒</div>' : ''}
                        </div>
                        ${badge}
                    </div>
                    <div class="app-content">
                        <h3>${app.name}</h3>
                        <p>${app.description}</p>
                        <div class="app-access">Access: ${app.requiredRoles.join(', ')}</div>
                    </div>
                `;

                appsGrid.appendChild(appCard);
            });
        }

        // Handle app click
        function handleAppClick(app) {
            if (!currentUser) {
                openLoginModal();
                return;
            }

            if (!currentUser.permissions.includes(app.id)) {
                showToast(`You don't have permission to access ${app.name}. Contact your administrator.`, 'error');
                return;
            }

            // Show loading modal
            document.getElementById('loadingText').textContent = `Launching ${app.name}...`;
            document.getElementById('loadingModal').classList.add('active');

            // Simulate app loading
            setTimeout(() => {
                document.getElementById('loadingModal').classList.remove('active');
                showToast(`Opening ${app.name}...`, 'success');
                console.log(`Navigating to ${app.url}`);
            }, 1500);
        }

        // Open login modal
        function openLoginModal() {
            document.getElementById('loginModal').classList.add('active');
            document.getElementById('loginError').style.display = 'none';
        }

        // Close login modal
        function closeLoginModal() {
            document.getElementById('loginModal').classList.remove('active');
            document.getElementById('loginForm').reset();
            document.getElementById('loginError').style.display = 'none';
        }

        // Handle login
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const loginBtn = document.getElementById('loginBtn');
            
            loginBtn.textContent = 'Authenticating...';
            loginBtn.disabled = true;

            // Simulate API call
            setTimeout(() => {
                const user = mockUsers.find(u => u.username === username && u.password === password);

                if (user) {
                    currentUser = user;
                    updateUserSection();
                    renderApps();
                    closeLoginModal();
                    showToast(`Welcome back, ${user.name}!`, 'success');
                } else {
                    const errorDiv = document.getElementById('loginError');
                    errorDiv.textContent = 'Invalid username or password';
                    errorDiv.style.display = 'block';
                }

                loginBtn.textContent = 'Login';
                loginBtn.disabled = false;
            }, 1000);
        });

        // Update user section
        function updateUserSection() {
            const userSection = document.getElementById('userSection');
            const userBadge = document.getElementById('userBadge');

            if (currentUser) {
                userSection.innerHTML = `
                    <div class="user-info">
                        <div class="user-avatar">${currentUser.name.split(' ').map(n => n[0]).join('')}</div>
                        <div>
                            <div style="font-weight: 600; font-size: 0.875rem;">${currentUser.name}</div>
                            <div style="color: #718096; font-size: 0.75rem;">${currentUser.department}</div>
                        </div>
                    </div>
                    <button class="btn btn-secondary" onclick="logout()">Logout</button>
                `;

                userBadge.innerHTML = `<div class="user-badge">Logged in as ${currentUser.name} • ${currentUser.department}</div>`;
                userBadge.style.display = 'block';
            } else {
                userSection.innerHTML = `
                    <button class="btn btn-primary" onclick="openLoginModal()">
                        👤 Login
                    </button>
                `;
                userBadge.style.display = 'none';
            }
        }

        // Logout
        function logout() {
            currentUser = null;
            updateUserSection();
            renderApps();
            showToast('You have been successfully logged out.', 'info');
        }

        // Show toast notification
        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 3000);
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            const loginModal = document.getElementById('loginModal');
            const loadingModal = document.getElementById('loadingModal');
            
            if (event.target === loginModal) {
                closeLoginModal();
            }
        }

        // Initialize when page loads
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>in this first of all i wanted all the cards to be in left vertically ...and in rihght i wanted live date and weather info just like intranet have ...also i wanted that after login each of the card to be a clcikable link like i click the box it takes me to links like for khoj we have http;//khoj:5173 and so on also i wanted a admin login which we will define via code and a nrml login ....admin loign will have a exatr box of manage users where he will add or delete or upadte user name and their password ....useranem and pssord will be fixed no case of sign up only login is thehir admin will add user and in backend  u can maitain a excel also give a unqiue id to each appliaction so taht admin can assign the people rights who can access which app ...like when an admin add ankita ...give option access to whihc reasurce -- khoj , quest , patent .....remove the department wise loign leadership , it ..etc giev ths right to admin .....also i want a prod ready code.....leave the aprt whcih is kept to be same ....i will copy pste that