Spaces:

dodey917
/

wear-fun

Running

App Files Files Community

dodey917 commited on Nov 5, 2025

Commit

8a5c175

verified ·

1 Parent(s): 4c089d1

I wnat you to add the nav bar at the top so user can select how page and other opin in the nav bar

Browse files

Files changed (7) hide show

about.html +111 -0
components/footer.js +148 -0
components/header.js +157 -0
index.html +2 -4
meme.html +2 -3
shop.html +2 -4
style.css +1 -1

about.html ADDED Viewed

	@@ -0,0 +1,111 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Wear.Fun</title>
+    <link rel="icon" type="image/x-icon" href="/public/logo.png">
+    <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-black text-white">
+    <custom-header></custom-header>
+    <main class="pt-24 pb-12 px-6">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-3xl md:text-4xl font-bold text-center mb-8">About Wear.Fun</h1>
+            <section class="mb-16">
+                <div class="bg-gray-900 rounded-2xl p-8 md:p-12 border border-gray-800">
+                    <h2 class="text-2xl font-bold mb-6 text-red-500">From Memes to Merch 🚀</h2>
+                    <p class="text-gray-300 mb-6 leading-relaxed">
+                        Wear.Fun is your go-to platform for turning internet culture into wearable art. We believe that humor should be worn proudly, and your favorite memes deserve more than just a screenshot in your camera roll.
+                    </p>
+                    <p class="text-gray-300 mb-6 leading-relaxed">
+                        Founded by meme enthusiasts and crypto degens, we've created the fastest way to transform any funny image, crypto logo, or inside joke into high-quality apparel that you can actually wear.
+                    </p>
+                </div>
+            </section>
+            <section class="mb-16">
+                <h2 class="text-2xl font-bold text-center mb-12">How It Works</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <div class="text-center">
+                        <div class="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="upload" class="w-10 h-10"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Upload</h3>
+                        <p class="text-gray-400">Drop your meme or design, we handle the rest</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="edit-3" class="w-10 h-10"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Customize</h3>
+                        <p class="text-gray-400">Add captions and make it uniquely yours</p>
+                    </div>
+                    <div class="text-center">
+                        <div class="w-20 h-20 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i data-feather="package" class="w-10 h-10"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Wear It</h3>
+                        <p class="text-gray-400">Get your custom merch delivered fast</p>
+                    </div>
+                </div>
+            </section>
+            <section class="mb-16">
+                <h2 class="text-2xl font-bold text-center mb-12">Why Choose Wear.Fun?</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <div class="bg-gray-900 p-6 rounded-xl border border-gray-800">
+                        <i data-feather="zap" class="w-8 h-8 text-yellow-500 mb-4"></i>
+                        <h3 class="font-bold text-lg mb-2">Lightning Fast</h3>
+                        <p class="text-gray-400">From upload to mockup in seconds, not hours</p>
+                    </div>
+                    <div class="bg-gray-900 p-6 rounded-xl border border-gray-800">
+                        <i data-feather="award" class="w-8 h-8 text-green-500 mb-4"></i>
+                        <h3 class="font-bold text-lg mb-2">Premium Quality</h3>
+                        <p class="text-gray-400">Only the best materials for your memes</p>
+                    </div>
+                    <div class="bg-gray-900 p-6 rounded-xl border border-gray-800">
+                        <i data-feather="cpu" class="w-8 h-8 text-blue-500 mb-4"></i>
+                        <h3 class="font-bold text-lg mb-2">AI Powered</h3>
+                        <p class="text-gray-400">Smart caption suggestions to enhance your designs</p>
+                    </div>
+                    <div class="bg-gray-900 p-6 rounded-xl border border-gray-800">
+                        <i data-feather="users" class="w-8 h-8 text-purple-500 mb-4"></i>
+                        <h3 class="font-bold text-lg mb-2">Community Driven</h3>
+                        <p class="text-gray-400">Built by meme lovers, for meme lovers</p>
+                    </div>
+                </div>
+            </section>
+            <section class="text-center">
+                <div class="bg-gradient-to-r from-red-900 to-black rounded-2xl p-8 md:p-12">
+                    <h2 class="text-2xl md:text-3xl font-bold mb-4">Ready to Start Creating?</h2>
+                    <p class="text-gray-300 mb-8">Join thousands of meme enthusiasts turning humor into fashion</p>
+                    <a href="/meme.html" class="inline-block bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full shadow-lg font-semibold transition transform hover:scale-105">
+                        Create Your First Design
+                    </a>
+                </div>
+            </section>
+        </div>
+    </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>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,148 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #111827;
+          border-top: 1px solid #374151;
+          padding: 3rem 2rem 2rem;
+          margin-top: 4rem;
+        }
+        .footer-content {
+          max-width: 1280px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+          margin-bottom: 2rem;
+        }
+        .footer-section h3 {
+          color: white;
+          font-size: 1.125rem;
+          font-weight: bold;
+          margin-bottom: 1rem;
+        }
+        .footer-section ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+        .footer-section ul li {
+          margin-bottom: 0.5rem;
+        }
+        .footer-section a {
+          color: #9ca3af;
+          text-decoration: none;
+          transition: color 0.3s;
+        }
+        .footer-section a:hover {
+          color: #ef4444;
+        }
+        .footer-bottom {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding-top: 2rem;
+          border-top: 1px solid #374151;
+          text-align: center;
+          color: #6b7280;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          background: #374151;
+          border-radius: 50%;
+          transition: background 0.3s;
+        }
+        .social-links a:hover {
+          background: #ef4444;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-section">
+            <h3>Wear.Fun</h3>
+            <p style="color: #9ca3af; line-height: 1.6;">
+              From memes to merch - turn your favorite jokes into wearable art in seconds.
+            </p>
+            <div class="social-links">
+              <a href="#" aria-label="Twitter">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
+                </svg>
+              </a>
+              <a href="#" aria-label="Instagram">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+                  <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"></path>
+                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+                </svg>
+              </a>
+              <a href="#" aria-label="Discord">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M8.51 7.26c0-.4-.32-.73-.72-.73-.4 0-.72.33-.72.73v.07c0 .4.32.72.72.72.4 0 .72-.32.72-.72v-.07zm3.91 0c0-.4-.32-.73-.72-.73-.4 0-.72.33-.72.73v.07c0 .4.32.72.72.72.4 0 .72-.32.72-.72v-.07z"></path>
+                  <path d="M20.79 4.23A17.6 17.6 0 0015.7 2.4 18.4 18.4 0 0015.1 3.8a16.2 16.2 0 00-4.8 0A18.4 18.4 0 009.6 2.4 17.6 17.6 0 004.5 4.23a16.9 16.9 0 00-2.4 6.3 16.7 16.7 0 001.4 10.7c.6.9 1.3 1.7 2.1 2.4.8.7 1.7 1.3 2.7 1.8.4-.5.8-1 1.1-1.5a11.6 11.6 0 01-2.5-1.2l.6-.3c5.2 2.4 10.8 2.4 15.9 0l.6.3a11.6 11.6 0 01-2.5 1.2c.3.5.7 1 1.1 1.5 1-.5 1.9-1.1 2.7-1.8.8-.7 1.5-1.5 2.1-2.4a16.7 16.7 0 001.4-10.7 16.9 16.9 0 00-2.4-6.3z"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div class="footer-section">
+            <h3>Quick Links</h3>
+            <ul>
+              <li><a href="/">Home</a></li>
+              <li><a href="/meme.html">Create Design</a></li>
+              <li><a href="/shop.html">Shop</a></li>
+              <li><a href="/about.html">About Us</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Products</h3>
+            <ul>
+              <li><a href="/shop.html">T-Shirts</a></li>
+              <li><a href="/shop.html">Hoodies</a></li>
+              <li><a href="/shop.html">Mugs</a></li>
+              <li><a href="/shop.html">Accessories</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h3>Support</h3>
+            <ul>
+              <li><a href="#">Contact Us</a></li>
+              <li><a href="#">FAQ</a></li>
+              <li><a href="#">Shipping Info</a></li>
+              <li><a href="#">Returns</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>&copy; 2024 Wear.Fun. All rights reserved. | Turn memes into merch 🚀</p>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,157 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        header {
+          background: rgba(0, 0, 0, 0.95);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid #374151;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 50;
+        }
+        nav {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 1.5rem;
+          font-weight: bold;
+          color: white;
+          text-decoration: none;
+          transition: color 0.3s;
+        }
+        .logo:hover {
+          color: #ef4444;
+        }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        .nav-links a {
+          color: #9ca3af;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.3s;
+          position: relative;
+        }
+        .nav-links a:hover {
+          color: white;
+        }
+        .nav-links a.active {
+          color: #ef4444;
+        }
+        .nav-links a.active::after {
+          content: '';
+          position: absolute;
+          bottom: -4px;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: #ef4444;
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+          padding: 0.5rem;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: rgba(0, 0, 0, 0.98);
+            flex-direction: column;
+            padding: 1rem 2rem;
+            border-bottom: 1px solid #374151;
+            gap: 1rem;
+          }
+          .nav-links.mobile-open {
+            display: flex;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <header>
+        <nav>
+          <a href="/" class="logo">
+            <span>Wear.Fun</span>
+            <span style="color: #ef4444;">🚀</span>
+          </a>
+          <ul class="nav-links" id="navLinks">
+            <li><a href="/" class="nav-link">Home</a></li>
+            <li><a href="/meme.html" class="nav-link">Create</a></li>
+            <li><a href="/shop.html" class="nav-link">Shop</a></li>
+            <li><a href="/about.html" class="nav-link">About</a></li>
+          </ul>
+          <button class="mobile-menu-btn" id="mobileMenuBtn">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+          </button>
+        </nav>
+      </header>
+    `;
+    // Mobile menu toggle
+    const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
+    const navLinks = this.shadowRoot.getElementById('navLinks');
+    mobileMenuBtn.addEventListener('click', () => {
+      navLinks.classList.toggle('mobile-open');
+    });
+    // Set active link based on current page
+    const currentPath = window.location.pathname;
+    const navLinksElements = this.shadowRoot.querySelectorAll('.nav-link');
+    navLinksElements.forEach(link => {
+      const href = link.getAttribute('href');
+      if ((currentPath === '/' && href === '/') ||
+          (currentPath !== '/' && href === currentPath) ||
+          (currentPath.endsWith(href) && href !== '/')) {
+        link.classList.add('active');
+      }
+    });
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -12,8 +12,7 @@
 </head>
 <body class="bg-black text-white">
     <custom-header></custom-header>
-    <main>
         <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
             <!-- Animated background -->
             <div class="absolute inset-0 bg-gradient-to-r from-red-700 via-black to-red-900 opacity-20 animate-pulse"></div>
@@ -149,9 +148,8 @@
     </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();

 </head>
 <body class="bg-black text-white">
     <custom-header></custom-header>
+<main>
         <section class="min-h-screen flex items-center justify-center relative overflow-hidden">
             <!-- Animated background -->
             <div class="absolute inset-0 bg-gradient-to-r from-red-700 via-black to-red-900 opacity-20 animate-pulse"></div>
     </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();

meme.html CHANGED Viewed

@@ -12,8 +12,7 @@
 </head>
 <body class="bg-black text-white">
     <custom-header></custom-header>
-    <main class="py-12 px-6">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Meme Generator</h1>
             <p class="text-gray-400 text-center mb-12">Turn your memes into wearable art</p>
@@ -80,7 +79,7 @@
     <custom-footer></custom-footer>
     <script src="components/header.js"></script>
-    <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();

 </head>
 <body class="bg-black text-white">
     <custom-header></custom-header>
+<main class="py-12 px-6">
         <div class="max-w-4xl mx-auto">
             <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Meme Generator</h1>
             <p class="text-gray-400 text-center mb-12">Turn your memes into wearable art</p>
     <custom-footer></custom-footer>
     <script src="components/header.js"></script>
+<script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();

shop.html CHANGED Viewed

@@ -12,8 +12,7 @@
 </head>
 <body class="bg-black text-white">
     <custom-header></custom-header>
-    <main class="py-12 px-6">
         <div class="max-w-7xl mx-auto">
             <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Shop Collection</h1>
             <p class="text-gray-400 text-center mb-12">Wear your humor with pride</p>
@@ -142,9 +141,8 @@
     </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();

 </head>
 <body class="bg-black text-white">
     <custom-header></custom-header>
+<main class="py-12 px-6">
         <div class="max-w-7xl mx-auto">
             <h1 class="text-3xl md:text-4xl font-bold text-center mb-2">Shop Collection</h1>
             <p class="text-gray-400 text-center mb-12">Wear your humor with pride</p>
     </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();

style.css CHANGED Viewed

@@ -4,8 +4,8 @@ body {
 	margin: 0;
 	padding: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;

 	margin: 0;
 	padding: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+	padding-top: 80px; /* Space for fixed header */
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;