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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCrafter - Templates</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    
    <style>
        /* SCSS Variables and Mixins */
        :root {
            --primary-color: #6244C5;
            --secondary-color: #FFC448;
            --light-color: #FAFAFB;
            --dark-color: #12141D;
            --hover-color: #f39c12;
            --font-family: 'Open Sans', sans-serif;
        }

        /* General Body Styling */
        body {
            font-family: var(--font-family);
            background: linear-gradient(45deg, #ff6a00, #ee0979, #00d4ff, #03a9f4);
            background-size: 300% 300%;
            animation: gradientBG 10s ease infinite;
            transition: background-color 0.3s ease;
            padding: 0;
            margin: 0;
        }

        /* Keyframes for Dynamic Background */
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Navbar Styling */
        .navbar {
            background-color: var(--dark-color);
            padding: 15px 30px;
            transition: all 0.3s ease;
        }

        .navbar-brand {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary-color);
            text-transform: uppercase;
        }

        .navbar-nav .nav-item {
            padding-left: 20px;
        }

        .navbar-nav .nav-link {
            color: #fff;
            font-weight: 600;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }

        .navbar-nav .nav-link:hover {
            color: var(--secondary-color);
        }

        .navbar-toggler {
            background-color: transparent;
            border: none;
        }

        .navbar-toggler-icon {
            background-color: var(--secondary-color);
        }

        /* Templates Section */
        .templates-section {
            padding: 100px 30px;
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            border-radius: 10px;
        }

        .templates-section h2 {
            font-size: 2.5rem;
            margin-bottom: 40px;
            color: var(--dark-color);
        }

        .template-card {
            background-color: #fff;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .template-card:hover {
            transform: translateY(-10px);
        }

        .template-card img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
        }

        .template-card img:hover {
            transform: scale(1.1);
        }

        .card-body {
            padding: 20px;
            text-align: center;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-color);
        }

        .card-text {
            font-size: 1rem;
            color: #777;
        }

        .btn {
            background-color: var(--secondary-color);
            color: #fff;
            padding: 10px 25px;
            border-radius: 25px;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: var(--hover-color);
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--secondary-color);
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 50%;
            font-size: 16px;
            cursor: pointer;
            display: none;
            z-index: 1000;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .back-to-top:hover {
            background-color: var(--hover-color);
        }

        /* Media Queries for Responsiveness */
        @media (max-width: 991.98px) {
            .navbar .navbar-nav .nav-link {
                padding: 10px 0;
            }
        }
    </style>
</head>

<body>

    <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>

    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <a class="navbar-brand" href="https://codecrafter.fun">CodeCrafter</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link active" href="#templates">Templates</a></li>
                <li class="nav-item"><a class="nav-link" href="https://codecrafter.fun">About</a></li>
                <li class="nav-item"><a class="nav-link" href="https://codecrafter.fun">Contact</a></li>
            </ul>
        </div>
    </nav>
    <!-- Navbar End -->

    <!-- Templates Section Start -->
    <section id="templates" class="templates-section container">
        <h2>Explore Our Templates</h2>
        <div class="row g-4">
            <!-- Template Card -->
            <div class="col-md-4">
                <div class="template-card">
                    <img src="img/school.png" alt="School Management">
                    <div class="card-body">
                        <h5 class="card-title">School Template</h5>
                        <p class="card-text">A fully responsive school  template.</p>
                        <a href="codecrafter-school/index.html" class="btn">View Template</a>
                    </div>
                </div>
            </div>
            <!-- Template Card -->
            <div class="col-md-4">
                <div class="template-card">
                    <img src="img/agency.png" alt="E-commerce">
                    <div class="card-body">
                        <h5 class="card-title">Agency Template</h5>
                        <p class="card-text">A fully responsive agency template.</p>
                        <a href="agency - Copy/index.html" class="btn">View Template</a>
                    </div>
                </div>
            </div>
    </section>
    <!-- Templates Section End -->

    <!-- Back to Top Button -->
    <button class="back-to-top" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">↑</button>

    <!-- Bootstrap JS and Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Show/Hide Back to Top Button
        window.onscroll = function () {
            if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
                document.querySelector('.back-to-top').style.display = 'block';
            } else {
                document.querySelector('.back-to-top').style.display = 'none';
            }
        };
    </script>

</body>

</html>
