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

Налаштуйте своє графічне опитування

Зіставте кольори, шрифти та макет свого шоу за допомогою OBS CSS або власної копії сторінки опитування.

Чи редагувати посилання 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 відкрийте Graphical Poll → Poll Options. Виберіть За замовчуванням у розділі Стиль/тема опитування як відправну точку для цього прикладу та увімкніть Увімкнути опитування (Enable Poll).
  2. Скопіюйте посилання Graphical Poll. У OBS додайте або відкрийте його Джерело браузера (Browser Source), залиште Локальний файл зніміть прапорець і вставте посилання URL.
  3. Встановіть розмір джерела браузера, наприклад, розмір вашого полотна 1920 × 1080. Вставте CSS нижче в Власний CSS, а потім натисніть OK. Збережіть будь-який 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 , щоб функція Enable Poll могла показувати та приховувати графіку.

OBS Спеціальний CSS впливає лише на це джерело веб-переглядача; відкриття тієї самої URL-адреси у звичайному браузері покаже оригінальний стиль. див Посилання на джерело браузера OBS для властивостей джерела.

Обмеження, пов’язані з опитуваннями: струм poll.html не читається &css= або &b64css=. Використовуйте OBS Custom CSS або відредагуйте файл для цього накладання.

2. Зробіть редаговану копію опитування

  1. Завантажити Social Stream Ninja вихідний ZIP (бета) і витягніть його. Можна оглянути джерело 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. Надайте ШІ наявний файл і конкретне резюме

Додайте 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 і ваше джерело чату працюють під час опитування. Після збереження редагування використовуйте Оновити кеш поточної сторінки (Refresh cache of current page) у властивостях джерела.

Чому не відмічено позначку «Локальний файл»? Використання поля URL включає налаштування сеансу після ?. Вибір файлу HTML сам по собі не робить. The спільний посібник також охоплює додатковий засіб запуску для вибору файлів.

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

  1. Підтримуйте роботу SSN і захопленого джерела чату. в Варіанти опитування, включити опитування, встановити Вільна форма, введіть запитання та виберіть Лише точний голос (Exact vote only).
  2. Надіслати #coffee і #tea від різних користувачів чату або використовувати окремих вигаданих користувачів із інструменти тестового повідомлення. Якщо кілька голосів вимкнено, повторне голосування від того самого користувача не додасть іншого голосу.
  3. Перевірте стовпчики та підсумки в OBS. Спробуйте довге запитання, довгу відповідь і Показати кількість голосів замість відсотків опція перевірки відповідності тексту.
  4. Перевірка Хештег будь-де (Hashtag anywhere) з довшим повідомленням, наприклад I vote #coffee today. Перевірте Завершити опитування (End Poll), Скинути опитування (Reset Poll), і Увімкнути опитування (Enable Poll) тому спеціальний дизайн обробляє закриті, порожні та приховані стани.
  • Порожнє накладання: поставте прапорець «Увімкнути опитування» та скопійовані налаштування сеансу. Опитування у довільній формі не містить відповідей, доки не надійдуть голоси.
  • Локальна сторінка не відкривається: знову перетягніть файл у свій браузер і скопіюйте його поточну адресу. Перевірте назву файлу не випадково my-poll.html.txt.
  • Застряг на "Завантаження опитування": перевірити допоміжні сценарії та шляхи до їхніх папок, запущений стан SSN і повний рядок запиту з робочого розміщеного опитування.
  • Голоси не враховуються: підтвердити, що голосування відкрито, повідомлення відповідає обраному режиму голосування, а тестовий користувач ще не голосував.
  • Виглядає інакше в OBS: перевірте розміри вихідного коду веб-переглядача, будь-який старіший користувацький CSS, який замінює дизайн файлу, і чи потрібне оновлення.
  • Логотип зникає після голосування: розмістіть постійне мистецтво зовні #poll-options; цей елемент перебудовується на основі оновлень.

Ваша відредагована копія зберігається окремо від опитування, розміщеного SSN. Збережіть резервну копію дизайну та порівняйте його з новими poll.html версії, коли вам потрібні виправлення вгорі. Щоб створити інше накладання з нуля, див Посібник з налаштувань накладень.