Супер простой виджет для OBS или других подобных приложений. Работает в связке с https://pointauc.com

1. Заменяете в main.py токен на свой
2. Вставляете в OBS виджет браузера с адресом http://127.0.0.1:5000/
3. Ставите ему уморительный размер, я использую 1200x8000
4. Запускаете main.py

Если какой-то функционал не устраивает - спокойно меняем под себя. Может потребоваться поменять порт, если у вас параллельно запущены другие приложения, работающие с сетью - это так же делается в main.py. Только не забудьте при этом поменять порт в настройках виджета!

Настроить отображение виджета под себя можно полностью внутри OBS. Для этого нужно использовать поле CSS. Я использую следующие настройки (их можно просто вставить в поле CSS):

ul {
    list-style-type: none; /* Убираем маркеры списка */
    padding: 0;           /* Убираем отступы */
}

li {
    font-family: 'Centri Gothic', sans-serif; /* Красивый шрифт */
    font-weight: bold;    /* Делаем текст жирным */
    font-size: 40px;    /* Делаем текст большим */
    background: linear-gradient(to right, rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 0)); /* Градиент для подложки */
    margin: 10px 0;      /* Отступы между элементами списка */
    padding: 10px;       /* Внутренние отступы для каждого элемента */
    border-radius: 5px;  /* Закругление углов подложки */
    transition: background 0.3s; /* Плавный переход для фона */
}

Если не шарите в CSS (как я) - попросите любую нейросеть вам загенерить нужные настройки, я свои нагенерил за пару сообщений. Вставьте нейростеке что-то типо

Привет! У меня есть следующий html элемент, представляющий список: "<ul id="aucList"></ul>".
Я хочу использовать CSS, чтобы отображать каждый элемент списка... [описываете что хотите]
Пожалуйста, помоги мне сделать нужный CSS, и, если можешь, опиши, что делает каждый параметр!