1069 lines
61 KiB
HTML
1069 lines
61 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="scroll-smooth">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description"
|
|
content="Frequently asked questions about Plugin Compass - AI WordPress Plugin Builder. Learn how to build custom plugins, pricing, features, and more.">
|
|
<meta name="keywords"
|
|
content="Plugin Compass FAQ, WordPress plugin builder questions, AI plugin generator FAQ, custom WordPress plugins help">
|
|
<meta name="robots" content="index, follow">
|
|
<meta property="og:title" content="Plugin Compass FAQ - AI WordPress Plugin Builder">
|
|
<meta property="og:description"
|
|
content="Find answers to frequently asked questions about Plugin Compass. Learn how to build custom WordPress plugins with AI.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="">
|
|
<meta property="og:site_name" content="Plugin Compass">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Plugin Compass FAQ - AI WordPress Plugin Builder">
|
|
<meta name="twitter:description"
|
|
content="Find answers to frequently asked questions about Plugin Compass. Learn how to build custom WordPress plugins with AI.">
|
|
<link rel="canonical" href="">
|
|
<title>Plugin Compass FAQ - AI WordPress Plugin Builder</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<script>
|
|
(function () {
|
|
var url = window.location.origin + '/faq';
|
|
document.querySelector('link[rel="canonical"]').setAttribute('href', url);
|
|
document.querySelector('meta[property="og:url"]').setAttribute('content', url);
|
|
})();
|
|
</script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#818cf8',
|
|
500: '#6366f1',
|
|
600: '#4f46e5',
|
|
700: '#4338ca',
|
|
800: '#3730a3',
|
|
900: '#312e81',
|
|
950: '#1e1b4b',
|
|
}
|
|
},
|
|
animation: {
|
|
'blob': 'blob 7s infinite',
|
|
},
|
|
keyframes: {
|
|
blob: {
|
|
'0%': { transform: 'translate(0px, 0px) scale(1)' },
|
|
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
|
|
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
|
|
'100%': { transform: 'translate(0px, 0px) scale(1)' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #fdf6ed;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d1d5db;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #9ca3af;
|
|
}
|
|
|
|
.glass-nav {
|
|
background: rgba(251, 246, 239, 0.9);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(0, 66, 37, 0.1);
|
|
}
|
|
|
|
.hero-gradient-text {
|
|
background: linear-gradient(to right, #004225, #006B3D, #057857);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.faq-item {
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.faq-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.faq-question {
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
}
|
|
|
|
.faq-answer.active {
|
|
max-height: 1000px;
|
|
}
|
|
|
|
.faq-icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.faq-item.active .faq-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.toc-link {
|
|
border-left: 3px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.toc-link:hover,
|
|
.toc-link.active {
|
|
border-left-color: #004225;
|
|
background: rgba(0, 66, 37, 0.05);
|
|
}
|
|
|
|
.toc-link.active {
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
|
|
<!-- PostHog Analytics -->
|
|
<script src="/posthog.js"></script>
|
|
</head>
|
|
|
|
<body class="bg-amber-50 text-gray-900 font-sans antialiased overflow-x-hidden">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 glass-nav transition-all duration-300" id="navbar">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<!-- Logo -->
|
|
<a href="/" class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8">
|
|
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
|
class="text-green-700">Compass</span></span>
|
|
</a>
|
|
|
|
<!-- Desktop Menu -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
<a href="/features"
|
|
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Features</a>
|
|
<a href="/pricing"
|
|
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Pricing</a>
|
|
<a href="/docs"
|
|
class="text-gray-700 hover:text-gray-900 transition-colors text-sm font-medium">Docs</a>
|
|
<a href="/faq"
|
|
class="text-green-700 hover:text-gray-900 transition-colors text-sm font-medium">FAQ</a>
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="hidden md:flex items-center gap-4">
|
|
<a href="/login"
|
|
class="text-gray-700 hover:text-gray-900 font-medium text-sm transition-colors">Sign In</a>
|
|
<a href="/signup"
|
|
class="bg-green-700 hover:bg-green-600 text-white px-5 py-2.5 rounded-full font-medium text-sm transition-all shadow-lg shadow-green-700/20 hover:shadow-green-700/40 transform hover:-translate-y-0.5">
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<div class="md:hidden flex items-center">
|
|
<button id="mobile-menu-btn" class="text-gray-700 hover:text-gray-900 focus:outline-none">
|
|
<i class="fa-solid fa-bars text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Panel -->
|
|
<div id="mobile-menu" class="hidden md:hidden bg-amber-50 border-b border-amber-200">
|
|
<div class="px-4 pt-2 pb-6 space-y-1">
|
|
<a href="/features"
|
|
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Features</a>
|
|
<a href="/pricing"
|
|
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Pricing</a>
|
|
<a href="/docs"
|
|
class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">Docs</a>
|
|
<a href="/faq"
|
|
class="block px-3 py-3 text-base font-medium text-green-700 hover:text-gray-900 hover:bg-amber-100 rounded-md">FAQ</a>
|
|
<div class="pt-4 flex flex-col gap-3">
|
|
<a href="/login" class="w-full text-center py-2 text-gray-700 font-medium">Sign In</a>
|
|
<a href="/signup" class="w-full bg-green-700 text-white text-center py-3 rounded-lg font-medium">Get
|
|
Started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-32 pb-10 lg:pt-48 lg:pb-16 overflow-hidden">
|
|
<!-- Background Blobs -->
|
|
<div
|
|
class="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-green-600/20 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob">
|
|
</div>
|
|
<div
|
|
class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/4 w-96 h-96 bg-green-500/20 rounded-full mix-blend-multiply filter blur-[100px] opacity-40 animate-blob animation-delay-2000">
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
|
<h1 class="text-3xl md:text-7xl font-bold tracking-tight mb-6 leading-tight text-gray-900">
|
|
Frequently Asked <span class="hero-gradient-text">Questions</span>
|
|
</h1>
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-8">
|
|
<a href="/signup"
|
|
class="w-full sm:w-auto px-8 py-4 bg-green-700 text-white rounded-full font-bold hover:bg-green-600 transition-colors shadow-[0_0_20px_rgba(22,163,74,0.3)]">
|
|
Start Building Free
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Content -->
|
|
<section class="pt-4 pb-16 bg-amber-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
|
|
<!-- Table of Contents Sidebar -->
|
|
<div class="hidden lg:block">
|
|
<div class="sticky top-28">
|
|
<h3 class="text-sm font-bold text-gray-900 uppercase tracking-wider mb-4">Contents</h3>
|
|
<nav class="space-y-1">
|
|
<a href="#getting-started"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">Getting Started</a>
|
|
<a href="#how-it-works"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">How It Works</a>
|
|
<a href="#pricing"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">Pricing & Plans</a>
|
|
<a href="#features"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">Features &
|
|
Capabilities</a>
|
|
<a href="#technical"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">Technical
|
|
Details</a>
|
|
<a href="#security"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">Security &
|
|
Privacy</a>
|
|
<a href="#support"
|
|
class="toc-link block px-4 py-2 text-sm text-gray-600 rounded-r-lg">Support & Help</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Content -->
|
|
<div class="lg:col-span-3 space-y-12">
|
|
|
|
<!-- Getting Started -->
|
|
<div id="getting-started" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-play"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Getting Started</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Do I need coding experience to use
|
|
Plugin Compass?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">No coding experience is required!
|
|
Plugin Compass is designed for anyone who can describe what they need in
|
|
plain English. Our AI builder understands natural language and generates
|
|
production-ready code. However, if you do have coding knowledge, you can use
|
|
advanced features like terminal access and direct code editing.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">How long does it take to build a
|
|
plugin?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Most simple plugins can be built in 10
|
|
minutes to 30 minutes and complex plugin can be built within 45 minutes to 1 hour. The time depends
|
|
on the complexity of your requirements and how much iteration you want
|
|
during the build process.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What WordPress versions are
|
|
supported?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Plugin Compass generates plugins that
|
|
are compatible with WordPress 5.0 and above, including the latest WordPress
|
|
6.x versions. All generated code follows WordPress coding standards and best
|
|
practices to ensure compatibility and maintainability.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Can I use Plugin Compass with any
|
|
WordPress theme?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes! Plugins built with Plugin Compass
|
|
work with any standard WordPress theme, including popular themes like Astra,
|
|
Divi, Elementor, and custom themes. Our plugins follow WordPress standards
|
|
and don't rely on theme-specific functionality.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How It Works -->
|
|
<div id="how-it-works" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-cogs"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">How It Works</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">How does the AI builder work?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed mb-4">Our AI builder uses advanced
|
|
language models to understand your requirements and generate code. Here's
|
|
the process:</p>
|
|
<ol class="list-decimal list-inside space-y-2 text-gray-700">
|
|
<li>You describe your plugin needs in plain English</li>
|
|
<li>The AI creates a detailed plan with features and architecture</li>
|
|
<li>You review and iterate on the plan</li>
|
|
<li>The AI generates production-ready PHP and JavaScript code</li>
|
|
<li>You can refine features through conversation</li>
|
|
<li>Download your complete plugin as a ZIP file</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What should I include in my plugin
|
|
description?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed mb-4">For best results, include:</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700">
|
|
<li>What problem your plugin solves</li>
|
|
<li>Admin interfaces or settings pages you need</li>
|
|
<li>Data you want to store (custom post types, database tables)</li>
|
|
<li>User roles and permissions</li>
|
|
<li>Integrations with other plugins or services</li>
|
|
<li>Shortcodes or widgets you want to provide</li>
|
|
<li>Any specific workflows or business logic</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Can I iterate on my plugin after
|
|
it's built?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Absolutely! You can continue chatting
|
|
with the AI to add features, fix bugs, or refine functionality at any time.
|
|
The builder maintains your plugin's state and can make incremental changes.
|
|
You can also download the source code and modify it manually if you prefer.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">How do I install the generated
|
|
plugin?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed mb-4">Installing your plugin is simple:
|
|
</p>
|
|
<ol class="list-decimal list-inside space-y-2 text-gray-700">
|
|
<li>Download the ZIP file from Plugin Compass</li>
|
|
<li>Go to your WordPress admin dashboard</li>
|
|
<li>Navigate to Plugins → Add New</li>
|
|
<li>Click "Upload Plugin"</li>
|
|
<li>Select your ZIP file and install</li>
|
|
<li>Activate the plugin</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pricing & Plans -->
|
|
<div id="pricing" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-dollar-sign"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Pricing & Plans</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">How does the free plan work?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">The Hobby plan is free forever and
|
|
includes up to 3 apps, auto model selection, and 50k free AI credits per
|
|
month . This is perfect for personal projects,
|
|
learning, or trying out the platform. No credit card is required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What happens if I exceed my AI
|
|
credits?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">If you exceed your monthly AI credit
|
|
limit, you can either upgrade to a higher plan with more credits or purchase
|
|
additional credits as needed. Paid plans (Professional and Agency) include
|
|
significantly more credits to handle larger projects.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Can I change or cancel my plan
|
|
anytime?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes, you can upgrade, downgrade, or
|
|
cancel your plan at any time. If you downgrade, you'll retain access to your
|
|
current plan until the end of your billing period. Cancelled plans will
|
|
revert to the free Hobby plan at the next billing cycle.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Do I own the code I generate?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes! You have full ownership of all
|
|
code generated on Plugin Compass. You can modify it, distribute it, sell it,
|
|
or use it in commercial projects. There are no licensing fees, royalties, or
|
|
restrictions on how you use the code you create.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What payment methods do you accept?
|
|
</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">We accept all major credit cards (Visa,
|
|
MasterCard, American Express, Discover). We support payments
|
|
in USD, GBP, and EUR .</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features & Capabilities -->
|
|
<div id="features" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-puzzle-piece"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Features & Capabilities</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What types of plugins can I build?
|
|
</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed mb-4">You can build virtually any type
|
|
of WordPress plugin, including:</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700">
|
|
<li>Custom post types and taxonomies</li>
|
|
<li>Admin dashboards and settings pages</li>
|
|
<li>Shortcodes and Gutenberg blocks</li>
|
|
<li>REST API endpoints</li>
|
|
<li>Integration with third-party services</li>
|
|
<li>Custom database tables and queries</li>
|
|
<li>User role and permission management</li>
|
|
<li>E-commerce and payment integrations</li>
|
|
<li>Content management workflows</li>
|
|
<li>Analytics and reporting tools</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Can I create custom admin
|
|
interfaces?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes! Plugin Compass can generate custom
|
|
admin panels, settings pages, data tables, forms, and dashboards. You can
|
|
specify the exact layout, fields, and functionality you need. The AI builds
|
|
responsive interfaces that work on desktop and mobile.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Does Plugin Compass support REST API
|
|
development?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Absolutely. You can build WordPress
|
|
plugins with custom REST API endpoints, including proper authentication,
|
|
input validation, error handling, and documentation. This is perfect for
|
|
headless WordPress implementations or mobile app backends.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Can I integrate with other plugins
|
|
or services?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes! Plugin Compass can create
|
|
integrations with popular plugins (WooCommerce, ACF, Gravity Forms, etc.)
|
|
and external services (Dodo Payments, Mailchimp, Google Maps, etc.). Simply
|
|
describe the integration you need, and the AI will handle the API
|
|
connections and data flow.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technical Details -->
|
|
<div id="technical" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-code"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Technical Details</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What programming languages are used?
|
|
</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Plugins are built using standard
|
|
WordPress technologies: PHP for backend logic and JavaScript for frontend
|
|
functionality. The generated code follows WordPress coding standards and is
|
|
clean, well-documented, and maintainable.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Is the generated code
|
|
production-ready?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes, the code generated by Plugin
|
|
Compass is production-ready. It includes proper security measures (CSRF
|
|
protection, input sanitization, capability checks), follows WordPress best
|
|
practices, and is optimized for performance. We recommend testing before
|
|
deployment, as with any software.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security & Privacy -->
|
|
<div id="security" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-shield-alt"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Security & Privacy</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Is my code and data secure?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Absolutely. We use industry-standard
|
|
encryption for data in transit and at rest. Your projects are isolated and
|
|
accessible only by you. We don't share your code with third parties or use
|
|
it to train our models. Your intellectual property remains yours.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What security features are included
|
|
in generated plugins?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed mb-4">All generated plugins include:</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700">
|
|
<li>CSRF protection for all forms</li>
|
|
<li>Input validation and sanitization</li>
|
|
<li>SQL injection prevention</li>
|
|
<li>XSS protection</li>
|
|
<li>Proper capability checks</li>
|
|
<li>Nonce verification</li>
|
|
<li>Secure file handling</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Do you store my conversations or
|
|
plugin code?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">We store your conversations and plugin
|
|
code in your personal workspace so you can return to your projects anytime.
|
|
This data is encrypted and accessible only by you. You can delete your
|
|
projects at any time from your dashboard.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support & Help -->
|
|
<div id="support" class="scroll-mt-28">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div
|
|
class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-700">
|
|
<i class="fa-solid fa-headset"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-900">Support & Help</h2>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl border border-green-200 shadow-sm overflow-hidden">
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">What support options are available?
|
|
</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed mb-4">We offer multiple support
|
|
channels:</p>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-700">
|
|
<li><strong>Documentation:</strong> Comprehensive guides and tutorials</li>
|
|
<li><strong>Email Support:</strong> Available to all members</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">How do I get help if my plugin isn't
|
|
working?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Start by checking our documentation for
|
|
common issues. If you're still stuck, describe the problem to the AI builder
|
|
- it can help debug and fix many issues. For complex technical problems,
|
|
paid plan members can email our support team with details.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Can I request new features?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">We love hearing from our users! You can
|
|
submit feature requests through our community forums or by emailing support.
|
|
We regularly add new features and improvements based on user feedback. You can use the feature request form to suggest specific capabilities or enhancements you'd like to see.
|
|
Popular requests are prioritized for development.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Where can I find tutorials and
|
|
examples?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Visit our Documentation section for
|
|
step-by-step tutorials, example projects, and best practices. We cover
|
|
everything from basic plugin creation to advanced integrations. You can also
|
|
find video tutorials and community-created examples in our resources
|
|
library.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question p-6 flex justify-between items-center"
|
|
onclick="toggleFaq(this)">
|
|
<h3 class="text-lg font-semibold text-gray-900">Does the app allow for existing plugins?</h3>
|
|
<i class="fa-solid fa-chevron-down faq-icon text-green-700"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="px-6 pb-6">
|
|
<p class="text-gray-700 leading-relaxed">Yes, paid members can upload zips of plugins and edit them using plugin compass.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Still Have Questions CTA -->
|
|
<section class="py-20 bg-green-900 text-white">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Still Have Questions?</h2>
|
|
<p class="text-green-200 text-xl mb-8">Can't find the answer you're looking for? Our team is here to help.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row justify-center items-center gap-4">
|
|
<a href="/contact"
|
|
class="w-full sm:w-auto px-8 py-4 bg-white text-green-700 rounded-full font-bold hover:bg-green-50 transition-colors">
|
|
Contact Support
|
|
</a>
|
|
<a href="/docs"
|
|
class="w-full sm:w-auto px-8 py-4 border-2 border-white text-white rounded-full font-bold hover:bg-white/10 transition-colors">
|
|
Browse Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white border-t border-green-200 pt-16 pb-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 lg:grid-cols-5 gap-12 mb-16">
|
|
<div class="col-span-2 lg:col-span-1">
|
|
<div class="flex items-center gap-2 mb-6">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8">
|
|
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
|
class="text-green-700">Compass</span></span>
|
|
</div>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
The smart way for WordPress site owners to replace expensive plugin subscriptions with custom
|
|
solutions. Save thousands monthly.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900 mb-6">Product</h4>
|
|
<ul class="space-y-4 text-sm">
|
|
<li><a href="/features" class="text-gray-600 hover:text-green-700">Features</a></li>
|
|
<li><a href="/pricing" class="text-gray-600 hover:text-green-700">Pricing</a></li>
|
|
<li><a href="#" class="text-gray-600 hover:text-green-700">Templates</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900 mb-6">Resources</h4>
|
|
<ul class="space-y-4 text-sm">
|
|
<li><a href="/docs" class="text-gray-600 hover:text-green-700">Documentation</a></li>
|
|
<li><a href="/faq" class="text-gray-600 hover:text-green-700">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900 mb-6">Legal</h4>
|
|
<ul class="space-y-4 text-sm">
|
|
<li><a href="/privacy.html" class="text-gray-600 hover:text-green-700">Privacy Policy</a></li>
|
|
<li><a href="/terms" class="text-gray-600 hover:text-green-700">Terms of Service</a></li>
|
|
<li><a href="/contact" class="text-gray-600 hover:text-green-700">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-2 lg:col-span-1">
|
|
<h4 class="font-bold text-gray-900 mb-6">Stay Updated</h4>
|
|
<p class="text-gray-600 text-sm mb-4">Get the latest updates and WordPress tips.</p>
|
|
<form id="footer-signup-form" class="flex flex-col gap-2">
|
|
<input type="email" name="email" placeholder="Your email" required
|
|
class="px-4 py-2 border border-green-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700/20 text-sm">
|
|
<button type="submit"
|
|
class="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium text-sm transition-colors shadow-lg shadow-green-700/10">
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
<div id="signup-message" class="mt-2 text-xs hidden"></div>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-100 pt-8 flex justify-center">
|
|
<p class="text-gray-500 text-xs text-center">© 2026 Plugin Compass. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Mobile Menu Toggle
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuBtn && mobileMenu) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
}
|
|
|
|
// FAQ Toggle Function
|
|
function toggleFaq(element) {
|
|
const faqItem = element.parentElement;
|
|
const faqAnswer = faqItem.querySelector('.faq-answer');
|
|
|
|
// Close all other FAQs
|
|
const allFaqItems = document.querySelectorAll('.faq-item');
|
|
allFaqItems.forEach(item => {
|
|
if (item !== faqItem) {
|
|
item.classList.remove('active');
|
|
item.querySelector('.faq-answer').classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Toggle current FAQ
|
|
faqItem.classList.toggle('active');
|
|
faqAnswer.classList.toggle('active');
|
|
}
|
|
|
|
// Table of Contents Active State
|
|
const sections = document.querySelectorAll('div[id]');
|
|
const tocLinks = document.querySelectorAll('.toc-link');
|
|
|
|
function updateActiveToc() {
|
|
let currentSection = '';
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
if (window.scrollY >= sectionTop - 150) {
|
|
currentSection = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
tocLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === '#' + currentSection) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener('scroll', updateActiveToc);
|
|
updateActiveToc();
|
|
|
|
// Smooth scroll for TOC links
|
|
document.querySelectorAll('.toc-link').forEach(link => {
|
|
link.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', () => {
|
|
const navbar = document.getElementById('navbar');
|
|
if (!navbar) return;
|
|
if (window.scrollY > 20) {
|
|
navbar.classList.add('shadow-md', 'h-16');
|
|
navbar.classList.remove('h-20');
|
|
} else {
|
|
navbar.classList.remove('shadow-md', 'h-16');
|
|
navbar.classList.add('h-20');
|
|
}
|
|
});
|
|
|
|
// Email Signup Form Handler
|
|
const signupForm = document.getElementById('footer-signup-form');
|
|
const signupMessage = document.getElementById('signup-message');
|
|
|
|
if (signupForm) {
|
|
signupForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = signupForm.querySelector('input[name="email"]').value;
|
|
const button = signupForm.querySelector('button');
|
|
|
|
button.disabled = true;
|
|
button.textContent = 'Subscribing...';
|
|
|
|
try {
|
|
const response = await fetch('https://emailmarketing.modelrailway3d.co.uk/api/webhooks/incoming/wh_0Z49zi_DGj4-lKJMOPO8-g', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: email,
|
|
source: 'plugin_compass_footer',
|
|
timestamp: new Date().toISOString()
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
signupMessage.textContent = 'Successfully subscribed!';
|
|
signupMessage.className = 'mt-2 text-xs text-green-600';
|
|
signupForm.reset();
|
|
} else {
|
|
throw new Error('Failed to subscribe');
|
|
}
|
|
} catch (error) {
|
|
signupMessage.textContent = 'Failed to subscribe. Please try again.';
|
|
signupMessage.className = 'mt-2 text-xs text-red-600';
|
|
} finally {
|
|
signupMessage.classList.remove('hidden');
|
|
button.disabled = false;
|
|
button.textContent = 'Subscribe';
|
|
|
|
setTimeout(() => {
|
|
signupMessage.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |