<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2000s Neocities Style</title>
    <style>
        /* Background and general style */
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            margin: 0;
            padding: 0;
            background: #FF00FF; /* Bright neon background */
            color: #FFFFFF;
            text-align: center;
            background-image: url('https://www.transparenttextures.com/patterns/asfalt.png');
            background-size: cover;
        }

        /* Cool marquee text effect for nostalgic look */
        marquee {
            font-size: 30px;
            color: #FFFF00;
            font-weight: bold;
            background-color: #000000;
            padding: 10px;
            width: 100%;
            box-shadow: 0 0 10px #FFFF00;
        }

        /* Boxy container with neon borders */
        .container {
            border: 5px solid #FF0000;
            padding: 50px;
            margin: 50px auto;
            width: 400px;
            background: #00FFFF;
            border-radius: 20px;
            box-shadow: 0 0 20px #FF0000;
            position: relative;
        }

        /* Heading with neon glowing text */
        h2 {
            font-size: 32px;
            color: #FF69B4;
            text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.7);
        }

        /* Label and input field */
        label {
            font-size: 20px;
            color: #FF00FF;
            display: block;
            margin: 15px 0;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        input[type="text"] {
            padding: 15px;
            font-size: 20px;
            width: 80%;
            max-width: 350px;
            background: #FF4500;
            color: white;
            border: 2px solid #FFD700;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 0 10px #FF4500;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        input[type="text"]:focus {
            background-color: #FFD700;
            box-shadow: 0 0 20px #FF4500;
            outline: none;
        }

        /* Neon-style button */
        button {
            padding: 20px 40px;
            font-size: 24px;
            background-color: #FF1493;
            border: 3px solid #FF4500;
            border-radius: 15px;
            color: white;
            cursor: pointer;
            box-shadow: 0px 0px 10px rgba(255, 0, 255, 0.8);
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #FF00FF;
            box-shadow: 0 0 20px rgba(255, 0, 255, 1);
        }

        button:active {
            background-color: #FF1493;
            box-shadow: inset 0 0 10px rgba(255, 0, 255, 0.6);
        }

        /* Blinking text effect */
        .blink {
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% { color: #FF69B4; }
            50% { color: #FFFF00; }
            100% { color: #FF69B4; }
        }

        /* Pixelated font effect */
        .pixel-font {
            font-family: 'Courier New', Courier, monospace;
            font-size: 18px;
            letter-spacing: 2px;
            color: #FF4500;
        }

        /* Background image with GIF */
        .background-gif {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

    </style>
</head>
<body>

    <!-- Background GIF -->
    <img src="https://media.giphy.com/media/3o6Zt8RhTBhTnyJ1ZS/giphy.gif" class="background-gif" alt="cool animated background">

    <!-- Marquee text -->
    <marquee class="blink">Welcome to the main system! by Aditya Kadam</marquee>

    <!-- Main container -->
    <div class="container">
        <h2>Enter Code to Open a Window</h2>
        <label for="codeInput">Enter the magic code:</label>
        <input type="text" id="codeInput" class="pixel-font" placeholder="Type code here">
        <br>
        <button onclick="openWindow()">Submit</button>
    </div>

    <script>
        function openWindow() {
            var code = document.getElementById("codeInput").value;
            var correctCode = "254";
            var devcode = 'dev254'
             // Change this to whatever you want


            if (code === correctCode) {
                window.open('notes.html', '', 'width=400,height=400'); // Opens a new window of 400x400
            } else {
                alert("Incorrect code. Please try again!");
            }
            if (code === devcode) {
                window.open('notes.html', '', 'width=400,height=400');
                window.open('devpanel.html', '', 'width=400,height=400'); // Opens a new window of 400x400
                // Opens a new window of 400x400
            } else {
                alert("Incorrect code. Please try again!");
            }
        }
    </script>
</body>
</html>
