Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Repurposed Suno Cover Player</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 20px; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| overflow: hidden; | |
| } | |
| header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 30px 40px; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: 2.5em; | |
| } | |
| .description { | |
| color: rgba(255,255,255,0.9); | |
| max-width: 600px; | |
| margin: 10px auto 0; | |
| line-height: 1.6; | |
| } | |
| .app-frame { | |
| padding: 20px; | |
| background: #f8f9fa; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 600px; | |
| border: none; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 20px; | |
| color: #666; | |
| font-size: 0.9em; | |
| border-top: 1px solid #eee; | |
| } | |
| @media (max-width: 768px) { | |
| iframe { | |
| height: 500px; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>🎵 Repurposed Suno Cover Player</h1> | |
| <p class="description"> | |
| A creative tool for generating and playing AI-powered music covers. | |
| This interface wraps the original Gradio application in a cleaner HTML layout. | |
| </p> | |
| </header> | |
| <div class="app-frame"> | |
| <iframe src=""></iframe> | |
| </div> | |
| <footer> | |
| <p>Powered by Hugging Face Spaces | Original Gradio app hosted within this HTML wrapper</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Auto-calculate the iframe URL based on current location | |
| const currentUrl = window.location.href; | |
| const baseUrl = currentUrl.split('/').slice(0, -1).join('/'); | |
| const iframe = document.querySelector('iframe'); | |
| // Set iframe source to the Gradio app | |
| // In Spaces, the Gradio app would be available at the same domain | |
| iframe.src = window.location.href.replace('https://1hit.no/audio/suno/'; | |
| // Or if the Gradio app is running on a different port (for local testing): | |
| // iframe.src = 'http://localhost:7860'; | |
| // Handle iframe loading messages | |
| window.addEventListener('message', function(event) { | |
| if (event.data && event.data.type === 'gradio_height') { | |
| iframe.style.height = event.data.height + 'px'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |