Navrhněte si vlastní zavařovací sklenice a cíle

Zobrazte jiný GIF podle postupu sbírky

Použijte jeden vlastní překryv obsahující ukazatel cíle i grafiku. Ukazatel už postup vypočítává; grafika má sledovat tentýž postup, nikoli počítat dary samostatně. Tento postup vyžaduje upravenou kopii překryvu, nejde o další vestavěné nastavení.

1. V SSN nastavte Nádoba na spropitné a Ukazatel cíle s Plynulý ukazatel cíle (Fluid Goal Bar), název, cíl a filtry darů. Pro tento pevný peněžní cíl 500 $ ponechte Bodování Hype Cup (Hype Cup Scoring) vypnuté a zakažte opakované nebo zvyšované cíle. Před úpravami ověřte funkčnost původního odkazu.
2. Sledování Stáhněte a uchovejte strukturu souborů níže a vytvořte my-goal.html. Uložte pět GIFů vedle tohoto souboru pod názvy z tabulky. Použijte stejnou velikost plátna, aby grafika při změně neposkakovala ani se nenatahovala.
3. Předejte editoru nebo nástroji AI zkopírovaný zdrojový kód a GIFy. Použijte níže uvedené pokyny pro milníky a úplné zadání úpravy. Požadujte jeden obrázek vedle stávajícího ukazatele.
4. Prohlédněte upravenou kopii na každém milníku a poté postupujte podle Relace a OBS a připojte jej s nastavením původního odkazu. Společný překryv přidejte jako jeden zdroj prohlížeče OBS.

Názvy souborů jsou příklady: použijte vlastní grafiku. Uvedené částky v dolarech platí pro tento pevný peněžní cíl. U početních, Hype, opakovaných nebo zvyšovaných cílů vybírejte obrázek podle procent zobrazených ukazatelem.

Add milestone artwork beside the existing Fluid Goal Bar in my-goal.html.
Use these relative GIF files:
0%: goal-0.gif; 25%: goal-25.gif; 50%: goal-50.gif;
75%: goal-75.gif; 100%: goal-100.gif.

Read the existing getProgressState().percentage from the renderAmount()
update path. Do not add a second donation counter or change goal math.
Select the highest reached threshold. If progress jumps from 20% to 80%,
show goal-75.gif directly. Clamp the artwork selection to 0–100%.
Change img.src only when its selected file changes so ordinary updates
do not restart the GIF. Keep one fixed-size image box with object-fit: contain.
Provide meaningful alternative text and handle a missing image without
hiding or breaking the goal bar.

Update the artwork on first render, donations, manual total changes,
reset, restored totals, and recurring/advancing-goal transitions.
Keep the completion image while a fixed goal remains at or above 100%.
If the configured goal resets or advances, follow its displayed percentage.
Preserve the existing filters, session, password, currency/count/Hype
semantics, persistence, completion rules, and local dependencies.

Use the existing preview mode to test 0, 124, 125, 249, 250, 374,
375, 499, 500, and 600 against a fixed goal of 500. Also test a large
jump, a manual decrease, reset, refresh, and any enabled recurring rules.

Vyzkoušejte bez změny skutečných součtů

Otevřete upravenou kopii s níže uvedeným nastavením náhledu. Změňte startamount na hodnoty ze zadání a mezi kontrolami stránku obnovte. Náhled používá ukázková data a vypíná živá připojení, uložené součty a zvuk.

file:///C:/SSN/social_stream-beta/my-goal.html?preview&style=bar&goal=500&startamount=125

Při 125 $ se má vedle ukazatele naplněného na 25 % zobrazit GIF prvního milníku. Odstraňte preview a zkušební parametr startamount před použitím skutečné relace a jejího původního nastavení. Obnovené součty a vynulování ověřte zvlášť v testovací relaci, protože náhled součty neukládá.

Vyberte správnou úvodní stránku

Měřič tipů a cílů může prezentovat různé metriky a styly stejného tipjar.html. Nejprve nakonfigurujte zamýšlenou metriku v SSN a poté ponechte vygenerovanou adresu URL při změně návrhu. Hype bodování v tomto cíli se liší od počítadla diváků/chatterů hype.html.

Stáhněte a uchovejte strukturu souborů

1. Stáhněte si zdrojový ZIP a extrahujte jej. Tyto návody používají zdroj beta; uchovávat soubory z jednoho stažení pohromadě.
2. Kopírovat tipjar.html na my-goal.html vedle originálu. Pokud zvolíte jinou stránku nebo motiv, ponechte jeho kopii v původní složce daného souboru.
3. Otevřete zkopírovaný HTML a jeho odkazovaný CSS/JS ve svém editoru nebo nástroji AI. Přidejte dodané kresby/písma do stejného projektu a použijte relativní cesty. Začněte s přepisy CSS; zahrnout vykreslovací modul při změně generovaného označení.

Následující soubory vám pomohou najít design a chování. Toto je seznam čtení, nikoli úplný balíček závislostí: ponechte extrahovanou složku nedotčenou, včetně obrázků, písem, skriptů a jakýchkoli datových souborů.

Připojte svou kopii a otevřete ji v OBS

Spusťte SSN a nejprve zprovozněte původně vygenerovanou překryvnou adresu URL. The session= hodnota se připojuje k této relaci SSN; není to název vašeho kanálu ani název tohoto souboru. Udržujte SSN, příslušnou funkci a její zdroje dat spuštěné.

1. Přetáhněte upravený soubor HTML do prohlížeče Chrome nebo Edge. Zkopírujte jeho adresu z adresního řádku; začíná to s file:///.
2. Zkopírujte vše z ? dále ve vašem pracovním překryvném odkazu SSN a přidejte jej na konec adresy souboru. Uchovávejte všechna nastavení, včetně relace, hesla a dalších # konec.
3. Otevřete výsledek v prohlížeči a poté nastavte zdroj prohlížeče OBS URL na stejnou adresu s Místní soubor nezaškrtnuto. Přizpůsobte zdrojové rozměry zamýšlenému návrhu.

Pro počáteční soubor výše vypadá místní adresa takto; váš skutečný odkaz může obsahovat další požadované možnosti:

file:///C:/SSN/social_stream-beta/my-goal.html?session=YOUR_SESSION

Použijte skutečnou adresu souboru ve vašem počítači. OBS jej uloží se zdrojem; ponechte staženou složku na stejném místě. Po uložení změn návrhu obnovte zdroj prohlížeče. The sdílený průvodce nastavením obsahuje příklady pro Mac a volitelný spouštěč pro zaškrtávací políčko Místní soubor.

Kde změnit design

Změňte kresbu nádoby, barvy výplně, stopu pruhu, štítek cíle, typografii množství a animaci dokončení. Začněte se stávajícími ovládacími prvky stylu a barev popsanými v průvodce cílem. V případě vlastní kresby ponechejte položky vedle kopie a aktualizujte pouze její odkazovanou cestu.

K jeho chování patří metrika cíle, pravidla dokončení/resetování, vytrvalost a počítání dárců. Při změně prezentace je uchovejte. Nepřevádějte surové mince, darované předplatné a USD na jedno neoznačené číslo. Zachovejte číselný údaj donoValue nula, když jej zdroj dodává.

Zkopírujte tuto výzvu AI

Dejte AI své zkopírované zdrojové soubory a referenční umělecká díla. Nahraďte detaily v závorce. Ponechte si bezpečnostní pokyny ve výzvě.

Customize my-goal.html, copied from tipjar.html.
Design: [describe the look or attach a reference].
Colors/fonts/assets: [supply hex colors and local filenames].
OBS canvas and placement: [size and position].

Style this tip jar/goal as [design] for [canvas]. Change artwork, colors, layout, labels, and motion while preserving the chosen metric, amount calculation, source filters, streak handling, persistence, and completion/reset rules. Keep hasDonation display units and donoValue USD semantics. Do not fabricate progress when the feed is empty.

Read docs/event-reference.html for incoming fields and
docs/overlay-customization-guide.html for local setup and safe rendering.
Keep the existing session/password handling, labels, server routes, query
parameters, URL fragments, and relative asset paths. Use classic scripts
compatible with Chrome 80. Keep executable dependencies packaged locally.

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 overlay work directly from disk using a file:/// URL,
without requiring a local web server.
Return the edited files, any additional assets, exact local browser/OBS
setup instructions using placeholders, and the specific tests performed.
Do not put my private session link or credentials into a public example.

Otestujte tento typ překrytí

Nejprve použijte náhled nebo testovací nastavení. The průvodce testovacími zprávami vysvětluje, jak odesílat fiktivní užitečné zatížení prostřednictvím SSN; test odeslaný do vaší produkční relace může spustit stávající automatizaci.

1. Nejprve vyzkoušejte režim náhledu stránky (?náhled s vašimi možnostmi stylu); odstranit náhled při připojení skutečné relace.
2. Použijte ukázkové události podpory odpovídající zvolené metrice. Zkontrolujte nulu, dílčí pokrok, dosažený cíl a pokrok za cíl.
3. Zkontrolujte nastavení resetování/přenosu a obnovení zdroje mezi zkouškami. Zkontrolujte štítky měn, dlouhé názvy a jakýkoli zvuk nebo efekt dokončení v OBS.

Spusťte také kontroly vykreslování vstupu proti cestám vykreslování, které jste změnili. Po uložení úprav obnovte zdroj prohlížeče OBS mezi zkouškami a zopakujte viditelnou interakci. Náhledy prohlížeče nenastavují živé zachycení nebo chování OBS.

Další odkazy: Metriky a ovládací prvky cílů · Darovací pole · Referenční příručka událostí · Odstraňování problémů s místním nastavením.