قم بتخصيص الاستطلاع الرسومي الخاص بك

هل أقوم بتحرير رابط 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. انسخ رابط الاستطلاع الرسومي. في 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;
}

قم بتغيير قيم الألوان والأحجام لتناسب تصميمك. تستهدف هذه المحددات عناصر الاستقصاء الموجودة. حافظ على التحكم في عرض الشريط بواسطة رمز الاستطلاع، واحتفظ بـ .hidden السلوك حتى يتمكن Enable Poll من إظهار الرسم وإخفائه.

يؤثر OBS Custom 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.

بالنسبة لمسار OBS CSS، قم بتغيير التعليمات الأخيرة إلى: "إرجاع CSS فقط لـ OBS Custom 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 خيارات الاستطلاع لضبط السؤال ومطابقة الأصوات وضوابط الاقتراع.

عنوان الملف أعلاه هو مثال لنظام التشغيل Windows. على 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) لذا فإن التصميم المخصص يتعامل مع الحالات المغلقة والفارغة والمخفية.

• تراكب فارغ: حدد تمكين الاستطلاع وإعدادات الجلسة المنسوخة. لا يحتوي الاستطلاع الحر على صفوف إجابات حتى وصول الأصوات.
• الصفحة المحلية لا تفتح: اسحب الملف إلى متصفحك مرة أخرى وانسخ عنوانه الحالي. التحقق من اسم الملف ليس عن طريق الصدفة my-poll.html.txt.
• عالق في "جاري تحميل الاستطلاع": تحقق من البرامج النصية الداعمة ومسارات المجلدات الخاصة بها، وحالة تشغيل SSN، وسلسلة الاستعلام الكاملة من الاستطلاع المستضاف العامل.
• الأصوات لا تحتسب: تأكد من أن التصويت مفتوح، وأن الرسالة تتطابق مع وضع التصويت المحدد، ولم يقم المستخدم الاختباري بالتصويت بالفعل.
• يبدو مختلفًا في OBS: تحقق من أبعاد مصدر المتصفح، وأي CSS مخصص قديم يتجاوز تصميم الملف، وما إذا كانت هناك حاجة إلى التحديث.
• يختفي الشعار بعد التصويت: وضع الأعمال الفنية الدائمة بالخارج #poll-options; يتم إعادة بناء هذا العنصر على التحديثات.

يتم الاحتفاظ بنسختك المحررة بشكل منفصل عن الاستطلاع المستضاف على SSN. احتفظ بنسخة احتياطية من التصميم، وقارنه بالأحدث poll.html الإصدارات عندما تحتاج إلى إصلاحات المنبع. لإنشاء تراكب مختلف من البداية، راجع دليل التراكبات المخصصة.