Added overlay instructions

ownchatbot/templates/mgmt.html

@@ -37,7 +37,13 @@
                 <li>Be careful with this one. It does require some more advanced scripting/command line knowledge, and it can be dangerous. Make sure you test your specials thoroughly before letting viewers use them.</li>
               </ul>
             <li><u>Votes</u> are just that, votes. Your viewers can vote on them.</li>
+              <ul>
+                <li>See the "Overlays" section of the readme, for instructions on using the votes overlay in your stream.</li>
+              </ul>
             <li><u>Goals</u> are rewards that everyone in chat can contribute to. The streamer fulfills the reward when the goal is reached.</li>
+              <ul>
+                <li>See the "Overlays" section of the readme, for instructions on using the goals overlay in your stream.</li>
+              </ul>
             <li>Add rewards to categories to enable and disable groups of rewards.</li>
             <li>Rewards with no categories are inactive.</li>
         </ul>
@@ -486,6 +492,33 @@
         <form action="/mgmt/clearlist" method="get" style="display: inline;">
             <button class="button button2" type="submit" class="button">Clear List</button>
         </form>
+        <hr>
+        <h3>Stream Overlay</h3>
+        To place the to-do list overlay in your stream, create a browser source in your streaming software<br>using the following URL: {{ settings_info[10] }}/todo<br>
+        &emsp;Recommended width: 420<br>
+        &emsp;Recommended height: 500<br>
+        &emsp;In OBS, check "Refresh browser source when scene becomes active"
+        <br><br>
+        You can spruce up your list with fonts and colors by inserting custom CSS into the browser source.<br>
+        <h5>Example CSS:</h5>
+        &emsp;h4 {<br>
+        &emsp;&emsp;font-size: 32px;<br>
+        &emsp;&emsp;text-decoration: underline;<br>
+        &emsp;&emsp;text-align: center;<br>
+        &emsp;&emsp;margin-bottom: 0;<br>
+        &emsp;&emsp;padding-bottom: 0;<br>
+        &emsp;}<br><br>
+
+        &emsp;ul {<br>
+        &emsp;&emsp;margin-top: 0;<br>
+        &emsp;&emsp;padding-top: 0;<br>
+        &emsp;}<br><br>
+
+        &emsp;li {<br>
+        &emsp;&emsp;font-size: 30px;<br>
+        &emsp;}<br><br>
+        If you want to use a custom font, place the font file in your "instance/assets/" folder, and reference the following location in your CSS:<br>
+        &emsp;&emsp;/assets/yourfont.ttf
         <br><br>
     </div>
     
@@ -499,7 +532,7 @@
                     <th style="width: 20%;">Image</th>
                     <th></th>
                     <th style="width: 15%;"></th>
-                    <th style="width: 25%;">Browser Source</th>
+                    <th style="width: 45%;">URL</th>
                 </tr>
             </thead>
                 <tr>
@@ -519,7 +552,7 @@
                     <td><button id="nf_upload" class="button button2" type="submit">Upload</button>
                     </form>&nbsp
                         <a href="{{ url_for('web_panels.del_alert', alert_type='FOLLOWER_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
-                    <td>/alert/follower</td>
+                    <td>{{ settings_info[10] }}/alert/follower</td>
                 </tr>
                 <tr>
                     <form id="nms_upload" action="/mgmt/alertupload/MILESTONE_ALERT" method="post" enctype="multipart/form-data">
@@ -537,7 +570,7 @@
                     <td><input type="file" name="MILESTONE_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
                     <td><button id="nms_upload" class="button button2" type="submit">Upload</button></form>&nbsp
                         <a href="{{ url_for('web_panels.del_alert', alert_type='MILESTONE_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
-                    <td>/alert/milestone</td>
+                    <td>{{ settings_info[10] }}/alert/milestone</td>
                 </tr>
                 <tr>
                     <form id="ng_upload" action="/mgmt/alertupload/GOAL_ALERT" method="post" enctype="multipart/form-data">
@@ -555,10 +588,26 @@
                     <td><input type="file" name="GOAL_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
                     <td><button id="ng_upload" class="button button2" type="submit">Upload</button></form>&nbsp
                         <a href="{{ url_for('web_panels.del_alert', alert_type='GOAL_ALERT') }}"><button class="button button2" onclick="openTab(event, 'alerts')"><span style="color: red;">Clear</span></button></a></td>
-                    <td>/alert/goal</td>
+                    <td>{{ settings_info[10] }}/alert/goal</td>
                 </tr>
         </table>
+        <h3>Stream Overlays</h3>
+        To use these alerts, create a browser source in your streaming software, using the URLs specified above.<br>
+        &emsp;Recommended width: 200<br>
+        &emsp;Recommended height: 200<br>
+        &emsp;In OBS, check "Refresh browser source when scene becomes active"
+        <br><br>
+        Each alert will display the name of the viewer that triggered the alert. You can customize the position of the name, as well as fonts and colors by inserting custom CSS into the browser source.<br>
+        <h5>Example CSS:</h5>
+        &emsp;#nameBox {<br>
+        &emsp;&emsp;top: 50%; /* Vertical position */<br>
+        &emsp;&emsp;left: 50%; /* Horizontal position */<br>
+        &emsp;&emsp;font-size: 20px; /* Adjust as needed */<br>
+        &emsp;&emsp;font-weight: bold; /* Adjust as needed */<br>
+        &emsp;}<br><br>
+        If you want to use a custom font, place the font file in your "instance/assets/" folder, and reference the following location in your CSS:<br>
+        &emsp;&emsp;/assets/yourfont.ttf
         </body>
+        <br><br>
     </div>
-    <br><br>
 </html>