Přizpůsobte si grafickou anketu

Mohu upravit odkaz OBS nebo soubor HTML?

Soubor překryvu je poll.html. Obsahuje rozvržení ankety, styly a kód hlasování. Adresa URL, kterou zkopírujete do OBS, odkazuje na tento soubor a přidá nastavení připojení, jako je vaše ID relace, za ?.

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

Pro barvy, písma, mezery a styly pruhů můžete ponechat hostovanou adresu URL a přidat Vlastní CSS v OBS. Pro návrh s novou kresbou, logem nebo jiným rozvržením upravte kopii poll.html a namiřte OBS na vaši kopii. Vlastní kopie se automaticky nezobrazí v rozevíracím seznamu motivů SSN.

Přímé načítání disku, místní spouštěče souborů OBS, příklady bezpečného vykreslování a podpůrné odkazy naleznete na průvodce sdíleným překryvným designem.

Nejprve spusťte pravidelné hlasování pomocí průvodce nastavením ankety. Ponechte si úplný vygenerovaný odkaz na grafickou anketu pro níže uvedený krok připojení.

1. Upravte styl hostovaného hlasování v OBS

1. V SSN otevřete Grafická anketa → Možnosti ankety. Vyberte Výchozí v nabídce Styl/téma ankety jako výchozí bod pro tento příklad a zapněte Povolit anketu.
2. Zkopírujte odkaz na grafickou anketu. V OBS přidejte nebo otevřete jeho Zdroj prohlížeče (Browser Source), ponechte Místní soubor zrušte zaškrtnutí a vložte odkaz do URL.
3. Nastavte velikost zdroje prohlížeče například na velikost vašeho plátna 1920 × 1080. Vložte CSS níže do Vlastní CSS, pak klikněte na OK. Pokud je chcete znovu použít, uložte si tam všechny 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;
}

Změňte hodnoty barev a velikosti podle svého návrhu. Tyto selektory cílí na existující prvky hlasování. Udržujte šířky pruhů řízené kódem hlasování a ponechte .hidden , takže Enable Poll může zobrazit a skrýt grafiku.

OBS Custom CSS ovlivňuje pouze tento zdroj prohlížeče; otevření stejné adresy URL v běžném prohlížeči zobrazí původní styl. Viz Odkaz na zdroj prohlížeče OBS pro vlastnosti zdroje.

Omezení specifické pro průzkum: proud poll.html nečte &css= nebo &b64css=. Použijte vlastní CSS OBS nebo upravte soubor pro toto překrytí.

2. Vytvořte editovatelnou kopii ankety

1. Stáhněte si soubor Social Stream Ninja zdrojový ZIP (beta) a extrahujte jej. Můžete zkontrolovat zdroj poll.html na GitHubu.
2. V extrahované složce duplikujte poll.html jako my-poll.html. Uchovávejte jej vedle originálu na nejvyšší úrovni složky.
3. Otevřít my-poll.html v textovém/kódovém editoru nebo dejte tento soubor ChatGPT nebo Codex spolu s referenčním obrázkem, barvami značky, fonty a vámi zamýšlenou velikostí plátna OBS.
4. U úprav pouze v CSS umístěte pravidla na konec existujících <style> blok, těsně předtím </style>. I tam funguje výše uvedený příklad. Uložte soubor s .html .

Uschovejte si podpůrné soubory. Aktuální průzkum načítá tyto skripty vzhledem k jeho vlastnímu umístění; zkopírování pouze HTML do nové složky nestačí:

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

Písmo a favicon jsou odkazovaná aktiva; čtyři soubory JavaScript podporují hlasování a připojení. Ponecháte-li extrahovanou složku nedotčenou, zůstanou tyto cesty dostupné. Přidejte tam také jakékoli logo nebo soubory písem, které váš návrh používá.

3. Dejte AI existující soubor a konkrétní zadání

Připojit my-poll.html a váš návrhový odkaz, nebo otevřete extrahovanou složku ve vašem kódovacím nástroji. Nahraďte podrobnosti v závorkách v této výzvě:

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.

U trasy CSS OBS změňte poslední instrukci na: "Vraťte pouze CSS pro vlastní CSS OBS s použitím stávajících selektorů hlasování a výchozího motivu; nezahrnujte značky HTML nebo skriptu."

Pro ruční úpravy jsou hlavní stylingové háčky #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, a .poll-instruction. Změna rozvržení může také vyžadovat odpovídající úpravy v obou updatePollOptions() a updatePollResults(), které tvoří řádky odpovědí.

4. Otevřete svůj upravený průzkum v OBS

Otevřít my-poll.html přímo z vašeho počítače. Neexistuje žádný server, který by bylo možné nainstalovat nebo spustit.

1. Přetáhněte my-poll.html do prohlížeče Chrome nebo Edge. Zkopírujte adresu z adresního řádku; začíná to s file:///.
2. Zkopírujte vše z ? dále ve vašem pracovním odkazu na grafickou anketu ze SSN. Přidejte jej na konec adresy souboru. Tím se zachová vaše relace, heslo a další nastavení.
3. Otevřete tuto kombinovanou adresu ve svém prohlížeči a zkontrolujte ji. Poté jej vložte do zdroje prohlížeče OBS URL pole s Místní soubor nezaškrtnuto. Nastavte požadovanou šířku a výšku.

Například tento zkopírovaný odkaz:

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

se stává:

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

Toto jsou zástupné symboly: použijte svůj skutečný zkopírovaný odkaz, včetně pouze možností, které již má. Pokračujte v používání SSN Možnosti hlasování pro nastavení otázky, shody hlasů a ovládacích prvků hlasování.

Výše ​​uvedená adresa souboru je příkladem systému Windows. Na macOS to začíná na file:///Users/.... Zkopírujte skutečnou adresu svého prohlížeče, aby cesta a případné mezery byly zpracovány za vás.

Nastavte to jednou. OBS uloží adresu. Udržujte staženou složku na stejném místě a nechte SSN a váš zdroj chatu spuštěný při používání hlasování. Po uložení úpravy použijte Obnovit mezipaměť aktuální stránky ve vlastnostech zdroje.

Proč nechat místní soubor nezaškrtnuté? Použití pole URL zahrnuje nastavení relace po ?. Samotný výběr souboru HTML ne. The sdílený průvodce také zahrnuje volitelný spouštěč pro výběr souborů.

5. Otestujte návrh reálnou anketou

1. Udržujte SSN a zachycený zdroj chatu spuštěný. In Možnosti hlasování, povolit hlasování, nastavit Volný tvar, zadejte otázku a vyberte Pouze přesný hlas.
2. Odeslat #coffee a #tea od různých uživatelů chatu nebo použijte odlišné fiktivní uživatele s nástroje pro testovací zprávy. Pokud je zakázáno více hlasů, opakování hlasu od stejného uživatele nepřidá další hlas.
3. Zkontrolujte sloupce a součty v OBS. Zkuste dlouhou otázku, dlouhou odpověď a Zobrazit počet hlasů místo procent možnost zkontrolovat, zda text sedí.
4. Test Hashtag kdekoli s delším sdělením jako např I vote #coffee today. Zkontrolujte Ukončit anketu, Resetovat anketu, a Povolit anketu , takže vlastní návrh zpracovává zavřené, prázdné a skryté stavy.

• Prázdné překrytí: zaškrtněte políčko Povolit dotazování a nastavení zkopírované relace. Volný průzkum nemá žádné řádky odpovědí, dokud nepřijdou hlasy.
• Místní stránka se neotevře: přetáhněte soubor znovu do prohlížeče a zkopírujte jeho aktuální adresu. Zkontrolujte, zda název souboru není náhodně my-poll.html.txt.
• Zaseknutí u "Načítání ankety": zkontrolujte podpůrné skripty a jejich cesty ke složkám, stav běhu SSN a úplný řetězec dotazu z pracovního hostovaného průzkumu.
• Hlasy se nepočítají: potvrďte, že hlasování je otevřené, zpráva odpovídá zvolenému režimu hlasování a testovací uživatel ještě nehlasoval.
• V OBS vypadá jinak: zkontrolujte rozměry zdroje prohlížeče, jakékoli starší vlastní CSS, které přepisují návrh souboru, a zda je potřeba aktualizace.
• Logo po hlasování zmizí: umístit trvalé umělecké dílo ven #poll-options; tento prvek je přestavěn při aktualizacích.

Vaše upravená kopie je udržována odděleně od hostovaného hlasování SSN. Uschovejte si zálohu návrhu a porovnejte jej s novějším poll.html verze, když potřebujete upstream opravy. Chcete-li vytvořit jiný překryv od začátku, viz průvodce vlastními překryvy.