c0de/fintic-tracker
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
15d63868f8
fintic-tracker/templates/index.html
Justin 15d63868f8
added br tag
2023-07-12 15:28:32 +08:00

8711 lines
266 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Fintic - Web Control Panel</title>
<link rel="icon" type="image/png" href="/static/images/favicon.png">
<!-- Bootstrap 5 CDN Links -->
<script
src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"
></script>
<link
href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}"
rel="stylesheet"
/>
<!-- Fontawesome - for icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css"
integrity="sha512-kJ30H6g4NGhWopgdseRb8wTsyllFUYIx3hiUwmGAkgA9B/JbzUBDQVr2VVlWGde6sdBVOG7oU8AL35ORDuMm8g=="
crossorigin="anonymous"
/>
<!-- CSS Stylesheet linking -->
<!-- <link href="{{ url_for('static', filename='style.css') }}" type="text/css" rel="stylesheet" /> ALWAYS CHANGE VERSIONING WHENEVER CHANGES ARE MADE TO AVOID BAD CACHING -->
<link rel="stylesheet" type="text/css" href="../static/style.css?ver=1.3.7"/>
</head>
<body>
<div id="yooo" style="background-color:black; position:fixed; height:100%; width:100%; z-index:10; display:none;">
<p style="color:white; font-size:40px; text-align: center; margin-top: 20%;" class="asdasd">Ticker is shutting down / rebooting / resetting. Refresh web page when ticker is booted up again.</p>
</div>
<div class="container">
<!-- Top logo bar -->
<!-- Top logo bar -->
<nav class="navbar navbar-light justify-content-end" style="border-bottom:1px solid white">
<div class="container">
<a class="navbar-brand" href="#">
<img src="{{ url_for('static', filename='images/logo_white.png') }}" class="logo" alt="logo" />
</a>
<div class="hostname-text">
<p>
Hostname: <span id="host-name">{{ general_settings.hostname }}</span>.local:1024<br>
Scheduled Shutdown: <span id="host-name">{{ scheduler_settings.shutdown.hour }}:{{scheduler_settings.shutdown.minute}} {{scheduler_settings.timezone}}</span>
<span id="host-name">Enabled:{{scheduler_settings.shutdown.enabled}}</span><br>
Scheduled Reboot: <span id="host-name">{{ scheduler_settings.reboot.hour }}:{{scheduler_settings.reboot.minute}} {{scheduler_settings.timezone}}</span>
<span id="host-name">Enabled:{{scheduler_settings.reboot.enabled}}</span><br>
Scheduled Brightness: {% if scheduler_settings.brightness1.enabled or scheduler_settings.brightness2.enabled
or scheduler_settings.brightness3.enabled or scheduler_settings.brightness4.enabled %}<span id="host-name">Enabled</span>
{% else %}<span id="host-name">Disabled</span>{% endif %}
</p>
</div>
<div id="outer-div" class="main-div main-div3">
<button id="update-btn" class="btn update-btn" onclick="showDiv()">
{% if system_info.update_available %}
Update available!
{%else%}
Up to date
{%endif%}
</button>
</div>
</div>
<p class="text-white" id="version-text">Version 1.3.7</p>
<p class="text-white" id="version-text"><a href="https://docs.google.com/document/d/1TzvukZv_0Pd3TUM6Xe2wEkymn9uIT2qXUBFnMCQwp5g/edit?usp=sharing" target="_blank" id="footerlinks">Changelog</a></p>
</nav>
<!-- End logo bar -->
<!-- General Ticker Heading -->
<div class="row">
<div class="col-lg-11 col-md-11 col-sm-11" style="padding-top:2%">
<h3 class="text-white" id="general">
General Ticker Settings
</h3>
</div>
</div>
<!-- End General Ticker Heading -->
<!-- Button List -->
<div class="row" style="justify-content:center">
<div class="col-lg-2 col-md-2 col-sm-2">
<a id="start-btn" class="btn btn-success">Start Display</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<a id="stop-btn" class="btn btn-info">Stop Display</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<a id="restart-btn" class="btn btn-dark">Restart Display</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<a id="screensaver-btn" class="btn btn-warning">Screen Saver</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<a id="shutdown-btn" class="btn btn-danger">Shut Down</a>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<a id="reset-btn" class="btn btn-danger">Reset User Settings</a>
</div>
</div>
<!-- End Button List -->
<!-- Updating message -->
<div id="update-message" style="display:none;width:100%;height:100%;"><p id="update-p">Updating, please do not shutdown the ticker or disconnect from Wi-Fi. Refresh the web panel once the ticker is rebooted!</p></div>
<div id="wifi-message" style="display:none"><p id="wifi-p">Joining Wi-Fi, please restart the ticker.</p></div>
<!-- Ticker Form -->
<!-- First Row -->
<div class="ticker-form" style="padding-top:3%; padding-bottom:2%;border-bottom:1px solid white">
<div class="row g-3 align-items-center" >
<div class="col-lg-6 col-md-6 col-sm-12 d-block">
<div class="row g-3 align-items-center">
<!-- Brightness Input -->
<div class="col-auto">
<label for="brightness-inputZ" class="col-form-label">Brightness (1 - 10):</label>
</div><br /><br />
<div class="col-auto">
<input
type="text"
id="brightness-input"
class="form-control brightness-text"
aria-describedby="TextHelpInline"
value={{ general_settings.brightness }}
/>
</div>
<div class="col-auto">
<button class="btn set-btn" id="brightness-btn">Set</button>
</div>
</div>
</div>
<!-- End Brightness Input -->
<div class="col-lg-6 col-md-6 col-sm-12 d-block">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputAnimationZ" class="col-form-label">Screensaver animation:
</label>
</div><br/><br/>
<div class="col-auto-screensaver">
<select id="inputAnimation" class="form-select">
<option>Pulsating Colors</option>
<option>Rotating Square</option>
<option>Pulsating brightness</option>
<option>Grayscale Block</option>
<option>Abelian Sandpile Model</option>
<option>Conway's Game of Life</option>
<option>Evolution of Color</option>
<option>Volume Bars</option>
<option>Sleep</option>
</select>
</div>
<div class="col-auto" id="input-animation-btn">
<button class="btn set-btn">Set</button>
</div>
</div>
</div>
</div>
<!-- End First Row -->
<!-- Second Row -->
<div class="row g-3 align-items-center" style="padding-top:3%">
<div class="col-lg-6 col-md-6 col-sm-12 d-block">
<div class="row g-3 align-items-center">
<!-- Host Name Input -->
<div class="col-auto">
<label for="host-name-inputZ" class="col-form-label">Change host name:</label>
</div><br/><br/>
<div class="col-auto">
<input
type="text"
id="host-name-input"
class="form-control"
aria-describedby="TextHelpInline"
value={{ general_settings.hostname }}
/>
</div>
<div class="col-auto">
<button class="btn set-btn" id="host-name-btn">Set</button>
</div>
</div>
</div>
<!-- End Brightness Input -->
<div class="col-lg-6 col-md-6 col-sm-12 d-block">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputDisplayFormatZ" class="col-form-label">Ticker Display Format:
</label>
</div><br/><br/>
<div class="col-auto-displayformat">
<select id="inputDisplayFormat" class="form-select">
<option {%if feature_settings2 == 'Standard' %} selected {% endif %}>Standard Scrolling</option>
<option {%if feature_settings2 == 'Professional' %} selected {% endif %}>Professional Two Rows</option>
</select>
</div>
<div class="col-auto" id="input-animation-btn">
<button class="btn set-btn" id="dispformat-btn">Set</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Second Row -->
<!-- End Ticker Form -->
<!-- Features to Display Heading-->
<div class="row">
<div class="col-lg-11 col-md-11 col-sm-11" style="padding-top:2%; width: 50%;">
<h3 class="text-white">Features to Display</h3>
<p>
Selected Format:
<span class="font-6" id="selected-display-text"></span>
</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-2" style="width:50%;margin-top: 3%;padding-left:20%;">
<a id="scheduler-btn" class="btn btn-scheduler" onclick="showScheduler()">Scheduler Settings</a>
</div>
</div><br>
<div id="scheduler-div" style="display:none">
<div id="scheduler-top">
<h3 id="scheduler-p">Scheduler Settings</h3>
<button id="scheduler-close-btn" onclick="closeScheduler()">Close</button>
<div id="inside-scheduler-div">
<p id="shutdowns-p">Shutdowns (Daily):</p>
<div class="col-auto">
Hour
<select class="form-select hour-select" id="shutdown-hour-select">
<option {%if scheduler_settings.shutdown.hour == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.shutdown.hour == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.shutdown.hour == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.shutdown.hour == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.shutdown.hour == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.shutdown.hour == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.shutdown.hour == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.shutdown.hour == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.shutdown.hour == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.shutdown.hour == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.shutdown.hour == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.shutdown.hour == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.shutdown.hour == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.shutdown.hour == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.shutdown.hour == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.shutdown.hour == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.shutdown.hour == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.shutdown.hour == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.shutdown.hour == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.shutdown.hour == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.shutdown.hour == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.shutdown.hour == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.shutdown.hour == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.shutdown.hour == '23' %} selected {% endif %}>23</option>
</select>
Minute
<select class="form-select minute-select" id="shutdown-minute-select">
<option {%if scheduler_settings.shutdown.minute == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.shutdown.minute == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.shutdown.minute == '02'%} selected {% endif %}>02</option>
<option {%if scheduler_settings.shutdown.minute == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.shutdown.minute == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.shutdown.minute == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.shutdown.minute == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.shutdown.minute == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.shutdown.minute == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.shutdown.minute == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.shutdown.minute == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.shutdown.minute == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.shutdown.minute == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.shutdown.minute == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.shutdown.minute == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.shutdown.minute == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.shutdown.minute == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.shutdown.minute == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.shutdown.minute == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.shutdown.minute == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.shutdown.minute == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.shutdown.minute == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.shutdown.minute == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.shutdown.minute == '23' %} selected {% endif %}>23</option>
<option {%if scheduler_settings.shutdown.minute == '24' %} selected {% endif %}>24</option>
<option {%if scheduler_settings.shutdown.minute == '25' %} selected {% endif %}>25</option>
<option {%if scheduler_settings.shutdown.minute == '26' %} selected {% endif %}>26</option>
<option {%if scheduler_settings.shutdown.minute == '27' %} selected {% endif %}>27</option>
<option {%if scheduler_settings.shutdown.minute == '28' %} selected {% endif %}>28</option>
<option {%if scheduler_settings.shutdown.minute == '29' %} selected {% endif %}>29</option>
<option {%if scheduler_settings.shutdown.minute == '30' %} selected {% endif %}>30</option>
<option {%if scheduler_settings.shutdown.minute == '31' %} selected {% endif %}>31</option>
<option {%if scheduler_settings.shutdown.minute == '32' %} selected {% endif %}>32</option>
<option {%if scheduler_settings.shutdown.minute == '33' %} selected {% endif %}>33</option>
<option {%if scheduler_settings.shutdown.minute == '34' %} selected {% endif %}>34</option>
<option {%if scheduler_settings.shutdown.minute == '35' %} selected {% endif %}>35</option>
<option {%if scheduler_settings.shutdown.minute == '36' %} selected {% endif %}>36</option>
<option {%if scheduler_settings.shutdown.minute == '37' %} selected {% endif %}>37</option>
<option {%if scheduler_settings.shutdown.minute == '38' %} selected {% endif %}>38</option>
<option {%if scheduler_settings.shutdown.minute == '39' %} selected {% endif %}>39</option>
<option {%if scheduler_settings.shutdown.minute == '40' %} selected {% endif %}>40</option>
<option {%if scheduler_settings.shutdown.minute == '41' %} selected {% endif %}>41</option>
<option {%if scheduler_settings.shutdown.minute == '42' %} selected {% endif %}>42</option>
<option {%if scheduler_settings.shutdown.minute == '43' %} selected {% endif %}>43</option>
<option {%if scheduler_settings.shutdown.minute == '44' %} selected {% endif %}>44</option>
<option {%if scheduler_settings.shutdown.minute == '45' %} selected {% endif %}>45</option>
<option {%if scheduler_settings.shutdown.minute == '46' %} selected {% endif %}>46</option>
<option {%if scheduler_settings.shutdown.minute == '47' %} selected {% endif %}>47</option>
<option {%if scheduler_settings.shutdown.minute == '48' %} selected {% endif %}>48</option>
<option {%if scheduler_settings.shutdown.minute == '49' %} selected {% endif %}>49</option>
<option {%if scheduler_settings.shutdown.minute == '50' %} selected {% endif %}>50</option>
<option {%if scheduler_settings.shutdown.minute == '51' %} selected {% endif %}>51</option>
<option {%if scheduler_settings.shutdown.minute == '52' %} selected {% endif %}>52</option>
<option {%if scheduler_settings.shutdown.minute == '53' %} selected {% endif %}>53</option>
<option {%if scheduler_settings.shutdown.minute == '54' %} selected {% endif %}>54</option>
<option {%if scheduler_settings.shutdown.minute == '55' %} selected {% endif %}>55</option>
<option {%if scheduler_settings.shutdown.minute == '56' %} selected {% endif %}>56</option>
<option {%if scheduler_settings.shutdown.minute == '57' %} selected {% endif %}>57</option>
<option {%if scheduler_settings.shutdown.minute == '58' %} selected {% endif %}>58</option>
<option {%if scheduler_settings.shutdown.minute == '59' %} selected {% endif %}>59</option>
</select>
<label for="inputTransitionZ" class="col-form-label">Enable</label>
<input class="scheduler-hour-select" type="checkbox" value="" id="shutdown-enabled"
{% if scheduler_settings.shutdown.enabled %} checked {%endif%}/>
</div>
<p id="reboots-p">Reboots (Daily):</p>
<div class="col-auto">
Hour
<select class="form-select hour-select" id="reboot-hour-select">
<option {%if scheduler_settings.reboot.hour == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.reboot.hour == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.reboot.hour == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.reboot.hour == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.reboot.hour == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.reboot.hour == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.reboot.hour == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.reboot.hour == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.reboot.hour == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.reboot.hour == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.reboot.hour == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.reboot.hour == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.reboot.hour == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.reboot.hour == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.reboot.hour == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.reboot.hour == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.reboot.hour == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.reboot.hour == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.reboot.hour == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.reboot.hour == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.reboot.hour == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.reboot.hour == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.reboot.hour == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.reboot.hour == '23' %} selected {% endif %}>23</option>
</select>
Minute
<select class="form-select minute-select" id="reboot-minute-select">
<option {%if scheduler_settings.reboot.minute == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.reboot.minute == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.reboot.minute == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.reboot.minute == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.reboot.minute == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.reboot.minute == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.reboot.minute == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.reboot.minute == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.reboot.minute == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.reboot.minute == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.reboot.minute == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.reboot.minute == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.reboot.minute == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.reboot.minute == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.reboot.minute == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.reboot.minute == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.reboot.minute == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.reboot.minute == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.reboot.minute == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.reboot.minute == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.reboot.minute == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.reboot.minute == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.reboot.minute == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.reboot.minute == '23' %} selected {% endif %}>23</option>
<option {%if scheduler_settings.reboot.minute == '24' %} selected {% endif %}>24</option>
<option {%if scheduler_settings.reboot.minute == '25' %} selected {% endif %}>25</option>
<option {%if scheduler_settings.reboot.minute == '26' %} selected {% endif %}>26</option>
<option {%if scheduler_settings.reboot.minute == '27' %} selected {% endif %}>27</option>
<option {%if scheduler_settings.reboot.minute == '28' %} selected {% endif %}>28</option>
<option {%if scheduler_settings.reboot.minute == '29' %} selected {% endif %}>29</option>
<option {%if scheduler_settings.reboot.minute == '30' %} selected {% endif %}>30</option>
<option {%if scheduler_settings.reboot.minute == '31' %} selected {% endif %}>31</option>
<option {%if scheduler_settings.reboot.minute == '32' %} selected {% endif %}>32</option>
<option {%if scheduler_settings.reboot.minute == '33' %} selected {% endif %}>33</option>
<option {%if scheduler_settings.reboot.minute == '34' %} selected {% endif %}>34</option>
<option {%if scheduler_settings.reboot.minute == '35' %} selected {% endif %}>35</option>
<option {%if scheduler_settings.reboot.minute == '36' %} selected {% endif %}>36</option>
<option {%if scheduler_settings.reboot.minute == '37' %} selected {% endif %}>37</option>
<option {%if scheduler_settings.reboot.minute == '38' %} selected {% endif %}>38</option>
<option {%if scheduler_settings.reboot.minute == '39' %} selected {% endif %}>39</option>
<option {%if scheduler_settings.reboot.minute == '40' %} selected {% endif %}>40</option>
<option {%if scheduler_settings.reboot.minute == '41' %} selected {% endif %}>41</option>
<option {%if scheduler_settings.reboot.minute == '42' %} selected {% endif %}>42</option>
<option {%if scheduler_settings.reboot.minute == '43' %} selected {% endif %}>43</option>
<option {%if scheduler_settings.reboot.minute == '44' %} selected {% endif %}>44</option>
<option {%if scheduler_settings.reboot.minute == '45' %} selected {% endif %}>45</option>
<option {%if scheduler_settings.reboot.minute == '46' %} selected {% endif %}>46</option>
<option {%if scheduler_settings.reboot.minute == '47' %} selected {% endif %}>47</option>
<option {%if scheduler_settings.reboot.minute == '48' %} selected {% endif %}>48</option>
<option {%if scheduler_settings.reboot.minute == '49' %} selected {% endif %}>49</option>
<option {%if scheduler_settings.reboot.minute == '50' %} selected {% endif %}>50</option>
<option {%if scheduler_settings.reboot.minute == '51' %} selected {% endif %}>51</option>
<option {%if scheduler_settings.reboot.minute == '52' %} selected {% endif %}>52</option>
<option {%if scheduler_settings.reboot.minute == '53' %} selected {% endif %}>53</option>
<option {%if scheduler_settings.reboot.minute == '54' %} selected {% endif %}>54</option>
<option {%if scheduler_settings.reboot.minute == '55' %} selected {% endif %}>55</option>
<option {%if scheduler_settings.reboot.minute == '56' %} selected {% endif %}>56</option>
<option {%if scheduler_settings.reboot.minute == '57' %} selected {% endif %}>57</option>
<option {%if scheduler_settings.reboot.minute == '58' %} selected {% endif %}>58</option>
<option {%if scheduler_settings.reboot.minute == '59' %} selected {% endif %}>59</option>
</select>
<label for="inputTransitionZ" class="col-form-label">Enable</label>
<input class="scheduler-hour-select" type="checkbox" value="" id="reboot-enabled"
{% if scheduler_settings.reboot.enabled %} checked {%endif%}/>
</div>
<p id="brightness-p">Brightness 1 (Daily):</p>
<div class="col-auto">
H
<select class="form-select b-minute-select" id="brightness1-hour1-select">
<option {%if scheduler_settings.brightness1.hour == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness1.hour == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness1.hour == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness1.hour == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness1.hour == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness1.hour == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness1.hour == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness1.hour == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness1.hour == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness1.hour == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness1.hour == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness1.hour == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness1.hour == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness1.hour == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness1.hour == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness1.hour == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness1.hour == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness1.hour == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness1.hour == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness1.hour == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness1.hour == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness1.hour == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness1.hour == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness1.hour == '23' %} selected {% endif %}>23</option>
</select>
M
<select class="form-select b-minute-select" id="brightness1-minute1-select">
<option {%if scheduler_settings.brightness1.minute == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness1.minute == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness1.minute == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness1.minute == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness1.minute == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness1.minute == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness1.minute == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness1.minute == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness1.minute == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness1.minute == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness1.minute == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness1.minute == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness1.minute == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness1.minute == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness1.minute == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness1.minute == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness1.minute == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness1.minute == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness1.minute == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness1.minute == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness1.minute == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness1.minute == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness1.minute == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness1.minute == '23' %} selected {% endif %}>23</option>
<option {%if scheduler_settings.brightness1.minute == '24' %} selected {% endif %}>24</option>
<option {%if scheduler_settings.brightness1.minute == '25' %} selected {% endif %}>25</option>
<option {%if scheduler_settings.brightness1.minute == '26' %} selected {% endif %}>26</option>
<option {%if scheduler_settings.brightness1.minute == '27' %} selected {% endif %}>27</option>
<option {%if scheduler_settings.brightness1.minute == '28' %} selected {% endif %}>28</option>
<option {%if scheduler_settings.brightness1.minute == '29' %} selected {% endif %}>29</option>
<option {%if scheduler_settings.brightness1.minute == '30' %} selected {% endif %}>30</option>
<option {%if scheduler_settings.brightness1.minute == '31' %} selected {% endif %}>31</option>
<option {%if scheduler_settings.brightness1.minute == '32' %} selected {% endif %}>32</option>
<option {%if scheduler_settings.brightness1.minute == '33' %} selected {% endif %}>33</option>
<option {%if scheduler_settings.brightness1.minute == '34' %} selected {% endif %}>34</option>
<option {%if scheduler_settings.brightness1.minute == '35' %} selected {% endif %}>35</option>
<option {%if scheduler_settings.brightness1.minute == '36' %} selected {% endif %}>36</option>
<option {%if scheduler_settings.brightness1.minute == '37' %} selected {% endif %}>37</option>
<option {%if scheduler_settings.brightness1.minute == '38' %} selected {% endif %}>38</option>
<option {%if scheduler_settings.brightness1.minute == '39' %} selected {% endif %}>39</option>
<option {%if scheduler_settings.brightness1.minute == '40' %} selected {% endif %}>40</option>
<option {%if scheduler_settings.brightness1.minute == '41' %} selected {% endif %}>41</option>
<option {%if scheduler_settings.brightness1.minute == '42' %} selected {% endif %}>42</option>
<option {%if scheduler_settings.brightness1.minute == '43' %} selected {% endif %}>43</option>
<option {%if scheduler_settings.brightness1.minute == '44' %} selected {% endif %}>44</option>
<option {%if scheduler_settings.brightness1.minute == '45' %} selected {% endif %}>45</option>
<option {%if scheduler_settings.brightness1.minute == '46' %} selected {% endif %}>46</option>
<option {%if scheduler_settings.brightness1.minute == '47' %} selected {% endif %}>47</option>
<option {%if scheduler_settings.brightness1.minute == '48' %} selected {% endif %}>48</option>
<option {%if scheduler_settings.brightness1.minute == '49' %} selected {% endif %}>49</option>
<option {%if scheduler_settings.brightness1.minute == '50' %} selected {% endif %}>50</option>
<option {%if scheduler_settings.brightness1.minute == '51' %} selected {% endif %}>51</option>
<option {%if scheduler_settings.brightness1.minute == '52' %} selected {% endif %}>52</option>
<option {%if scheduler_settings.brightness1.minute == '53' %} selected {% endif %}>53</option>
<option {%if scheduler_settings.brightness1.minute == '54' %} selected {% endif %}>54</option>
<option {%if scheduler_settings.brightness1.minute == '55' %} selected {% endif %}>55</option>
<option {%if scheduler_settings.brightness1.minute == '56' %} selected {% endif %}>56</option>
<option {%if scheduler_settings.brightness1.minute == '57' %} selected {% endif %}>57</option>
<option {%if scheduler_settings.brightness1.minute == '58' %} selected {% endif %}>58</option>
<option {%if scheduler_settings.brightness1.minute == '59' %} selected {% endif %}>59</option>
</select>
Bright
<select class="form-select b-minute-select" id="brightness1-bright-select">
<option {%if scheduler_settings.brightness1.bright == '1' %} selected {% endif %}>1</option>
<option {%if scheduler_settings.brightness1.bright == '2' %} selected {% endif %}>2</option>
<option {%if scheduler_settings.brightness1.bright == '3' %} selected {% endif %}>3</option>
<option {%if scheduler_settings.brightness1.bright == '4' %} selected {% endif %}>4</option>
<option {%if scheduler_settings.brightness1.bright == '5' %} selected {% endif %}>5</option>
<option {%if scheduler_settings.brightness1.bright == '6' %} selected {% endif %}>6</option>
<option {%if scheduler_settings.brightness1.bright == '7' %} selected {% endif %}>7</option>
<option {%if scheduler_settings.brightness1.bright == '8' %} selected {% endif %}>8</option>
<option {%if scheduler_settings.brightness1.bright == '9' %} selected {% endif %}>9</option>
<option {%if scheduler_settings.brightness1.bright == '10' %} selected {% endif %}>10</option>
</select>
<label for="inputTransitionZ" class="col-form-label">Enable</label>
<input class="scheduler-hour-select" type="checkbox" value="" id="brightness1-enabled"
{% if scheduler_settings.brightness1.enabled %} checked {%endif%}/>
</div>
<p id="brightness-p">Brightness 2 (Daily):</p>
<div class="col-auto">
H
<select class="form-select b-minute-select" id="brightness2-hour1-select">
<option {%if scheduler_settings.brightness2.hour == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness2.hour == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness2.hour == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness2.hour == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness2.hour == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness2.hour == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness2.hour == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness2.hour == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness2.hour == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness2.hour == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness2.hour == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness2.hour == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness2.hour == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness2.hour == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness2.hour == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness2.hour == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness2.hour == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness2.hour == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness2.hour == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness2.hour == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness2.hour == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness2.hour == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness2.hour == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness2.hour == '23' %} selected {% endif %}>23</option>
</select>
M
<select class="form-select b-minute-select" id="brightness2-minute1-select">
<option {%if scheduler_settings.brightness2.minute == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness2.minute == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness2.minute == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness2.minute == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness2.minute == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness2.minute == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness2.minute == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness2.minute == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness2.minute == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness2.minute == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness2.minute == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness2.minute == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness2.minute == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness2.minute == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness2.minute == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness2.minute == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness2.minute == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness2.minute == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness2.minute == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness2.minute == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness2.minute == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness2.minute == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness2.minute == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness2.minute == '23' %} selected {% endif %}>23</option>
<option {%if scheduler_settings.brightness2.minute == '24' %} selected {% endif %}>24</option>
<option {%if scheduler_settings.brightness2.minute == '25' %} selected {% endif %}>25</option>
<option {%if scheduler_settings.brightness2.minute == '26' %} selected {% endif %}>26</option>
<option {%if scheduler_settings.brightness2.minute == '27' %} selected {% endif %}>27</option>
<option {%if scheduler_settings.brightness2.minute == '28' %} selected {% endif %}>28</option>
<option {%if scheduler_settings.brightness2.minute == '29' %} selected {% endif %}>29</option>
<option {%if scheduler_settings.brightness2.minute == '30' %} selected {% endif %}>30</option>
<option {%if scheduler_settings.brightness2.minute == '31' %} selected {% endif %}>31</option>
<option {%if scheduler_settings.brightness2.minute == '32' %} selected {% endif %}>32</option>
<option {%if scheduler_settings.brightness2.minute == '33' %} selected {% endif %}>33</option>
<option {%if scheduler_settings.brightness2.minute == '34' %} selected {% endif %}>34</option>
<option {%if scheduler_settings.brightness2.minute == '35' %} selected {% endif %}>35</option>
<option {%if scheduler_settings.brightness2.minute == '36' %} selected {% endif %}>36</option>
<option {%if scheduler_settings.brightness2.minute == '37' %} selected {% endif %}>37</option>
<option {%if scheduler_settings.brightness2.minute == '38' %} selected {% endif %}>38</option>
<option {%if scheduler_settings.brightness2.minute == '39' %} selected {% endif %}>39</option>
<option {%if scheduler_settings.brightness2.minute == '40' %} selected {% endif %}>40</option>
<option {%if scheduler_settings.brightness2.minute == '41' %} selected {% endif %}>41</option>
<option {%if scheduler_settings.brightness2.minute == '42' %} selected {% endif %}>42</option>
<option {%if scheduler_settings.brightness2.minute == '43' %} selected {% endif %}>43</option>
<option {%if scheduler_settings.brightness2.minute == '44' %} selected {% endif %}>44</option>
<option {%if scheduler_settings.brightness2.minute == '45' %} selected {% endif %}>45</option>
<option {%if scheduler_settings.brightness2.minute == '46' %} selected {% endif %}>46</option>
<option {%if scheduler_settings.brightness2.minute == '47' %} selected {% endif %}>47</option>
<option {%if scheduler_settings.brightness2.minute == '48' %} selected {% endif %}>48</option>
<option {%if scheduler_settings.brightness2.minute == '49' %} selected {% endif %}>49</option>
<option {%if scheduler_settings.brightness2.minute == '50' %} selected {% endif %}>50</option>
<option {%if scheduler_settings.brightness2.minute == '51' %} selected {% endif %}>51</option>
<option {%if scheduler_settings.brightness2.minute == '52' %} selected {% endif %}>52</option>
<option {%if scheduler_settings.brightness2.minute == '53' %} selected {% endif %}>53</option>
<option {%if scheduler_settings.brightness2.minute == '54' %} selected {% endif %}>54</option>
<option {%if scheduler_settings.brightness2.minute == '55' %} selected {% endif %}>55</option>
<option {%if scheduler_settings.brightness2.minute == '56' %} selected {% endif %}>56</option>
<option {%if scheduler_settings.brightness2.minute == '57' %} selected {% endif %}>57</option>
<option {%if scheduler_settings.brightness2.minute == '58' %} selected {% endif %}>58</option>
<option {%if scheduler_settings.brightness2.minute == '59' %} selected {% endif %}>59</option>
</select>
Bright
<select class="form-select b-minute-select" id="brightness2-bright-select">
<option {%if scheduler_settings.brightness2.bright == '1' %} selected {% endif %}>1</option>
<option {%if scheduler_settings.brightness2.bright == '2' %} selected {% endif %}>2</option>
<option {%if scheduler_settings.brightness2.bright == '3' %} selected {% endif %}>3</option>
<option {%if scheduler_settings.brightness2.bright == '4' %} selected {% endif %}>4</option>
<option {%if scheduler_settings.brightness2.bright == '5' %} selected {% endif %}>5</option>
<option {%if scheduler_settings.brightness2.bright == '6' %} selected {% endif %}>6</option>
<option {%if scheduler_settings.brightness2.bright == '7' %} selected {% endif %}>7</option>
<option {%if scheduler_settings.brightness2.bright == '8' %} selected {% endif %}>8</option>
<option {%if scheduler_settings.brightness2.bright == '9' %} selected {% endif %}>9</option>
<option {%if scheduler_settings.brightness2.bright == '10' %} selected {% endif %}>10</option>
</select>
<label for="inputTransitionZ" class="col-form-label">Enable</label>
<input class="scheduler-hour-select" type="checkbox" value="" id="brightness2-enabled"
{% if scheduler_settings.brightness2.enabled %} checked {%endif%}/>
</div>
<p id="brightness-p">Brightness 3 (Daily):</p>
<div class="col-auto">
H
<select class="form-select b-minute-select" id="brightness3-hour1-select">
<option {%if scheduler_settings.brightness3.hour == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness3.hour == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness3.hour == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness3.hour == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness3.hour == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness3.hour == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness3.hour == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness3.hour == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness3.hour == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness3.hour == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness3.hour == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness3.hour == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness3.hour == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness3.hour == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness3.hour == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness3.hour == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness3.hour == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness3.hour == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness3.hour == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness3.hour == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness3.hour == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness3.hour == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness3.hour == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness3.hour == '23' %} selected {% endif %}>23</option>
</select>
M
<select class="form-select b-minute-select" id="brightness3-minute1-select">
<option {%if scheduler_settings.brightness3.minute == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness3.minute == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness3.minute == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness3.minute == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness3.minute == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness3.minute == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness3.minute == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness3.minute == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness3.minute == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness3.minute == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness3.minute == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness3.minute == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness3.minute == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness3.minute == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness3.minute == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness3.minute == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness3.minute == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness3.minute == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness3.minute == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness3.minute == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness3.minute == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness3.minute == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness3.minute == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness3.minute == '23' %} selected {% endif %}>23</option>
<option {%if scheduler_settings.brightness3.minute == '24' %} selected {% endif %}>24</option>
<option {%if scheduler_settings.brightness3.minute == '25' %} selected {% endif %}>25</option>
<option {%if scheduler_settings.brightness3.minute == '26' %} selected {% endif %}>26</option>
<option {%if scheduler_settings.brightness3.minute == '27' %} selected {% endif %}>27</option>
<option {%if scheduler_settings.brightness3.minute == '28' %} selected {% endif %}>28</option>
<option {%if scheduler_settings.brightness3.minute == '29' %} selected {% endif %}>29</option>
<option {%if scheduler_settings.brightness3.minute == '30' %} selected {% endif %}>30</option>
<option {%if scheduler_settings.brightness3.minute == '31' %} selected {% endif %}>31</option>
<option {%if scheduler_settings.brightness3.minute == '32' %} selected {% endif %}>32</option>
<option {%if scheduler_settings.brightness3.minute == '33' %} selected {% endif %}>33</option>
<option {%if scheduler_settings.brightness3.minute == '34' %} selected {% endif %}>34</option>
<option {%if scheduler_settings.brightness3.minute == '35' %} selected {% endif %}>35</option>
<option {%if scheduler_settings.brightness3.minute == '36' %} selected {% endif %}>36</option>
<option {%if scheduler_settings.brightness3.minute == '37' %} selected {% endif %}>37</option>
<option {%if scheduler_settings.brightness3.minute == '38' %} selected {% endif %}>38</option>
<option {%if scheduler_settings.brightness3.minute == '39' %} selected {% endif %}>39</option>
<option {%if scheduler_settings.brightness3.minute == '40' %} selected {% endif %}>40</option>
<option {%if scheduler_settings.brightness3.minute == '41' %} selected {% endif %}>41</option>
<option {%if scheduler_settings.brightness3.minute == '42' %} selected {% endif %}>42</option>
<option {%if scheduler_settings.brightness3.minute == '43' %} selected {% endif %}>43</option>
<option {%if scheduler_settings.brightness3.minute == '44' %} selected {% endif %}>44</option>
<option {%if scheduler_settings.brightness3.minute == '45' %} selected {% endif %}>45</option>
<option {%if scheduler_settings.brightness3.minute == '46' %} selected {% endif %}>46</option>
<option {%if scheduler_settings.brightness3.minute == '47' %} selected {% endif %}>47</option>
<option {%if scheduler_settings.brightness3.minute == '48' %} selected {% endif %}>48</option>
<option {%if scheduler_settings.brightness3.minute == '49' %} selected {% endif %}>49</option>
<option {%if scheduler_settings.brightness3.minute == '50' %} selected {% endif %}>50</option>
<option {%if scheduler_settings.brightness3.minute == '51' %} selected {% endif %}>51</option>
<option {%if scheduler_settings.brightness3.minute == '52' %} selected {% endif %}>52</option>
<option {%if scheduler_settings.brightness3.minute == '53' %} selected {% endif %}>53</option>
<option {%if scheduler_settings.brightness3.minute == '54' %} selected {% endif %}>54</option>
<option {%if scheduler_settings.brightness3.minute == '55' %} selected {% endif %}>55</option>
<option {%if scheduler_settings.brightness3.minute == '56' %} selected {% endif %}>56</option>
<option {%if scheduler_settings.brightness3.minute == '57' %} selected {% endif %}>57</option>
<option {%if scheduler_settings.brightness3.minute == '58' %} selected {% endif %}>58</option>
<option {%if scheduler_settings.brightness3.minute == '59' %} selected {% endif %}>59</option>
</select>
Bright
<select class="form-select b-minute-select" id="brightness3-bright-select">
<option {%if scheduler_settings.brightness3.bright == '1' %} selected {% endif %}>1</option>
<option {%if scheduler_settings.brightness3.bright == '2' %} selected {% endif %}>2</option>
<option {%if scheduler_settings.brightness3.bright == '3' %} selected {% endif %}>3</option>
<option {%if scheduler_settings.brightness3.bright == '4' %} selected {% endif %}>4</option>
<option {%if scheduler_settings.brightness3.bright == '5' %} selected {% endif %}>5</option>
<option {%if scheduler_settings.brightness3.bright == '6' %} selected {% endif %}>6</option>
<option {%if scheduler_settings.brightness3.bright == '7' %} selected {% endif %}>7</option>
<option {%if scheduler_settings.brightness3.bright == '8' %} selected {% endif %}>8</option>
<option {%if scheduler_settings.brightness3.bright == '9' %} selected {% endif %}>9</option>
<option {%if scheduler_settings.brightness3.bright == '10' %} selected {% endif %}>10</option>
</select>
<label for="inputTransitionZ" class="col-form-label">Enable</label>
<input class="scheduler-hour-select" type="checkbox" value="" id="brightness3-enabled"
{% if scheduler_settings.brightness3.enabled %} checked {%endif%}/>
</div>
<p id="brightness-p">Brightness 4 (Daily):</p>
<div class="col-auto">
H
<select class="form-select b-minute-select" id="brightness4-hour1-select">
<option {%if scheduler_settings.brightness4.hour == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness4.hour == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness4.hour == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness4.hour == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness4.hour == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness4.hour == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness4.hour == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness4.hour == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness4.hour == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness4.hour == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness4.hour == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness4.hour == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness4.hour == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness4.hour == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness4.hour == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness4.hour == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness4.hour == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness4.hour == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness4.hour == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness4.hour == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness4.hour == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness4.hour == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness4.hour == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness4.hour == '23' %} selected {% endif %}>23</option>
</select>
M
<select class="form-select b-minute-select" id="brightness4-minute1-select">
<option {%if scheduler_settings.brightness4.minute == '00' %} selected {% endif %}>00</option>
<option {%if scheduler_settings.brightness4.minute == '01' %} selected {% endif %}>01</option>
<option {%if scheduler_settings.brightness4.minute == '02' %} selected {% endif %}>02</option>
<option {%if scheduler_settings.brightness4.minute == '03' %} selected {% endif %}>03</option>
<option {%if scheduler_settings.brightness4.minute == '04' %} selected {% endif %}>04</option>
<option {%if scheduler_settings.brightness4.minute == '05' %} selected {% endif %}>05</option>
<option {%if scheduler_settings.brightness4.minute == '06' %} selected {% endif %}>06</option>
<option {%if scheduler_settings.brightness4.minute == '07' %} selected {% endif %}>07</option>
<option {%if scheduler_settings.brightness4.minute == '08' %} selected {% endif %}>08</option>
<option {%if scheduler_settings.brightness4.minute == '09' %} selected {% endif %}>09</option>
<option {%if scheduler_settings.brightness4.minute == '10' %} selected {% endif %}>10</option>
<option {%if scheduler_settings.brightness4.minute == '11' %} selected {% endif %}>11</option>
<option {%if scheduler_settings.brightness4.minute == '12' %} selected {% endif %}>12</option>
<option {%if scheduler_settings.brightness4.minute == '13' %} selected {% endif %}>13</option>
<option {%if scheduler_settings.brightness4.minute == '14' %} selected {% endif %}>14</option>
<option {%if scheduler_settings.brightness4.minute == '15' %} selected {% endif %}>15</option>
<option {%if scheduler_settings.brightness4.minute == '16' %} selected {% endif %}>16</option>
<option {%if scheduler_settings.brightness4.minute == '17' %} selected {% endif %}>17</option>
<option {%if scheduler_settings.brightness4.minute == '18' %} selected {% endif %}>18</option>
<option {%if scheduler_settings.brightness4.minute == '19' %} selected {% endif %}>19</option>
<option {%if scheduler_settings.brightness4.minute == '20' %} selected {% endif %}>20</option>
<option {%if scheduler_settings.brightness4.minute == '21' %} selected {% endif %}>21</option>
<option {%if scheduler_settings.brightness4.minute == '22' %} selected {% endif %}>22</option>
<option {%if scheduler_settings.brightness4.minute == '23' %} selected {% endif %}>23</option>
<option {%if scheduler_settings.brightness4.minute == '24' %} selected {% endif %}>24</option>
<option {%if scheduler_settings.brightness4.minute == '25' %} selected {% endif %}>25</option>
<option {%if scheduler_settings.brightness4.minute == '26' %} selected {% endif %}>26</option>
<option {%if scheduler_settings.brightness4.minute == '27' %} selected {% endif %}>27</option>
<option {%if scheduler_settings.brightness4.minute == '28' %} selected {% endif %}>28</option>
<option {%if scheduler_settings.brightness4.minute == '29' %} selected {% endif %}>29</option>
<option {%if scheduler_settings.brightness4.minute == '30' %} selected {% endif %}>30</option>
<option {%if scheduler_settings.brightness4.minute == '31' %} selected {% endif %}>31</option>
<option {%if scheduler_settings.brightness4.minute == '32' %} selected {% endif %}>32</option>
<option {%if scheduler_settings.brightness4.minute == '33' %} selected {% endif %}>33</option>
<option {%if scheduler_settings.brightness4.minute == '34' %} selected {% endif %}>34</option>
<option {%if scheduler_settings.brightness4.minute == '35' %} selected {% endif %}>35</option>
<option {%if scheduler_settings.brightness4.minute == '36' %} selected {% endif %}>36</option>
<option {%if scheduler_settings.brightness4.minute == '37' %} selected {% endif %}>37</option>
<option {%if scheduler_settings.brightness4.minute == '38' %} selected {% endif %}>38</option>
<option {%if scheduler_settings.brightness4.minute == '39' %} selected {% endif %}>39</option>
<option {%if scheduler_settings.brightness4.minute == '40' %} selected {% endif %}>40</option>
<option {%if scheduler_settings.brightness4.minute == '41' %} selected {% endif %}>41</option>
<option {%if scheduler_settings.brightness4.minute == '42' %} selected {% endif %}>42</option>
<option {%if scheduler_settings.brightness4.minute == '43' %} selected {% endif %}>43</option>
<option {%if scheduler_settings.brightness4.minute == '44' %} selected {% endif %}>44</option>
<option {%if scheduler_settings.brightness4.minute == '45' %} selected {% endif %}>45</option>
<option {%if scheduler_settings.brightness4.minute == '46' %} selected {% endif %}>46</option>
<option {%if scheduler_settings.brightness4.minute == '47' %} selected {% endif %}>47</option>
<option {%if scheduler_settings.brightness4.minute == '48' %} selected {% endif %}>48</option>
<option {%if scheduler_settings.brightness4.minute == '49' %} selected {% endif %}>49</option>
<option {%if scheduler_settings.brightness4.minute == '50' %} selected {% endif %}>50</option>
<option {%if scheduler_settings.brightness4.minute == '51' %} selected {% endif %}>51</option>
<option {%if scheduler_settings.brightness4.minute == '52' %} selected {% endif %}>52</option>
<option {%if scheduler_settings.brightness4.minute == '53' %} selected {% endif %}>53</option>
<option {%if scheduler_settings.brightness4.minute == '54' %} selected {% endif %}>54</option>
<option {%if scheduler_settings.brightness4.minute == '55' %} selected {% endif %}>55</option>
<option {%if scheduler_settings.brightness4.minute == '56' %} selected {% endif %}>56</option>
<option {%if scheduler_settings.brightness4.minute == '57' %} selected {% endif %}>57</option>
<option {%if scheduler_settings.brightness4.minute == '58' %} selected {% endif %}>58</option>
<option {%if scheduler_settings.brightness4.minute == '59' %} selected {% endif %}>59</option>
</select>
Bright
<select class="form-select b-minute-select" id="brightness4-bright-select">
<option {%if scheduler_settings.brightness4.bright == '1' %} selected {% endif %}>1</option>
<option {%if scheduler_settings.brightness4.bright == '2' %} selected {% endif %}>2</option>
<option {%if scheduler_settings.brightness4.bright == '3' %} selected {% endif %}>3</option>
<option {%if scheduler_settings.brightness4.bright == '4' %} selected {% endif %}>4</option>
<option {%if scheduler_settings.brightness4.bright == '5' %} selected {% endif %}>5</option>
<option {%if scheduler_settings.brightness4.bright == '6' %} selected {% endif %}>6</option>
<option {%if scheduler_settings.brightness4.bright == '7' %} selected {% endif %}>7</option>
<option {%if scheduler_settings.brightness4.bright == '8' %} selected {% endif %}>8</option>
<option {%if scheduler_settings.brightness4.bright == '9' %} selected {% endif %}>9</option>
<option {%if scheduler_settings.brightness4.bright == '10' %} selected {% endif %}>10</option>
</select>
<label for="inputTransitionZ" class="col-form-label">Enable</label>
<input class="scheduler-hour-select" type="checkbox" value="" id="brightness4-enabled"
{% if scheduler_settings.brightness4.enabled %} checked {%endif%}/>
</div>
<p id="reboots-p">Timezone:</p>
<div class="col-auto">
<select class="form-select timezone-select" id="timezone-select">
<option {%if scheduler_settings.timezone == 'US/Eastern' %} selected {% endif %}>US/Eastern</option>
<option {%if scheduler_settings.timezone == 'US/Central' %} selected {% endif %}>US/Central</option>
<option {%if scheduler_settings.timezone == 'US/Pacific' %} selected {% endif %}>US/Pacific</option>
<option {%if scheduler_settings.timezone == 'GMT' %} selected {% endif %}>GMT</option>
<option {%if scheduler_settings.timezone == 'CET' %} selected {% endif %}>CET</option>
<option {%if scheduler_settings.timezone == 'GB' %} selected {% endif %}>GB</option>
<option {%if scheduler_settings.timezone == 'NZ' %} selected {% endif %}>NZ</option>
<option {%if scheduler_settings.timezone == 'Australia/ACT' %} selected {% endif %}>Australia/ACT</option>
<option {%if scheduler_settings.timezone == 'Japan' %} selected {% endif %}>Japan</option>
<option {%if scheduler_settings.timezone == 'Asia/Singapore' %} selected {% endif %}>Asia/Singapore</option>
<option {%if scheduler_settings.timezone == 'Asia/Dubai' %} selected {% endif %}>Asia/Dubai</option>
</select>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2" style="display:block;margin: 0 auto;width: 30%;margin-top:8%;">
<a id="save-scheduler-btn" class="btn btn-scheduler" onclick="saveSchedulerSettings()">Save Settings</a>
<p align="center" style="display:none;color:red;" id="saved">Saved!</p>
</div>
</div>
</div>
<!-- Features List First Row -->
<div class="row" style="border-bottom:1px solid white; padding:2%">
<h4 id="top-row-text" style="display:none">Top row</h4>
<!-- Available Features Column -->
<div class="col-lg-4 col-md-4 col-sm-12 ">
<div class="row">
<h6 class="col-lg-6 col-md-6 col-sm-12">Available Features:</h6>
</div>
<div class="row features-div">
<ul
id="available-features"
class="display-features-list text-white">
{% for f in not_displaying %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<!-- End Features Column -->
<div class="col-lg-2 col-md-2 col-sm-2 align-self-center" style="padding-top:2%;padding-bottom:5%">
<div class="icon-featuresdisplay">
<i id="feature-to-display" class="fa fa-chevron-right" aria-hidden="true"></i><br><br>
<i id="display-to-feature" class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
</div>
<!-- DIsplay Format Column -->
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row">
<h6 class="col-lg-6 col-md-6 col-sm-12">Display Format:</h6>
</div>
<div class="row features-div">
<ul id="display-format" class="display-features-list text-white">
{% for f in currently_displaying[0] %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 align-self-center" style="padding-top:2%;padding-bottom:5%">
<div class="icon-featuresdisplay">
<i id="display-increase-btn" class="fa fa-chevron-up" aria-hidden="true"></i><br><br>
<i id="display-decrease-btn" class="fa fa-chevron-down" aria-hidden="true"></i>
<a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>
</div>
</div>
</div>
<!-- End Display Format -->
<!-- End Features List ROw -->
<!-- Features List Second Row -->
<div id="second-row" class="row" style="border-bottom:1px solid white; padding:2%">
<h4 id="bottom-row-text" style="display:none">Bottom row</h4>
<!-- Available Features Column -->
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row">
<h6 class="col-lg-6 col-md-6 col-sm-12">Available Features:</h6>
</div>
<div class="row features-div">
<ul
id="available-features-2"
class="display-features-list text-white">
{%if professional%}
{% for f in not_displaying2 %}
<li>{{f}}</li>
{% endfor%}
{%else%}
<li>Stocks</li>
<li>Crypto</li>
<li>Forex</li>
<li>Commodities</li>
<li>Indices</li>
<li>Current Weather</li>
<li>Daily Forecast</li>
<li>News</li>
<li>Custom Images</li>
<li>Custom Messages</li>
<li>Custom Gifs</li>
<li>Sports (Upcoming Games)</li>
<li>Sports (Live Games)</li>
<li>Sports (Past Games)</li>
<li>Sports (Team Stats)</li>
<li>Movies</li>
<li>IPO Calendar</li>
<li>Economic Calendar</li>
{%endif%}
</ul>
</div>
</div>
<!-- End Features Column -->
<div class="col-lg-2 col-md-2 col-sm-2 align-self-center">
<div class="icons-list">
<i id="feature-to-display-2" class="fa fa-chevron-right" aria-hidden="true"></i><br><br>
<i id="display-to-feature-2" class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
</div>
<!-- DIsplay Format Column -->
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row">
<h6 class="col-lg-6 col-md-6 col-sm-12">Display Format:</h6>
</div>
<div class="row features-div">
<ul id="display-format-2" class="display-features-list text-white">
{%if professional%}
{% for f in currently_displaying[1] %}
<li> {{f}} </li>
{% endfor%}
{%endif%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 align-self-center">
<div class="icons-list">
<i id="display-increase-btn-2" class="fa fa-chevron-up" aria-hidden="true"></i><br><br>
<i id="display-decrease-btn-2" class="fa fa-chevron-down" aria-hidden="true"></i>
<a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>
</div>
</div>
</div>
<!-- End Display Format -->
<!-- End Features List ROw -->
<!-- What to Display in Each Feature -->
<div class="row" style="padding:2%">
<h3 class="pt-3">What to Display in Each Feature</h3>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<label for="dropZ" class="col-form-label">Feature:</label>
</div>
<div class="col-auto">
<select id="drop" class="form-select">
<option value="1">Stocks</option>
<option value="2">Crypto</option>
<option value="3">Forex</option>
<option value="14">Commodities</option>
<option value="15">Indices</option>
<option value="4">Current Weather</option>
<option value="5">Daily Forecast</option>
<option value="6">News</option>
<option value="7">Sports (Upcoming Games)</option>
<option value="8">Sports (Past Games)</option>
<option value="9">Sports (Live Games)</option>
<option value="10">Sports (Team Stats)</option>
<option value="11">Custom Images</option>
<option value="12">Custom GIFs</option>
<option value="13">Custom Messages</option>
<option value="16">Movies</option>
<option value="17">IPO Calendar</option>
<option value="18">Economic Calendar</option>
</select>
</div>
</div><!-- End Row Dropdown Display Feature -->
<!-- Stocks -->
<div class="page" id="Page1">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedZ" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed"
class="form-select speed-select"
>
<option {%if stocks_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if stocks_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if stocks_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ2" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow"
class="form-select speed-select"
>
<option {%if stocks_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if stocks_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if stocks_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition"
class="form-select animation-select"
>
<option {%if stocks_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if stocks_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if stocks_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Stock Symbol:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText3"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. AAPL"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn3" class="btn set-btn" onclick="stockValidate()">Add</button>
</div>
<p id="demo" style="display: none"></p>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Pre-Market / After-Hours Prices
</label>
</div>
<div class="col-auto">
<input
class="form-check-input prepost-select"
type="checkbox"
value=""
id="flexCheckChecked-prepost"
{%if stocks_settings.prepost%}
checked
{%endif%} />
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Percent Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input percent-select"
type="checkbox"
value=""
id="flexCheckChecked"
{%if stocks_settings.percent%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Point Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input point-select"
type="checkbox"
value=""
id="flexCheckChecked2"
{%
if
stocks_settings.point%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Display Company Logos
</label>
</div>
<div class="col-auto">
<input
class="form-check-input logo-select"
type="checkbox"
value=""
id="flexCheckChecked3"
{%
if
stocks_settings.logos%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked5"
{%
if
stocks_settings.title%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Display Portfolio
</label>
</div>
<div class="col-auto">
<input
class="form-check-input portfolio-select"
type="checkbox"
value=""
id="flexCheckChecked4"
{%
if
stocks_settings.chart%}
checked
{%endif%}
onclick="portfolioValidate()"
/>
</div>
</div>
<p id="demo-portfolio" style="display: none"></p>
<div id="stocks-portfolio" style="display: none;">
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Shares:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText8"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. 200" />
</div>
<div class="col-auto">
<button id="update-stock-port-btn" class="btn set-btn" onclick="updateStockPorftolio()">Update Position</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Avg Cost:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText9"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. 152.45" />
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Date:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText10"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. YYYY-MM-DD" />
</div>
<div class="col-auto">
<button id="remove-stock-port-btn" class="btn set-btn" onclick="removeStockPorftolio()">Remove Position</button>
</div>
<div id="updated-stock-p" style="display:none"><p id="stockupdated-p" style="color: red;">Stock Position Updated!</p></div>
<div id="removed-stock-p" style="display:none"><p id="stockremoved-p" style="color: red;">Stock Position Removed!</p></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="stocks-features"
class="display-features-list text-white symbol-list">
{% for f in stocks_settings.symbols %}
<li onclick="getStockSymbol(this.innerText)">{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="stocks-increase-btn"
class="upbutton fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="stocks-decrease-btn"
class="downbutton fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="stocks-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Crypto -->
<div class="page" id="Page2" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeedZ3" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed2"
class="form-select speed-select"
>
<option {%if crypto_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if crypto_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if crypto_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ3" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow2"
class="form-select speed-select"
>
<option {%if crypto_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if crypto_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if crypto_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ3" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition2"
class="form-select animation-select"
>
<option {%if crypto_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if crypto_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if crypto_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTextZ3" class="col-form-label"
>Crypto,Base:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText4"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. BTC,USD"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn4" class="btn set-btn" onclick="cryptoValidate()">Add</button>
</div>
<p id="demo2" style="display: none"></p>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ3" class="col-form-label"
>Percent Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input percent-select"
type="checkbox"
value=""
id="flexCheckChecked6"
{%
if
crypto_settings.percent%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransitionZ3" class="col-form-label"
>Point Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input point-select"
type="checkbox"
value=""
id="flexCheckChecked7"
{%
if
crypto_settings.point%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransitionZ3" class="col-form-label"
>Display Crypto Logos
</label>
</div>
<div class="col-auto">
<input
class="form-check-input logo-select"
type="checkbox"
value=""
id="flexCheckChecked8"
{%
if
crypto_settings.logos%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransitionZ3" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked10"
{%
if
crypto_settings.title%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ" class="col-form-label"
>Display Portfolio
</label>
</div>
<div class="col-auto">
<input
class="form-check-input portfolio-select"
type="checkbox"
value=""
id="crypto_portfolio_checkbox"
{%
if
crypto_settings.chart%}
checked
{%endif%}
onclick="portfolioCryptoValidate()"
/>
</div>
</div>
<p id="demo-portfolio-crypto" style="display: none"></p>
<div id="crypto-portfolio" style="display: none;">
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Shares:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="cryptoshares"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. 200" />
</div>
<div class="col-auto">
<button id="update-crypto-port-btn" class="btn set-btn" onclick="updateCryptoPorftolio()">Update Position</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Avg Cost:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="cryptocost"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. 152.45" />
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputTextZ" class="col-form-label"
>Date:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="cryptodate"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. YYYY-MM-DD" />
</div>
<div class="col-auto">
<button id="remove-crypto-port-btn" class="btn set-btn" onclick="removeCryptoPorftolio()">Remove Position</button>
</div>
<div id="updated-crypto-p" style="display:none"><p id="cryptoupdated-p" style="color: red;">Crypto Position Updated!</p></div>
<div id="removed-crypto-p" style="display:none"><p id="cryptoremoved-p" style="color: red;">Crypto Position Removed!</p></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="crypto-features"
class="display-features-list text-white symbol-list"
>
{% for f in crypto_settings.symbols %}
<li onclick="getCryptoSymbol(this.innerText)">{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="crypto-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="crypto-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="crypto-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Commodities -->
<div class="page" id="Page14" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeedZ20" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed20"
class="form-select speed-select"
>
<option {%if commodities_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if commodities_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if commodities_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ20" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow14"
class="form-select speed-select"
>
<option {%if commodities_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if commodities_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if commodities_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ20" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition20"
class="form-select animation-select"
>
<option {%if commodities_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if commodities_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if commodities_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTextZ20" class="col-form-label"
>Commodity Symbol:
</label>
</div>
<div class="col-auto">
<!-- <input
type="text"
id="inputText20"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. BRENTOIL"/> -->
<select id="commodities-items" class="form-select animation-select">
<option>Aluminum</option><option>Brent Crude Oil</option><option>Coffee</option><option>Copper</option><option>Corn</option>
<option>Cotton</option><option>Gold</option><option>Palladium</option><option>Platinum</option><option>Rice</option>
<option>Silver</option><option>Soybean</option><option>Sugar</option><option>Wheat</option><option>WTI Crude Oil</option>
<option>Ethanol</option><option>Natural Gas</option><option>Cocoa</option><option>Lumber</option><option>Live Cattle</option>
<option>Lean Hog</option>
</select>
</div>
<div class="col-auto">
<button id="inputTextBtn20" class="btn set-btn" onclick="commoditiesValidate()">Add</button>
</div>
<p id="demo8" style="display: none"></p>
</div>
<div class="commodities" id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ20" class="col-form-label"
>Percent Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input percent-select"
type="checkbox"
value=""
id="flexCheckChecked32"
{%if commodities_settings.percent%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ20" class="col-form-label"
>Point Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input point-select"
type="checkbox"
value=""
id="flexCheckChecked33"
{%
if
commodities_settings.point%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ20" class="col-form-label"
>Display Commodities Logos
</label>
</div>
<div class="col-auto">
<input
class="form-check-input logo-select"
type="checkbox"
value=""
id="flexCheckChecked34"
{%
if
commodities_settings.logos%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ20" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked35"
{%
if
commodities_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="commodities-features"
class="display-features-list text-white symbol-list"
>
{% for f in commodities_settings.symbols %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="commodities-increase-btn"
class="upbutton fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="commodities-decrease-btn"
class="downbutton fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="commodities-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Indices -->
<div class="page" id="Page15" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeedZ21" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed21"
class="form-select speed-select"
>
<option {%if indices_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if indices_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if indices_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ21" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow15"
class="form-select speed-select"
>
<option {%if indices_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if indices_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if indices_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ21" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition21"
class="form-select animation-select"
>
<option {%if indices_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if indices_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if indices_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTextZ21" class="col-form-label"
>Index Symbol:
</label>
</div>
<div class="col-auto">
<!--
<input
type="text"
id="inputText21"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. ^DJI"
/> -->
<select id="indices-items" class="form-select animation-select">
<option>Dow Jones - USA</option><option>E-Mini Dow Jones - USA</option><option>S&P 500 - USA</option><option>E-Mini S&P 500 - USA</option>
<option>Nasdaq 100 - USA</option><option>E-Mini Nasdaq 100 - USA</option>
<option>Nasdaq Composite - USA</option><option>Russell 2000 - USA</option><option>E-Mini Russell 2000 - USA</option><option>VIX - USA</option>
<option>U.S. Dollar (DXY) - USA</option>
<option>S&P/TSX - Canada</option><option>IPC - Mexico</option><option>Bovespa - Brazil</option>
<option>Dax - Germany</option><option>FTSE 100 - UK</option><option>IBEX 35 - Spain</option>
<option>CAC 40 - France</option><option>SSMI - Switzerland</option><option>BEL 20 - Brussels</option>
<option>ATX - Austria</option><option>AEX - Amsterdam</option><option>OMXS30 - Stockholm</option>
<option>OMXH25 - Helsinki</option><option>FTSE MIB - Italy</option><option>PSI 20 - Lisbon</option>
<option>STOXX 600 - EU</option><option>STOXX 50 - EU</option><option>Euronext 100 - EU</option>
<option>KOSPI - South Korea</option><option>NZX 50 - New Zealand</option><option>ASX 200 - Australia</option>
<option>STI - Singapore</option><option>SSE - Shanghai</option><option>SZSE - Shenzhen</option>
<option>Nikkei 225 - Japan</option><option>NIFTY 50 - India</option><option>SENSEX - India</option>
<option>HSI - Hong Kong</option><option>TAIEX - Taiwan</option><option>JKSE - Jakarta</option>
<option>PSEI - Philippines</option><option>SET - Bangkok</option><option>BIST 100 - Istanbul</option>
</select>
</div>
<div class="col-auto">
<button id="inputTextBtn21" class="btn set-btn" onclick="indicesValidate()">Add</button>
</div>
<p id="demo9" style="display: none"></p>
</div>
<div class="indices" id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ21" class="col-form-label"
>Percent Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input percent-select"
type="checkbox"
value=""
id="flexCheckChecked36"
{%if indices_settings.percent%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ21" class="col-form-label"
>Point Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input point-select"
type="checkbox"
value=""
id="flexCheckChecked37"
{%
if
indices_settings.point%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ21" class="col-form-label"
>Display Indices Logos
</label>
</div>
<div class="col-auto">
<input
class="form-check-input logo-select"
type="checkbox"
value=""
id="flexCheckChecked38"
{%
if
indices_settings.logos%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ21" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked39"
{%
if
indices_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="indices-features"
class="display-features-list text-white symbol-list"
>
{% for f in indices_settings.symbols %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="indices-increase-btn"
class="upbutton fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="indices-decrease-btn"
class="downbutton fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="indices-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Forex -->
<div class="page" id="Page3" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed3Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed3"
class="form-select speed-select">
<option {%if forex_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if forex_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if forex_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ3" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow3"
class="form-select speed-select">
<option {%if forex_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if forex_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if forex_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition3"
class="form-select animation-select">
<option {%if forex_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if forex_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if forex_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<!-- <div class="col-auto">
<label for="inputText" class="col-form-label"
>Base,Quote:
</label>
</div> -->
<div class="col-auto">
<!-- <input
type="text"
id="inputText5"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. JPY,EUR"/> -->
<label for="inputText" class="col-form-label"
>Base:
</label>
<select id="base-select" class="form-select animation-select">
<option>USD</option><option>EUR</option><option>JPY</option><option>GBP</option><option>AUD</option><option>CAD</option>
<option>CHF</option><option>CNY</option><option>HKD</option><option>NZD</option><option>SEK</option><option>KRW</option>
<option>SGD</option><option>NOK</option><option>MXN</option><option>INR</option><option>RUB</option><option>ZAR</option>
<option>TRY</option><option>BRL</option><option>TWD</option><option>DKK</option><option>PLN</option><option>THB</option>
<option>IDR</option><option>HUF</option><option>ILS</option><option>CLP</option><option>PHP</option><option>AED</option>
<option>CZK</option><option>COP</option><option>SAR</option><option>MYR</option><option>RON</option><option>CLP</option>
<option>ARS</option><option>VND</option><option>QAR</option><option>KWD</option>
</select>
</div>
<div class="col-auto">
<label for="inputText" class="col-form-label"
>Quote:
</label>
<select id="quote-select" class="form-select animation-select">
<option>AED</option><option>AFN</option><option>ALL</option><option>AMD</option><option>AOA</option><option>ARS</option>
<option>AUD</option><option>AWG</option><option>AZN</option><option>BAM</option><option>BBD</option><option>BDT</option>
<option>BGN</option><option>BHD</option><option>BMD</option><option>BND</option><option>BOB</option><option>BRL</option>
<option>BSD</option><option>BTN</option><option>BWP</option><option>BYN</option><option>BZD</option><option>CAD</option>
<option>CDF</option><option>CHF</option><option>CLP</option><option>CNY</option><option>COP</option><option>CRC</option>
<option>CUC</option><option>CUP</option><option>CVE</option><option>CZK</option><option>DJF</option><option>DKK</option>
<option>DOP</option><option>DZD</option><option>EGP</option><option>ERN</option><option>ETB</option><option>EUR</option>
<option>FJD</option><option>FKP</option><option>FOK</option><option>GBP</option><option>GEL</option><option>GGP</option>
<option>GHS</option><option>GIP</option><option>GMD</option><option>GNF</option><option>GTQ</option><option>GYD</option>
<option>HKD</option><option>HNL</option><option>HRK</option><option>HTG</option><option>HUF</option><option>IDR</option>
<option>ILS</option><option>IMP</option><option>INR</option><option>IQD</option><option>IRR</option><option>ISK</option>
<option>JMD</option><option>JOD</option><option>JPY</option><option>KES</option><option>KGS</option><option>KHR</option>
<option>KID</option><option>KMF</option><option>KRW</option><option>KWD</option><option>KYD</option><option>KZT</option>
<option>LAK</option><option>LBP</option><option>LKR</option><option>LRD</option><option>LSL</option><option>LYD</option>
<option>MAD</option><option>MDL</option><option>MGA</option><option>MKD</option><option>MMK</option><option>MNT</option>
<option>MOP</option><option>MRU</option><option>MUR</option><option>MVR</option><option>MWK</option><option>MXN</option>
<option>MYR</option><option>MZN</option><option>NAD</option><option>NGN</option><option>NIO</option><option>NOK</option>
<option>NPR</option><option>NZD</option><option>OMR</option><option>PAB</option><option>PEN</option><option>PGK</option>
<option>PHP</option><option>PKR</option><option>PLN</option><option>PYG</option><option>QAR</option><option>RON</option>
<option>RSD</option><option>RUB</option><option>RWF</option><option>SAR</option><option>SBD</option><option>SCR</option>
<option>SDG</option><option>SEK</option><option>SGD</option><option>SHP</option><option>SLL</option><option>SOS</option>
<option>SRD</option><option>SSP</option><option>STN</option><option>SYP</option><option>SZL</option><option>THB</option>
<option>TJS</option><option>TMT</option><option>TND</option><option>TOP</option><option>TRY</option><option>TTD</option>
<option>TVD</option><option>TWD</option><option>TZS</option><option>UAH</option><option>UGX</option><option>USD</option>
<option>UYU</option><option>UZS</option><option>VES</option><option>VND</option><option>VUV</option><option>WST</option>
<option>YER</option><option>ZAR</option>
</select>
</div>
<div class="col-auto" style="padding-top: 7%;">
<button id="inputTextBtn5" class="btn set-btn" onclick="forexValidate()">Add</button>
</div>
<p id="demo3" style="display: none"></p>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Percent Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input percent-select"
type="checkbox"
value=""
id="flexCheckChecked11"
{%
if
forex_settings.percent%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Point Change
</label>
</div>
<div class="col-auto">
<input
class="form-check-input point-select"
type="checkbox"
value=""
id="flexCheckChecked12"
{%
if
forex_settings.point%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Currency Logos
</label>
</div>
<div class="col-auto">
<input
class="form-check-input logo-select"
type="checkbox"
value=""
id="flexCheckChecked13"
{%
if
forex_settings.logos%}
checked
{%endif%}
/>
</div>
</div>
<!--
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display 30 Day Chart
</label>
</div>
<div class="col-auto">
<input
class="form-check-input chart-select"
type="checkbox"
value=""
id="flexCheckChecked14"
{%
if
forex_settings.chart%}
checked
{%endif%}
/>
</div>
</div> -->
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked15"
{%
if
forex_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="forex-features"
class="display-features-list text-white symbol-list"
>
{% for f in forex_settings.symbols %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="forex-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="forex-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="forex-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Current Weather -->
<div class="page" id="Page4" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed4Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed4"
class="form-select speed-select"
>
<option {%if current_weather.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if current_weather.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if current_weather.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow4Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow4"
class="form-select speed-select"
>
<option {%if current_weather.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if current_weather.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if current_weather.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition4"
class="form-select animation-select"
>
<option {%if current_weather.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if current_weather.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if current_weather.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">City: </label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText6"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. London"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn6" class="btn set-btn" onclick="currentWeatherValidate()">Add</button>
</div>
<p id="demo6" style="display: none"></p>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed" class="col-form-label"
>Temperature unit:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed42"
class="form-select temp-select"
>
<option {%if current_weather.temp == 'celsius' %} selected {% endif %}>Celsius</option>
<option {%if current_weather.temp == 'fahrenheit' %} selected {% endif %}>Fahrenheit</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Wind Speed Unit:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition42"
class="form-select wind-speed-select"
>
<option {%if current_weather.wind_speed == 'miles/hour' %} selected {% endif %}>Miles/hour</option>
<option {%if current_weather.wind_speed == 'kilometers/hour' %} selected {% endif %}>Kilometers/hour</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked16"
{%
if
current_weather.title%}
checked
{%endif%}
/>
</div>
</div>
<!-- <div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">API Key: </label>
</div>
<div class="col-auto">
<input
type="text"
id="api-key1"
placeholder="Weather API Key"
class="form-control api-key"
aria-describedby="TextHelpInline"
value="{{ api_keys }}"
/>
</div>
<div class="col-auto">
<button id="weather-api-btn" class="btn set-btn" onClick="showWeatherP()">Add</button>
</div>
<p id="weather-api-p" style="display: none">New weather API key detected, please restart the ticker in order for the feature to work properly.</p>
</div> -->
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="current-weather-features"
class="display-features-list text-white location-list"
>
{% for f in current_weather.locations.keys() %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="current-weather-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="current-weather-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="current-weather-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Daily Forecast -->
<div class="page" id="Page5" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed5Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed5"
class="form-select speed-select"
>
<option {%if daily_weather.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if daily_weather.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if daily_weather.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow5Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow5"
class="form-select speed-select"
>
<option {%if daily_weather.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if daily_weather.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if daily_weather.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition5"
class="form-select animation-select"
>
<option {%if daily_weather.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if daily_weather.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if daily_weather.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">City: </label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText7"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="e.g. London"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn7" class="btn set-btn" onclick="dailyWeatherValidate()">Add</button>
</div>
<p id="demo7" style="display: none"></p>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed52Z" class="col-form-label"
>Temperature unit:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed52"
class="form-select temp-select"
>
<option {%if daily_weather.temp == 'celsius' %} selected {% endif %}>Celsius</option>
<option {%if daily_weather.temp == 'fahrenheit' %} selected {% endif %}>Fahrenheit</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition52Z" class="col-form-label"
>Wind Speed Unit:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition52"
class="form-select wind-speed-select"
>
<option {%if daily_weather.wind_speed == 'miles/hour' %} selected {% endif %}>Miles/hour</option>
<option {%if daily_weather.wind_speed == 'kilometers/hour' %} selected {% endif %}>Kilometers/hour</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Current Weather
</label>
</div>
<div class="col-auto">
<input
class="form-check-input current-weather-select"
type="checkbox"
value=""
id="flexCheckChecked17"
{%if daily_weather.current_weather%} checked {% endif %}
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked18"
{%
if
daily_weather.title%}
checked
{%endif%}
/>
</div>
</div>
<!-- <div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">API Key: </label>
</div>
<div class="col-auto">
<input
type="text"
id="api-key"
placeholder="Weather API Key"
class="form-control api-key"
aria-describedby="TextHelpInline"
value="{{ api_keys }}"
/>
</div>
<div class="col-auto">
</div>
</div> -->
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="daily-forecast-features"
class="display-features-list text-white location-list"
>
{% for f in daily_weather.locations.keys() %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="daily-forecast-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="daily-forecast-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="daily-forecast-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- News -->
<div class="page" id="Page6" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed6Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed6"
class="form-select speed-select"
>
<option {%if news_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if news_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if news_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow6Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow6"
class="form-select speed-select"
>
<option {%if news_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if news_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if news_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition6"
class="form-select animation-select"
>
<option {%if news_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if news_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if news_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed62Z" class="col-form-label"
>Country:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed62"
class="form-select country-select"
>
<option {%if news_settings.country == 'Worldwide' %} selected {% endif %}>Worldwide</option>
<option {%if news_settings.country == 'United States' %} selected {% endif %}>United States</option>
<option {%if news_settings.country == 'Australia' %} selected {% endif %}>Australia</option>
<option {%if news_settings.country == 'Canada' %} selected {% endif %}>Canada</option>
<option {%if news_settings.country == 'Great Britain' %} selected {% endif %}>Great Britain</option>
<option {%if news_settings.country == 'New Zealand' %} selected {% endif %}>New Zealand</option>
<option {%if news_settings.country == 'Ireland' %} selected {% endif %}>Ireland</option>
<option {%if news_settings.country == 'Singapore' %} selected {% endif %}>Singapore</option>
<option {%if news_settings.country == 'South Africa' %} selected {% endif %}>South Africa</option>
<option {%if news_settings.country == 'Germany' %} selected {% endif %}>Germany</option>
<option {%if news_settings.country == 'Hong Kong' %} selected {% endif %}>Hong Kong</option>
<option {%if news_settings.country == 'Japan' %} selected {% endif %}>Japan</option>
<option {%if news_settings.country == 'South Korea' %} selected {% endif %}>South Korea</option>
<option {%if news_settings.country == 'China' %} selected {% endif %}>China</option>
<option {%if news_settings.country == 'France' %} selected {% endif %}>France</option>
<option {%if news_settings.country == 'India' %} selected {% endif %}>India</option>
<option {%if news_settings.country == 'Italy' %} selected {% endif %}>Italy</option>
<option {%if news_settings.country == 'Switzerland' %} selected {% endif %}>Switzerland</option>
<option {%if news_settings.country == 'Netherlands' %} selected {% endif %}>Netherlands</option>
<option {%if news_settings.country == 'Spain' %} selected {% endif %}>Spain</option>
<option {%if news_settings.country == 'Brazil' %} selected {% endif %}>Brazil</option>
<option {%if news_settings.country == 'Portugal' %} selected {% endif %}>Portugal</option>
</select>
</div>
<div class="col-auto">
<input
class="form-check-input news_check_class country-check"
type="checkbox"
value=""
id="flexCheckChecked30"
{%
if
news_settings.use_country%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition62Z" class="col-form-label"
>Category:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition62"
class="form-select category-select"
>
<option {%if news_settings.category == 'General' %} selected {% endif %}>General</option>
<option {%if news_settings.category == 'Business' %} selected {% endif %}>Business</option>
<option {%if news_settings.category == 'Entertainment' %} selected {% endif %}>Entertainment</option>
<option {%if news_settings.category == 'Health' %} selected {% endif %}>Health</option>
<option {%if news_settings.category == 'Science' %} selected {% endif %}>Science</option>
<option {%if news_settings.category == 'Sports' %} selected {% endif %}>Sports</option>
<option {%if news_settings.category == 'Technology' %} selected {% endif %}>Technology</option>
</select>
</div>
<div class="col-auto">
<input
class="form-check-input news_check_class category-check"
type="checkbox"
value=""
id="flexCheckChecked31"
{%
if
news_settings.use_category%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition62Z" class="col-form-label"
>Headlines to display:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition62"
class="form-select category-select headline-num"
>
<option {%if news_settings.num_headlines == '10' %} selected {% endif %}>10</option>
<option {%if news_settings.num_headlines == '15' %} selected {% endif %}>15</option>
<option {%if news_settings.num_headlines == '20' %} selected {% endif %}>20</option>
<option {%if news_settings.num_headlines == '25' %} selected {% endif %}>25</option>
<option {%if news_settings.num_headlines == '30' %} selected {% endif %}>30</option>
</select>
</div>
</div>
<!-- <p class="text-center pt-2">Or</p> -->
<!-- <div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<input
class="form-check-input sources-select"
type="checkbox"
value=""
id="flexCheckChecked20"
{%
if
news_settings.use_sources%}
checked
{%endif%}
/>
</div>
<div class="col-auto">
<label for="inputTransition63" class="col-form-label"
>Sources:
</label>
</div>
<div class="col-auto">
<select id="inputTransition63" class="form-select">
<option>Bloomberg</option>
<option>ABC news</option>
<option>Yahoo</option>
<option></option>
<option></option>
</select>
</div>
<div class="col-auto">
<button id="inputTransitionBtn63" class="btn set-btn">
Add
</button>
</div>
</div> -->
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked19"
{%
if
news_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="news-features"
class="display-features-list text-white sources-list"
>
{% for f in news_settings.sources %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="news-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="news-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="news-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Sports (Upcoming games) -->
<div class="page" id="Page7" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed7Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed7"
class="form-select speed-select"
>
<option {%if upcoming_games.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if upcoming_games.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if upcoming_games.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow7Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow7"
class="form-select speed-select"
>
<option {%if upcoming_games.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if upcoming_games.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if upcoming_games.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition7"
class="form-select animation-select"
>
<option {%if upcoming_games.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if upcoming_games.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if upcoming_games.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition63" class="col-form-label"
>Sport League:
</label>
</div>
<div class="col-auto">
<select id="inputTransition73" class="form-select">
<option>NFL</option>
<option>NBA</option>
<option>NHL</option>
<option>PREMIERLEAGUE</option>
<option>MLB</option>
<option>MLS</option>
<option>PGA</option>
<option>LPGA</option>
<option>PGA_EU</option>
<option>LIV</option>
<option>NASCAR</option>
<option>F1</option>
<option>UFC</option>
</select>
</div>
<div class="col-auto">
<button id="inputTransitionBtn73" class="btn set-btn">
Add
</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked21"
{%
if
upcoming_games.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="upcoming-games-features"
class="display-features-list text-white league-list"
>
{% for f in upcoming_games.leagues.keys() %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="upcoming-games-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="upcoming-games-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="upcoming-games-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Sports (Past games) -->
<div class="page" id="Page8" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed8Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed8"
class="form-select speed-select"
>
<option {%if past_games.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if past_games.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if past_games.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow8Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow8"
class="form-select speed-select"
>
<option {%if past_games.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if past_games.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if past_games.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition8"
class="form-select animation-select"
>
<option {%if past_games.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if past_games.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if past_games.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition83Z" class="col-form-label"
>Sport League:
</label>
</div>
<div class="col-auto">
<select id="inputTransition83" class="form-select">
<option>NFL</option>
<option>NBA</option>
<option>NHL</option>
<option>PREMIERLEAGUE</option>
<option>MLB</option>
<option>MLS</option>
<option>PGA</option>
<option>LPGA</option>
<option>PGA_EU</option>
<option>LIV</option>
<option>UFC</option>
</select>
</div>
<div class="col-auto">
<button id="inputTransitionBtn83" class="btn set-btn">
Add
</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked22"
{%
if
past_games.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="past-games-features"
class="display-features-list text-white league-list"
>
{% for f in past_games.leagues.keys() %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="past-games-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="past-games-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="past-games-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Sports (Live games) -->
<div class="page" id="Page9" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed9Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed9"
class="form-select speed-select"
>
<option {%if live_games.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if live_games.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if live_games.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow9Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow9"
class="form-select speed-select"
>
<option {%if live_games.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if live_games.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if live_games.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition9"
class="form-select animation-select"
>
<option {%if live_games.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if live_games.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if live_games.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition93Z" class="col-form-label"
>Sport League:
</label>
</div>
<div class="col-auto">
<select id="inputTransition93" class="form-select">
<option>NFL</option>
<option>NBA</option>
<option>NHL</option>
<option>PREMIERLEAGUE</option>
<option>MLB</option>
<option>MLS</option>
</select>
</div>
<div class="col-auto">
<button id="inputTransitionBtn93" class="btn set-btn">
Add
</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked23"
{%
if
live_games.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="live-games-features"
class="display-features-list text-white league-list"
>
{% for f in live_games.leagues.keys() %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="live-games-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="live-games-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="live-games-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Sports (Team Stats) -->
<div class="page" id="Page10" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed10Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed10"
class="form-select speed-select"
>
<option {%if team_stats.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if team_stats.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if team_stats.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow10Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow10"
class="form-select speed-select">
<option {%if team_stats.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if team_stats.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if team_stats.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition10"
class="form-select animation-select">
<option {%if team_stats.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if team_stats.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if team_stats.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition103Z" class="col-form-label"
>Sport League:
</label>
</div>
<div class="col-auto">
<select id="inputTransition103" class="form-select">
<option>NFL</option>
<option>NBA</option>
<option>NHL</option>
<option>PREMIERLEAGUE</option>
<option>MLB</option>
<option>MLS</option>
<option>PGA</option>
<option>LPGA</option>
</select>
</div>
<div class="col-auto">
<button id="inputTransitionBtn103" class="btn set-btn">
Add
</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition103Z" class="col-form-label"
>Golf Rankings:
</label>
</div>
<div class="col-auto">
<select id="golf-ranking-number" class="form-select">
<option {%if team_stats.top20 == 20 %} selected {% endif %}>Top 20</option>
<option {%if team_stats.top20 == 10 %} selected {% endif %}>Top 10</option>
</select>
</div>
<div class="col-auto">
<button id="golf-ranking-set" class="btn set-btn" onclick="setTop20()">
Set
</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked24"
{% if team_stats.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="team-stats-features"
class="display-features-list text-white league-list"
>
{% for f in team_stats.leagues.keys() %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="team-stats-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="team-stats-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="team-stats-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Movies -->
<div class="page" id="Page16" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeedZ22" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed22"
class="form-select speed-select"
>
<option {%if movie_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if movie_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if movie_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ22" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow16"
class="form-select speed-select"
>
<option {%if movie_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if movie_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if movie_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ22" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition22"
class="form-select animation-select"
>
<option {%if movie_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if movie_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if movie_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3" style="padding-bottom: 25px;">
<div class="col-auto">
<label for="inputTransition64Z" class="col-form-label"
>Category:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition64"
class="form-select category-select movie-categories"
>
<option {%if movie_settings.category == 'Popular All' %} selected {% endif %}>Popular All</option>
<option {%if movie_settings.category == 'Popular TV' %} selected {% endif %}>Popular TV</option>
<option {%if movie_settings.category == 'Popular Movies' %} selected {% endif %}>Popular Movies</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center left-div">
<div class="col-auto">
<label for="inputTransitionZ22" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked40"
{%
if
movie_settings.title%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">API Key: </label>
</div>
<div class="col-auto">
<input
type="text"
id="api-key-movie"
placeholder="Movies API Key"
class="form-control api-key"
aria-describedby="TextHelpInline"
value="{{ movie_api_key }}"
/>
</div>
<div class="col-auto">
<button id="movie-api-btn" class="btn set-btn" onClick="showMovieP()">Add</button>
</div>
<p id="movie-api-p" style="display: none">New movies API key detected, please restart the ticker in order for the feature to work properly.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="movies-features"
class="display-features-list text-white symbol-list"
>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="movies-increase-btn"
class="upbutton fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="movies-decrease-btn"
class="downbutton fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="movies-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Economic Calendar -->
<div class="page" id="Page18" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeedZ222" class="col-form-label">Scroll Speed:</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed18"
class="form-select speed-select">
<option {%if economic_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if economic_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if economic_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ222" class="col-form-label">Scroll Speed (Row 2):</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow18"
class="form-select speed-select">
<option {%if economic_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if economic_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if economic_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ222" class="col-form-label">Intro Transition:
</label>
</div>
<div class="col-auto">
<select id="inputTransition18" class="form-select animation-select">
<option {%if economic_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if economic_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if economic_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center left-div" style="padding-top: 25px;">
<div class="col-auto">
<label for="inputTransitionZ222" class="col-form-label">
Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="economic_settings_title"
{% if economic_settings.title%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">Countries: </label>
</div>
<div class="col-auto">
<select id="inputTransition2222" class="form-select economic-countries-select">
<option>United States</option><option>Canada</option><option>United Kingdom</option><option>China</option>
<option>Germany</option><option>France</option><option>Italy</option><option>Singapore</option><option>South Korea</option>
<option>Japan</option><option>Australia</option><option>New Zealand</option><option>India</option><option>Switzerland</option>
<option>Spain</option><option>Hong Kong</option><option>Portugal</option><option>Netherlands</option><option>Belgium</option>
<option>Austria</option><option>Denmark</option><option>Turkey</option><option>Brazil</option><option>Mexico</option>
<option>Sweden</option><option>Finland</option><option>Norway</option><option>Taiwan</option><option>Indonesia</option>
<option>Philippines</option><option>Thailand</option><option>South Africa</option>
</select>
</div>
<div class="col-auto">
<button id="economic-countries-btn" class="btn set-btn">Add</button>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">Importance: </label>
</div>
<div class="col-auto">
<select id="inputTransition2225" class="form-select economic-importance-select">
<option {%if economic_settings.importance == 'Low - High' %} selected {% endif %}>Low - High</option>
<option {%if economic_settings.importance == 'Med - High' %} selected {% endif %}>Med - High</option>
<option {%if economic_settings.importance == 'High' %} selected {% endif %}>High</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">Timezone: </label>
</div>
<div class="col-auto">
<select id="inputTransition22259" class="form-select economic-tz-select">
<option {%if economic_settings.timezone == 'US/Eastern' %} selected {% endif %}>US/Eastern</option>
<option {%if economic_settings.timezone == 'US/Central' %} selected {% endif %}>US/Central</option>
<option {%if economic_settings.timezone == 'US/Pacific' %} selected {% endif %}>US/Pacific</option>
<option {%if economic_settings.timezone == 'GMT' %} selected {% endif %}>GMT</option>
<option {%if economic_settings.timezone == 'CET' %} selected {% endif %}>CET</option>
<option {%if economic_settings.timezone == 'GB' %} selected {% endif %}>GB</option>
<option {%if economic_settings.timezone == 'NZ' %} selected {% endif %}>NZ</option>
<option {%if economic_settings.timezone == 'Australia/ACT' %} selected {% endif %}>Australia/ACT</option>
<option {%if economic_settings.timezone == 'Japan' %} selected {% endif %}>Japan</option>
<option {%if economic_settings.timezone == 'Asia/Singapore' %} selected {% endif %}>Asia/Singapore</option>
<option {%if economic_settings.timezone == 'Asia/Dubai' %} selected {% endif %}>Asia/Dubai</option>
</select>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="economic-list"
class="display-features-list text-white symbol-list"
>
{% for f in economic_settings.countries %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="economic-increase-btn"
class="upbutton fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="economic-decrease-btn"
class="downbutton fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>
<br />
<br />
<i
id="economic-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px">Remove</span>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- IPO Calendar -->
<div class="page" id="Page17" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeedZ222" class="col-form-label">Scroll Speed:</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed222"
class="form-select speed-select">
<option {%if ipo_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if ipo_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if ipo_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRowZ222" class="col-form-label">Scroll Speed (Row 2):</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow17"
class="form-select speed-select">
<option {%if ipo_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if ipo_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if ipo_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransitionZ222" class="col-form-label">Intro Transition:</label>
</div>
<div class="col-auto">
<select id="inputTransition222" class="form-select animation-select">
<option {%if ipo_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if ipo_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if ipo_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center left-div" style="padding-top: 25px;">
<div class="col-auto">
<label for="inputTransitionZ222" class="col-form-label">
Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked41"
{% if ipo_settings.title%}
checked
{%endif%}
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText" class="col-form-label">API Key: </label>
</div>
<div class="col-auto">
<input
type="text"
id="api-key-ipo"
placeholder="IPO Calendar API Key"
class="form-control api-key"
aria-describedby="TextHelpInline"
value="{{ ipo_api_key }}"/>
</div>
<div class="col-auto">
<button id="ipo-api-btn" class="btn set-btn" onClick="showIpoP()">Add</button>
</div>
<p id="ipo-api-p" style="display: none">New IPO Calendar API key detected, please restart the ticker in order for the feature to work properly.</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul id="ipo-features" class="display-features-list text-white symbol-list">
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i id="ipo-increase-btn"
class="upbutton fa fa-chevron-up"
aria-hidden="true"></i>
<br />
<br />
<i id="ipo-decrease-btn"
class="downbutton fa fa-chevron-down"
aria-hidden="true"></i>
<a style="position: relative; bottom: 30px; left: 10px">Sort Order</a>
<br />
<br />
<i id="ipo-remove-btn"
class="fa fa-minus"
aria-hidden="true"></i>
<span style="position: relative; bottom: 0; left: 10px">Remove</span>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Custom Images -->
<div class="page" id="Page11" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputText" class="col-form-label"
>Image File:
</label>
</div>
<div class="col-auto">
<input
type="file"
id="inputText11"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="Browse"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn11" class="btn set-btn">Add</button>
</div>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed11Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed11"
class="form-select speed-select"
>
<option {%if image_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if image_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if image_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow11Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow11"
class="form-select speed-select"
>
<option {%if image_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if image_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if image_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition11Z" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition11"
class="form-select animation-select"
>
<option {%if image_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if image_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if image_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Pause on screen (Seconds)
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText12"
class="form-control pause-select"
aria-describedby="TextHelpInline"
value="{{image_settings.pause}}"
/>
</div>
<!--
<div class="col-auto">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked26"
checked
/>
</div>
-->
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
id="flexCheckChecked25"
{%
if
image_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="images-features"
class="display-features-list text-white image-list"
>
{% for f in image_settings.images %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="images-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="images-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="images-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Custom GIFs -->
<div class="page" id="Page12" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputText" class="col-form-label"
>GIF File:
</label>
</div>
<div class="col-auto">
<input
type="file"
id="inputText1112"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="Browse"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn1112" class="btn set-btn">
Add
</button>
</div>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed12Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed12"
class="form-select speed-select"
>
<option {%if GIF_settings.speed == 'medium' %} selected {% endif %}>Medium</option>
<option {%if GIF_settings.speed == 'slow' %} selected {% endif %}>Slow</option>
<option {%if GIF_settings.speed == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow12Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow12"
class="form-select speed-select"
>
<option {%if GIF_settings.speed2 == 'medium' %} selected {% endif %}>Medium</option>
<option {%if GIF_settings.speed2 == 'slow' %} selected {% endif %}>Slow</option>
<option {%if GIF_settings.speed2 == 'fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition11" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition12"
class="form-select animation-select"
>
<option {%if GIF_settings.animation == 'down' %} selected {% endif %}>Down</option>
<option {%if GIF_settings.animation == 'up' %} selected {% endif %}>Up</option>
<option {%if GIF_settings.animation == 'continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Pause on screen (Seconds)
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText112"
class="form-control pause-select"
aria-describedby="TextHelpInline"
value="{{GIF_settings.pause}}"
/>
</div>
<!--
<div class="col-auto">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckChecked27"
checked
/>
</div>
-->
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked28"
{%
if
GIF_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="gifs-features"
class="display-features-list text-white image-list"
>
{% for f in GIF_settings.images %}
<li>{{f}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="gifs-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="gifs-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="gifs-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
<!-- Custom Messages -->
<div class="page" id="Page13" style="display: none">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputText" class="col-form-label"
>Message Name:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText13"
class="form-control"
aria-describedby="TextHelpInline"
placeholder="Message Title"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn13" class="btn set-btn" onclick="customMsgValidate()">Add</button>
</div>
<p id="demo4" style="display: none"></p>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed13Z" class="col-form-label"
>Scroll Speed:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed13"
class="form-select speed-select"
>
<option {%if message_settings.speed == 'Medium' %} selected {% endif %}>Medium</option>
<option {%if message_settings.speed == 'Slow' %} selected {% endif %}>Slow</option>
<option {%if message_settings.speed == 'Fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<div class="col-auto">
<label for="inputScrollSpeedRow13Z" class="col-form-label"
>Scroll Speed (Row 2):
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeedRow13"
class="form-select speed-select"
>
<option {%if message_settings.speed2 == 'Medium' %} selected {% endif %}>Medium</option>
<option {%if message_settings.speed2 == 'Slow' %} selected {% endif %}>Slow</option>
<option {%if message_settings.speed2 == 'Fast' %} selected {% endif %}>Fast</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition13Z" class="col-form-label"
>Intro Transition:
</label>
</div>
<div class="col-auto">
<select
id="inputTransition13"
class="form-select animation-select"
>
<option {%if message_settings.animation == 'Down' %} selected {% endif %}>Down</option>
<option {%if message_settings.animation == 'Up' %} selected {% endif %}>Up</option>
<option {%if message_settings.animation == 'Continuous' %} selected {% endif %}>Continuous</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText14Z" class="col-form-label"
>Message:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText14"
class="form-control message-input"
aria-describedby="TextHelpInline"
placeholder="Custom Message"
/>
</div>
<p id="demo5" style="display: none"></p>
</div>
<!--
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputText15" class="col-form-label"
>Optional Message (row 2):
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText15"
class="form-control"
aria-describedby="TextHelpInline"
/>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed14" class="col-form-label"
>Border Color:
</label>
</div>
<div class="col-auto">
<select id="inputScrollSpeed14" class="form-select">
<option>Rainbow</option>
<option></option>
<option></option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed15" class="col-form-label"
>Border:
</label>
</div>
<div class="col-auto">
<select id="inputScrollSpeed15" class="form-select">
<option>Dotted</option>
<option></option>
<option></option>
</select>
</div>
</div>
-->
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed16Z" class="col-form-label"
>Text Color:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed16"
class="form-select text-colour"
>
<option>Black</option>
<option>White</option>
<option>Red</option>
<option>Green</option>
<option>Dark Green</option>
<option>Blue</option>
<option>Purple</option>
<option>Pink</option>
<option>Yellow</option>
<option>Orange</option>
<option>Gold</option>
<option>Gray</option>
<option>Cyan</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed17Z" class="col-form-label"
>Text Size:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed17"
class="form-select text-size"
>
<option>Large</option>
<option>Medium</option>
<option>Small</option>
</select>
</div>
</div>
<!--
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed18" class="col-form-label"
>Font:
</label>
</div>
<div class="col-auto">
<select id="inputScrollSpeed18" class="form-select">
<option>Arial</option>
<option></option>
<option></option>
</select>
</div>
</div>
-->
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed19Z" class="col-form-label"
>Background Color:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed19"
class="form-select back-colour"
>
<option>Black</option>
<option>White</option>
<option>Red</option>
<option>Green</option>
<option>Dark Green</option>
<option>Blue</option>
<option>Purple</option>
<option>Pink</option>
<option>Yellow</option>
<option>Orange</option>
<option>Gold</option>
<option>Gray</option>
<option>Cyan</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3" style="margin-left: 15%;">
<div class="col-auto">
<button id="updatemsgbtn" class="btn set-btn" onclick="updateSelectedMsg()">Update Msg</button>
</div>
</div>
<div id="updated-message-p" style="display:none"><p id="msgupdated-p" style="color: red;">Message Updated!</p></div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputTransition" class="col-form-label"
>Display Feature Title
</label>
</div>
<div class="col-auto">
<input
class="form-check-input title-select"
type="checkbox"
value=""
id="flexCheckChecked29"
{%
if
message_settings.title%}
checked
{%endif%}
/>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="mt-3">List:</h6>
<div class="features-div-two">
<ul
id="messages-features"
class="display-features-list text-white message-list"
>
{%for f in message_settings.messages %}
<li onclick="getCustomMsg(this.innerText)">{{f.name}}</li>
{% endfor%}
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<div class="icons-list">
<i
id="messages-increase-btn"
class="fa fa-chevron-up"
aria-hidden="true"
></i>
<br />
<br />
<i
id="messages-decrease-btn"
class="fa fa-chevron-down"
aria-hidden="true"
></i>
<a style="position: relative; bottom: 30px; left: 10px"
>Sort Order</a
>
<br />
<br />
<i
id="messages-remove-btn"
class="fa fa-minus"
aria-hidden="true"
></i>
<span style="position: relative; bottom: 0; left: 10px"
>Remove</span
>
</div>
</div>
</div>
<div class="save-btn-div">
<a href="#" class="btn save-btn">Save</a>
</div>
</div>
</div>
</section>
<div class="row-2"></div>
<section class="stocks-features text-white row-3">
<div
class="mx-auto my-5 d-flex align-items-center position-relative"
style="width: fit-content"
>
<div class="mr-5">
<div class="mx-auto row g-3 align-items-center mb-2">
<div class="col-auto">
<label
for="wifi-ssid-inputZ"
class="col-form-label text-right w-115-px"
>Wi-Fi SSID:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="wifi-ssid-input"
class="form-control"
placeholder="Wi-Fi SSID"
aria-describedby="TextHelpInline"
value="{{ wifi_SSID }}"
/>
</div>
</div>
<div class="mx-auto row g-3 align-items-center mt-2">
<div class="col-auto">
<label
for="wi-fi-pass-input"
class="col-form-label text-right w-115-px"
>Wi-Fi password:
</label>
</div>
<div class="col-auto">
<input
type="password"
id="wifi-pass-input"
placeholder="Wi-Fi password"
class="form-control"
aria-describedby="TextHelpInline"
value="{{ wifi_PSK }}"
/>
</div>
</div>
<input type="checkbox" class="form-check-input pass-toggle" onclick="togglePass()"> Show Password
<div class="mx-auto row g-3 align-items-center mt-2">
<div class="col-auto">
<label
for="country-code-inputZ"
class="col-form-label text-right w-115-px"
>Two Letter Country Code:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="country-code-input"
placeholder="2 Letter Country Code"
class="form-control"
aria-describedby="TextHelpInline"
value={{ general_settings.country_code }}
/>
</div>
</div>
<div>
</div>
</div>
<button class="btn set-btn" id="join-network-btn" onClick=showDivTwo()>
Join Network
</button>
<div id="network-status" style="padding-left:2%;padding-right:2%"></div>
<div class="status rounded-circle" id="circle-1" style="display:none"></div>
<div class="status rounded-circle" id="circle-2" style="display:none"></div>
<div class="status rounded-circle" id="circle-3" style="display:none"></div>
</div>
</section>
<svg class="svg--source" width="0" height="0" aria-hidden="true">
<symbol id="svg--twitter" viewbox="0 -7 15 30">
<path d="M15.36 3.434c-0.542 0.241-1.124 0.402-1.735 0.476 0.624-0.374 1.103-0.966 1.328-1.67-0.583 0.346-1.23 0.598-1.917 0.733-0.551-0.587-1.336-0.954-2.205-0.954-1.668 0-3.020 1.352-3.020 3.019 0 0.237 0.026 0.467 0.078 0.688-2.51-0.126-4.735-1.328-6.224-3.155-0.261 0.446-0.41 0.965-0.41 1.518 0 1.048 0.534 1.972 1.344 2.514-0.495-0.016-0.961-0.151-1.368-0.378 0 0.013 0 0.025 0 0.038 0 1.463 1.042 2.683 2.422 2.962-0.253 0.069-0.52 0.106-0.796 0.106-0.194 0-0.383-0.018-0.568-0.054 0.384 1.2 1.5 2.073 2.821 2.097-1.034 0.81-2.335 1.293-3.75 1.293-0.244 0-0.484-0.014-0.72-0.042 1.336 0.857 2.923 1.357 4.63 1.357 5.554 0 8.592-4.602 8.592-8.593 0-0.13-0.002-0.261-0.009-0.39 0.59-0.426 1.102-0.958 1.507-1.563z"
/>
</symbol>
<symbol id="svg--trello" viewBox="-150 0 748 512">
<path d="M392.3 32H56.1C25.1 32 0 57.1 0 88c-.1 0 0-4 0 336 0 30.9 25.1 56 56 56h336.2c30.8-.2 55.7-25.2 55.7-56V88c.1-30.8-24.8-55.8-55.6-56zM197 371.3c-.2 14.7-12.1 26.6-26.9 26.6H87.4c-14.8.1-26.9-11.8-27-26.6V117.1c0-14.8 12-26.9 26.9-26.9h82.9c14.8 0 26.9 12 26.9 26.9v254.2zm193.1-112c0 14.8-12 26.9-26.9 26.9h-81c-14.8 0-26.9-12-26.9-26.9V117.2c0-14.8 12-26.9 26.8-26.9h81.1c14.8 0 26.9 12 26.9 26.9v142.1z"/></symbol>
<symbol id="svg--discord" viewBox="-100 0 840 512">
<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/>
</symbol>
<symbol id="svg--facebook" viewbox="0 -7 16 30">
<path d="M12 3.303h-2.285c-0.27 0-0.572 0.355-0.572 0.831v1.65h2.857v2.352h-2.857v7.064h-2.698v-7.063h-2.446v-2.353h2.446v-1.384c0-1.985 1.378-3.6 3.269-3.6h2.286v2.503z" />
</symbol>
<symbol id="svg--instagram" viewBox="-150 0 748 512">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
</symbol>
<symbol id="svg--reddit" viewBox="-100 0 712 512">
<path d="M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z"/>
</symbol>
<symbol id="svg--youtube" viewbox="-150 -150 800 800">
<path d="M459,61.2C443.7,56.1,349.35,51,255,51c-94.35,0-188.7,5.1-204,10.2C10.2,73.95,0,163.2,0,255s10.2,181.05,51,193.8
C66.3,453.9,160.65,459,255,459c94.35,0,188.7-5.1,204-10.2c40.8-12.75,51-102,51-193.8S499.8,73.95,459,61.2z M204,369.75v-229.5
L357,255L204,369.75z" />
</symbol>
</svg>
<div class="wrapper">
<div class="connect">
<a href="https://twitter.com/Finticofficial" target="_blank" class="share twitter">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--twitter" />
</svg>
<span class="clip">TWITTER</span>
</a>
<a href="https://www.instagram.com/fintic.io/" target="_blank" class="share instagram">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--instagram" />
<span class="clip">INSTAGRAM</span>
</svg>
</a>
<a href="https://www.youtube.com/channel/UCTHJ3rnZn0O-P7dtk_WGCxg" target="_blank" class="share youtube">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--youtube" />
<span class="clip">YOU-TUBE</span>
</svg>
</a>
<a href="https://www.facebook.com/fintic.io" target="_blank" rel="author" class="share facebook">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--facebook" />
<span class="clip">FACEBOOK</span>
</svg>
</a>
<a href="https://discord.gg/tdwN3QfrM2" target="_blank" rel="author" class="share discord">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--discord" />
<span class="clip">DISCORD</span>
</svg>
</a>
<a href="https://www.reddit.com/r/fintic/" target="_blank" class="share reddit">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--reddit" />
<span class="clip">REDDIT</span>
</svg>
</a>
<a href="https://trello.com/b/EkQQnA9d/fintic-official-dev-board" target="_blank" class="share trello">
<svg role="presentation" class="svg--icon">
<use xlink:href="#svg--trello" />
<span class="clip">TRELLO</span>
</svg>
</a>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<p>&copy; 2020-2023 Fintic Limited., All Rights Reserved. <a href="mailto:info@fintic.io" id="footerlinks">Contact Us.</a></p>
<p>Data Provided by TradingView, IEX Cloud, Open-Meteo, CoinGecko, Exchangerate-API, TheSportsDB, Google News, <br>Yahoo Finance, ESPN, The Movie DB, Finnhub, Sv443 (JokeAPI)</p>
<p>Useful resources: <a href="https://www.youtube.com/playlist?list=PLf8pW0bNjnebNZh3y0AsY18sxJj6IhAsv" id="footerlinks" target="_blank">YouTube Tutorials</a> , <a href="https://docs.google.com/spreadsheets/d/1IZkEl49j97xvG8jcEdWc5XdOLOUb_-ZLVHle2vezWCc/edit?usp=sharing" id="footerlinks" target="_blank">Formatting Guide & Info</a> , <a href="https://fintic.io" id="footerlinks" target="_blank">Official Website</a></p>
<p><br>DISCLAIMER: None of our products and services serve as financial advice, and we do not qualify as investment advisors. <br>Since data can be delayed, information may not always be accurate and should not be taken as any advice.</p>
</footer>
</div>
<script src="{{ url_for('static', filename='js/jquery-2.1.1.js') }}"></script>
<!-- <script src="{{ url_for('static', filename='app.js') }}"></script>. ALWAYS CHANGE VERSIONING WHENEVER CHANGES ARE MADE TO AVOID BAD CACHING -->
<script type='text/javascript' src='../static/app.js?ver=1.3.7'></script>
<script>
$("#drop").on("change", function () {
var value = $(this).val();
if (value) {
$(".page").hide();
$("#Page" + value).show();
}
});
// check / uncheck category and country checkboxes
$('.news_check_class').on('change', function() {
$('.news_check_class').not(this).prop('checked', false);
});
setInterval(async () => {
// const result = await checkOnlineStatus();
const statusDisplay = $("#network-status");
var result;
// try to send a request to some server
try {
const online = await fetch("http://api.openweathermap.org/data");
console.log(online.status);
if ((online.status >= 200 && online.status < 300) || online.status === 401) {
statusDisplay.text("Connected");
$('#circle-1').show();
$('#circle-2').hide();
$('#circle-3').hide();
} // either true or false
else {
statusDisplay.text("Connected but No Internet");
$('#circle-1').hide();
$('#circle-2').hide();
$('#circle-3').show();
}
} catch (err) {
statusDisplay.text("Offline"); // definitely offline
$('#circle-1').hide();
$('#circle-2').show();
$('#circle-3').hide();
}
}, 10000);
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink