<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Štoparica</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .branding {
            font-size: 40px;
            font-weight: bold;
            color: #ffeb3b;
            margin-bottom: 10px;
        }
        .branding-container {
            background-color: #f44336;
            padding: 20px 0;
            border-radius: 40px;
            margin: 0 auto;
            width: calc(100vw - 100px);
            max-width: 600px;
        }
        .stopwatch-container {
            background: -webkit-linear-gradient(to right, #ffeb3b, #ff9800, #ffeb3b); 
            background: linear-gradient(to right, #ffeb3b, #ff9800, #ffeb3b);
            padding: 20px 0;
            border-radius: 10px;
            display: inline-block;
            width: 100vw;
            position: relative;
        }
        #timer {
            font-size: 6em;
            font-weight: bold;
            margin-bottom: 20px;
        }
        #lapTimes {
            margin-top: 20px;
            text-align: center;
            max-height: 300px; /* Omejitev višine */
            overflow-y: auto; /* Omogoči drsenje */
            border: 1px solid #ccc; /* Dodaj okvir za ločen izgled */
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        .lap-time {
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .lap-counter {
            margin-right: 5px;
            font-weight: normal;
        }
        .delete-button {
            margin-left: 10px;
            cursor: pointer;
            background: linear-gradient(to bottom, #ff3333 0%, #cc0000 100%);
            border: 2px solid transparent;
            border-radius: 5px;
            padding: 5px 10px;
            color: white;
            text-shadow: 0px 1px 0px #660000;
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            transition: all 0.1s linear;
        }
        .delete-button:hover {
            background: linear-gradient(to bottom, #cc0000 0%, #ff3333 100%);
            box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
            transform: translateY(-1px);
        }
        .delete-button:active {
            position: relative;
            top: 1px;
        }
        .button-group {
            margin-top: 10px;
        }
        .button-group button {
            padding: 10px 20px;
            margin: 0 5px;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 50px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .button-group button:hover {
            transform: translateY(-2px);
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
        }
        #startButton {
            background-color: green;
            color: white;
        }
        #stopButton {
            background-color: red;
            color: white;
        }
        #saveButton {
            background-color: #87CEFA;
            color: white;
        }
        #closeButton {
            background-color: #FF8C00;
            color: white;
        }
        #nameInputContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        #nameInputLabel {
            margin-right: 10px;
            font-weight: bold;
        }
        #nameInput {
            width: 200px;
            padding: 10px;
            border-radius: 5px;
            border: 2px solid #ccc;
            font-size: 16px;
        }
        
        @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    #nameInputLabel {
      font-family: 'rubik', cursive; /* Uporaba posebne pisave */
      font-weight: bold; /* Doda debelejši font */
      animation: blink 1s infinite; /* Učinek blinkanja */
    }
        
    </style>
</head>
<body>
    <div class="branding-container">
        <div class="branding">SSV Brezovica pri Borovnici</div>
    </div>
    <div class="stopwatch-container">
        <div id="timer">00:00:00</div>
        <div id="nameInputContainer">
            <label for="nameInput" id="nameInputLabel"><h1>Vpiši ime:</h1></label>
            <input type="text" id="nameInput" placeholder="">
        </div>
        <div class="button-group">
            <button id="startButton" onclick="startStopwatch()">Start</button>
            <button id="stopButton" onclick="stopTimer()">Stop</button>
            <button id="saveButton" onclick="saveTime()">Shrani</button>
            <button id="closeButton" onclick="closeStopwatch()">Zapri štoparico</button>
        </div>
    </div>
    <div id="lapTimes">
        <h2>Shranjeni časi:</h2>
    </div>

    <script>
        var startTime = 0;
        var timerInterval;
        var lapCounter = 1;
        var audio;

        document.addEventListener('DOMContentLoaded', function () {
            loadSavedTimes(); // Naloži shranjene čase ob inicializaciji
        });

        function startStopwatch() {
            if (!audio) {
                audio = new Audio('https://bostjant.eu/pripomocki/SSV-stoparica/start.mp3');
            }

            // Predvajanje zvoka in zagon štoparice z zakasnitvijo
            audio.play().then(function() {
                console.log('Zvok se predvaja.');
                setTimeout(function() {
                    startTimer();
                }, 6300);
            }).catch(function(error) {
                console.error('Zvok ni bil predvajan:', error);
                alert('Zvoka ni mogoče predvajat. Preverite nastavitve brskalnika.');
            });
        }

        function startTimer() {
            startTime = Date.now();
            timerInterval = setInterval(updateTimer, 10);
        }

        function stopTimer() {
            clearInterval(timerInterval);
            timerInterval = null;
        }

        function saveTime() {
            var currentTime = document.getElementById('timer').textContent;
            var name = document.getElementById('nameInput').value;
            if (currentTime !== '00:00:00') {
                var now = new Date();
                var timestamp = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();

                // Shranjevanje v localStorage
                var savedTimes = JSON.parse(localStorage.getItem('lapTimes')) || [];
                savedTimes.push({ lap: lapCounter, time: currentTime, name: name, timestamp: timestamp });
                localStorage.setItem('lapTimes', JSON.stringify(savedTimes));

                // Dodajanje novega elementa na stran
                addLapTimeElement(lapCounter, currentTime, name, timestamp);
                lapCounter++;
                resetTimer();
            }
        }

        function deleteTime(element, lap) {
            // Preveri geslo
            var password = prompt('Vpiši geslo:');
            var correctPassword = 'paralelopiped'; // Nastavite pravo geslo tukaj

            if (password === correctPassword) {
                // Pridobi shranjene čase iz localStorage
                var savedTimes = JSON.parse(localStorage.getItem('lapTimes')) || [];
                savedTimes = savedTimes.filter(entry => entry.lap !== lap);

                // Posodobi localStorage
                localStorage.setItem('lapTimes', JSON.stringify(savedTimes));

                // Odstrani element iz DOM
                var lapTimesWrapper = document.querySelector('#lapTimes');
                lapTimesWrapper.removeChild(element.parentElement);
                lapCounter--;
            } else {
                alert('Napačno geslo!');
            }
        }

        function resetTimer() {
            clearInterval(timerInterval);
            timerInterval = null;
            document.getElementById('timer').textContent = '00:00:00';
        }

        function updateTimer() {
            var elapsedTime = Date.now() - startTime;
            var minutes = Math.floor(elapsedTime / (60 * 1000));
            var seconds = Math.floor((elapsedTime % (60 * 1000)) / 1000);
            var tenths = Math.floor((elapsedTime % 1000) / 10);

            minutes = String(minutes).padStart(2, '0');
            seconds = String(seconds).padStart(2, '0');
            tenths = String(tenths).padStart(2, '0');

            document.getElementById('timer').textContent = minutes + ':' + seconds + ':' + tenths;
        }

        function addLapTimeElement(lap, time, name, timestamp) {
            var lapTimesWrapper = document.querySelector('#lapTimes');
            var lapTimeElement = document.createElement('div');
            lapTimeElement.classList.add('lap-time');
            lapTimeElement.innerHTML = 
                `<span class="lap-counter">${lap}.</span> ${time} - ${name} 
                <span>(${timestamp})</span>
                <button class="delete-button" onclick="deleteTime(this, ${lap})">Izbriši čas</button>`;
            lapTimesWrapper.appendChild(lapTimeElement);
        }

        function loadSavedTimes() {
            var savedTimes = JSON.parse(localStorage.getItem('lapTimes')) || [];
            savedTimes.forEach(entry => {
                addLapTimeElement(entry.lap, entry.time, entry.name, entry.timestamp);
                lapCounter = Math.max(lapCounter, entry.lap + 1);
            });
        }

        function closeStopwatch() {
            window.close();
        }

        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            stopTimer();
        });
    </script>
</body>
</html>
