うごかないよ

README.md

@@ -1,10 +1,13 @@
 ---
-title: Crimson Canvas Studio
-emoji: 🏆
-colorFrom: blue
-colorTo: purple
+title: Crimson Canvas Studio 🎨
+colorFrom: gray
+colorTo: gray
+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,121 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1a1a1a;
+          color: white;
+          padding: 3rem 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+          text-align: left;
+        }
+        .footer-logo {
+          color: #ef4444;
+          font-weight: bold;
+          font-size: 1.5rem;
+          margin-bottom: 1rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .footer-links h3 {
+          color: #ef4444;
+          margin-bottom: 1rem;
+          font-size: 1.1rem;
+        }
+        .footer-links ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-links li {
+          margin-bottom: 0.5rem;
+        }
+        .footer-links a {
+          color: #a1a1aa;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: white;
+        }
+        .copyright {
+          margin-top: 3rem;
+          padding-top: 1.5rem;
+          border-top: 1px solid #333;
+          color: #6b7280;
+          font-size: 0.9rem;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          color: #a1a1aa;
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: #ef4444;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-col">
+            <div class="footer-logo">
+              <i data-feather="droplet"></i>
+              Crimson Canvas
+            </div>
+            <p class="text-gray-400">Bringing bold red creativity to the digital world.</p>
+            <div class="social-links">
+              <a href="#"><i data-feather="twitter"></i></a>
+              <a href="#"><i data-feather="instagram"></i></a>
+              <a href="#"><i data-feather="facebook"></i></a>
+              <a href="#"><i data-feather="linkedin"></i></a>
+            </div>
+          </div>
+          <div class="footer-links">
+            <h3>Quick Links</h3>
+            <ul>
+              <li><a href="/">Home</a></li>
+              <li><a href="#">Portfolio</a></li>
+              <li><a href="#">About Us</a></li>
+              <li><a href="#">Contact</a></li>
+            </ul>
+          </div>
+          <div class="footer-links">
+            <h3>Services</h3>
+            <ul>
+              <li><a href="#">Web Design</a></li>
+              <li><a href="#">UI/UX</a></li>
+              <li><a href="#">Branding</a></li>
+              <li><a href="#">Consulting</a></li>
+            </ul>
+          </div>
+          <div class="footer-links">
+            <h3>Contact</h3>
+            <ul>
+              <li><a href="mailto:hello@crimsoncanvas.com"><i data-feather="mail"></i> hello@crimsoncanvas.com</a></li>
+              <li><a href="tel:+1234567890"><i data-feather="phone"></i> +1 234 567 890</a></li>
+              <li><a href="#"><i data-feather="map-pin"></i> 123 Creative St, Design City</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="copyright">
+          &copy; 2023 Crimson Canvas Studio. All rights reserved.
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,101 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: white;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+          position: sticky;
+          top: 0;
+          z-index: 50;
+        }
+        .logo {
+          color: #ef4444;
+          font-weight: bold;
+          font-size: 1.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: #4b5563;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+        }
+        a:hover {
+          color: #ef4444;
+        }
+        .active {
+          color: #ef4444;
+        }
+        .menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: #ef4444;
+          font-size: 1.5rem;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          ul {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: white;
+            flex-direction: column;
+            padding: 1rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+          }
+          ul.active {
+            display: flex;
+          }
+          .menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">
+          <i data-feather="droplet"></i>
+          Crimson Canvas
+        </a>
+        <button class="menu-btn">
+          <i data-feather="menu"></i>
+        </button>
+        <ul>
+          <li><a href="/" class="active"><i data-feather="home"></i> Home</a></li>
+          <li><a href="#"><i data-feather="image"></i> Portfolio</a></li>
+          <li><a href="#"><i data-feather="info"></i> About</a></li>
+          <li><a href="#"><i data-feather="mail"></i> Contact</a></li>
+        </ul>
+      </nav>
+    `;
+
+    const menuBtn = this.shadowRoot.querySelector('.menu-btn');
+    const menu = this.shadowRoot.querySelector('ul');
+    
+    menuBtn.addEventListener('click', () => {
+      menu.classList.toggle('active');
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,65 @@
-<!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>Crimson Canvas Studio</title>
+    <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>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-100">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <section class="hero bg-red-500 text-white rounded-2xl p-8 mb-12">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">Welcome to Crimson Canvas Studio</h1>
+                <p class="text-xl mb-8">Where bold red meets creative expression</p>
+                <a href="#" class="inline-block bg-white text-red-500 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition">Explore Now</a>
+            </div>
+        </section>
+
+        <section class="features grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                <div class="icon bg-red-100 text-red-500 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                    <i data-feather="brush"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-3">Creative Design</h3>
+                <p class="text-gray-600">Stunning visuals with our signature crimson touch</p>
+            </div>
+            <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                <div class="icon bg-red-100 text-red-500 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                    <i data-feather="code"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-3">Innovative Code</h3>
+                <p class="text-gray-600">Cutting-edge solutions with bold execution</p>
+            </div>
+            <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                <div class="icon bg-red-100 text-red-500 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                    <i data-feather="zap"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
+                <p class="text-gray-600">Performance that matches our vibrant energy</p>
+            </div>
+        </section>
+
+        <section class="cta bg-red-50 rounded-xl p-8 text-center">
+            <h2 class="text-2xl md:text-3xl font-bold mb-4 text-red-700">Ready to make something bold?</h2>
+            <p class="max-w-2xl mx-auto mb-6 text-gray-700">Join our studio and let's create something extraordinary together.</p>
+            <a href="#" class="inline-block bg-red-500 text-white font-semibold px-6 py-3 rounded-lg hover:bg-red-600 transition">Get Started</a>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <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,21 @@
+// Initialize animations and interactions
+document.addEventListener('DOMContentLoaded', () => {
+    // Feature cards animation on scroll
+    const featureCards = document.querySelectorAll('.feature-card');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = 1;
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, { threshold: 0.1 });
+
+    featureCards.forEach(card => {
+        card.style.opacity = 0;
+        card.style.transform = 'translateY(20px)';
+        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+        observer.observe(card);
+    });
+});

style.css

@@ -1,28 +1,23 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
+/* Custom styles */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+body {
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.hero {
+    background-image: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(239, 68, 68, 0.95));
+    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.feature-card:hover .icon {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
-}
+.icon {
+    transition: all 0.3s ease;
+}