fintic-tracker/templates/index.html
2022-03-08 15:03:02 +08:00

6309 lines
131 KiB
HTML

<!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</title>
<!-- 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" />
</head>
<body>
<div class="container">
<!-- Top logo bar -->
<!-- Top logo bar -->
<nav class="navbar navbar-light justify-content-end" style="border-bottom:2px solid white">
<div class="container">
<a class="navbar-brand" href="#">
<img src="{{ url_for('static', filename='images/logo_white.png') }}" class="logo" alt="logo" /><p class="text-white">Version 1.0</p>
</a>
<div class="hostname-text">
<p>
Hostname: <span id="host-name">{{ general_settings.hostname }}</span>.local
</p>
</div>
<div class="">
<button id="update-btn" class="btn btn-secondary">
{% if system_info.update_available %}
Update available!
{%else%}
Up to date
{%endif%}
</button>
</div>
</div>
</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">
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 text-white">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 -->
<!-- Ticker Form -->
<!-- First Row -->
<div class="ticker-form" style="padding-top:3%; padding-bottom:2%;border-bottom:2px 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-input" 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 btn-secondary" 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="inputAnimation" class="col-form-label">Screensaver animation:
</label>
</div><br/><br/>
<div class="col-auto">
<select id="inputAnimation" class="form-select">
<option>Pulsating Colors</option>
<!--<option>Rotating Square</option>-->
<option>Pulsating brightness</option>
<!--<option>Game of Life</option>-->
<option>Sleep</option>
</select>
</div>
<div class="col-auto" id="input-animation-btn">
<button class="btn btn-secondary">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-input" 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 btn-secondary" 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="inputDisplayFormat" class="col-form-label">Ticker Display Format:
</label>
</div><br/><br/>
<div class="col-auto">
<select id="inputDisplayFormat" class="form-select">
<option>Standard Scrolling</option>
<option>Professional two rows</option>
</select>
</div>
<div class="col-auto" id="input-animation-btn">
<button class="btn btn-secondary" 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%">
<h3 class="text-white">Features to Display:</h3>
<p>
Selected Display format:
<span class="font-6" id="selected-display-text"></span>
</p>
</div>
</div><br>
<!-- Features List First Row -->
<div class="row" style="border-bottom:2px solid white; padding:2%">
<!-- Available Features Column -->
<div class="col-lg-4 col-md-4 col-sm-12 ">
<div class="row">
<h4 id="top-row-text" style="display:none">Top row</h4>
<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-dark">
{% 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-list">
<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-dark">
{% 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">
<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>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:2px 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-dark">
<li>Stocks</li>
<li>Crypto</li>
<li>Forex</li>
<li>Current Weather</li>
<li>Daily Forecast</li>
<li>News</li>
<li>Custom Images</li>
<li>Custom Messages</li>
<li>Cstom Gifs</li>
<li>Sports (Upcoming Games)</li>
<li>Sports (Live Games)</li>
<li>Sports (Past Games)</li>
<li>Sports (Team Stats)</li>
</ul>
</div>
</div>
<!-- End Features Column -->
<div class="col-lg-2 col-md-2 col-sm-2 align-self-center">
<div class="icon-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-dark">
{%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="icon">
<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%">
<h4 class="pt-3">What to display in each feature:</h4>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<label for="drop" 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="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>
</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="inputScrollSpeed" 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="inputScrollSpeedRow" 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="inputTransition" 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="inputText" class="col-form-label"
>Stock Symbol:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText3"
class="form-control"
aria-describedby="TextHelpInline"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn3" class="btn set-btn">Add</button>
</div>
</div>
<div id="limit-msg">
</div>
<div class="row g-3 align-items-center mt-3 left-div">
<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="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="inputTransition" 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="inputTransition" 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="inputTransition" class="col-form-label"
>Display Intraday Chart
</label>
</div>
<div class="col-auto">
<input
class="form-check-input chart-select"
type="checkbox"
value=""
id="flexCheckChecked4"
{%
if
stocks_settings.chart%}
checked
{%endif%}
/>
</div>
</div> -->
<div class="row g-3 align-items-center left-div">
<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="flexCheckChecked5"
{%
if
stocks_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="stocks-features"
class="display-features-list text-dark symbol-list"
>
{% for f in stocks_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="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="inputScrollSpeed2" 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="inputScrollSpeedRow2" 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="inputTransition" 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="inputText" class="col-form-label"
>Crypto Symbol Currency:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText4"
class="form-control"
aria-describedby="TextHelpInline"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn4" 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="inputTransition" 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="inputTransition" 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="inputTransition" 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="inputTransition" class="col-form-label"
>Display Intraday Chart
</label>
</div>
<div class="col-auto">
<input
class="form-check-input chart-select"
type="checkbox"
value=""
id="flexCheckChecked9"
{%
if
crypto_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="flexCheckChecked10"
{%
if
crypto_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="crypto-features"
class="display-features-list text-dark symbol-list"
>
{% for f in crypto_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="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>
<!-- 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="inputScrollSpeed3" 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="inputScrollSpeedRow3" 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"
>Currency,Base:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText5"
class="form-control"
aria-describedby="TextHelpInline"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn5" 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="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-dark 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="inputScrollSpeed4" 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="inputScrollSpeedRow4" 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"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn6" 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="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>
<option></option>
<option></option>
<option></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"
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">Add</button>
</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="current-weather-features"
class="display-features-list text-dark 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="inputScrollSpeed5" 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="inputScrollSpeedRow5" 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"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn7" 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="inputScrollSpeed52" 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="inputTransition52" 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>
<option></option>
<option></option>
<option></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"
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="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"
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">Add</button> -->
</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-dark 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="inputScrollSpeed6" 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="inputScrollSpeedRow6" 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="inputScrollSpeed62" class="col-form-label"
>Country:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed62"
class="form-select country-select"
>
<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 == 'Worldwide' %} selected {% endif %}>Worldwide</option>
</select>
</div>
<div class="col-auto">
<input
class="form-check-input title-select 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="inputTransition62" 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 title-select 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="inputTransition62" 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-dark 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="inputScrollSpeed7" 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="inputScrollSpeedRow7" 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>
</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-dark 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="inputScrollSpeed8" 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="inputScrollSpeedRow8" 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="inputTransition83" 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>
</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-dark 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="inputScrollSpeed9" 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="inputScrollSpeedRow9" 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="inputTransition93" 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>
</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-dark 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="inputScrollSpeed10" 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="inputScrollSpeedRow10" 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="inputTransition103" 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>
</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="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-dark 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>
<!-- 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="inputScrollSpeed11" 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="inputScrollSpeedRow11" 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="inputTransition11" 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-dark 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="inputScrollSpeed12" 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="inputScrollSpeedRow12" 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-dark 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="Custom Message"
/>
</div>
<div class="col-auto">
<button id="inputTextBtn13" 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="inputScrollSpeed13" 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="inputScrollSpeedRow13" 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="inputTransition13" 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="inputText14" class="col-form-label"
>Message:
</label>
</div>
<div class="col-auto">
<input
type="text"
id="inputText14"
class="form-control message-input"
aria-describedby="TextHelpInline"
/>
</div>
</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="inputScrollSpeed16" class="col-form-label"
>Text Color:
</label>
</div>
<div class="col-auto">
<select
id="inputScrollSpeed16"
class="form-select text-colour"
>
<option>White</option>
<option>Black</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Purple</option>
<option>Yellow</option>
<option>Cyan</option>
</select>
</div>
</div>
<div class="row g-3 align-items-center mt-3">
<div class="col-auto">
<label for="inputScrollSpeed17" 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="inputScrollSpeed19" 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>Blue</option>
<option>Purple</option>
<option>Yellow</option>
<option>Cyan</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="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-dark message-list"
>
{%for f in message_settings.messages %}
<li>{{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-input"
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"
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"
class="form-control"
aria-describedby="TextHelpInline"
/>
</div>
</div>
<div class="mx-auto row g-3 align-items-center mt-2">
<div class="col-auto">
<label
for="country-code-input"
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"
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">
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>
<!-- Footer -->
<footer class="footer">
<p>&copy; 2022 Fintic All Rights Reserved</p>
<p>Data Provided by IEX Cloud, Openweathermap, CoinGecko,</p>
<p>Exchangerate-API, TheSportsDB, Commodities-API, NewsAPI</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>
<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("https://static-global-s-msn-com.akamaized.net/hp-neu/sc/2b/a5ea21.ico?d="+Date.now());
console.log(online.status);
if (online.status >= 200 && online.status < 300){
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();
}
}, 3000);
</script>
</body>
</html>