Spaces:

vaagi
/

melody-mapper-magic

Running

vaagi commited on Jan 13

Commit

c915ad1

verified ·

1 Parent(s): 26dda4e

not working

Files changed (4) hide show

components/footer.js CHANGED Viewed

@@ -38,19 +38,11 @@ class CustomFooter extends HTMLElement {
             <div>
               <h4 class="font-semibold mb-4">Connect</h4>
               <div class="flex space-x-4">
-                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
-                  <i data-feather="twitter"></i>
-                </a>
-                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
-                  <i data-feather="github"></i>
-                </a>
-                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
-                  <i data-feather="instagram"></i>
-                </a>
-                <a href="#" class="social-icon text-gray-400 transition-all duration-200">
-                  <i data-feather="youtube"></i>
-                </a>
-              </div>
             </div>
           </div>
           <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">

             <div>
               <h4 class="font-semibold mb-4">Connect</h4>
               <div class="flex space-x-4">
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200" data-feather="twitter"></a>
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200" data-feather="github"></a>
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200" data-feather="instagram"></a>
+                <a href="#" class="social-icon text-gray-400 transition-all duration-200" data-feather="youtube"></a>
+</div>
             </div>
           </div>
           <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">

components/header.js CHANGED Viewed

@@ -1,5 +1,6 @@
-class CustomHeader extends HTMLElement {
-  connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
@@ -24,13 +25,13 @@ class CustomHeader extends HTMLElement {
             <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Features</a>
             <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Pricing</a>
             <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">About</a>
-            <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md flex items-center">
-              <i data-feather="log-in" class="w-4 h-4 mr-2"></i> Login
             </button>
-          </div>
         </div>
       </nav>
     `;
   }
 }
-customElements.define('custom-header', CustomHeader);

+class CustomNavbar extends HTMLElement {
+connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
             <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Features</a>
             <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">Pricing</a>
             <a href="#" class="nav-link text-white hover:text-purple-300 transition-colors">About</a>
+            <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md flex items-center" data-feather="log-in">
+              <span class="ml-6">Login</span>
             </button>
+</div>
         </div>
       </nav>
     `;
   }
 }
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -10,9 +10,8 @@
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
-    <custom-header></custom-header>
-    <main class="container mx-auto px-4 py-8">
         <section class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm">
             <h1 class="text-4xl font-bold mb-6 text-center">Transform Audio to Piano Roll</h1>
             <p class="text-xl mb-8 text-center text-gray-300">Upload your MP3 and watch it transform into beautiful piano roll visualization</p>
@@ -122,13 +121,9 @@
     </main>
     <custom-footer></custom-footer>
-    <script src="components/header.js"></script>
-    <script src="components/footer.js"></script>
     <script src="script.js"></script>
-    <script>
-        feather.replace();
-    </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
+    <custom-navbar></custom-navbar>
+<main class="container mx-auto px-4 py-8">
         <section class="max-w-4xl mx-auto bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm">
             <h1 class="text-4xl font-bold mb-6 text-center">Transform Audio to Piano Roll</h1>
             <p class="text-xl mb-8 text-center text-gray-300">Upload your MP3 and watch it transform into beautiful piano roll visualization</p>
     </main>
     <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+<script src="components/footer.js"></script>
     <script src="script.js"></script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,5 +1,10 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Audio upload handling
     const audioUpload = document.getElementById('audio-upload');
     const audioInfo = document.getElementById('audio-info');
     const filename = document.getElementById('filename');
@@ -19,10 +24,14 @@ document.addEventListener('DOMContentLoaded', function() {
                 duration.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
                 audioInfo.classList.remove('hidden');
             };
-        }
-    });
-    // Drag and drop functionality
     const dropArea = document.querySelector('.border-dashed');
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {

 document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Feather Icons
+    if (window.feather) {
+        feather.replace();
+    }
+// Audio upload handling
     const audioUpload = document.getElementById('audio-upload');
     const audioInfo = document.getElementById('audio-info');
     const filename = document.getElementById('filename');
                 duration.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
                 audioInfo.classList.remove('hidden');
             };
+    }
+    // Refresh Feather Icons after dynamic content loads
+    if (window.feather) {
+        feather.replace();
+    }
+});
+// Drag and drop functionality
     const dropArea = document.querySelector('.border-dashed');
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {