Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ToolBoost - Discord Enhancement Suite</title> | |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/1"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></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="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| .vanta-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| background: linear-gradient(135deg, #5865F2 0%, #3BA55C 100%); | |
| margin-bottom: 1rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-100 font-sans overflow-x-hidden"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="zap" class="text-indigo-400"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-green-400">ToolBoost</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="hover:text-indigo-300 transition">Features</a> | |
| <a href="#how-it-works" class="hover:text-indigo-300 transition">How It Works</a> | |
| <a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a> | |
| <a href="#faq" class="hover:text-indigo-300 transition">FAQ</a> | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg font-medium transition"> | |
| Get Started | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20 text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6" data-aos="fade-up"> | |
| Supercharge Your <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-green-400">Discord</span> Experience | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10" data-aos="fade-up" data-aos-delay="100"> | |
| The ultimate all-in-one toolkit for Discord power users. Automate, enhance, and take control of your server like never before. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-lg font-medium text-lg transition flex items-center justify-center gap-2"> | |
| <i data-feather="download"></i> Download Now | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 px-8 py-4 rounded-lg font-medium text-lg transition flex items-center justify-center gap-2"> | |
| <i data-feather="youtube"></i> Watch Demo | |
| </button> | |
| </div> | |
| <div class="mt-20 relative" data-aos="zoom-in" data-aos-delay="300"> | |
| <div class="glass-card p-1 inline-block rounded-2xl"> | |
| <img src="https://static.photos/technology/1200x630/5" alt="ToolBoost Dashboard" class="rounded-xl shadow-2xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold mb-4" data-aos="fade-up">Powerful Features</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Everything you need to take your Discord server to the next level | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="feature-icon"> | |
| <i data-feather="bot" class="text-white" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Advanced Bot Control</h3> | |
| <p class="text-gray-300"> | |
| Manage all your bots from one dashboard with enhanced controls, custom commands, and automation workflows. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="feature-icon"> | |
| <i data-feather="shield" class="text-white" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Server Protection</h3> | |
| <p class="text-gray-300"> | |
| Advanced anti-raid, anti-spam, and moderation tools to keep your community safe from bad actors. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="feature-icon"> | |
| <i data-feather="bar-chart-2" class="text-white" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Analytics Dashboard</h3> | |
| <p class="text-gray-300"> | |
| Detailed insights into server activity, member engagement, and growth metrics with beautiful visualizations. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="feature-icon"> | |
| <i data-feather="message-square" class="text-white" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Message Management</h3> | |
| <p class="text-gray-300"> | |
| Bulk delete, edit, or analyze messages with powerful filtering and search capabilities. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="feature-icon"> | |
| <i data-feather="users" class="text-white" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Member Management</h3> | |
| <p class="text-gray-300"> | |
| Advanced member controls including bulk actions, role management, and detailed member profiles. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="feature-icon"> | |
| <i data-feather="zap" class="text-white" width="28" height="28"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Automation</h3> | |
| <p class="text-gray-300"> | |
| Create custom workflows and automations to handle repetitive tasks and improve server efficiency. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="container mx-auto px-6 py-20 bg-gradient-to-b from-gray-900/50 to-gray-900/0"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold mb-4" data-aos="fade-up">How ToolBoost Works</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Get set up in minutes and start boosting your Discord experience | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Step 1 --> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-indigo-600/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <span class="text-2xl font-bold text-indigo-400">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Download & Install</h3> | |
| <p class="text-gray-300"> | |
| Get the ToolBoost application for Windows, macOS, or Linux. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="bg-indigo-600/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <span class="text-2xl font-bold text-indigo-400">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Connect Your Account</h3> | |
| <p class="text-gray-300"> | |
| Securely authenticate with your Discord account through OAuth2. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="text-center" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="bg-indigo-600/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <span class="text-2xl font-bold text-indigo-400">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Start Boosting</h3> | |
| <p class="text-gray-300"> | |
| Access all features through our intuitive dashboard and take control. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-20 text-center" data-aos="zoom-in"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-lg font-medium text-lg transition flex items-center justify-center gap-2 mx-auto"> | |
| <i data-feather="download"></i> Download ToolBoost Now | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold mb-4" data-aos="fade-up">Simple Pricing</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Choose the plan that fits your needs | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free Tier --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <h3 class="text-2xl font-bold mb-2">Basic</h3> | |
| <p class="text-gray-300 mb-6">For small servers getting started</p> | |
| <div class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Basic bot controls</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Limited automation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Basic moderation</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i data-feather="x" class="text-red-400 mr-2"></i> | |
| <span>Advanced analytics</span> | |
| </li> | |
| <li class="flex items-center text-gray-500"> | |
| <i data-feather="x" class="text-red-400 mr-2"></i> | |
| <span>Bulk actions</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-medium transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <!-- Pro Tier --> | |
| <div class="glass-card p-8 rounded-xl border-2 border-indigo-500 relative" data-aos="fade-up" data-aos-delay="250"> | |
| <div class="absolute top-0 right-0 bg-indigo-600 text-white px-4 py-1 rounded-bl-lg rounded-tr-lg text-sm font-medium"> | |
| Popular | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">Pro</h3> | |
| <p class="text-gray-300 mb-6">For growing communities</p> | |
| <div class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Advanced bot controls</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Full automation suite</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Advanced moderation</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Server analytics</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Bulk actions</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 py-3 rounded-lg font-medium transition"> | |
| Download Free | |
| </button> | |
| </div> | |
| <!-- Enterprise Tier --> | |
| <div class="glass-card p-8 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <h3 class="text-2xl font-bold mb-2">Enterprise</h3> | |
| <p class="text-gray-300 mb-6">For large communities & businesses</p> | |
| <div class="text-4xl font-bold mb-6">$0<span class="text-lg text-gray-400">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>All Pro features</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Custom integrations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Advanced API access</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="text-green-400 mr-2"></i> | |
| <span>Dedicated account manager</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-medium transition"> | |
| Download Free | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="container mx-auto px-6 py-20 bg-gradient-to-b from-gray-900/0 to-gray-900/50"> | |
| <div class="text-center mb-20"> | |
| <h2 class="text-4xl font-bold mb-4" data-aos="fade-up">Frequently Asked Questions</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Everything you need to know about ToolBoost | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="glass-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="200"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-medium">Is ToolBoost safe to use with Discord?</h3> | |
| <i data-feather="chevron-down" class="transform transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-4 text-gray-300 hidden"> | |
| <p>Yes, ToolBoost is completely safe to use with Discord. We use Discord's official API and follow all their terms of service. Your account security is our top priority, and we never store your Discord login credentials.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="glass-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="250"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-medium">Will using ToolBoost get my account banned?</h3> | |
| <i data-feather="chevron-down" class="transform transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-4 text-gray-300 hidden"> | |
| <p>No, ToolBoost operates within Discord's API limits and guidelines. We don't provide any features that would violate Discord's Terms of Service. However, we recommend using all automation features responsibly.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="glass-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="300"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-medium">What platforms does ToolBoost support?</h3> | |
| <i data-feather="chevron-down" class="transform transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-4 text-gray-300 hidden"> | |
| <p>ToolBoost is available for Windows, macOS, and Linux. We also offer a web dashboard for basic functionality. Our mobile apps are currently in development.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="glass-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="350"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-medium">Can I use ToolBoost on multiple servers?</h3> | |
| <i data-feather="chevron-down" class="transform transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-4 text-gray-300 hidden"> | |
| <p>Yes! With a Pro or Enterprise subscription, you can manage all the servers you have admin permissions on. The Basic free tier is limited to one server.</p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="glass-card p-6 rounded-xl" data-aos="fade-up" data-aos-delay="400"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-medium">How do I cancel my subscription?</h3> | |
| <i data-feather="chevron-down" class="transform transition-transform duration-300"></i> | |
| </button> | |
| <div class="mt-4 text-gray-300 hidden"> | |
| <p>You can cancel anytime from your account settings. Your subscription will remain active until the end of the current billing period, and you won't be charged again.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="container mx-auto px-6 py-20 text-center"> | |
| <div class="glass-card p-12 rounded-2xl max-w-4xl mx-auto" data-aos="zoom-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Boost Your Discord Experience?</h2> | |
| <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> | |
| Join thousands of server owners using ToolBoost for free to enhance their communities. | |
| </p> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-8 py-4 rounded-lg font-medium text-lg transition flex items-center justify-center gap-2 mx-auto"> | |
| <i data-feather="download"></i> Download Free | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="container mx-auto px-6 py-12 border-t border-gray-800/50"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i data-feather="zap" class="text-indigo-400"></i> | |
| <span class="text-xl font-bold">ToolBoost</span> | |
| </div> | |
| <p class="text-gray-400"> | |
| The ultimate toolkit for Discord power users. Enhance, automate, and take control of your server. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-400 hover:text-indigo-300 transition">Features</a></li> | |
| <li><a href="#pricing" class="text-gray-400 hover:text-indigo-300 transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Changelog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Roadmap</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-indigo-300 transition">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800/50 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0">© 2023 ToolBoost. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-indigo-300 transition"><i data-feather="twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-300 transition"><i data-feather="discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-300 transition"><i data-feather="github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-indigo-300 transition"><i data-feather="youtube"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x5865f2, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // FAQ accordion functionality | |
| document.querySelectorAll('#faq button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| if (content.classList.contains('hidden')) { | |
| content.classList.remove('hidden'); | |
| icon.classList.add('rotate-180'); | |
| } else { | |
| content.classList.add('hidden'); | |
| icon.classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |