<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signals Page</title>
    <link rel="stylesheet" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script>
	<script src="security.js" defer></script>
    <style>
        select {
            width: 280px; 
            height: 50px;
            padding: 10px;
            font-size: 16px;
            border: 0px solid #ccc;
            border-radius: 30px;
            text-align: center;
            background: rgba(255, 255, 255, 0.4); /* Полупрозрачный фон */
            color: black;
            backdrop-filter: blur(10px); /* Эффект блюра */
        }
        button {
            width: 280px; 
            height: 50px;
            padding: 10px 20px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            background-color: white;
        }
        button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body class="signals-page">
    <div id="logo-container">
    <img src="assets/your-logo.png" id="logo">
    </div>

    <div id="site-container">
	<div id="button-wrapper">
        <select id="currency-pair">
            <option value="EUR/CHF OTC">EUR/CHF OTC</option>
            <option value="EUR/GBP OTC">EUR/GBP OTC</option>
            <option value="EUR/HUF OTC">EUR/HUF OTC</option>
            <option value="EUR/JPY OTC">EUR/JPY OTC</option>
            <option value="EUR/RUB OTC">EUR/RUB OTC</option>
            <option value="EUR/TRY OTC">EUR/TRY OTC</option>
            <option value="EUR/USD OTC">EUR/USD OTC</option>
            <option value="MAD/USD OTC">MAD/USD OTC</option>
            <option value="NZD/USD OTC">NZD/USD OTC</option>
            <option value="TND/USD OTC">TND/USD OTC</option>
            <option value="USD/BRL OTC">USD/BRL OTC</option>
            <option value="USD/CHF OTC">USD/CHF OTC</option>
            <option value="USD/CNH OTC">USD/CNH OTC</option>
            <option value="USD/DZD OTC">USD/DZD OTC</option>
            <option value="USD/MXN OTC">USD/MXN OTC</option>
            <option value="USD/PKR OTC">USD/PKR OTC</option>
            <option value="USD/RUB OTC">USD/RUB OTC</option>
            <option value="NZD/JPY OTC">NZD/JPY OTC</option>
            <option value="AUD/NZD OTC">AUD/NZD OTC</option>
        </select>

        <select id="expiration-time">
            <option value="S30">S30</option>
            <option value="M1">М1</option>
            <option value="M3">М3</option>
            <option value="M5">M5</option>
        </select>

        <button id="generate-signal">Получить сигнал</button>
	</div>
		
		<div id="win-rate-container">
        <span id="win-rate-text">Win Rate: 0%</span>
		
		<div id="circle-wrapper">
		<div id="progress-wrapper">
	    <div id="progress-container" style="width: 150px; height: 150px; margin: auto;"></div>
	</div>
	    <div id="signal-output">-</div>
	</div>

    <!-- Подключаем JavaScript -->
    <script src="script.js" defer></script>

    <script>
	
	document.addEventListener('DOMContentLoaded', () => {
    // Устанавливаем стартовое значение 0%
    const initialWinRate = 0;
    updateProgressCircle(initialWinRate);
});

        document.getElementById('generate-signal').addEventListener('click', () => {
            const pair = document.getElementById('currency-pair').value;
            const time = document.getElementById('expiration-time').value;

            // Генерация направления
            const direction = Math.random() > 0.5 ? 'Вверх' : 'Вниз';
            const signalOutput = document.getElementById('signal-output');

            // Устанавливаем текст и атрибут data-direction
            signalOutput.textContent = direction;
            signalOutput.setAttribute('data-direction', direction);
			
		    // Генерация случайного Win Rate
            const winRate = Math.floor(Math.random() * (90 - 40 + 1)) + 40; // Значение от 40% до 90%
            const winRateText = document.getElementById('win-rate-text');
            winRateText.textContent = `Win Rate: ${winRate}%`;
			
            // Блокируем кнопку после генерации сигнала
            startTimer(time);
		
			// Вызов функции прогресс-бара
			updateProgressCircle(winRate);

            console.log(`Выбрана пара: ${pair}, Время экспирации: ${time}, Направление: ${direction}, Win Rate: ${winRate}%`);
        });


            // Функция для обновления кругового индикатора
		    function updateProgressCircle(winRate) {
		    const progressContainer = document.getElementById('progress-container');
			
			progressContainer.innerHTML = ''; // Удаляем предыдущий индикатор
			
			const bar = new ProgressBar.Circle(progressContainer, {
			color: '#aaa',
            strokeWidth: 8,
            trailWidth: 4,
            easing: 'easeInOut',
            duration: 1400,
            text: {
			autoStyleContainer: false,
			},
			from: { color: '#FF4500', width: 4 }, // Красный
            to: { color: '#32CD32', width: 8 },  // Зеленый
            step: (state, circle) => {
            circle.path.setAttribute('stroke', state.color);
			circle.path.style.filter = `drop-shadow(0px 0px 0px ${state.color})`;
            const value = Math.round(circle.value() * 100);
            circle.setText(`<div style="font-size: 14px; margin-bottom: 5px;">Win Rate</div><div style="font-size: 24px;">${value}%</div>`);
            },
        });
			
		    bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
            bar.text.style.fontSize = '1.5rem';

            bar.animate(winRate / 100); // Устанавливаем значение
    }
        function startTimer(expirationTime) {
    const button = document.getElementById('generate-signal');
    let timeRemaining = getTimeInSeconds(expirationTime); // Получаем время в секундах

    button.disabled = true; // Блокируем кнопку
    updateButtonText(timeRemaining);

    signalTimer = setInterval(() => {
        timeRemaining--;
        updateButtonText(timeRemaining);

        if (timeRemaining <= 0) {
            clearInterval(signalTimer);
            button.disabled = false; // Разблокируем кнопку

            // Сбрасываем все значения после завершения таймера
            resetTimerAndOutput();
        }
    }, 1000);
}

        function getTimeInSeconds(expirationTime) {
            switch (expirationTime) {
                case "S30": return 30;
                case "M1": return 60;
                case "M3": return 180;
                case "M5": return 300;
                default: return 60;
            }
        }

        function updateButtonText(timeRemaining) {
            const button = document.getElementById('generate-signal');
            button.textContent = `Обновление через ${timeRemaining} секунд`;
        }

function resetTimerAndOutput() {
    const button = document.getElementById('generate-signal');
    const signalOutput = document.getElementById('signal-output');
    const winRateText = document.getElementById('win-rate-text');

    // Сбрасываем кнопку
    button.disabled = false; // Разблокируем кнопку
    button.textContent = "Получить сигнал"; // Восстанавливаем текст кнопки

    // Сбрасываем поле вывода сигнала и Win Rate
    signalOutput.textContent = "-";
    signalOutput.removeAttribute('data-direction');
    winRateText.textContent = "Win Rate: 0%";

    // Обнуляем круг с процентами
    updateProgressCircle(0);

    // Останавливаем таймер, если он существует
    if (typeof signalTimer !== 'undefined') {
        clearInterval(signalTimer);
    }
}

// Привязываем события сброса при изменении выбора
document.getElementById('currency-pair').addEventListener('change', resetTimerAndOutput);
document.getElementById('expiration-time').addEventListener('change', resetTimerAndOutput);

    </script>
</body>
</html>