popup.html

<!DOCTYPE html >
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InSightful</title>
    <link rel="stylesheet" href="./popup.css">    
 
</head>


<body class="popup">
    <div class="title">
        <h1>InSightful</h1>
    </div>
    <h3>Dark Mode</h3>
        <div class="dark-button">
            <div class="row" id="darkOn">On</div>
            <div class="row" id="darkOff">Off</div>
            <div class="circle"></div>
        </div>
    <div class="font-dropdown">
        <details role="list">
            <summary aria-haspopup="listbox">Font Styles</summary>
            <ul role="listbox">
            <li>
                <input type="radio" id="changeFontArialRadio" font="Arial" name="size">
                Visual Impairment (Arial)
            </li>
            <li>
                <input type="radio" id="changeFontVerdanaRadio" font="Verdana" name="size">
                Dyslexia (Courier)
            </li>
            <li>
                <input type="radio" id="changeFontHelveticaRadio" font="Helvetica" name="size">
                Readibility (Helvetica)
            </li>
            </ul>
        </details>   
    </div>
        <div class="control-group">
            <button id="textDown">Down</button>
            <h3>Text</h3>
            <button id="textUp">Up</button>
        </div>
        <div class="control-group">
            <button id="textReset">Reset</button>
        </div>

        <div class="control-group">
            <button id="brightnessDown">Down</button>
            <h3>Brightness</h3>
            <button id="brightnessUp">Up</button>
        </div>

        <div class="control-group">
            <button id="contrastDown">Down</button>
            <h3>Contrast</h3>
            <button id="contrastUp">Up</button>
        </div>

    
</body>
<script src="scripts/btnEventListener.js"></script>
</html>