deadtom
/
OwnchatBot


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>OCB Management Panel</title>
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
    <script src="/static/mgmtpanel.js"></script>
    
    <div class="navbar">
        <div class="tab">
            <button tabindex="0" class="tablinks" onclick="window.open('{{ url_for('web_panels.mgmtqueue') }}', '_blank')">Rewards Queue Management</button>
            <button tabindex="1" class="tablinks" data-tab="managerewards" onclick="openTab(event, 'managerewards')">Rewards</button>
            <button tabindex="2" class="tablinks" data-tab="categories" onclick="openTab(event, 'categories')">Categories</button>
            <button tabindex="3" class="tablinks" data-tab="accounts" onclick="openTab(event, 'accounts')">Manage Accounts</button>
            <button tabindex="4" class="tablinks" data-tab="announcements" onclick="openTab(event, 'announcements')">Announcements</button>
            <button tabindex="5" class="tablinks" data-tab="todolist" onclick="openTab(event, 'todolist')">To-Do List</button>
            <button tabindex="6" class="tablinks" data-tab="alerts" onclick="openTab(event, 'alerts')">Alerts</button>
            <button tabindex="7" class="tablinks" data-tab="donations" onclick="openTab(event, 'donations')">Donations</button>
            <button tabindex="8" class="tablinks" data-tab="settings" onclick="openTab(event, 'settings')">Settings</button>
        </div>
        <img alt="Ownchat Bot logo, whimsical robot" src="/static/img/ownchatbotwide.png">
    </div>

    <div id='managerewards' class="tabcontent">
        <h2>Manage Rewards</h3>
        <body>
        <div>
        <h4>Reward Types:</h4>
        <ul>

            <li><u>Redeems</u> are standard stream point rewards. They get added to the queue for the streamer to fulfill.</li>
            <li><u>Specials</u> are redeems, but they run system commands and scripts. This enables you to integrate a lot of other fun things, such as letting your viewers control lighting, activate devices, trigger webhooks, etc. Specials do not go into the queue, because they happen automagically.</li>
              <ul>
                <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>

        </div>
            <table>
                <tr>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="{{ url_for('web_panels.add', reward_type='redeem') }}"><button tabindex="8" class="button button2" onclick="openTab(event, 'managerewards')">Create a Redeem</button></a><br>
                    </td>
                    <td>
                        <a href="{{ url_for('web_panels.add', reward_type='special') }}"><button tabindex="9" class="button button2" onclick="openTab(event, 'managerewards')">Create a Special</button></a><br>
                    </td>
                    <td>
                        <a href="{{ url_for('web_panels.add', reward_type='vote') }}"><button tabindex="10" class="button button2" onclick="openTab(event, 'managerewards')">Create a Vote</button></a><br>
                    </td>
                    <td>
                        <a href="{{ url_for('web_panels.add', reward_type='goal') }}"><button tabindex="11" class="button button2" onclick="openTab(event, 'managerewards')">Create a Goal</button></a><br>
                    </td>
                </tr>
            </table>
            <br>
            {% if rewards %}
            Rewards in <span style="color: orange !important;">orange</span> are inactive. To activate a reward, add it to an active category.
            <table>
                <thead>
                    <tr>
                        <th style="width:15%">Name</th>
                        <th>Price</th>
                        <th>Info</th>
                        <th>Cool down</th>
                        <th>Category</th>
                        <th style="width:15%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for reward, reward_info in rewards.items() %}
                    {% if reward in redeems %}
                    {% if reward in active_rewards %}
                    <tr>
                    {% else %}
                    <tr style="color: orange;">
                    {% endif %}
                        <td>{{ prefix }}{{ reward }}</td>
                        <td>{{ reward_info["price"] }}</td>
                        <td>{{ reward_info["info"] }}</td>
                        {% if reward_info["cooldown"] > 0 %}
                        {% set minutes_label = 'minute' if reward_info["cooldown"] == 1 else 'minutes' %}
                        <td>{{ reward_info["cooldown"] }} {{ minutes_label }}</td>
                        {% else %}
                        <td>None</td>
                        {% endif %}
                        <td>{{ reward_info["categories"] | join(', ') }}</td>
                        <td>
                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: yellow;">Edit</span></button></a>&nbsp
                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Delete</span></button></a></td>
                    {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <h3><u>Goals</u></h3>
            <table>
                <thead>
                    <tr>
                        <th style="width:15%">Name</th>
                        <th>Target</th>
                        <th>Info</th>
                        <th>Category</th>
                        <th style="width:15%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for reward, reward_info in rewards.items() %}
                    {% if reward_info["type"] == "goal" %}
                    {% if reward in active_rewards %}
                    <tr>
                    {% else %}
                    <tr style="color: orange;">
                    {% endif %}
                        <td>{{ prefix }}{{ reward }}</td>
                        <td>{{ reward_info["target"] }}</td>
                        <td>{{ reward_info["info"] }}</td>
                        <td>{{ reward_info["categories"] | join(', ') }}</td>
                        <td>
                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Edit</span></button></a>&nbsp
                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: yellow;">Delete</span></button></a>&nbsp
                            <a href="{{ url_for('web_panels.reset', reward_name=reward, reward_type=reward_info["type"]) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #295e11;">Reset</span></button></a>
                    {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <h3><u>Votes</u></h3>
            <table>
                <thead>
                    <tr>
                        <th style="width:15%">Name</th>
                        <th>Price</th>
                        <th>Info</th>
                        <th>Category</th>
                        <th style="width:15%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for reward, reward_info in rewards.items() %}
                    {% if reward_info["type"] == "vote" %}
                    {% if reward in active_rewards %}
                    <tr>
                    {% else %}
                    <tr style="color: orange;">
                    {% endif %}
                        <td>{{ prefix }}{{ reward }}</td>
                        <td>{{ reward_info["price"] }}</td>
                        <td>{{ reward_info["info"] }}</td>
                        <td>{{ reward_info["categories"] | join(', ') }}</td>
                        <td>
                            <a href="{{ url_for('web_panels.edit', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Edit</span></button></a>&nbsp
                            <a href="{{ url_for('web_panels.delete', reward_name=reward) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: orange;">Delete</span></button></a>&nbsp
                            <a href="{{ url_for('web_panels.reset', reward_name=reward, reward_type=reward_info["type"]) }}"><button class="button button2" onclick="openTab(event, 'managerewards')"><span style="color: #295e11;">Reset</span></button></a>
                    {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </body>
    </div>
    
    <div id='accounts' class="tabcontent">
        <body>
            <h3>Manage Viewer Accounts</h3>
            {% if users %}
            To merge an account with a temporary account: Copy the email address from the temporary account, click "edit" next to the account you want to merge, paste the email address into that account, click "save".<br><br>
            <table>
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Points balance</th>
                        <th>Email</th>
                        <th>Authed</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for user in users %}
                    <tr>
                        {% if not user[1] %}
                            <td style="color: orange;"> Temporary Account </td>
                        {% else %}
                            <td> {{ user[1] }} </td>
                        {% endif %}
                        {% set points_label = 'point' if user[2] == 1 else 'points' %}
                        
                        <td>{{ user[2] }} {{ points_label }}</td>
                        {% if user[4] %}
                            {% if not user[1] %}
                                <td style="color: orange;">{{ user[4] }}</td>
                            {% else %}
                                <td>{{ user[4] }}</td>
                            {% endif %}
                        {% else %}
                            <td>none</td>
                        {% endif %}
                        {% if user[3] %}
                            <td>Yes</td>
                        {% else %}
                            <td>No</td>
                        {% endif %}
                        <td> <a href="/mgmt/edit_account/{{ user[0] }}?name={{ user[1] }}&points={{ user[2] }}&email={{ user[4] }}"><button class="button button2" onclick="openTab(event, 'panel')">Edit</button></a> </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}
        </body>
    </div>

    <div id='categories' class="tabcontent">
        <body>
        <h3>Manage Categories</h3>
        <div>
            &nbsp;&nbsp;<a href="{{ url_for('web_panels.add', reward_type='category') }}"><button class="button button2" onclick="openTab(event, 'categories')">Create a new category</button></a><br>
            <table>
                <thead>
                    <tr>
                        <th style="width: 50%;"><h3>Active Categories</h3></th>
                        <th style="width: 50%;"><h3>Inactive Categories</h3></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            {% for cat in active_categories %}
                            &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/deactivate/{{ cat }}"><span style="color: orange;">Deactivate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/active"><span style="color: #295e11;">Delete</span></a><br>
                            {% endfor %}
                        </td>
                        <td>
                            {% for cat in inactive_categories %}
                            &nbsp;&nbsp;{{ cat }} - <a href="/mgmt/activate/{{ cat }}"><span style="color: orange;">Activate</span></a>&nbsp;<a href="/mgmt/delcat/{{ cat }}/inactive"><span style="color: #295e11;">Delete</span></a><br>
                            {% endfor %}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </body>
    </div>

    <div id='announcements' class="tabcontent">
        <body>
            <form id="announcements form" method="POST" action="/mgmt/announcements">
                <table>
                <h3>Manage Announcements</h3>
                <table>
                    <thead>
                        <tr style="border-bottom: none;">
                            <th style="width: 20%;"></th>
                            <th style="width: 50%;"></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tr>
                        <td> <label for="announce_enable">Enable:</label> </td>
                        {% if settings_info[6] %}
                        <td> <input id="announce_enable" type="checkbox" name="announce_enable" value="{{ settings_info[6] }}" checked> </td>
                        {% else %}
                        <td> <input id="announce_enable" type="checkbox" name="announce_enable" value="{{ settings_info[6] }}"> </td>
                        {% endif %}
                        <td>Enable periodic announcements</td>
                    </tr>
                    <tr>
                        <td> <label for="announce_interval">Interval:</label> </td>
                        <td> <input id="announce_interval" type="number" name="announce_interval" value="{{ settings_info[7] }}" size="2" required> minutes</td>
                        <td>How long between each announcement?</td>
                    </tr>
                    <tr>
                        <td> <label for="announcements">Announcements:</label> </td>
                        <td>
                            <textarea id="announcements" name="announcements" rows="5" cols="50">{{ announcements | join('\n') }}</textarea>
                        </td>
                        <td>Enter your announcements, one per line. May contain html <a href=https://www.w3schools.com/tags/tag_img.asp>IMG tags</a> to display images.</td>
                    </tr>
                </table>
                <br><button id="announcements form" class="button button2" type="submit">Save Changes</button><br>
            </form>
            <br><br>
        </body>
    </div>

    <div id='settings' class="tabcontent">
        <body style="text-align: left;">
            <form id="settings form" method="POST" action="/mgmt/settings">
                <table>
                <h3>OwnchatBot Settings</h3>
                    <thead>
                        <tr style="border-bottom: none;">
                            <th style="width: 20%;"></th>
                            <th></th>
                            <th style="width: 50%;"></th>
                        </tr>
                    </thead>
                    <tr>
                        <td> <label for="points_interval">Points Interval:</label> </td>
                        <td> <input id="points_interval" type="number" name="points_interval" value="{{ settings_info[1] }}" size="5" required> minutes</td>
                        <td>How often do you want to award your viewers points?</td>
                    </tr>
                    <tr>
                        <td> <label for="points_award">Points Award:</label> </td>
                        <td> <input id="points_award" type="number" name="points_award" value="{{ settings_info[2] }}" size="5" required> points</td>
                        <td>How many points do you want to award them?</td>
                    </tr>
                    <tr>
                        <td> <label for="prefix">Chat Command Prefix:</label> </td>
                        <td> <input id="prefix" type="text" name="prefix" maxlength="1" size="1" value="{{ settings_info[3] }}" required> </td>
                        <td>Character that preceeds chat commands, so OwnchatBot knows what to look for.<br>Example: "{{ settings_info[3] }}points"</td>
                    </tr>
                    <tr>
                        <td> <label for="ocb_url">External URL:</label> </td>
                        <td> <input id="ocb_url" type="text" name="ocb_url" size="40" value="{{ settings_info[8] }}" required> </td>
                        <td>What is the external URL of your OwnchatBot?</td>
                    </tr>
                        
                </table>
                
                <h3>Owncast Integration</h3>
                <table>
                    <thead>
                        <tr style="border-bottom: none;">
                            <th style="width: 20%;"></th>
                            <th></th>
                            <th style="width: 50%;"></th>
                        </tr>
                    </thead>
                    <tr>
                        <td> <label for="access_id">Access Token Name:</label> </td>
                        <td style="padding: 5px;"> <input id="access_id" type="text" name="access_id" value="{{ settings_info[0] }}" size="40"> </td>
                        <td>Create in Owncast Admin panel. Integrations -> Access Tokens (check all three boxes)</td>
                    </tr>
                    <tr>
                        <td> <label for="access_token">Access Token:</label> </td>
                        <td style="padding: 5px;"> <input id="access_tokens" type="password" name="access_token" value="{{ settings_info[4] }}" size="40"> </td>
                        <td>The token you created above.</td>
                    </tr>
                    <tr>
                        <td> <label for="owncast_url">Your Owncast URL:</label> </td>
                        <td> <input type="text" id="owncast_url" name="owncast_url" value="{{ settings_info[5] }}" size="40"> </td>
                        <td>The external URL of your Owncast instance, with "http://" or "https://".</td>
                    </tr>
                </table>
                
                <br><button id="settings form" class="button button2" type="submit">Save Changes</button><br>
            </form>
            <br><br>
        </body>
    </div>

    <div id="donations" class="tabcontent">
        <body style="text-align: left;">
        <h2>Donations</h2>
        OwnchatBot can integrate with Ko-fi and GiveButter, awarding viewers points for donations and monthly subscriptions.
            <form id='kofi-settings_form' method="POST" action="/mgmt/ksettings">
                <table>
                <h3><img style="height: 25px; width: auto; padding-right: 8px; !important" alt="Coffee Cup Logo" src="/static/img/kofi_symbol.png"> <u>Ko-fi</u></h3>
                
                <h4> Donations </h4>
                    <thead>
                        <tr style="border-bottom: none;">
                            <th style="width: 20%;"></th>
                            <th></th>
                            <th style="width: 50%;"></th>
                        </tr>
                    </thead>
                    <tr>
                        <td> <label for="k_integration">Enable:</label> </td>
                        {% if kofi_settings['integration'] %}
                        <td> <input id="k_integration" type="checkbox" name="k_integration" value="{{ kofi_settings['integration'] }}" checked> </td>
                        {% else %}
                        <td> <input id="k_integration" type="checkbox" name="k_integration" value="{{ kofi_settings['integration'] }}"> </td>
                        {% endif %}
                        <td>Enable Ko-fi integration.</td>
                    </tr>
                    <tr>
                        <td> <label for="k_token">Verification Token:</label> </td>
                        <td style="padding: 5px;"> <input id="k_token" type="password" name="k_token" value="{{ kofi_settings['token'] }}" size="40"> </td>
                        <td>Get from Ko-fi -> More -> API -> Webhooks -> Advanced -> Verification Token.</td>
                    </tr>
                    <tr>
                        <td> <label for="k_enable_donations">Enable points for donations:</label> </td>
                        {% if kofi_settings['donations'] %}
                        <td> <input id="k_enable_donations" type="checkbox" name="k_enable_donations" value="{{ kofi_settings['donations'] }}" checked> </td>
                        {% else %}
                        <td> <input id="k_enable_donations" type="checkbox" name="k_enable_donations" value="{{ kofi_settings['donations'] }}"> </td>
                        {% endif %}
                        <td>Enable awarding points for donations</td>
                    </tr>
                    <tr>
                        <td> <label for="k_donation_points">Points per dollar:</label> </td>
                        <td> <input id="k_donation_points" type="number" name="k_donation_points" value="{{ kofi_settings['donation_points'] }}" size="5" required> points</td>
                        <td>How many points should viewers recieve, for every dollar they donate?</td>
                    </tr>
                    <tr>
                        <td> <label for="kofi_url">Ko-fi URL:</label> </td>
                        <td style="padding: 5px;"> <input id="kofi_url" type="text" name="kofi_url" value="{{ kofi_settings['kofi_url'] }}" size="30"> </td>
                        <td>What is your Ko-fi URL?</td>
                    </tr>
                    <tr>
                        <table>
                        <h4> Subscriptions </h4>
                            <tbody>
                                <tr>
                                    <td> <label for="k_enable_subs">Enable points for subscriptions:</label> </td>
                                    {% if kofi_settings['subs'] %}
                                    <td> <input id="k_enable_subs" type="checkbox" name="k_enable_subs" value="{{ kofi_settings['subs'] }}" checked> </td>
                                    {% else %}
                                    <td> <input id="k_enable_subs" type="checkbox" name="k_enable_subs" value="{{ kofi_settings['subs'] }}"> </td>
                                    {% endif %}
                                    <td>Enable awarding points for monthly subscriptions</td>
                                </tr>
                                <tr>
                                    <td> <label for="k_sub_points">Points per month:</label> </td>
                                    <td> <input id="k_sub_points" type="number" name="k_sub_points" value="{{ kofi_settings['sub_points'] }}" size="6" required> points</td>
                                    <td>How many points should subscribers recieve every month?</td>
                                </tr>
                                        </tbody>
                            </table>
                        </tr>
                </table>
                <br><button id="kofi-settings_form" class="button button2" type="submit">Save</button><br>
            </form>
            <br><br>
            <form id='gb-settings_form' method="POST" action="/mgmt/gbsettings">
                <table>
                <h3><img style="height: 25px; width: auto; padding-right: 8px; !important" alt="Give Butter Logo" src="/static/img/givebutter.png"> <u>GiveButter</u></h3>
                
                <h4> Donations </h4>
                    <thead>
                        <tr style="border-bottom: none;">
                            <th style="width: 20%;"></th>
                            <th></th>
                            <th style="width: 50%;"></th>
                        </tr>
                    </thead>
                    <tr>
                        <td> <label for="gb_integration">Enable:</label> </td>
                        {% if gb_settings['integration'] %}
                        <td> <input id="gb_integration" type="checkbox" name="gb_integration" value="{{ gb_settings['integration'] }}" checked> </td>
                        <td>Enable GiveButter integration.</td>
                        {% else %}
                        <td> <input id="gb_integration" type="checkbox" name="gb_integration" value="{{ gb_settings['integration'] }}"> </td>
                        <td>Enable GiveButter integration.</td>
                        {% endif %}
                    </tr>
                    <tr>
                        <td> <label for="gb_secret">Signing Secret:</label> </td>
                        <td style="padding: 5px;"> <input id="gb_secret" type="password" name="gb_secret" value="{{ gb_settings['secret'] }}" size="40"> </td>
                        <td>Get this from your GiveButter dashboard. Click on the eye icon (View) next to the webhook you set up for OwnchatBot.</td>
                    </tr>
                    <tr>
                        <td> <label for="gb_enable_donations">Enable points for donations:</label> </td>
                        {% if gb_settings['donations'] %}
                        <td> <input id="gb_enable_donations" type="checkbox" name="gb_enable_donations" value="{{ gb_settings['donations'] }}" checked> </td>
                        {% else %}
                        <td> <input id="gb_enable_donations" type="checkbox" name="gb_enable_donations" value="{{ gb_settings['donations'] }}"> </td>
                        {% endif %}
                        <td>Enable awarding points for donations</td>
                    </tr>
                    <tr>
                        <td> <label for="gb_donation_points">Points per dollar:</label> </td>
                        <td> <input id="gb_donation_points" type="number" name="gb_donation_points" value="{{ gb_settings['donation_points'] }}" size="5" required> points</td>
                        <td>How many points should viewers recieve, for every dollar they donate?</td>
                    </tr>
                    <tr>
                        <td> <label for="gb_url">GiveButter URL:</label> </td>
                        <td style="padding: 5px;"> <input id="gb_url" type="text" name="gb_url" value="{{ gb_settings['gb_url'] }}" size="30"> </td>
                        <td>What is your GiveButter URL?</td>
                    </tr>
                </table>
                <br><button id="gb-settings_form" class="button button2" type="submit">Save</button><br>
            </form>
            <br><br>
        </body>
    </div>

    <div id='todolist' class="tabcontent">
        <script>
            function focusInput() {  // Function to focus on the input field
                document.getElementById('itemInput').focus();
            }
        </script>
        <body onload="focusInput()">
        <h1>To-Do List</h1>
        <form id="todo-item-form" method="POST" onsubmit="focusInput()" action="/mgmt/addtodoitem">
            <input type="text" id="itemInput" name="item" aria-label="Add a new item" placeholder="Add a new item">
            <button id="todo-item-form" class="button button2" type="submit">Add</button>
        </form>
        <ul>
            {% if items %}
                {% for item in items %}
                    {% if item.crossed == 'no' %}
                        <li style="text-decoration:none;">
                            {{ item.name }}
                            <a href="{{ url_for('web_panels.cross', item_id=loop.index0) }}">[Cross Off]</a>&nbsp;<a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}"><span style="color: yellow;">[Remove]</span></a>
                        </li>
                    {% else %}
                        <li> <span style="text-decoration:line-through;">
                            {{ item.name }}</span>
                            <a href="{{ url_for('web_panels.uncross', item_id=loop.index0) }}">[Un-Cross]</a>&nbsp;<a href="{{ url_for('web_panels.rem_todo_item', item_id=loop.index0) }}"><span style="color: yellow;">[Remove]</span></a>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </ul>
        <form id="clear_list_form" action="/mgmt/clearlist" method="get" style="display: inline;">
            <button id="clear_list_form" 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>
    
    <div id='alerts' class="tabcontent">
        <body>
        <h2>Customize Your Alerts</h2>
        <table>
            <thead>
                <tr style="border-bottom: none;">
                    <th style="width: 20%;">Type</th>
                    <th style="width: 20%;">Image</th>
                    <th></th>
                    <th style="width: 15%;"></th>
                    <th style="width: 45%;">URL</th>
                </tr>
            </thead>
                <tr>
                    <form id="new_follow_image_upload" action="/mgmt/alertupload/FOLLOWER_ALERT" method="post" enctype="multipart/form-data">
                    <td>New Follower:</td>
                    {% set follower_alert = alerts_dict["FOLLOWER_ALERT"] %}
                    {% if follower_alert %}
                        {% if "webm" in follower_alert %}
                            <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}" type="video/webm"></video></td>
                        {% else %}
                            <td><img alt="User Configurable Image" src="{{ url_for('web_panels.assets', asset_name=follower_alert) }}"></td>
                        {% endif %}
                    {% else %}
                        <td>Empty</td>
                    {% endif %}
                    <td><input type="file" name="FOLLOWER_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
                    <td><button id="new_follow_image_upload" class="button button2" type="submit">Upload</button>
                    </form>&nbsp
                        <a href="{{ url_for('web_panels.del_alert', alert_type='FOLLOWER_ALERT') }}"><button id="new_follow_image_upload" class="button button2" onclick="openTab(event, 'alerts')"><span style="color: yellow;">Clear</span></button></a></td>
                    <td>{{ settings_info[10] }}/alert/follower</td>
                </tr>
                <tr>
                    <form id="new_milestone_image_upload" action="/mgmt/alertupload/MILESTONE_ALERT" method="post" enctype="multipart/form-data">
                    <td>Milestone Reached:</td>
                    {% set milestone_alert = alerts_dict["MILESTONE_ALERT"] %}
                    {% if milestone_alert %}
                        {% if "webm" in milestone_alert %}
                            <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}" type="video/webm"></video></td>
                        {% else %}
                            <td><img alt="User Configurable Image" src="{{ url_for('web_panels.assets', asset_name=milestone_alert) }}"></td>
                        {% endif %}
                    {% else %}
                        <td>Empty</td>
                    {% endif %}
                    <td><input type="file" name="MILESTONE_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
                    <td><button id="new_milestone_image_upload" class="button button2" type="submit">Upload</button></form>&nbsp
                        <a href="{{ url_for('web_panels.del_alert', alert_type='MILESTONE_ALERT') }}"><button id="new_milestone_image_upload" class="button button2" onclick="openTab(event, 'alerts')"><span style="color: yellow;">Clear</span></button></a></td>
                    <td>{{ settings_info[10] }}/alert/milestone</td>
                </tr>
                <tr>
                    <form id="new_goal_image_upload" action="/mgmt/alertupload/GOAL_ALERT" method="post" enctype="multipart/form-data">
                    <td>Goal Reached:</td>
                    {% set goal_alert = alerts_dict["GOAL_ALERT"] %}
                    {% if goal_alert %}
                        {% if "webm" in goal_alert %}
                            <td><video height="100" autoplay loop><source src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}" type="video/webm"></video></td>
                        {% else %}
                            <td><img alt="User Configurable Image" src="{{ url_for('web_panels.assets', asset_name=goal_alert) }}"></td>
                        {% endif %}
                    {% else %}
                        <td>Empty</td>
                    {% endif %}
                    <td><input type="file" name="GOAL_ALERT" accept=".gif, .jpg, .jpeg, .png, .webm" required></td>
                    <td><button id="new_goal_image_upload" class="button button2" type="submit">Upload</button></form>&nbsp
                        <a href="{{ url_for('web_panels.del_alert', alert_type='GOAL_ALERT') }}"><button id="new_goal_image_upload" class="button button2" onclick="openTab(event, 'alerts')"><span style="color: yellow;">Clear</span></button></a></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>
</html>