Що далі?

README.md

@@ -1,10 +1,13 @@
 ---
-title: Sunfixer Ovm Neurogoth
-emoji: 🏃
-colorFrom: indigo
-colorTo: red
+title: SunFixer | OVM - NeuroGoth 🎛️
+colorFrom: purple
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,129 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        .footer {
+          background: #0f172a;
+          border-top: 1px solid rgba(147, 51, 234, 0.2);
+          padding: 3rem 2rem;
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        
+        .footer-content {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+          margin-bottom: 2rem;
+        }
+        
+        .footer-section h3 {
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+          color: #9333ea;
+        }
+        
+        .footer-section p, .footer-section a {
+          color: #94a3b8;
+          margin-bottom: 0.5rem;
+          text-decoration: none;
+          display: block;
+        }
+        
+        .footer-section a:hover {
+          color: #9333ea;
+        }
+        
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        
+        .social-links a {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: #1e293b;
+          color: #94a3b8;
+          transition: all 0.3s;
+        }
+        
+        .social-links a:hover {
+          background: #9333ea;
+          color: white;
+          transform: translateY(-3px);
+        }
+        
+        .copyright {
+          text-align: center;
+          padding-top: 2rem;
+          border-top: 1px solid #1e293b;
+          color: #64748b;
+          font-size: 0.9rem;
+        }
+        
+        @media (max-width: 768px) {
+          .footer {
+            padding: 2rem 1rem;
+          }
+        }
+      </style>
+      
+      <footer class="footer">
+        <div class="container">
+          <div class="footer-content">
+            <div class="footer-section">
+              <h3>SUNFIXER | OVM</h3>
+              <p>Experience the future of bass music with our neurofunk soundscapes and dark drum & bass rhythms.</p>
+              <div class="social-links">
+                <a href="#"><i data-feather="facebook"></i></a>
+                <a href="#"><i data-feather="instagram"></i></a>
+                <a href="#"><i data-feather="twitter"></i></a>
+                <a href="#"><i data-feather="youtube"></i></a>
+                <a href="#"><i data-feather="spotify"></i></a>
+              </div>
+            </div>
+            
+            <div class="footer-section">
+              <h3>Quick Links</h3>
+              <a href="#music">Music</a>
+              <a href="#events">Events</a>
+              <a href="#about">About</a>
+              <a href="#contact">Contact</a>
+            </div>
+            
+            <div class="footer-section">
+              <h3>Contact</h3>
+              <p>Available Worldwide</p>
+              <p>Response Time: 24-48 hours</p>
+              <p>contact@sunfixerovm.com</p>
+            </div>
+          </div>
+          
+          <div class="copyright">
+            <p>&copy; 2025 SUNFIXER | OVM. All rights reserved. Crafted with passion for bass music.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+    
+    // Initialize Feather icons after rendering
+    setTimeout(() => {
+      feather.replace();
+    }, 0);
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,154 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        .header {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          z-index: 1000;
+          transition: all 0.3s ease;
+          background: rgba(15, 23, 42, 0.9);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(147, 51, 234, 0.2);
+        }
+        
+        .header.scrolled {
+          background: rgba(15, 23, 42, 0.95);
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 800;
+          background: linear-gradient(90deg, #9333ea, #7e22ce);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          text-decoration: none;
+        }
+        
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+        }
+        
+        .nav-links a {
+          color: #e2e8f0;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s;
+          position: relative;
+        }
+        
+        .nav-links a:hover {
+          color: #9333ea;
+        }
+        
+        .nav-links a::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #9333ea;
+          transition: width 0.3s;
+        }
+        
+        .nav-links a:hover::after {
+          width: 100%;
+        }
+        
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          font-size: 1.5rem;
+          cursor: pointer;
+        }
+        
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background: rgba(15, 23, 42, 0.95);
+            flex-direction: column;
+            padding: 1rem;
+            gap: 1rem;
+          }
+          
+          .nav-links.active {
+            display: flex;
+          }
+          
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      
+      <header class="header">
+        <div class="container">
+          <a href="#" class="logo">SUNFIXER | OVM</a>
+          
+          <button class="mobile-menu-btn">
+            <i data-feather="menu"></i>
+          </button>
+          
+          <nav class="nav-links">
+            <a href="#music">Music</a>
+            <a href="#events">Events</a>
+            <a href="#about">About</a>
+            <a href="#contact">Contact</a>
+          </nav>
+        </div>
+      </header>
+    `;
+    
+    // Mobile menu toggle
+    const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+    const navLinks = this.shadowRoot.querySelector('.nav-links');
+    
+    menuBtn.addEventListener('click', () => {
+      navLinks.classList.toggle('active');
+      const menuIcon = menuBtn.querySelector('i');
+      if (navLinks.classList.contains('active')) {
+        menuIcon.setAttribute('data-feather', 'x');
+      } else {
+        menuIcon.setAttribute('data-feather', 'menu');
+      }
+      feather.replace();
+    });
+    
+    // Close menu when clicking a link
+    this.shadowRoot.querySelectorAll('.nav-links a').forEach(link => {
+      link.addEventListener('click', () => {
+        navLinks.classList.remove('active');
+        const menuIcon = menuBtn.querySelector('i');
+        menuIcon.setAttribute('data-feather', 'menu');
+        feather.replace();
+      });
+    });
+  }
+}
+
+customElements.define('custom-header', CustomHeader);

index.html

@@ -1,19 +1,126 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SunFixer | OVM - NeuroGoth</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-900 text-white">
+    <custom-header></custom-header>
+
+    <main>
+        <!-- Hero Section -->
+        <section class="relative h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-b from-black/70 to-black z-10"></div>
+            <div class="absolute inset-0 bg-[url('http://static.photos/abstract/1200x630/42')] bg-cover bg-center opacity-30"></div>
+            <div class="relative z-20 text-center px-4">
+                <h1 class="text-5xl md:text-7xl font-bold mb-4">SUNFIXER | OVM</h1>
+                <p class="text-xl md:text-2xl mb-8">Experience the Future of Bass</p>
+                <a href="#music" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">Listen Now</a>
+            </div>
+        </section>
+
+        <!-- Latest Release -->
+        <section id="music" class="py-20 px-4 max-w-6xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-2">Latest Release</h2>
+                <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
+            </div>
+            <div class="flex flex-col md:flex-row items-center gap-8">
+                <div class="md:w-1/2">
+                    <img src="https://pjamneyvdzjafqhlztwb.supabase.co/storage/v1/object/public/media/covers/1764100563822_gi1a7f.jpeg" alt="TERROR HAS NO FORM" class="rounded-lg shadow-2xl w-full">
+                </div>
+                <div class="md:w-1/2">
+                    <h3 class="text-4xl font-bold mb-2">TERROR HAS NO FORM</h3>
+                    <p class="text-purple-400 text-xl mb-4">SUNFIXER</p>
+                    <p class="mb-6">Dive into the depths of neurofunk with our latest sonic creation. A journey through dark atmospheres and relentless basslines.</p>
+                    <div class="flex gap-4">
+                        <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded-full flex items-center">
+                            <i data-feather="play" class="mr-2"></i> Play
+                        </button>
+                        <button class="border border-purple-600 text-purple-400 hover:bg-purple-600 hover:text-white font-bold py-2 px-6 rounded-full flex items-center">
+                            <i data-feather="download" class="mr-2"></i> Download
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Events -->
+        <section class="py-20 bg-gray-800 px-4">
+            <div class="max-w-6xl mx-auto">
+                <div class="text-center mb-12">
+                    <h2 class="text-3xl font-bold mb-2">Upcoming Events</h2>
+                    <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
+                </div>
+                <div class="bg-gray-900 rounded-xl p-8 text-center">
+                    <i data-feather="calendar" class="w-16 h-16 mx-auto text-purple-500 mb-4"></i>
+                    <h3 class="text-2xl font-bold mb-2">No Upcoming Events</h3>
+                    <p class="text-gray-400 mb-6">Check back soon for new show announcements!</p>
+                    <button class="border border-purple-600 text-purple-400 hover:bg-purple-600 hover:text-white font-bold py-2 px-6 rounded-full">
+                        Get Notified
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- About -->
+        <section class="py-20 px-4 max-w-6xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-2">About The Project</h2>
+                <div class="w-20 h-1 bg-purple-600 mx-auto"></div>
+            </div>
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4">The Sound of Tomorrow</h3>
+                    <p class="mb-4">NEURO GOPAQUE is a Ukrainian electronic music project founded in 2025 by three producers: SunFixer (Anatolii Novyk), LeonID (Leonid Mykhailenko), and OVM (Oleksii Murasov). The group operates at the intersection of Neurofunk, Dark Drum’n’Bass, Breakbeat, and authentic Ukrainian ethnic elements.</p>
+                    <p>SUNFIXER | LEONID | OVM</p>
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="bg-gray-800 p-6 rounded-lg text-center">
+                        <div class="text-3xl font-bold text-purple-500">50+</div>
+                        <div>Tracks Released</div>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg text-center">
+                        <div class="text-3xl font-bold text-purple-500">100K+</div>
+                        <div>Monthly Listeners</div>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg text-center">
+                        <div class="text-3xl font-bold text-purple-500">200+</div>
+                        <div>Live Performances</div>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg text-center">
+                        <div class="text-3xl font-bold text-purple-500">8+</div>
+                        <div>Years Active</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact -->
+        <section class="py-20 bg-gray-800 px-4">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold mb-2">Get In Touch</h2>
+                <div class="w-20 h-1 bg-purple-600 mx-auto mb-8"></div>
+                <p class="text-xl mb-8">Ready to collaborate, book a show, or just want to say hello? I'm always excited to connect with fellow music enthusiasts, event organizers, and creative minds.</p>
+                <a href="mailto:contact@sunfixerovm.com" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full inline-flex items-center">
+                    <i data-feather="mail" class="mr-2"></i> Contact Us
+                </a>
+            </div>
+        </section>
+    </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.js

@@ -0,0 +1,24 @@
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+
+// Header scroll effect
+window.addEventListener('scroll', function() {
+    const header = document.querySelector('custom-header');
+    if (window.scrollY > 50) {
+        header.classList.add('scrolled');
+    } else {
+        header.classList.remove('scrolled');
+    }
+});
+
+// Initialize Feather icons
+document.addEventListener('DOMContentLoaded', function() {
+    feather.replace();
+});

style.css

@@ -1,28 +1,71 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
+
+:root {
+  --primary: #9333ea;
+  --secondary: #7e22ce;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Montserrat', sans-serif;
+  scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary);
+}
+
+/* Animation for hero section */
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.hero-image {
+  animation: float 4s ease-in-out infinite;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Responsive video container */
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Glowing effect for buttons */
+.glow-button {
+  box-shadow: 0 0 15px rgba(147, 51, 234, 0.5);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Fade in animation */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
+
+.fade-in {
+  animation: fadeIn 0.8s ease-out;
+}