Spaces:

kaidjuric
/

fpd-auto-setup

Running

App Files Files Community

kaidjuric commited on Nov 28, 2025

Commit

7466f9c

verified ·

1 Parent(s): 66b3ba1

FPD Auto-Setup Plugin v1.0.0

Browse files

Files changed (4) hide show

components/header.js +84 -0
index.html +7 -122
script.js +42 -0
style.css +172 -21

components/header.js ADDED Viewed

	@@ -0,0 +1,84 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .header-gradient {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          width: 100%;
+        }
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 15px;
+        }
+        .header-content {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 1.5rem 0;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .logo-icon {
+          font-size: 1.75rem;
+        }
+        .logo-text {
+          font-size: 1.25rem;
+          font-weight: 700;
+        }
+        .nav-links {
+          display: flex;
+          align-items: center;
+          gap: 1.5rem;
+        }
+        .nav-link {
+          color: white;
+          text-decoration: none;
+          transition: opacity 0.2s;
+        }
+        .nav-link:hover {
+          opacity: 0.8;
+          text-decoration: underline;
+        }
+        .settings-btn {
+          background: white;
+          color: #764ba2;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .settings-btn:hover {
+          background: #f8f9fa;
+        }
+      </style>
+      <header class="header-gradient">
+        <div class="container">
+          <div class="header-content">
+            <div class="logo">
+              <i class="fas fa-magic logo-icon"></i>
+              <h1 class="logo-text">FPD Auto-Setup</h1>
+            </div>
+            <div class="nav-links">
+              <a href="/documentation.html" class="nav-link">Documentation</a>
+              <a href="/support.html" class="nav-link">Support</a>
+              <button class="settings-btn">
+                <i class="fas fa-cog"></i>
+                Settings
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,89 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FPD Auto-Setup</title>
-    <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        .fpd-gradient-bg {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-        .fpd-shadow {
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-        }
-        .fpd-pulse {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-            50% {
-                transform: scale(1.05);
-            }
-            100% {
-                transform: scale(1);
-            }
-        }
-        .tooltip {
-            position: relative;
-        }
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 200px;
-            background-color: #555;
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 5px;
-            position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -100px;
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-        .tooltip .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: #555 transparent transparent transparent;
-        }
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-        }
-    </style>
 </head>
-<body class="bg-gray-100">
-    <div class="min-h-screen">
-        <!-- Header -->
-        <header class="fpd-gradient-bg text-white">
-            <div class="container mx-auto px-4 py-6">
-                <div class="flex items-center justify-between">
-                    <div class="flex items-center space-x-4">
-                        <i class="fas fa-magic text-3xl"></i>
-                        <h1 class="text-2xl font-bold">FPD Auto-Setup</h1>
-                    </div>
-                    <div class="flex items-center space-x-4">
-                        <a href="#" class="hover:underline">Documentation</a>
-                        <a href="#" class="hover:underline">Support</a>
-                        <button class="bg-white text-purple-700 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition">
-                            <i class="fas fa-cog mr-2"></i>Settings
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </header>
-        <!-- Main Content -->
         <main class="container mx-auto px-4 py-8">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Left Sidebar -->
@@ -349,49 +276,7 @@
             </div>
         </footer>
     </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Demo functionality - would be replaced with actual WordPress/PHP code
-            console.log('FPD Auto-Setup Plugin UI Loaded');
-            // Tooltip functionality
-            const tooltips = document.querySelectorAll('.tooltip');
-            tooltips.forEach(tooltip => {
-                tooltip.addEventListener('mouseenter', function() {
-                    this.querySelector('.tooltip-text').style.visibility = 'visible';
-                    this.querySelector('.tooltip-text').style.opacity = '1';
-                });
-                tooltip.addEventListener('mouseleave', function() {
-                    this.querySelector('.tooltip-text').style.visibility = 'hidden';
-                    this.querySelector('.tooltip-text').style.opacity = '0';
-                });
-            });
-            // Execute button click handler
-            const executeBtn = document.querySelector('.bg-purple-600.hover\\:bg-purple-700');
-            if (executeBtn) {
-                executeBtn.addEventListener('click', function() {
-                    alert('This would execute the FPD setup process. In a real plugin, this would make an AJAX call to WordPress.');
-                });
-            }
-            // Sample wizard navigation
-            const wizardBtns = document.querySelectorAll('.bg-gray-200.hover\\:bg-gray-300');
-            wizardBtns.forEach(btn => {
-                btn.addEventListener('click', function() {
-                    // Remove active class from current active button
-                    document.querySelector('.fpd-pulse').classList.remove('fpd-pulse', 'bg-purple-600', 'text-white');
-                    document.querySelector('.fpd-pulse').classList.add('bg-gray-200', 'text-gray-700');
-                    // Add active class to clicked button
-                    this.classList.remove('bg-gray-200', 'text-gray-700');
-                    this.classList.add('fpd-pulse', 'bg-purple-600', 'text-white');
-                    alert('In a real plugin, this would navigate between wizard steps.');
-                });
-            });
-        });
-    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kaidjuric/fpd-auto-setup" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FPD Auto-Setup</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
 </head>
+<body>
+    <custom-header></custom-header>
+<!-- Main Content -->
         <main class="container mx-auto px-4 py-8">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Left Sidebar -->
             </div>
         </footer>
     </div>
+    <script src="components/header.js"></script>
+    <script src="script.js"></script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kaidjuric/fpd-auto-setup" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

script.js ADDED Viewed

	@@ -0,0 +1,42 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Tooltip functionality
+    const tooltips = document.querySelectorAll('.tooltip');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseenter', function() {
+            this.querySelector('.tooltip-text').style.visibility = 'visible';
+            this.querySelector('.tooltip-text').style.opacity = '1';
+        });
+        tooltip.addEventListener('mouseleave', function() {
+            this.querySelector('.tooltip-text').style.visibility = 'hidden';
+            this.querySelector('.tooltip-text').style.opacity = '0';
+        });
+    });
+    // Execute button click handler
+    const executeBtn = document.querySelector('.btn-primary');
+    if (executeBtn) {
+        executeBtn.addEventListener('click', function() {
+            alert('This would execute the FPD setup process. In a real plugin, this would make an AJAX call to WordPress.');
+        });
+    }
+    // Wizard navigation
+    const wizardBtns = document.querySelectorAll('.wizard-btn');
+    wizardBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            // Remove active class from current active button
+            document.querySelector('.wizard-btn.active').classList.remove('active', 'pulse');
+            // Add active class to clicked button
+            this.classList.add('active', 'pulse');
+            alert('In a real plugin, this would navigate between wizard steps.');
+        });
+    });
+    // Settings button in header
+    const settingsBtn = document.querySelector('.settings-btn');
+    if (settingsBtn) {
+        settingsBtn.addEventListener('click', function() {
+            alert('Settings modal would open here');
+        });
+    }
+});

style.css CHANGED Viewed

@@ -1,34 +1,185 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-/* Coffee mug product specific styling */
-.product-mug {
-    background-color: #f3e8ff;
-    border-left: 4px solid #8b5cf6;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+  --primary: #667eea;
+  --primary-dark: #764ba2;
+  --text: #2d3748;
+  --text-light: #718096;
+  --bg: #f7fafc;
+  --white: #ffffff;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 body {
+  background-color: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+  min-height: 100vh;
 }
+main {
+  padding: 2rem 0;
 }
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 15px;
+}
+/* Animation */
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
 }
+.pulse {
+  animation: pulse 2s infinite;
 }
+/* Tooltip */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+.tooltip .tooltip-text {
+  visibility: hidden;
+  width: 200px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: var(--radius-sm);
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.tooltip .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+  outline: none;
+}
+.btn-primary {
+  background-color: var(--primary);
+  color: white;
+}
+.btn-primary:hover {
+  background-color: #5a67d8;
+}
+.btn-outline {
+  background-color: transparent;
+  border: 1px solid var(--gray-300);
+  color: var(--text);
+}
+.btn-outline:hover {
+  background-color: var(--gray-100);
+}
+/* Cards */
 .card {
+  background-color: var(--white);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--primary-dark);
+}
+/* Grid */
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+/* Utilities */
+.text-center {
+  text-align: center;
+}
+.font-semibold {
+  font-weight: 600;
 }
+.text-purple-800 {
+  color: var(--primary-dark);
 }
+.bg-purple-100 {
+  background-color: #e9d8fd;
+}
+.hover\:bg-purple-200:hover {
+  background-color: #d6bcfa;
+}
+/* Responsive */
+@media (min-width: 768px) {
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+}