electron-widget.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; media-src 'self' data:; font-src 'self' data:; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; worker-src 'none'">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer Widget</title>
    <link rel="stylesheet" href="fonts.css">
    <link rel="stylesheet" href="design-tokens.css">
    <link rel="stylesheet" href="flip-card.css">
    <link rel="stylesheet" href="surface-tones.css">
    <!-- Тема интерфейса ставится ДО первого кадра, поэтому скрипт в <head>, а не
         в конце <body> вместе с остальными: иначе при включённом высоком контрасте
         окно успевало бы отрисоваться в тёмной теме и мигнуть. -->
    <script src="ui-theme.js"></script>
    <!-- Замок «Закрепить положение» — рядом с темой и по той же причине: обе
         величины общие для всех окон и обе обязаны быть применены ДО первого
         кадра, иначе окно успевает показать чужое состояние. -->
    <script src="ui-lock.js"></script>
    <script src="drop-guard.js"></script>
    <script src="theme-init-tone.js"></script>
    <link rel="stylesheet" href="widget.css">
</head>
<body>
    <div class="widget-hint" id="widgetHint">Ctrl+колесо — масштаб</div>

    <div class="widget-container" id="widgetContainer">
        <!-- Фоновое изображение (для режима local/image) -->
        <div class="widget-bg-image" id="widgetBgImage">
            <img id="widgetBgImg" src="" alt="">
            <div class="widget-bg-overlay" id="widgetBgOverlay"></div>
        </div>

        <!-- Контролы и настройки убраны — управление из главного окна -->

        <!-- Круговой виджет -->
        <div class="circular-widget active">
            <svg class="widget-svg" viewBox="0 0 200 200">
                <defs>
                    <!-- Основной градиент -->
                    <!-- Цвета стопов живут в CSS (см. #widgetGradient stop):
                         презентационный атрибут stop-color здесь означал бы
                         второго владельца значения по умолчанию. -->
                    <linearGradient id="widgetGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" />
                        <stop offset="100%" />
                    </linearGradient>
                    <!-- Предупреждение. Цвета — в CSS (#warningGradient stop). -->
                    <linearGradient id="warningGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" />
                        <stop offset="100%" />
                    </linearGradient>
                    <!-- Опасность. Цвета стопов — в CSS (#dangerGradient stop),
                         по той же причине, что у #widgetGradient выше. -->
                    <linearGradient id="dangerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" />
                        <stop offset="100%" />
                    </linearGradient>
                    <!-- Свечение -->
                    <filter id="glow">
                        <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
                        <feMerge>
                            <feMergeNode in="coloredBlur"/>
                            <feMergeNode in="SourceGraphic"/>
                        </feMerge>
                    </filter>
                </defs>

                <!-- Фоновый круг -->
                <circle class="bg-circle" cx="100" cy="100" r="95" />
                
                <!-- Внутреннее свечение -->
                <circle class="inner-glow" cx="100" cy="100" r="70" />

                <!-- Деления (12 шт) -->

                <!-- Трек прогресса -->
                <circle class="progress-track" cx="100" cy="100" r="82" 
                        transform="rotate(-90, 100, 100)" />
                
                <!-- Прогресс-бар -->
                <circle class="progress-bar" id="progressBar" cx="100" cy="100" r="82" 
                        transform="rotate(-90, 100, 100)" 
                        stroke-dasharray="515.22" 
                        stroke-dashoffset="515.22" />
            </svg>

            <!-- Центральный контент -->
            <div class="center-content">
                <div class="time-display" id="timeDisplay"><span class="tm-sign" id="timeDisplaySign"></span><span class="tm-digits" id="timeDisplayDigits">00:00</span></div>
                <div class="status-badge" id="statusBadge">Готов</div>
            </div>
        </div>

        <!-- Стиль: Цифровой LED -->
        <!-- Стиль: Перекидные часы -->
        <div class="widget-flip" id="widgetFlip">
            <div class="widget-flip-content" id="widgetFlipContent">
                <div class="widget-flip-minus" id="wFlipMinus"><span class="widget-flip-minus-sign">−</span></div>
                <!-- Группа часов (скрыта по умолчанию) -->
                <div class="widget-flip-group widget-flip-hours" id="wFlipHoursGroup">
                    <div class="widget-flip-card" id="wFlipHr1">
                        <div class="widget-flip-inner">
                            <span class="widget-flip-digit">0</span>
                        </div>
                    </div>
                    <div class="widget-flip-card" id="wFlipHr2">
                        <div class="widget-flip-inner">
                            <span class="widget-flip-digit">0</span>
                        </div>
                    </div>
                </div>
                <div class="widget-flip-separator widget-flip-hours-sep" id="wFlipHoursSep">:</div>
                <!-- Группа минут -->
                <div class="widget-flip-group">
                    <div class="widget-flip-card" id="wFlipMin1">
                        <div class="widget-flip-inner">
                            <span class="widget-flip-digit">0</span>
                        </div>
                    </div>
                    <div class="widget-flip-card" id="wFlipMin2">
                        <div class="widget-flip-inner">
                            <span class="widget-flip-digit">0</span>
                        </div>
                    </div>
                </div>
                <div class="widget-flip-separator">:</div>
                <!-- Группа секунд -->
                <div class="widget-flip-group">
                    <div class="widget-flip-card" id="wFlipSec1">
                        <div class="widget-flip-inner">
                            <span class="widget-flip-digit">0</span>
                        </div>
                    </div>
                    <div class="widget-flip-card" id="wFlipSec2">
                        <div class="widget-flip-inner">
                            <span class="widget-flip-digit">0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Стиль: Аналоговые часы -->
        <div class="widget-analog" id="widgetAnalog">
            <div class="widget-analog-content">
                <div class="widget-analog-clock">
                    <!-- Деления -->
                    <div class="widget-clock-tick quarter"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick quarter"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick quarter"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick quarter"></div>
                    <div class="widget-clock-tick"></div>
                    <div class="widget-clock-tick"></div>
                    
                    <!-- Цифры (скрыты по умолчанию) -->
                    <div class="widget-clock-numbers" id="widgetClockNumbers">
                        <span class="widget-clock-number n12">12</span>
                        <span class="widget-clock-number n3">3</span>
                        <span class="widget-clock-number n6">6</span>
                        <span class="widget-clock-number n9">9</span>
                    </div>
                    
                    <!-- Цифровое время -->
                    <div class="widget-analog-digital" id="widgetAnalogDigital">00:00</div>
                    
                    <!-- Стрелки -->
                    <div class="widget-clock-hand widget-hand-hour" id="widgetHandHour"></div>
                    <div class="widget-clock-hand widget-hand-minute" id="widgetHandMinute"></div>
                    <div class="widget-clock-hand widget-hand-second" id="widgetHandSecond"></div>
                    
                    <!-- Центр -->
                    <div class="widget-clock-center" id="widgetClockCenter"></div>
                </div>
            </div>
        </div>

        <!-- Стиль: Цифры -->
        <div class="widget-digits" id="widgetDigits">
            <div class="widget-digits-time" id="widgetDigitsTime"><span class="widget-digits-sign" id="widgetDigitsSign"></span><span class="widget-digits-value" id="widgetDigitsValue">00:00</span></div>
            <span class="widget-digits-probe" id="widgetDigitsProbe" aria-hidden="true"></span>
        </div>
    </div>

    <!-- Вход окна — ОДИН модуль: всё остальное (шим IPC, библиотеки) приходит
         его import-ом, порядок выводится из графа (план 2026-10-30-es-modules). -->
    <script type="module" src="widget-app.js"></script>
    <!-- Тема приходит из панели; слушатель — отдельным модулем ПОСЛЕ входа:
         он зовёт окно через его крючок window.X. -->
    <script type="module" src="widget-theme-sync.js"></script>
</body>
</html>