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

그래픽 설문조사를 사용자 정의하세요

쇼의 색상, 글꼴 및 레이아웃을 OBS CSS 또는 설문 조사 페이지 사본과 일치시키세요.

OBS 링크를 편집합니까, 아니면 HTML 파일을 편집합니까?

오버레이 파일은 poll.html. 설문조사의 레이아웃, 스타일 및 투표 코드가 포함되어 있습니다. OBS에 복사한 URL은 해당 파일을 가리키며 세션 ID와 같은 연결 설정을 추가합니다. ?.

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. 그래픽 설문조사 링크를 복사합니다. 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 예시와 가상의 커피 및 차 투표를 사용한 실제 여론 조사
가상 투표를 통해 poll.html에 적용된 CSS의 예입니다.

디자인에 맞게 색상 값과 크기를 변경하세요. 이러한 선택기는 기존 설문 조사 요소를 대상으로 합니다. 설문조사 코드로 막대 너비를 제어하고 .hidden 동작을 통해 Enable Poll이 그래픽을 표시하거나 숨길 수 있습니다.

OBS 사용자 정의 CSS는 해당 브라우저 소스에만 영향을 미칩니다. 일반 브라우저에서 동일한 URL을 열면 원래 스타일이 표시됩니다. 참조 OBS의 브라우저 소스 참조 소스 속성에 대한 것입니다.

설문조사별 제한 사항: 현재 poll.html 읽지 않는다 &css= 또는 &b64css=. OBS 사용자 정의 CSS를 사용하거나 이 오버레이용 파일을 편집하세요.

2. 편집 가능한 설문 조사 사본 만들기

  1. 다운로드 Social Stream Ninja 소스 ZIP(베타) 그리고 그것을 추출한다. 검사할 수 있습니다 GitHub의 poll.html 소스.
  2. 추출된 폴더에 poll.html 형식: my-poll.html. 폴더의 최상위 수준에 있는 원본 옆에 보관하세요.
  3. 열기 my-poll.html 텍스트/코드 편집기에서 참조 이미지, 브랜드 색상, 글꼴 및 원하는 OBS 캔버스 크기와 함께 해당 파일을 ChatGPT 또는 Codex에 제공하세요.
  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

글꼴과 파비콘은 참조 자산입니다. 4개의 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.

OBS CSS 경로의 경우 마지막 명령을 다음으로 변경합니다. "기존 설문 조사 선택기와 기본 테마를 사용하여 OBS 사용자 정의 CSS에 대한 CSS만 반환합니다. 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를 계속 사용하세요 설문조사 옵션 질문, 투표 일치 및 여론 조사 제어를 설정합니다.

위 파일 주소는 윈도우즈 예시입니다. macOS에서는 다음으로 시작합니다. file:///Users/.... 경로와 공백이 자동으로 처리되도록 브라우저의 실제 주소를 복사하세요.

한번 설정해 보세요. OBS는 주소를 저장합니다. 다운로드한 폴더를 같은 장소에 보관하고 설문조사를 사용할 때 SSN와 채팅 소스를 계속 실행하세요. 편집 내용을 저장한 후 사용하세요. 현재 페이지의 캐시 새로고침 (Refresh cache of current page) 소스 속성에서.

로컬 파일을 선택하지 않은 상태로 두는 이유는 무엇입니까? URL 필드를 사용하면 이후의 세션 설정이 포함됩니다. ?. HTML 파일만 선택하면 그렇지 않습니다. 는 공유 가이드 는 파일 선택기의 선택적 실행 프로그램도 다룹니다.

5. 실제 설문 조사를 통해 디자인 테스트

  1. SSN 및 캡처된 채팅 소스를 계속 실행하세요. 에서 설문조사 옵션, 설문조사를 활성화하고 설정합니다. 자유형, 질문을 입력하고 선택하세요. 정확한 투표만 (Exact vote only).
  2. 보내기 #coffee 그리고 #tea 다른 채팅 사용자로부터 또는 별개의 가상 사용자를 사용하여 테스트 메시지 도구. 다중 투표가 비활성화되면 동일한 사용자의 투표를 반복해도 다른 투표가 추가되지 않습니다.
  3. OBS에서 막대와 합계를 확인합니다. 긴 질문, 긴 대답을 시도해 보세요. 퍼센트 대신 투표수 표시 텍스트가 맞는지 확인하는 옵션입니다.
  4. 테스트 해시태그 위치 무관 (Hashtag anywhere) 다음과 같은 긴 메시지가 포함됩니다. I vote #coffee today. 확인 투표 종료 (End Poll), 투표 초기화 (Reset Poll), 그리고 투표 활성화 (Enable Poll) 그래서 맞춤형 디자인은 닫힌 상태, 비어 있는 상태, 숨겨진 상태를 처리합니다.
  • 빈 오버레이: Poll 활성화 및 복사된 세션 설정을 확인합니다. 자유 형식 설문조사에는 투표가 도착할 때까지 답변 행이 없습니다.
  • 로컬 페이지가 열리지 않습니다: 파일을 브라우저로 다시 드래그하고 현재 주소를 복사하세요. 파일 이름이 실수로 입력되지 않았는지 확인하세요. my-poll.html.txt.
  • "설문조사 로드 중"에서 멈춤: 지원 스크립트와 해당 폴더 경로, SSN의 실행 상태 및 작업 호스팅 폴링의 전체 쿼리 문자열을 확인하세요.
  • 투표는 포함되지 않습니다: 투표가 열려 있고 메시지가 선택한 투표 모드와 일치하며 테스트 사용자가 아직 투표하지 않았는지 확인합니다.
  • OBS에서는 다르게 보입니다. 브라우저 소스 크기, 파일 디자인을 재정의하는 이전 사용자 정의 CSS, 새로 고침이 필요한지 여부를 확인하세요.
  • 투표 후 로고가 사라집니다: 영구 예술 작품을 외부에 두기 #poll-options; 해당 요소는 업데이트 시 다시 작성됩니다.

편집된 사본은 SSN가 호스팅하는 설문조사와 별도로 유지됩니다. 디자인을 백업해 두고 최신 디자인과 비교해 보세요. poll.html 버전은 업스트림 수정이 필요할 때 사용됩니다. 처음부터 다른 오버레이를 구축하려면 다음을 참조하세요. 사용자 정의 오버레이 가이드.