index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<div class="unique-metrognome-container">
    <div class="unique-container">
        <div class="unique-left">
            <div id="unique-metrognome" class="unique-metrognome">
                <div class="unique-gnome">
                    <div class="unique-hat"></div>
                    <div class="unique-beard">
                        <div class="unique-stache left"></div>
                        <div class="unique-stache right"></div>
                    </div>
                    <div class="unique-nose"></div>
                    <div class="unique-mouth"></div>
                </div>
            </div>
            <div class="unique-beat-dots" id="unique-beat-dots"></div>
        </div>
        <div class="unique-right">
            <div class="unique-controls">
                <input type="range" id="unique-tempo" name="tempo" min="40" max="218" value="120">
                <label for="unique-tempo"><span id="unique-bpm">120</span> bpm</label>
                <button id="unique-tap-tempo">Tap Tempo</button>
                <button id="unique-play">Play</button>
                <button id="unique-toggle-theme">Dark Mode</button>
                <label for="unique-time-signature">Time Signature:</label>
                <select id="unique-time-signature">
                    <option value="4/4">4/4</option>
                    <option value="3/4">3/4</option>
                    <option value="2/4">2/4</option>
                    <option value="6/8">6/8</option>
                </select>
                <label for="unique-subdivision">Subdivision:</label>
                <select id="unique-subdivision">
                    <option value="1">Quarter Notes</option>
                    <option value="2">Eighth Notes</option>
                </select>
            </div>
        </div>
    </div>
</div>