from flask import render_template_string


class CurrencyRatePage:
    def __init__(self, fetcher):
        self.fetcher = fetcher

    def render(self):
        rates = self.fetcher.fetch_rates()
        return render_template_string('''
        <!DOCTYPE html>
        <html lang="ru">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Курс валют</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                    margin: 0;
                    padding: 0;
                }
                .container {
                    background-color: #fff;
                    border-radius: 10px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    padding: 40px;
                    text-align: center;
                    width: 100%;
                    max-width: 600px;
                    margin: 0 auto;
                    margin-top: 50px;
                }
                .container h1 {
                    font-size: 24px;
                    margin: 0 0 20px;
                    color: #333;
                }
                .container p {
                    font-size: 18px;
                    margin: 10px 0;
                    color: #555;
                }
                .container p span {
                    font-weight: bold;
                    color: #007BFF;
                }
                .updated-at {
                    font-size: 14px;
                    color: #777;
                    margin-top: 20px;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <h1>Курс валют (RUB)</h1>
                <p id="usd-rate">1 USD - <span>{{ usd_rate }} RUB</span></p>
                <p id="eur-rate">1 EUR - <span>{{ eur_rate }} RUB</span></p>
                <p id="cny-rate">1 CNY - <span>{{ cny_rate }} RUB</span></p>
                <div class="updated-at" id="updated-at">Обновлено в {{ updated_at }}</div>
            </div>
            <script>
                function updateRates() {
                    fetch('/api/currency-rates')
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById('usd-rate').innerHTML = `1 USD - <span>${data.usd_rate} RUB</span>`;
                            document.getElementById('eur-rate').innerHTML = `1 EUR - <span>${data.eur_rate} RUB</span>`;
                            document.getElementById('cny-rate').innerHTML = `1 CNY - <span>${data.cny_rate} RUB</span>`;
                            document.getElementById('updated-at').innerHTML = `Обновлено в ${data.updated_at}`;
                        });
                }
                setInterval(updateRates, 300000); // Обновление каждые 5 минут (300000 миллисекунд)
                updateRates(); // Первоначальное обновление
            </script>
        </body>
        </html>
        ''', usd_rate=rates['usd_rate'], eur_rate=rates['eur_rate'], cny_rate=rates['cny_rate'],
                                      updated_at=rates['updated_at'])


class TimeZonePage:
    def __init__(self, fetcher):
        self.fetcher = fetcher

    @staticmethod
    def render():
        return render_template_string('''
        <!DOCTYPE html>
        <html lang="ru">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Время в разных часовых поясах</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                    margin: 0;
                    padding: 0;
                }
                .container {
                    background-color: #fff;
                    border-radius: 10px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    padding: 40px;
                    text-align: center;
                    width: 100%;
                    max-width: 600px;
                    margin: 0 auto;
                    margin-top: 50px;
                }
                .container h1 {
                    font-size: 24px;
                    margin: 0 0 20px;
                    color: #333;
                }
                .container p {
                    font-size: 18px;
                    margin: 10px 0;
                    color: #555;
                }
                .container p span {
                    font-weight: bold;
                    color: #007BFF;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <h1>Текущее время в разных часовых поясах</h1>
                <p>Ярославль: <span id="yaroslavl-time"></span></p>
                <p>Красноярск: <span id="krasnoyarsk-time"></span></p>
                <p>Иркутск: <span id="irkutsk-time"></span></p>
            </div>
            <script>
                function updateTimes() {
                    const now = new Date();

                    // Получаем количество минут смещения от UTC текущей системы
                    const localOffset = now.getTimezoneOffset();

                    const yaroslavlOffset = 3 * 60; // UTC+3 для Ярославля
                    const krasnoyarskOffset = 7 * 60; // UTC+7 для Красноярска
                    const irkutskOffset = 8 * 60; // UTC+8 для Иркутска

                    function getTimeWithOffset(targetOffset) {
                        // Корректируем отклонение системы
                        const utc = new Date(now.getTime() + localOffset * 60 * 1000);
                        const targetTime = new Date(utc.getTime() + targetOffset * 60 * 1000);
                        return targetTime.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
                    }

                    document.getElementById('yaroslavl-time').innerHTML = getTimeWithOffset(yaroslavlOffset);
                    document.getElementById('krasnoyarsk-time').innerHTML = getTimeWithOffset(krasnoyarskOffset);
                    document.getElementById('irkutsk-time').innerHTML = getTimeWithOffset(irkutskOffset);
                }
                setInterval(updateTimes, 60000); // Обновление каждую минуту (60000 миллисекунд)
                updateTimes(); // Первоначальное обновление
            </script>
        </body>
        </html>
        ''')


class WeatherPage:
    def __init__(self, fetcher):
        self.fetcher = fetcher

    def render(self):
        weather_data = self.fetcher.fetch_weather()

        # Преобразуем строки в числа, заменяя запятую на точку
        weather_data['wind_speed'] = float(weather_data['wind_speed'].replace(',', '.'))
        weather_data['humidity'] = float(weather_data['humidity'].replace(',', '.'))
        weather_data['pressure'] = float(weather_data['pressure'].replace(',', '.'))

        # Добавляем рекомендуемые значения и статус
        recommended_wind_speed = 5
        recommended_humidity = 50
        recommended_pressure = 760

        weather_data['recommended_wind_speed'] = recommended_wind_speed
        weather_data['recommended_humidity'] = recommended_humidity
        weather_data['recommended_pressure'] = recommended_pressure

        weather_data['wind_speed_status'] = 'норма' if weather_data['wind_speed'] <= recommended_wind_speed else 'высокая'
        weather_data['humidity_status'] = 'норма' if weather_data['humidity'] >= recommended_humidity else 'низкая'
        weather_data['pressure_status'] = 'норма' if abs(weather_data['pressure'] - recommended_pressure) <= 10 else 'отклонение'

        return render_template_string('''
        <!DOCTYPE html>
        <html lang="ru">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Погода</title>
            <style>
                body {
                    font-family: Arial, sans-serif;
                    background-color: #f4f4f4;
                    margin: 0;
                    padding: 0;
                }
                .container {
                    background-color: #fff;
                    border-radius: 10px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    padding: 40px;
                    text-align: center;
                    width: 100%;
                    max-width: 600px;
                    margin: 0 auto;
                    margin-top: 50px;
                }
                .container h1 {
                    font-size: 24px;
                    margin: 0 0 20px;
                    color: #333;
                }
                .container p {
                    font-size: 18px;
                    margin: 10px 0;
                    color: #555;
                }
                .container p span {
                    font-weight: bold;
                    color: #007BFF; /* Синий цвет для всех значений */
                }
                .updated-at {
                    font-size: 14px;
                    color: #777;
                    margin-top: 20px;
                }
                .status {
                    font-size: 14px;
                    color: #777;
                    margin-top: 5px;
                }
                .status.high {
                    color: #FF0000; /* Красный цвет для высоких значений */
                }
                .status.low {
                    color: #008000; /* Зеленый цвет для низких значений */
                }
            </style>
        </head>
        <body>
            <div class="container">
                <h1>Текущая погода</h1>
                <p>Температура: <span>{{ temperature }}°</span></p>
                <p>Ощущается как: <span>{{ feels_like }}°</span></p>
                <p>Состояние: <span>{{ condition }}</span></p>
                <p>Скорость ветра: <span>{{ wind_speed }} м/с</span></p>
                <div class="status {{ 'high' if wind_speed_status == 'высокая' else '' }}">{{ wind_speed_status }}</div>
                <p>Влажность: <span>{{ humidity }}%</span></p>
                <div class="status {{ 'low' if humidity_status == 'низкая' else '' }}">{{ humidity_status }}</div>
                <p>Давление: <span>{{ pressure }} мм рт. ст.</span></p>
                <div class="status {{ 'high' if pressure_status == 'отклонение' else '' }}">{{ pressure_status }}</div>
                <div class="updated-at">Обновлено в {{ updated_at }}</div>
            </div>
            <script>
                function updateWeather() {
                    fetch('/api/weather')
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(`HTTP error! status: ${response.status}`);
                            }
                            return response.json();
                        })
                        .then(data => {
                            // Обновляем интерфейс с полученными данными
                            document.querySelector('.container p:nth-child(2) span').innerHTML = data.temperature;
                            document.querySelector('.container p:nth-child(3) span').innerHTML = data.feels_like;
                            document.querySelector('.container p:nth-child(4) span').innerHTML = data.condition;
                            document.querySelector('.container p:nth-child(5) span').innerHTML = data.wind_speed;
                            document.querySelector('.container p:nth-child(6) span').innerHTML = data.humidity;
                            document.querySelector('.container p:nth-child(7) span').innerHTML = data.pressure;
                            document.querySelector('.updated-at').innerHTML = 'Обновлено в ' + data.updated_at;

                            // Обновляем статусы
                            document.querySelector('.container .status:nth-child(6)').innerHTML = data.wind_speed_status;
                            document.querySelector('.container .status:nth-child(8)').innerHTML = data.humidity_status;
                            document.querySelector('.container .status:nth-child(10)').innerHTML = data.pressure_status;

                            // Обновляем классы для статусов
                            document.querySelector('.container .status:nth-child(6)').className = 'status ' + (data.wind_speed_status == 'высокая' ? 'high' : '');
                            document.querySelector('.container .status:nth-child(8)').className = 'status ' + (data.humidity_status == 'низкая' ? 'low' : '');
                            document.querySelector('.container .status:nth-child(10)').className = 'status ' + (data.pressure_status == 'отклонение' ? 'high' : '');
                        })
                        .catch((error) => console.error('Ошибка:', error));
                }
                setInterval(updateWeather, 300000); // Обновление каждые 5 минут
                updateWeather(); // Первоначальное обновление
            </script>
        </body>
        </html>
        ''', temperature=weather_data['temperature'],
                                      feels_like=weather_data['feels_like'],
                                      condition=weather_data['condition'],
                                      wind_speed=weather_data['wind_speed'],
                                      humidity=weather_data['humidity'],
                                      pressure=weather_data['pressure'],
                                      updated_at=weather_data['updated_at'],
                                      wind_speed_status=weather_data['wind_speed_status'],
                                      humidity_status=weather_data['humidity_status'],
                                      pressure_status=weather_data['pressure_status'])


Помоги мне сделать так чтобы поля отображались в виде, например:
Влажность: 93% / 50% (пониженное)
Давление: 758 / 760 (нормальное)

Давление нужно отображать если повышенное или пониженное