app/windows.html - master - fleisar/kdk

app/windows.html
226 строк15 KB
Matvey Kuznetsov
refactor: rewrite codebase
19 янв 2025, 14:39
19 янв 2025, 14:39641288b
<div class="windows" spellcheck="false">
    <div class="main-window">
        <div class="window search">
            <div class="search-box ui-sticky-win">
                <div class="search-input">
                    <button class="material-icons">search</button>
                    <input placeholder="Поиск" type="text" maxlength="50">
                </div>
                <hr>
            </div>
            <div class="ui-grid results"></div>
        </div>
        <div class="window config">
            <h2><i class="material-icons">settings</i> Настройки</h2>
            <hr>
            <h3><i class="material-icons">extension</i> Настройки интерфейса</h3>
            <div class="ui-grid">
                <div>
                    <input id="8YMhUhte" type="checkbox" name="disableAnimations" class="ui-switch config-collector">
                    <label for="8YMhUhte">Отключить все анимации</label>
                </div>
                <div>
                    <input id="Wj62QBaX" type="checkbox" name="highEffects" class="ui-switch config-collector">
                    <label for="Wj62QBaX">Высокие эффекты</label>
                </div>
                <div>
                    <input id="rJQ4NcsN" type="checkbox" name="showTime" class="ui-switch config-collector">
                    <label for="rJQ4NcsN">Показывать локальное время на сайте</label>
                </div>
            </div>
            <h3><i class="material-icons">menu</i> Настройки меню</h3>
            <div class="ui-grid">
                <div>
                    <input id="5QCpQWnW" type="checkbox" name="showHistory" class="ui-switch config-collector">
                    <label for="5QCpQWnW">Показывать историю просмотров</label>
                </div>
                <div>
                    <input id="5QCpQW5W" type="checkbox" name="showCollection" class="ui-switch config-collector">
                    <label for="5QCpQW5W">Показывать коллекции</label>
                </div>
            </div>
            <h3><i class="material-icons">play_arrow</i> Плеер</h3>
            <div class="ui-grid">
                <div class="ui-disabled">
                    <input id="HQF5jhf6" type="checkbox" name="pauseOnBlur" class="ui-switch config-collector">
                    <label for="HQF5jhf6">Ставить на паузе при потере фокуса приложения</label>
                </div>
                <div>
                    <span>Внешний вид плеера</span>
                    <div class="ui-select">
                        <select class="config-collector" name="playerMode">
                            <option value="cinema" selected>Кинотеатр</option>
                            <option value="fullscreen">Полноэкранный</option>
                            <option value="windowed">Оконный</option>
                        </select>
                        <i class="material-icons">expand_more</i>
                    </div>
                </div>
                <div class="player-preview" playerMode="cinema">
                    <div class="player"></div>
                </div>
            </div>
            <h3><i class="material-icons">palette</i> Цветовая палитра</h3>
            <div class="ui-grid col-3 big">
                <input type="color" name="colorFill" style="--text:'Заливка'" class="ui-color config-collector" value="#4e4e4e">
                <input type="color" name="colorBG" style="--text:'Фон'" class="ui-color config-collector" value="#f0f0f0">
                <input type="color" name="colorText" style="--text:'Текст'" class="ui-color config-collector" value="#000000">
                <input type="color" name="colorHref" style="--text:'Ссылки'" class="ui-color config-collector" value="#2b769f">
                <input type="color" name="colorAttention" style="--text:'Внимание'" class="ui-color config-collector" value="#cc3838">
            </div>
            <h3><i class="material-icons">find_in_page</i> Настройки поиска</h3>
            <div class="ui-grid">
                <div>
                    <input id="mSRrDgY5" type="checkbox" name="realtimeSearch" class="ui-switch config-collector">
                    <label for="mSRrDgY5">Поиск в реальном времени</label>
                </div>
                <div>
                    <input id="mSRrDrY5" type="checkbox" name="highPreview" class="ui-switch config-collector">
                    <label for="mSRrDrY5">Высокое качество изображения</label>
                </div>
            </div>
            <h3><i class="material-icons">track_changes</i> Управление данными</h3>
            <div class="ui-grid">
                <div>
                    <input id="jXQPrP7b" type="checkbox" name="cacheLess" class="ui-switch config-collector">
                    <label for="jXQPrP7b">Сохранять меньше информации в списках</label>
                </div>
                <div>
                    <input id="pXQPrP7b" type="checkbox" name="collectInformation" class="ui-switch config-collector">
                    <label for="pXQPrP7b">Собирать информацию об использовании</label>
                </div>
            </div>
            <h3><i class="material-icons">storage</i> Хранилище</h3>
            <div class="ui-grid storage">
            </div>
            <h3><i class="material-icons">privacy_tip</i> Информация</h3>
            <div class="ui-grid ui-hrefs">
                <a data-window="info-usage">Использование информации на клиенте</a>
                <a data-window="info-processing">Использование информации на сервере</a>
                <a data-window="tutorial">Инструкция по использованию</a>
                <a data-window="about">О сайте</a>
            </div>
            <h3><i class="material-icons">build</i> Приложение</h3>
            <div class="ui-grid col-2">
                <button onClick="App.checkUpdate()">Проверить обновления</button>
                <button onClick="App.install(App.DEFAULT_MANIFEST,true)">Принудительно обновить</button>
                <button onClick="localStorage.clear();location.reload()">Сбросить</button>
            </div>
            <div class="ui-grid">
                <span class="version ui-min-font"></span>
            </div>
        </div>
        <div class="window history">
            <div class="ui-sticky-win">
                <h2><i class="material-icons">history</i> История просмотра</h2>
                <hr>
            </div>
            <div class="ui-grid results"></div>
        </div>
        <div class="window tutorial">
            <h2><i class="material-icons">support</i> Инструкция по использованию</h2>
            <hr>
            <p>Некоторые функции сайта трудно узнать интуитивно (хоть мы и стремимся к упрощению и стандартизации
                интерфейса). Поэтому здесь перечислены нестандартные возможности взаимодействия с сайтом.</p>
            <h4><i class="ui-key">Enter</i> Горячие клавиши</h4>
            <div class="ui-grid">
                <span><i class="ui-key">Esc</i> или <i class="ui-key">ЛКМ</i> - закрывает окна/переходит на главную страницу</span>
                <span><i class="ui-key">Alt</i><i class="ui-key">S</i> - открывает окно поиска</span>
                <span><i class="ui-key">Alt</i><i class="ui-key">O</i> - открывает окно настроек</span>
            </div>
        </div>
        <div class="window title-info">
            <div class="ui-grid"></div>
        </div>
        <div class="window info-usage">
            <h2><i class="material-icons">phonelink_setup</i> Использование информации на клиенте</h2>
            <hr>
            <h4>Что мы собираем?</h4>
            <ul>
                <li>Историю просмотров (в т.ч. кол-во просмотренных серий)</li>
                <li>Список любимого</li>
            </ul>
            <p class="ui-remark">
                В этот перечень не входят данные, собираемые другими сервисами, которые присутствуют на сайте, такие
                как: Shikimori, Kodik и другие.
            </p>
            <h4>Для чего мы делаем это?</h4>
            <p>Все перечисленные выше данные собираются исключительно для улучшения рекомендаций, которые подходят именно
                вам. Собираемые данные хранятся исключительно на вашем устройстве и могут быть отчищены по желанию в настройках
                сайта. Также сбор данных ограничен по умолчанию для сохранения приватности пользователя.</p>
            <p class="ui-remark">Некоторые функции сбора данных невозможно отключить так как они предоставляют базовые
                функции сайта.</p>
        </div>
        <div class="window info-processing">
            <h2><i class="material-icons">dns</i> Использование информации на сервере</h2>
            <hr>
            <h4>Что мы собираем?</h4>
            <ul>
                <li>Список любимого</li>
                <li>Используемое устройство (тип)</li>
                <li>Используемый браузер (название, версия)</li>
            </ul>
            <h4>Для чего мы делаем это?</h4>
            <p>Списки любимого используются для улучшения рекомендаций других пользователей сайта с похожими интересами.
                Информация о типе устройства и браузера используется для статистики и будущей возможной адаптацией под подобные
                платформы.</p>
            <p class="ui-remark">Информация на стороне сервера подписывается уникальным значением, это даёт нам возможность
                однозначно определить пользователя. Подобная идентификация предотвращает дубликацию на стороне сервера. Она не
                используется в рекламных или иных коммерческих целях.</p>
        </div>
        <div class="window about">
            <h2><i class="material-icons">info</i> О сайте</h2>
            <hr>
            <h3>Разработчик</h3>
            <a href="https://github.com/Fleisar" target="_blank">Fleisar</a>
            <h3>Используемый материал</h3>
            <h4>Библиотеки</h4>
            <ul class="ui-hrefs">
                <li><a href="https://github.com/jquery/jquery" target="_blank">jQuery</a> - работа с интерфейсом</li>
                <li><a href="https://github.com/verlok/vanilla-lazyload" target="_blank">LazyLoad</a> - оптимизация изображений</li>
                <li><a href="https://github.com/jaywcjlove/hotkeys" target="_blank">Hotkeys</a> - горячие клавиши</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">shikimori</a> - работа с Shikimori API</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">animetop</a> - работа с AnimeTop API</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">kodik</a> - работа с Kodik player API</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">kodik backend</a> - работа с API Kodik</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">listStorage</a> - хранение списков</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">configCollector</a> - контроллер настроек</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">uri</a> - контроллер адресов</li>
                <li><a href="https://github.com/Fleisar/kdk" target="_blank">Bind addon</a> - работа с событиями элементов</li>
                <li><a href="https://github.com/Fleisar/hover-menu" target="_blank">HoverMenu</a> - контекстное меню</li>
                <li><a href="https://github.com/Fleisar" target="_blank">App core</a> - конструктор приложений</li>
            </ul>
            <h4>API сервисы</h4>
            <ul class="ui-hrefs">
                <li><a href="https://kodik.cc/" target="_blank">Kodik</a></li>
                <li><a href="https://shikimori.one/" target="_blank">Shikimori</a></li>
                <li><a href="https://animetop.org/" target="_blank">AnimeTop</a></li>
            </ul>
            <h3>Немного об истории</h3>
            <p>Этот сайт создан для свободного просмотра аниме без лишнего и максимально "кастомную" для
                пользователя. На сайте мы стараемся собирать информацию по минимуму и предоставлять как можно больше
                полезных функций. Если у вас есть какие-то пожелания, мы всегда открыты для предложений на
                <a href="https://github.com/Fleisar/kdk/issues" target="_blank">GitHub</a> и
                <a href="https://discord.gg/XK6BKFJ" target="_blank">Discord-сервере</a>.</p>
        </div>
        <div class="window console">
            <div class="result ui-grid">

            </div>
        </div>
        <div class="window collections">
            <h2><i class="material-icons">collections_bookmark</i> Коллекции</h2>
            <hr>
            <ul class="result ui-material-list">

            </ul>
            <div class="ui-grid titles"></div>
            <ul class="icon-list ui-material-list">
                <li data-window="collections" data-add='{"id":null}'><span class="material-icons icon">add</span> Создать новую коллекцию</li>
            </ul>
        </div>
    </div>
    <div class="context-window">
        <div class="context"></div>
    </div>
</div>