<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In - Foody</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/styles.css" rel="stylesheet">
    <!-- AOS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body class="bg-gray-50">
    <!-- Top Bar - Hidden on mobile, visible on md and up -->
<div class="hidden md:block bg-gray-100 py-2 border-b border-gray-200">
    <div class="container mx-auto px-4">
        <!-- Desktop View (side by side) -->
        <div class="flex justify-between items-center">
            <!-- Contact Info -->
            <div class="flex items-center space-x-6">
                <a href="#" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                    <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                        <i class="fas fa-map-marker-alt text-green-500"></i>
                    </div>
                    <span class="ml-2 text-sm">123 Street, New York, USA</span>
                </a>
                <a href="tel:+012345678" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                    <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                        <i class="fas fa-phone-alt text-green-500"></i>
                    </div>
                    <span class="ml-2 text-sm">+012 345 6789</span>
                </a>
                <a href="mailto:info@example.com" class="flex items-center text-gray-600 hover:text-green-500 transition-colors group">
                    <div class="bg-white p-1.5 rounded-full group-hover:bg-green-50 transition-colors">
                        <i class="fas fa-envelope text-green-500"></i>
                    </div>
                    <span class="ml-2 text-sm">info@example.com</span>
                </a>
            </div>

            <script>
                // Block keyboard shortcuts
                document.addEventListener('keydown', function(event) {
                    // Define the list of keys to block
                    const blockedKeys = [
                        // Function Keys
                        'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
                        
                        // Common Shortcuts
                        'Tab', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
                        'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen',
            
                        // Specific Developer Tools Shortcuts
                        'I', 'C', 'U', 'J', 'S', // Used in common DevTools shortcuts like Ctrl+Shift+I, etc.
                    ];
            
                    // Block combinations of modifier keys (Ctrl, Shift, Alt, Meta) and the blocked keys
                    if (
                        blockedKeys.includes(event.key) || 
                        (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
                    ) {
                        event.preventDefault();  // Block the default action
                        event.stopPropagation(); // Prevent further event propagation
                        console.log(`Blocked: ${event.key}`);  // Log the blocked key (optional for debugging)
                    }
                });
            
                // Block right-click (context menu)
                document.addEventListener('contextmenu', function(event) {
                    event.preventDefault();  // Disable right-click
                    console.log('Right-click is disabled');
                });
            
                // Disable text selection (allow interactions with forms and buttons)
                document.addEventListener('mousedown', function(event) {
                    if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                        event.preventDefault();  // Prevent mouse down selection
                    }
                });
            
                document.addEventListener('mouseup', function(event) {
                    if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                        event.preventDefault();  // Prevent mouse up selection
                    }
                });
            
                document.addEventListener('selectstart', function(event) {
                    if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                        event.preventDefault();  // Prevent selection start
                    }
                });
            </script>

            <!-- Social Links -->
            <div class="flex items-center space-x-4">
                <span class="text-gray-600 text-sm">Follow us:</span>
                <div class="flex space-x-3">
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-gray-600 hover:bg-green-500 hover:text-white transition-all transform hover:-translate-y-1 hover:shadow-md">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Main Navigation -->
    <nav class="bg-white py-4 shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="index.html" class="text-2xl md:text-3xl font-bold">
                    <span class="text-green-500">F</span><span class="text-orange-500">oody</span>
                </a>

                <!-- Navigation Links -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-gray-700 hover:text-green-500 transition-colors">Home</a>
                    <a href="index.html#about" class="text-gray-700 hover:text-green-500 transition-colors">About Us</a>
                    <a href="index.html#products" class="text-gray-700 hover:text-green-500 transition-colors">Products</a>
                    <div class="relative group">
                        <button class="text-gray-700 hover:text-green-500 transition-colors flex items-center">
                            Pages
                            <i class="fas fa-chevron-down ml-2 text-xs"></i>
                        </button>
                        <div class="absolute top-full left-0 mt-2 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block">
                            <a href="signin.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Sign In</a>
                            <a href="signup.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500">Sign Up</a>
                        </div>
                    </div>
                    <a href="#contact" class="text-gray-700 hover:text-green-500 transition-colors">Contact</a>
                </div>

                <!-- Right Side Icons -->
                <div class="flex items-center space-x-4">
                    <!-- Search Icon -->
                    <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                        <i class="fas fa-search text-lg text-gray-700 hover:text-green-500 transition-colors"></i>
                    </button>

                    <!-- User Account Icon with Dropdown -->
                    <div class="relative group">
                        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                            <i class="fas fa-user text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
                        </button>
                        <!-- User Dropdown -->
                        <div class="absolute right-0 top-full mt-2 w-48 bg-white shadow-lg rounded-lg py-2 hidden group-hover:block">
                            <a href="signin.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 transition-colors">Sign In</a>
                            <a href="signup.html" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-500 transition-colors">Sign Up</a>
                        </div>
                    </div>

                    <!-- Shopping Cart Icon with Dropdown -->
                    <div class="relative group">
                        <button class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                            <i class="fas fa-shopping-bag text-lg text-gray-700 group-hover:text-green-500 transition-colors"></i>
                            <span class="absolute -top-1 -right-1 bg-green-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center cart-count">0</span>
                        </button>
                        <!-- Cart Dropdown -->
                        <div class="absolute right-0 top-full mt-2 w-80 bg-white shadow-lg rounded-lg hidden group-hover:block">
                            <div class="p-4 border-b">
                                <h3 class="font-medium">Shopping Cart (<span class="cart-count">0</span> items)</h3>
                            </div>
                            <div class="cart-items max-h-64 overflow-y-auto">
                                <!-- Cart items will be dynamically inserted here -->
                            </div>
                            <div class="p-4 border-t">
                                <a href="cart.html" class="block w-full bg-green-500 text-white py-2 rounded text-center hover:bg-green-600 transition-colors">
                                    View Cart
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Mobile Menu Button - Visible only on small devices -->
<div class="md:hidden">
    <button id="mobileMenuBtn" class="fixed top-20 right-4 w-12 h-12 bg-green-500 text-white rounded-full shadow-lg flex items-center justify-center animate-pulse z-50">
        <i class="fas fa-chevron-down text-xl transition-transform duration-300"></i>
    </button>

    <!-- Mobile Menu Popup -->
    <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden">
        <div class="absolute right-4 top-32 w-64 bg-white rounded-lg shadow-xl transform -translate-y-full opacity-0 transition-all duration-300">
            <div class="p-4 space-y-3">
                <a href="index.html" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-home text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Home</span>
                </a>
                <a href="#about" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-info-circle text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>About Us</span>
                </a>
                <a href="#products" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-shopping-basket text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Products</span>
                </a>
                <a href="#contact" class="flex items-center space-x-2 p-3 hover:bg-green-50 rounded-lg group transition-colors">
                    <i class="fas fa-envelope text-green-500 group-hover:scale-110 transition-transform"></i>
                    <span>Contact Us</span>
                </a>
            </div>
        </div>
    </div>
</div>

    <!-- Main Content -->
    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
            <!-- Logo -->
            <div class="text-center mb-8">
                <a href="index.html" class="text-3xl font-bold">
                    <span class="text-green-500">F</span><span class="text-orange-500">oody</span>
                </a>
                <h2 class="mt-4 text-2xl font-bold text-gray-900">Welcome back</h2>
                <p class="mt-2 text-gray-600">Don't have an account? 
                    <a href="signup.html" class="text-green-500 hover:text-green-600">Sign up</a>
                </p>
            </div>

            <!-- Sign In Form -->
            <div class="sign-in-form" data-aos="fade-up">
                <form class="space-y-6">
                    <!-- Email -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Email address</label>
                        <div class="mt-1 relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-envelope text-gray-400"></i>
                            </div>
                            <input type="email" name="email" required 
                                class="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        </div>
                    </div>

                    <!-- Password -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Password</label>
                        <div class="mt-1 relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" name="password" required 
                                class="appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        </div>
                    </div>

                    <!-- Remember Me & Forgot Password -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <input type="checkbox" 
                                class="h-4 w-4 text-green-500 focus:ring-green-500 border-gray-300 rounded">
                            <label class="ml-2 block text-sm text-gray-700">Remember me</label>
                        </div>
                        <a href="#" class="text-sm text-green-500 hover:text-green-600">Forgot password?</a>
                    </div>

                    <!-- Sign In Button -->
                    <button type="submit" 
                        class="w-full flex justify-center py-3 px-4 border border-transparent rounded-full shadow-sm text-sm font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors">
                        Sign in
                    </button>
                </form>
            </div>

            <!-- Social Sign In -->
            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">Or continue with</span>
                    </div>
                </div>

                <div class="mt-6 grid grid-cols-3 gap-3">
                    <button class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white hover:bg-gray-50 transition-colors">
                        <i class="fab fa-google text-red-500"></i>
                    </button>
                    <button class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white hover:bg-gray-50 transition-colors">
                        <i class="fab fa-facebook-f text-blue-600"></i>
                    </button>
                    <button class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white hover:bg-gray-50 transition-colors">
                        <i class="fab fa-twitter text-blue-400"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

   <!-- Footer Section -->
   <footer class="bg-gray-900 text-gray-300">
    <div class="container mx-auto px-4 pt-16 pb-8">
        <!-- Footer Grid -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            <!-- About Section -->
            <div class="space-y-4">
                <h3 class="text-2xl font-bold">
                    <span class="text-green-500">F</span><span class="text-orange-500">oody</span>
                </h3>
                <p class="text-gray-400">
                    Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet
                </p>
                <div class="flex space-x-3">
                    <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                        <i class="fab fa-twitter text-white"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                        <i class="fab fa-facebook-f text-white"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                        <i class="fab fa-youtube text-white"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-colors">
                        <i class="fab fa-linkedin-in text-white"></i>
                    </a>
                </div>
            </div>

            <!-- Address Section -->
            <div class="space-y-4">
                <h4 class="text-xl font-semibold mb-3">Address</h4>
                <p class="flex items-center">
                    <i class="fas fa-map-marker-alt text-green-500 mr-3"></i>
                    123 Street, New York, USA
                </p>
                <p class="flex items-center">
                    <i class="fas fa-phone-alt text-green-500 mr-3"></i>
                    +012 345 67890
                </p>
                <p class="flex items-center">
                    <i class="fas fa-envelope text-green-500 mr-3"></i>
                    info@example.com
                </p>
            </div>

            <!-- Quick Links -->
            <div class="space-y-4">
                <h4 class="text-xl font-semibold mb-3">Quick Links</h4>
                <ul class="space-y-2">
                    <li>
                        <a href="#" class="hover:text-green-500 transition-colors flex items-center">
                            <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                            About Us
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-green-500 transition-colors flex items-center">
                            <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                            Contact Us
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-green-500 transition-colors flex items-center">
                            <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                            Our Services
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-green-500 transition-colors flex items-center">
                            <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                            Terms & Condition
                        </a>
                    </li>
                    <li>
                        <a href="#" class="hover:text-green-500 transition-colors flex items-center">
                            <i class="fas fa-chevron-right text-green-500 mr-2"></i>
                            Support
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Newsletter -->
            <div class="space-y-4">
                <h4 class="text-xl font-semibold mb-3">Newsletter</h4>
                <p class="text-gray-400">
                    Dolor amet sit justo amet elitr clita ipsum elitr est.
                </p>
                <div class="flex">
                    <input type="email" 
                        class="w-full px-4 py-3 bg-gray-800 text-white rounded-l focus:outline-none focus:ring-2 focus:ring-green-500" 
                        placeholder="Your email">
                    <button class="px-6 py-3 bg-green-500 text-white rounded-r hover:bg-green-600 transition-colors">
                        SignUp
                    </button>
                </div>
            </div>
        </div>

        <!-- Copyright -->
        <div class="border-t border-gray-800 pt-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p>© <a href="#" class="text-green-500">CodeCrafter</a>. All Right Reserved.</p>
                <p class="mt-2 md:mt-0">
                    Designed By <a href="#" class="text-green-500">MASHRUF</a>
                </p>
            </div>
        </div>
    </div>
</footer>

    <!-- Scroll to Top Button -->
    <button id="scrollTopBtn" class="fixed bottom-8 right-8 bg-green-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg cursor-pointer hover:bg-green-600 transition-all duration-300 opacity-0 invisible">
        <i class="fas fa-arrow-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/cursor.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            new CustomCursor();
            AOS.init({
                duration: 1000,
                once: true,
                offset: 100
            });
        });
    </script>
</body>
</html> 