index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Freakylay</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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"/>

    <meta name="og:site_name" content="Freakylay">
    <meta name="og:title" content="Freakylay - stream overlay for multiple games">
    <meta name="title" content="Freakylay - stream overlay for multiple games">
    <meta name="og:description" content="An easy to use and customizable overlay with many features like colors, circular bars and many more.">
    <meta name="description" content="An easy to use and customizable overlay with many features like colors, circular bars and many more.">
    <meta name="og:image" content="http://u.unskilledfreak.zone/overlay/freakylay/beta/img/Freakylay.png">

    <link rel="stylesheet" type="text/css" href="css/freakylay.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.css">

    <link rel="icon" href="img/favicon.png">

    <script src="freakylay.js"></script>
</head>
<body>
<div id="songInfo">
    <div class="textBottom">
        <div class="previousBSRWrapper" id="previousBSR">
            <div class="line" id="previousBSRLabel">PREVIOUS BSR</div>
        </div>
        <div id="beatMapCover">
            <div id="cover"></div>
        </div>
        <div id="infoText">
            <div id="bsr" class="line borderRadius">BSR</div>
            <div id="mapper" class="line borderRadius">MAPPER</div>
            <div id="difficulty" class="marqueeBody line">
                <div class="marquee" id="marqueeDifficulty">DIFFICULTY</div>
            </div>
            <div id="artist" class="marqueeBody line">
                <div class="marquee" id="marqueeSongArtist">ARTIST</div>
            </div>
            <div id="mapName" class="marqueeBody line">
                <div class="marquee" id="marqueeSongName">SONGNAME SONGNAME SONGNAME SONGNAME SONGNAME SONGNAME</div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div id="counterSection">
    <div class="ears" id="fullCombo">
        <div id="fullComboLabel">Full Combo</div>
    </div>
    <div class="ears" id="ranked">
        <div id="rankedLabel">Ranked</div>
    </div>
    <div class="ears" id="stars">
        <div><span id="starsLabel">Stars&nbsp;</span><span id="starsValue">0.0</span></div>
    </div>
    <div class="holders rightText">
        <div class="line">
            <div id="combo">
                <span id="comboLabel">Combo</span>
                <span id="comboValue">0</span>
            </div>
            <div id="miss">
                <span id="missLabel">Miss</span>
                <span id="missValue">0</span>
            </div>
        </div>
        <div class="line" id="score">SCORE</div>
        <div class="line">
            <div id="njs">
                <span id="njsLabel">NJS</span>
                <span id="njsValue">0</span>
            </div>
            <div id="bpm">
                <span id="bpmLabel">BPM</span>
                <span id="bpmValue">0</span></div>
        </div>
    </div>
    <div class="barHolder" id="timerHolder"></div>
    <div class="barHolder" id="healthHolder"></div>
    <div class="barHolder" id="accuracyHolder">
        <div id="rank">C</div>
    </div>
    <div class="barHolder" id="heartRateHolder"></div>
</div>

<div id="modifiers">
    <div id="practiceMode"></div>
    <div id="practiceModeSongSpeed"></div>
    <div id="practiceModeTimeOffset"></div>
    <div id="practiceModeSpacer"></div>
    <div id="noFailOn0Energy"></div>
    <div id="oneLife"></div>
    <div id="fourLives"></div>
    <div id="noBombs"></div>
    <div id="noWalls"></div>
    <div id="noArrows"></div>
    <div id="ghostNotes"></div>
    <div id="disappearingArrows"></div>
    <div id="smallNotes"></div>
    <div id="proMode"></div>
    <div id="strictAngles"></div>
    <div id="zenMode"></div>
    <div id="slowerSong"></div>
    <div id="fasterSong"></div>
    <div id="superFastSong"></div>
</div>

<div id="options">
    <div class="tabManager">
        <div class="tabs">
            <div class="tab" data-tab-name="splash" id="tabs-Welcome">Welcome</div>
            <div class="tab" data-tab-name="connection" id="tabs-Game-Connection">Game &amp; Connection</div>
            <div class="tab" data-tab-name="colors" id="tabs-Colors">Colors</div>
            <div class="tab" data-tab-name="settings" id="tabs-Settings">Settings</div>
            <div class="tab" data-tab-name="heartRate" id="tabs-HeartRate">Heart Rate</div>
        </div>
        <div class="tabContents">
            <div class="tabContent" data-tab-content="splash">
                <h2><span id="welcomeLine1-1">Welcome to </span><span id="welcomeVersion"></span><span id="welcomeLine1-2">!</span></h2>
                <p id="welcomeLine2">Please use 'Game & Connection' tab first to choose the correct game and mod you are using.</p>
                <p id="welcomeLine3">Version 3 was completely overhauled under its hood with focus of supporting multiple games and mods while still containing a bunch of useful features for content creators.</p>
                <p><span id="welcomeLine4-1">If you have any suggestions, issues or need help, let me know at </span><a href="https://github.com/UnskilledFreak/Freakylay/issues" id="welcomeLine4-2">Github issues</a><span id="welcomeLine4-3">. Please provide as many infos as you can like what game and connection was in use and what went wrong.</span></p>
                <p id="welcomeLine5">Thanks! UnskilledFreak</p>
                <div class="settingsLine">
                    <label for="languageList" id="languageListLabel">Language:</label>
                    <select id="languageList">
                        <option value="English">English</option>
                    </select>
                </div>
                <div class="settingsLine">
                    <span id="languageListTranslatorLabel"></span>
                </div>
            </div>
            <div class="tabContent" data-tab-content="connection">
                <div class="settingsLine">
                    <span id="gameLinkStatusLabel">Status:</span>
                    <span id="gameLinkStatus"></span>
                </div>
                <div class="settingsLine">
                    <sub id="gameLinkStatusNotice">If this stays at 'Connecting...' for more than 20 seconds that means that something went wrong. Check the settings if any and make sure your game is running and mods are working.</sub>
                </div>
                <div class="settingsLine">
                    <label for="gameList" id="gameListLabel">Select game:</label>
                    <select id="gameList">
                        <option value="None">choose</option>
                    </select>
                </div>
                <div class="settingsLine">
                    <label for="connectionList" id="connectionListLabel">Connection:</label>
                    <select id="connectionList">
                        <option value="None">choose</option>
                    </select>
                </div>
                <div id="gameConnectionSetting"></div>
                <button id="connectToGame">Connect!</button>
            </div>
            <div class="tabContent" data-tab-content="colors">
                <h1 id="colorManagement">Color management</h1>
                <div id="bgColor"></div>
                <div id="color"></div>
            </div>
            <div class="tabContent" data-tab-content="settings">
            </div>
            <div class="tabContent" data-tab-content="heartRate">
                <h1 id="heartRateConnectionType">Connection type</h1>
                <div><span id="heartRateConnectionStateLabel">Connection state: </span><span id="heartRateConnectionState"></span>
                    <!--<input type="button" id="heartRateFeedButton" value="Apply">-->
                    <button id="heartRateFeedButton">Apply</button>
                </div>
                <div>
                    <label for="heartRateFeedType" id="heartRateFeedTypeLabel">Feed type:</label>
                    <select id="heartRateFeedType">
                    </select>
                </div>
                <div>
                    <label for="heartRateFeed" id="heartRateFeedUrlText"></label>
                    <input id="heartRateFeed" class="long" type="text">
                </div>
                <div id="heartRateHintPulsoid"><span id="heartRateHintPulsoid-1">Get or refresh Token </span><button id="heartRateAuthLink">here</button><span id="heartRateHintPulsoid-2">.<br>Paste generated token into the input field above.</span></div>
                <div id="heartRateHintSession">Paste your Session-ID given by the app.</div>
                <div id="pulsoidThanks">Special thanks to the Pulsoid team for making this possible!</div>
                <div id="hypeRateThanks">Special thanks to the HypeRate team for making this possible!</div>
                <h2 id="settings">Settings</h2>
                <div id="heartRateSettingList"></div>
            </div>
        </div>
    </div>
    <hr>
    <div class="urlText">
        <label for="urlText" id="urlTextLabel">URL to use:</label><br>
        <textarea readonly="readonly" id="urlText"></textarea>
    </div>
    <span id="huh">Who needs a fancy settings panel when it's not visible for 99.9% of usage time?</span>
    <div id="copyright">Freakylay</div>
</div>

<div id="versionHint" class="inactive">
    <h2 id="versionHint1">Welcome & sorry to bother!</h2>
    <p><span id="versionHint2-1">You are using an old config for Freakylay.<br>This is the new version </span><span id="versionHintVersion"></span><span id="versionHint2-2">!</span></p>
    <p id="versionHint3">While the new version is compatible with the old one's config, you have to change the game and connection in the options panel.</p>
    <p id="versionHint4">Please use the button bellow to open the option panel and make additional changes!</p>
    <p><button id="versionHintOptions">Open Options</button></p>
</div>

<div id="versionWarning">Freakylay</div>

<div id="heartGraphHolder"><canvas id="heartGraph"></canvas></div>
<!--   ♥ made with ♥   -->
<!-- by UnskilledFreak -->
</body>
</html>