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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Students</title>

    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <style>
        /* General Styles */
        body {
            font-family: 'Roboto', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #007bff, #00bcd4, #4caf50);
            background-size: 400% 400%;
            animation: gradientBG 10s ease infinite;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        /* Background Gradient Animation */
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Header Styling */
        header {
            width: 100%;
            max-width: 800px;
            padding: 20px;
            background: linear-gradient(135deg, #007bff, #00bcd4, #4caf50);
            color: white;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* Main Container */
        .container {
            width: 100%;
            max-width: 600px;
            background: rgba(255, 255, 255, 0.2);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(8px);
            text-align: center;
        }

        /* Notification / Alert Text */
        .container h4 {
            color: red;
            font-size: 1rem;
            margin-bottom: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            font-weight: bold;
            line-height: 1.6;
        }

        /* Button Styles */
        .dropbtn {
            display: inline-block;
            width: 100%;
            max-width: 250px;
            padding: 12px 24px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 10px 0;
            transition: all 0.3s ease;
            font-weight: bold;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Green Button */
        .dropbtn-green {
            background: linear-gradient(45deg, #4CAF50, #45a049);
        }

        .dropbtn-green:hover {
            background: linear-gradient(45deg, #388e3c, #2e7d32);
        }

        /* Red Button */
        .dropbtn-red {
            background: linear-gradient(45deg, #e74c3c, #c0392b);
        }

        .dropbtn-red:hover {
            background: linear-gradient(45deg, #c0392b, #a93226);
        }

        /* Blue Button */
        .dropbtn-info {
            background: linear-gradient(45deg, #2980b9, #1c6ea4);
        }

        .dropbtn-info:hover {
            background: linear-gradient(45deg, #1c6ea4, #154c79);
        }

        /* Additional Info Text */
        .container span {
            display: block;
            margin-top: 15px;
            font-size: 1rem;
            color: #444;
            font-weight: 500;
        }

        /* Mobile Responsiveness */
        @media screen and (max-width: 768px) {
            body {
                padding: 10px;
            }

            header {
                font-size: 1.5rem;
                padding: 20px;
               background: linear-gradient(135deg, #007bff, #00bcd4, #4caf50);
            }

            .container {
                width: 90%;
                padding: 20px;
            }

            .dropbtn {
                font-size: 16px;
                padding: 10px;
                max-width: 100%;
            }
        }
    </style>

</head>

<body>



<div class="container">
    <header>
    <h1>Welcome to the Dashboard</h1>
</header>
    <h4>
        अङ्क इन्ट्री गर्ने क्रममा केही समस्या भोग्नु भएमा वा यस प्रणाली प्रति केही सुझाव भएमा परीक्षा शाखामा वा 9803470160 मा Whatsapp गरी सम्पर्क गरिदिनुहुन अनुरोध छ वा 
        <a href="contact.php">
            <button type="button" class="dropbtn dropbtn-info">Contact us</button>
        </a> मा क्लिक गरी पठाउन सक्नुहुनेछ ।
    </h4>

    <div class='form-group' id="divMarksTh">
        <a href="marksentry.php">
            <button id="btnMarksTh" class="dropbtn dropbtn-green">Enter Marks [Th]</button>
        </a>
    </div>

    <div class='form-group' id="divMarksPr">
        <a href="marksentrypr.php">
            <button id="btnMarksPr" class="dropbtn dropbtn-info">Enter Marks [Pr]</button>
        </a>
    </div>

    <div class='form-group' id="divAdmin">
        <a href="adminlogin.php">
            <button id="btnAdmin" class="dropbtn dropbtn-green">Admin Dashboard</button>
        </a>
    </div>

    <div class='form-group' id="divMissingMarks">
        <span>छुटेका विद्यार्थीको अंक हाल्न यहाँ थिच्नुहोस् ।</span>
        <a href="leftover_marks.php">
            <button id="btnMissingMarks" class="dropbtn dropbtn-red">Enter Missing Marks</button>
        </a>
    </div>
</div>

<script>
    // Function to update button visibility based on localStorage
    function updateButtonVisibility() {
        var buttonIds = ["btnMarksTh", "btnMarksPr", "btnMissingMarks"];

        buttonIds.forEach(function (id) {
            var state = localStorage.getItem(id);
            var buttonDiv = document.getElementById("div" + id.replace("btn", ""));
            if (state === "hidden" && buttonDiv) {
                buttonDiv.style.display = "none";
            } else if (buttonDiv) {
                buttonDiv.style.display = "block";
            }
        });
    }

    // Call function on page load
    window.onload = updateButtonVisibility;
</script>

</body>
</html>
