Social Stream Ninja
Русский
EnglishEspañolPortuguês (Brasil)РусскийFrançaisDeutsch日本語简体中文繁體中文ItalianoPolski한국어УкраїнськаالعربيةTürkçeČeštinaไทย

Настройте свой графический опрос

Подберите цвета, шрифты и макет вашего шоу с помощью CSS OBS или собственной копии страницы опроса.

Редактировать ли мне ссылку OBS или HTML-файл?

Файл наложения poll.html. Он содержит макет опроса, стили и код голосования. URL-адрес, который вы скопируете в OBS, указывает на этот файл и добавляет настройки подключения, такие как идентификатор вашего сеанса, после ?.

https://socialstream.ninja/poll.html?session=YOUR_SESSION

Для цветов, шрифтов, интервалов и стилей полос вы можете сохранить размещенный URL-адрес и добавить Собственный CSS в OBS. Для дизайна с новым изображением, логотипом или другим макетом отредактируйте копию poll.html и наведите OBS на свою копию. Пользовательская копия не появляется автоматически в раскрывающемся списке тем SSN.

Информацию о прямой загрузке диска, локальных средствах запуска файлов OBS, примерах безопасного рендеринга и вспомогательных ссылках см. руководство по созданию общего наложения.

Сначала настройте регулярный опрос, используя руководство по настройке опроса. Сохраните полную созданную ссылку на графический опрос для шага подключения ниже.

1. Оформите размещенный опрос в OBS.

  1. В SSN откройте Графический опрос → Параметры опроса. Выберите По умолчанию в разделе Стиль/тема опроса в качестве отправной точки для этого примера и включите Включить опрос.
  2. Скопируйте ссылку на графический опрос. В OBS добавьте или откройте его Источник «Браузер», оставьте Локальный файл снимите флажок и вставьте ссылку в URL.
  3. Установите исходный размер браузера, например, в соответствии с размером холста. 1920 × 1080. Вставьте CSS ниже в Собственный CSS, затем нажмите ОК. Сохраните любой CSS, который уже есть, если вы хотите использовать его повторно.
body {
    margin: 0;
    background: transparent;
    overflow: hidden;
}

#poll-container {
    box-sizing: border-box;
    width: 880px;
    max-width: 90%;
    padding: 28px;
    border-radius: 0;
    border-left: 8px solid #f5c542;
    background: rgba(8, 24, 48, 0.95);
    color: #ffffff;
    font-family: Arial, sans-serif;
}

#poll-container .poll-title {
    color: #ffffff;
    font-size: 36px;
    text-align: left;
    margin: 0 0 24px;
}

#poll-container .poll-option {
    background: #162e50;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 26px;
}

#poll-container .poll-bar {
    background: #3266ad;
}

#poll-container .poll-instruction {
    font-size: 22px;
    margin-bottom: 18px;
}
Реальный опрос с примером темно-синего и золотого CSS и вымышленных голосов за кофе и чай.
Пример CSS, примененный к poll.html с вымышленными голосами.

Измените значения цвета и размеры в соответствии с вашим дизайном. Эти селекторы нацелены на существующие элементы опроса. Держите ширину полос под контролем кода опроса и сохраняйте .hidden поведение, позволяющее Включить опрос отображать и скрывать изображение.

OBS Пользовательский CSS влияет только на этот источник браузера; открытие того же URL-адреса в обычном браузере покажет исходный стиль. См. Ссылка на исходный код браузера OBS. для исходных свойств.

Ограничение, специфичное для опроса: текущий poll.html не читает &css= или &b64css=. Используйте OBS Custom CSS или отредактируйте файл этого наложения.

2. Сделайте редактируемую копию опроса.

  1. Загрузите ZIP-архив исходного кода Social Stream Ninja (бета-версия) и извлеките его. Вы можете проверить исходный код poll.html на GitHub..
  2. В извлеченной папке дублируем poll.html как my-poll.html. Храните его рядом с оригиналом на верхнем уровне папки.
  3. Открыть my-poll.html в текстовом редакторе или редакторе кода или отправьте этот файл в ChatGPT или Codex вместе с эталонным изображением, фирменными цветами, шрифтами и предполагаемым размером холста OBS.
  4. Для редактирования только с помощью CSS разместите правила в конце существующего файла. <style> блок, непосредственно перед </style>. Пример выше работает и там. Сохраните файл с помощью .html .

Сохраните вспомогательные файлы. Текущий опрос загружает эти скрипты относительно своего местоположения; копирования только HTML в новую папку недостаточно:

your-poll-folder/
    my-poll.html
    currency.js
    js/
        transport-dedupe.js
        local-server-url.js
    shared/
        overlay-control-transport.js
    thirdparty/
        NotoColorEmoji.ttf
    favicon.ico

Шрифт и значок являются ссылочными ресурсами; четыре файла JavaScript поддерживают голосование и соединения. Если оставить извлеченную папку нетронутой, эти пути останутся доступными. Добавьте сюда любые файлы логотипов или шрифтов, которые использует ваш дизайн.

3. Предоставьте AI существующий файл и конкретное задание.

Прикрепить my-poll.html и ссылку на проект или откройте извлеченную папку в инструменте кодирования. Замените данные в квадратных скобках в этом приглашении:

Customize this existing Social Stream Ninja poll overlay.

Design: [describe the look or match the attached reference].
Colors: [brand hex colors]. Font: [font name or supplied font file].
Logo: [supplied image filename, if any].
OBS canvas: [1920 x 1080]. Placement: [center / lower third / side panel].
Allow for long questions and up to 10 free-form answers.

Edit my-poll.html, using CSS first. Keep the existing working poll code:
hashtag matching, vote counting, duplicate-vote handling, percentages,
tallies, donation weighting, settings updates, and start/end/reset controls.
Keep session/password/transport URL handling and all supporting script loads.
Preserve #poll-container, #poll-title, #poll-options, and show/hide behavior.
The script replaces #poll-options contents when results update, so put any
permanent logo or decoration outside that element.
Do not hard-code sample results or private session details.
Keep the page compatible with Chrome 80 and OBS Browser Source.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited poll work directly from disk using a file:/// URL,
without requiring a local web server. Return the complete edited HTML,
list any extra image/font files needed, and include the file URL steps for OBS.

Для CSS-маршрута OBS измените последнюю инструкцию на: «Вернуть только CSS для пользовательского CSS OBS, используя существующие селекторы опросов и тему по умолчанию; не включайте теги HTML или скрипты».

При ручном редактировании основными приемами стилизации являются: #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, и .poll-instruction. Изменение макета также может потребовать соответствующих изменений в обоих updatePollOptions() и updatePollResults(), которые строят строки ответов.

4. Откройте отредактированный опрос в OBS.

Открыть my-poll.html прямо с вашего компьютера. Нет сервера для установки или запуска.

  1. Перетащите my-poll.html в Chrome или Edge. Скопируйте адрес из адресной строки; это начинается с file:///.
  2. Скопируйте все из ? и далее в рабочей ссылке на графический опрос от SSN. Добавьте его в конец адреса файла. При этом сохраняется ваш сеанс, пароль и другие настройки.
  3. Откройте этот объединенный адрес в браузере, чтобы проверить его. Затем вставьте его в исходный код браузера OBS. URL поле с Локальный файл флажок снят. Установите желаемую ширину и высоту.

Например, эта скопированная ссылка:

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

становится:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Это заполнители: используйте фактическую скопированную ссылку, включая только те параметры, которые у нее уже есть. Продолжайте использовать SSN Опции опроса для установки вопроса, сопоставления голосов и управления опросом.

Указанный выше адрес файла является примером для Windows. На macOS это начинается с file:///Users/.... Скопируйте фактический адрес вашего браузера, чтобы путь и любые пробелы обрабатывались за вас.

Настройте это один раз. OBS сохраняет адрес. Сохраните загруженную папку в том же месте и оставьте SSN и источник чата включенными при использовании опроса. После сохранения редактирования используйте Обновить кэш текущей страницы в свойствах источника.

Зачем оставлять локальный файл неотмеченным? Использование поля URL включает настройки сеанса после ?. Выбор только HTML-файла не позволяет этого сделать. общее руководство также описывает дополнительный модуль запуска для средства выбора файлов.

5. Проверьте дизайн с помощью реального опроса.

  1. Оставьте SSN и захваченный источник чата включенными. В Опции опроса, включить опрос, установить Свободная форма, введите вопрос и выберите Только точное совпадение голоса.
  2. Отправить #coffee и #tea от разных пользователей чата или используйте отдельных вымышленных пользователей с инструменты для создания тестовых сообщений. Если отключено несколько голосов, повторение голоса одного и того же пользователя не приведет к добавлению еще одного голоса.
  3. Проверьте столбцы и итоги в OBS. Попробуйте задать длинный вопрос, длинный ответ и Показывать количество голосов вместо процентов. опция проверки соответствия текста.
  4. Проверка Хештег в любом месте с более длинным сообщением, например I vote #coffee today. Проверить Завершить опрос, Сбросить опрос, и Включить опрос , поэтому индивидуальный дизайн обрабатывает закрытые, пустые и скрытые состояния.
  • Пустое наложение: установите флажок «Включить опрос» и скопированные настройки сеанса. Опрос в свободной форме не имеет строк с ответами до тех пор, пока не поступят голоса.
  • Локальная страница не открывается: снова перетащите файл в браузер и скопируйте его текущий адрес. Проверьте имя файла не случайно my-poll.html.txt.
  • Застрял на этапе «Загрузка опроса»: проверьте вспомогательные сценарии и пути к их папкам, рабочее состояние SSN и полную строку запроса из рабочего размещенного опроса.
  • Голоса не учитываются: подтверждают, что голосование открыто, сообщение соответствует выбранному режиму голосования и тестовый пользователь еще не проголосовал.
  • В OBS выглядит иначе: проверьте размеры исходного кода браузера, любой старый пользовательский CSS, переопределяющий дизайн файла, и необходимость обновления.
  • Логотип исчезает после голосования: разместить постоянные произведения искусства снаружи #poll-options; этот элемент перестраивается при обновлениях.

Ваша отредактированная копия хранится отдельно от размещенного опроса SSN. Сохраните резервную копию проекта и сравните ее с более новой версией. poll.html версий, когда вам нужны исправления исходной версии. Чтобы создать другое наложение с нуля, см. руководство по пользовательским наложениям.