settings.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="assets/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
    <script src="assets/jquery.min.js"></script>
</head>
<body>
    <div class="channel-header">
        <span class="channel-name">Overlay Settings</span>
        <i class="fas fa-arrow-left settings-btn"></i>
    </div>
    <div class="settings-container">
        <div class="settings-section">
            <h4>Switch Channel</h4>
            <div class="settings-group">
                <input type="text" placeholder="Twitch channel name" name="channel">
                <a class="sm-button" aria-for="channel">Save</a>
            </div>
        </div>
        <div class="settings-section">
            <h4>Appearance</h4>
            <span style="display:block">Background Opacity</span>
            <div class="settings-group">
                <input type="range" min="50" max="100" step="10" name="transparency">
                <span class="value" aria-for="transparency">50%</span>
            </div>
        </div>
    </div>
    <div class="settings-footer">
        TwitchOverlay v<span class="ver"></span>
        <span style="float:right;text-align:right">
            <a href="./login.html">Log out</a>
        </span>
    </div>
    <script>require('./settings.js')</script>
</body>
</html>