<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SeasonsRP Home</title>

    <link rel="icon" href="img/favicon.png" type="image/png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <style>
        @font-face {
            font-family: 'Rush';
            src: url('fonts/RushDriver-Italic.otf') format('opentype');
            font-style: italic;
        }

        @font-face {
            font-family: 'CustomFont';
            src: url('fonts/CustomFont.ttf') format('truetype');
        }

        body {
            margin: 0;
            padding: 0;
            font-family: "Poppins", Arial, sans-serif;
            color: #ffffff;
            background: url("img/bgweb.png") no-repeat center center fixed;
            background-size: cover;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            overflow: hidden;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: -1;
        }

        /* Header Section */
        .header {
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            padding: -20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
            position: relative;
        }

        .header .title {
            font-size: 2.5em;
            font-family: 'Rush', sans-serif;
            color: #f5f5f5;
            text-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.04em;
        }

        .header .subtitle {
            font-size: 1.2em;
            color: #d4d4d4;
            margin-top: 5px;
        }

        .header .menu-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }

        /* Dropdown Menu */
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-btn {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            font-size: 1.2em;
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            outline: none;
            transition: background 0.3s ease;
            margin-top: -60px;
            margin-left: 60px;
        }
        
        .dropdown-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .dropdown-btn .arrow {
            margin-left: 10px;
            transition: transform 0.3s ease;
        }
        
        /* Dropdown content container */
        .dropdown-content {
            position: absolute;
            background-color: #333;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 15px;
            margin-top: 10px;
            margin-left: 36px;
            overflow: hidden;
            max-height: 0; /* Initially hidden */
            opacity: 0; /* Fully transparent */
            transition: max-height 0.5s ease, opacity 0.3s ease; /* Smooth slide and fade-in */
        }
        
        .dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            transition: background 0.3s ease;
            border-radius: 15px;
        }
        
        .dropdown-content a:hover {
            background-color: #575757;
        }
        
        /* Show dropdown with animation */
        .dropdown.show .dropdown-content {
            max-height: 500px; /* Adjust based on your content's height */
            opacity: 1; /* Fully visible */
        }
        
        .dropdown.show .arrow {
            transform: rotate(180deg); /* Rotate arrow when menu is open */
        }


        /* Social Icons */
        .social-icons {
            display: flex;
            justify-content: flex-end; /* Aligns the icons to the right */
            margin-right: 80px; /* Adds some spacing from the edge */
            margin-top: -50px;
        }

        .social-icons a {
            color: #ffffff;
            margin: 0px 10px;
            text-decoration: none;
            font-size: 1.8em;
            transition: transform 0.3s ease, color 0.3s ease;
        }


        .social-icons a:hover {
            color: #0088ff;
            transform: scale(1.2);
        }

        /* Countdown Section */
        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            font-size: 1.5em;
        }

        .countdown div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .countdown span {
            display: block;
        }

        .countdown .time {
            font-size: 2em;
            font-weight: bold;
        }

        /* ODPRTJE Title */
        .container h1 {
            font-family: 'CustomFont', Arial, sans-serif;
            font-size: 3em;
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
        }

        .container {
            max-width: 600px;
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>

    <header class="header">
        <h1 class="title">SeasonsRP Legacy</h1>
        <p class="subtitle">"Where every moment becomes a memory, and every story leaves a legacy."</p>
        <div class="menu-container">
            <div class="dropdown">
                <button class="dropdown-btn">
                    Meni
                    <span class="arrow">▼</span>
                </button>
                <div class="dropdown-content">
                    <a href="index.html">Domov</a>
                    <a href="memories.html">Spomini (V5)</a>
                </div>
            </div>
            <div class="social-icons">
                <a href="https://discord.gg/f97H9AvQpQ" target="_blank"><i class="fab fa-discord"></i></a>
                <a href="https://www.youtube.com/@PeekerJ"><i class="fab fa-youtube"></i></a>
                <a href="https://youtu.be/XSMnslKhYQ0"><i class="fas fa-music"></i></a>
            </div>
        </div>
    </header>

    <div class="container">
        <h1>ODPRTJE</h1>
        <p>February 14th, 2025 18:00</p>
        <div class="countdown" id="countdown">
            <div>
                <span class="time" id="days">00</span>
                <span>Dni</span>
            </div>
            <div>
                <span class="time" id="hours">00</span>
                <span>Ur</span>
            </div>
            <div>
                <span class="time" id="minutes">00</span>
                <span>Minut</span>
            </div>
            <div>
                <span class="time" id="seconds">00</span>
                <span>Sekund</span>
            </div>
        </div>
    </div>

    <script>
        // Dropdown Toggle
        const dropdown = document.querySelector('.dropdown');
        const dropdownBtn = document.querySelector('.dropdown-btn');

        dropdownBtn.addEventListener('click', () => {
            dropdown.classList.toggle('show');
        });

        // Countdown Timer
        function updateCountdown() {
            const targetDate = new Date("February 14, 2025 18:00:00").getTime();
            const now = new Date().getTime();
            const distance = targetDate - now;

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("days").textContent = String(days).padStart(2, "0");
            document.getElementById("hours").textContent = String(hours).padStart(2, "0");
            document.getElementById("minutes").textContent = String(minutes).padStart(2, "0");
            document.getElementById("seconds").textContent = String(seconds).padStart(2, "0");

            if (distance < 0) {
                clearInterval(timer);
                document.getElementById("countdown").innerHTML = "<p></p>";
                const button = document.createElement("a");
                button.href = "https://www.youtube.com/watch?v=YourTrailerID";
                button.target = "_blank";
                button.className = "trailer-btn";
                button.innerText = "Trailer";
                document.getElementById("countdown").appendChild(button);
            }
        }

        const timer = setInterval(updateCountdown, 1000);
        updateCountdown();
    </script>
</body>
</html>
