<!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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Celsius</option> <option>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>Miles/hour</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Celsius</option> <option>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>Miles/hour</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>United States</option> <option>Australia</option> <option>Canada</option> <option>Great Britain</option> <option>New Zealand</option> <option>Ireland</option> <option>Singapore</option> <option>South Africa</option> <option>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" /> </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>General</option> <option>Business</option> <option>Entertainment</option> <option>Health</option> <option>Science</option> <option>Sports</option> <option>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" /> </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>10</option> <option>15</option> <option>20</option> <option>25</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>Medium</option> <option>Slow</option> <option>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>Medium</option> <option>Slow</option> <option>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>Down</option> <option>Up</option> <option>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>© 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>