design a web-layer for this website with before and after on/off button

components/audio-comparison.js

@@ -0,0 +1,148 @@
+class AudioComparison extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 2rem 0;
+        }
+        .comparison-container {
+          position: relative;
+          background: #1e1e1e;
+          border-radius: 12px;
+          overflow: hidden;
+          box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        }
+        .audio-wrapper {
+          position: relative;
+          height: 80px;
+        }
+        audio {
+          width: 100%;
+          opacity: 0.7;
+          transition: opacity 0.3s ease;
+        }
+        audio.active {
+          opacity: 1;
+        }
+        .toggle-container {
+          display: flex;
+          justify-content: center;
+          padding: 1rem;
+          background: #2a2a2a;
+        }
+        .toggle-switch {
+          position: relative;
+          display: inline-block;
+          width: 120px;
+          height: 44px;
+        }
+        .toggle-switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+        .slider {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(to right, #4f46e5, #7c3aed);
+          transition: .4s;
+          border-radius: 34px;
+        }
+        .slider:before {
+          position: absolute;
+          content: "";
+          height: 36px;
+          width: 36px;
+          left: 4px;
+          bottom: 4px;
+          background-color: white;
+          transition: .4s;
+          border-radius: 50%;
+        }
+        input:checked + .slider {
+          background: linear-gradient(to right, #7c3aed, #4f46e5);
+        }
+        input:checked + .slider:before {
+          transform: translateX(76px);
+        }
+        .labels {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          padding: 0 12px;
+          pointer-events: none;
+        }
+        .label {
+          color: white;
+          font-weight: bold;
+          font-size: 14px;
+          text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        }
+        .before-label {
+          margin-left: 50px;
+        }
+        .after-label {
+          margin-right: 50px;
+        }
+      </style>
+      <div class="comparison-container">
+        <div class="audio-wrapper">
+          <audio id="before-audio" controls>
+            <source src="" type="audio/mpeg">
+            Your browser does not support the audio element.
+          </audio>
+          <audio id="after-audio" controls class="active">
+            <source src="" type="audio/mpeg">
+            Your browser does not support the audio element.
+          </audio>
+        </div>
+        <div class="toggle-container">
+          <label class="toggle-switch">
+            <input type="checkbox" checked>
+            <span class="slider"></span>
+            <div class="labels">
+              <span class="label before-label">Before</span>
+              <span class="label after-label">After</span>
+            </div>
+          </label>
+        </div>
+      </div>
+    `;
+
+    const beforeAudio = this.shadowRoot.getElementById('before-audio');
+    const afterAudio = this.shadowRoot.getElementById('after-audio');
+    const toggle = this.shadowRoot.querySelector('input[type="checkbox"]');
+
+    // Set audio sources from attributes
+    if (this.hasAttribute('before-src')) {
+      beforeAudio.querySelector('source').src = this.getAttribute('before-src');
+      beforeAudio.load();
+    }
+    if (this.hasAttribute('after-src')) {
+      afterAudio.querySelector('source').src = this.getAttribute('after-src');
+      afterAudio.load();
+    }
+
+    // Toggle functionality
+    toggle.addEventListener('change', () => {
+      if (toggle.checked) {
+        beforeAudio.classList.remove('active');
+        afterAudio.classList.add('active');
+      } else {
+        beforeAudio.classList.add('active');
+        afterAudio.classList.remove('active');
+      }
+    });
+  }
+}
+
+customElements.define('audio-comparison', AudioComparison);

index.html

@@ -302,7 +302,8 @@
     <script>
         feather.replace();
     </script>
+    <script src="components/audio-comparison.js"></script>
     <script src="script.js"></script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

single-track-mastering.html

@@ -156,6 +156,7 @@
     <script>
         feather.replace();
     </script>
+    <script src="components/audio-comparison.js"></script>
     <script src="script.js"></script>
 </body>
 </html>