<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NTSH Control</title>

    <link rel="stylesheet" href="/material-symbols/index.css">
    <link rel="stylesheet" href="./style.css">
    <script defer src="./script.js" defer></script>

    <link rel="icon" type="image/png" sizes="32x32" href="/img/cloud_thick.png">
</head>

<body>
    <div class="ntsh">
        <div class="ntsh-wrapper">
            <div class="ntsh-inlay">
                <div class="ntsh-topbar">
                    <div class="ntsh_menubar">
                        <div class="ntsh_menubar-item selected" tabid="home">
                            HOME
                        </div>
                        <div class="ntsh_menubar-item" tabid="advanced">
                            ADVANCED
                        </div>
                    </div>
                    <img src="/img/logo.png">

                    <div class="ntsh-separator"></div>
                </div>

                <div class="ntsh_tabs">
                    <div class="ntsh_tab visible" tabid="home">
                        <h2>1. SYSTEM CHECKLIST</h2>
                        <h3>
                            Check if all lights are green.
                            <br>
                            If not? Reboot!
                        </h3>

                        <div class="ntsh-checklist">
                            <div class="ntsh-checklist-row" status="CAMERAPC">
                                <div class="ntsh-checklist-row-status"></div>

                                <div class="ntsh-checklist-row-text">
                                    <h4>CAMERA PC</h4>
                                    <p>Status...</p>
                                </div>

                                <div class="ntsh-checklist-row-buttons">
                                    <div class="ntsh-checklist-row-button start">
                                        START
                                    </div>
                                    <div class="ntsh-checklist-row-button stop">
                                        STOP
                                    </div>
                                    <div class="ntsh-checklist-row-button reboot">
                                        REBOOT
                                    </div>
                                </div>
                            </div>

                            <div class="ntsh-checklist-row" status="CAMERAPROCESS">
                                <div class="ntsh-checklist-row-status"></div>

                                <div class="ntsh-checklist-row-text">
                                    <h4>CAMERA PROCESS</h4>
                                    <p>Status...</p>
                                </div>

                                <div class="ntsh-checklist-row-buttons">
                                    <div class="ntsh-checklist-row-button start">
                                        START
                                    </div>
                                    <div class="ntsh-checklist-row-button stop">
                                        STOP
                                    </div>
                                    <div class="ntsh-checklist-row-button reboot">
                                        REBOOT
                                    </div>
                                </div>
                            </div>

                            <div class="ntsh-checklist-row" status="CAMERAUNITYSTREAM">
                                <div class="ntsh-checklist-row-status"></div>

                                <div class="ntsh-checklist-row-text">
                                    <h4>CAMERA/UNITY STREAM</h4>
                                    <p>Status...</p>
                                </div>

                                <div class="ntsh-checklist-row-buttons">
                                    <div class="ntsh-checklist-row-button start">
                                        START
                                    </div>
                                    <div class="ntsh-checklist-row-button stop">
                                        STOP
                                    </div>
                                    <div class="ntsh-checklist-row-button reboot">
                                        REBOOT
                                    </div>
                                </div>
                            </div>

                            <div class="ntsh-checklist-row" status="UNITYBUILD">
                                <div class="ntsh-checklist-row-status"></div>

                                <div class="ntsh-checklist-row-text">
                                    <h4>UNITY BUILD</h4>
                                    <p>Status...</p>
                                </div>

                                <div class="ntsh-checklist-row-buttons">
                                    <div class="ntsh-checklist-row-button start">
                                        START
                                    </div>
                                    <div class="ntsh-checklist-row-button stop">
                                        STOP
                                    </div>
                                    <div class="ntsh-checklist-row-button reboot">
                                        REBOOT
                                    </div>
                                </div>
                            </div>

                            <div class="ntsh-checklist-row" status="REPLAYFUNCTION">
                                <div class="ntsh-checklist-row-status"></div>

                                <div class="ntsh-checklist-row-text">
                                    <h4>REPLAY FUNCTION</h4>
                                    <p>Status...</p>
                                </div>

                                <div class="ntsh-checklist-row-buttons">
                                    <div class="ntsh-checklist-row-button start">
                                        START
                                    </div>
                                    <div class="ntsh-checklist-row-button stop">
                                        STOP
                                    </div>
                                    <div class="ntsh-checklist-row-button reboot">
                                        REBOOT
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ntsh-fullreboot">
                            <div class="ntsh-fullreboot-button">
                                FULL REBOOT
                            </div>
                        </div>

                        <div class="ntsh-support">
                            <p>If reboot doesn't help:</p>
                            <img src="/img/call.png">
                        </div>

                        <div class="ntsh-separator"></div>
                        <h2>2. CALIBRATION CHECK</h2>
                        <h3>
                            Look if the top plate of the installation precisely aligns with the pink rectangle.
                            <br>
                            If not? Reposition the physical installation.
                        </h3>

                        <div class="ntsh-calibration">
                            <img class="stream" src="/calibrationImage">
                            <img class="mask" src="/img/calibrationMask.png">
                        </div>

                        <h1 style="margin-bottom:30px;">Thank you for checking! :)</h1>
                    </div>

                    <div class="ntsh_tab" tabid="advanced">
                        <h2>OUT OF SERVICE MODE</h2>
                        <h3>Display the 'out of service' message and mute the sound.</h3>
                        <div class="ntsh-outofservicemode">
                            <h4>OUT OF SERVICE MODE</h4>

                            <label class="switch">
                                <input type="checkbox" class="ntsh-outofservicemode-input">
                                <span class="slider round"></span>
                            </label>
                        </div>

                        <div class="ntsh-separator"></div>

                        <h2>SET TIMER</h2>
                        <h3>Please set timer in order to schedule the daily reboot.</h3>
                        <br>
                        <h3>Advise: fill in 30 minutes before opening and 30 minutes after closing of exhibition.</h3>

                        <div class="ntsh-timer">
                            <div class="ntsh-timer-row">
                                <h4>Start up</h4>

                                <input type="time" class="ntsh-timer-startup">
                            </div>
                            <div class="ntsh-timer-row">
                                <h4>Shut down</h4>

                                <input type="time" class="ntsh-timer-shutdown">
                            </div>
                        </div>

                        <div class="ntsh-separator"></div>

                        <h2>COLOR SETTINGS</h2>
                        <h3>If lighting at the exhibition location changes during the day (for example in daylight)</h3>

                        <div class="ntsh-autolighting">
                            <h4>AUTO LIGHTING</h4>

                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
                        </div>
                        <div class="ntsh_lightingsettings-container">
                            <h3>FIXED LIGHTING SETTINGS</h3>
                            <div class="ntsh_lightingsettings">
                                <div class="ntsh_lightingsettings-row">
                                    <h4>Gain</h4>

                                    <input class="ntsh_lightingsettings-gain" type="range" min="0" max="100" value="0">
                                </div>
                                <div class="ntsh_lightingsettings-row">
                                    <h4>Exposure</h4>

                                    <input class="ntsh_lightingsettings-exposure" type="range" min="0" max="100"
                                        value="0">
                                </div>
                                <div class="ntsh_lightingsettings-row">
                                    <h4>White Balance</h4>

                                    <input class="ntsh_lightingsettings-whitebalance" type="range" min="26" max="65"
                                        value="0">
                                </div>
                            </div>
                        </div>

                        <div class="ntsh-separator"></div>

                        <h2>SOUND SETTINGS</h2>
                        <h3>Adjust sound settings according to acoustics of location. (Take in account changes during
                            the
                            day and adjust to an average.)</h3>

                        <div class="ntsh_soundsettings">
                            <div class="ntsh_soundsettings-row">
                                <h4>Volume</h4>

                                <input class="ntsh_soundsettings-volume" type="range" min="0" max="1" value="0"
                                    step="0.01">
                            </div>
                            <div class="ntsh_soundsettings-row">
                                <h4>EQ low</h4>

                                <input class="ntsh_soundsettings-eqlow" type="range" min="0" max="1" value="0"
                                    step="0.01">
                            </div>
                            <div class="ntsh_soundsettings-row">
                                <h4>EQ mid</h4>

                                <input class="ntsh_soundsettings-eqmid" type="range" min="0" max="1" value="0"
                                    step="0.01">
                            </div>
                            <div class="ntsh_soundsettings-row">
                                <h4>EQ high</h4>

                                <input class="ntsh_soundsettings-eqhigh" type="range" min="0" max="1" value="0"
                                    step="0.01">
                            </div>
                        </div>

                        <div class="ntsh_soundsettings-resetcontainer">
                            <div class="ntsh_soundsettings-reset">
                                RESET
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>