API tools faq
paste
Advertisement
spiralvibes

Made By ZayDocs | CubeCloud Team

spiralvibes
Nov 20th, 2024
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <?php include("includes/header.php"); ?>
  6.     <title>CubeCloud Bot | Home</title>
  7.     <style>
  8.         /* Base Styles */
  9.         body {
  10.             font-family: Arial, sans-serif;
  11.             transition: background-color 0.3s, color 0.3s;
  12.             background-color: #121212;
  13.             color: #f4f4f4;
  14.         }
  15.  
  16.         /* Light Mode */
  17.         .light-mode body {
  18.             background-color: #ffffff;
  19.             color: #000000;
  20.         }
  21.  
  22.         .light-mode .bg-dark {
  23.             background-color: #f1f1f1 !important;
  24.         }
  25.  
  26.         .light-mode .text-accent-colour {
  27.             color: #4169e1;
  28.         }
  29.  
  30.         .light-mode .btn-accent {
  31.             background-color: #4169e1;
  32.             color: #fff;
  33.         }
  34.  
  35.         .light-mode .btn-accent:hover {
  36.             background-color: #3658b3;
  37.         }
  38.  
  39.         .light-mode .navbar {
  40.             background-color: #f8f9fa;
  41.         }
  42.  
  43.         .light-mode .navbar a {
  44.             color: #333;
  45.         }
  46.  
  47.         .light-mode .navbar a:hover {
  48.             color: #4169e1;
  49.         }
  50.  
  51.         .light-mode footer {
  52.             background-color: #f1f1f1;
  53.             color: #333;
  54.         }
  55.  
  56.         .light-mode footer a {
  57.             color: #4169e1;
  58.         }
  59.  
  60.         .light-mode footer a:hover {
  61.             text-decoration: underline;
  62.         }
  63.  
  64.         /* Dark Mode */
  65.         .dark-mode .bg-dark {
  66.             background-color: #1a1a1a !important;
  67.         }
  68.  
  69.         .dark-mode .text-accent-colour {
  70.             color: #4169e1;
  71.         }
  72.  
  73.         .dark-mode .btn-accent {
  74.             background-color: #4169e1;
  75.             color: #fff;
  76.         }
  77.  
  78.         .dark-mode .btn-accent:hover {
  79.             background-color: #3658b3;
  80.         }
  81.  
  82.         .dark-mode .navbar {
  83.             background-color: #333;
  84.         }
  85.  
  86.         .dark-mode .navbar a {
  87.             color: #f4f4f4;
  88.         }
  89.  
  90.         .dark-mode .navbar a:hover {
  91.             color: #4169e1;
  92.         }
  93.  
  94.         .dark-mode footer {
  95.             background-color: #1a1a1a;
  96.             color: #f4f4f4;
  97.         }
  98.  
  99.         .dark-mode footer a {
  100.             color: #4169e1;
  101.         }
  102.  
  103.         .dark-mode footer a:hover {
  104.             text-decoration: underline;
  105.         }
  106.  
  107.         /* Toggle Button */
  108.         .toggle-btn {
  109.             position: fixed;
  110.             top: 20px;
  111.             right: 20px;
  112.             background-color: #4169e1;
  113.             border: none;
  114.             color: #fff;
  115.             padding: 10px 20px;
  116.             font-size: 16px;
  117.             cursor: pointer;
  118.             border-radius: 5px;
  119.         }
  120.  
  121.         .toggle-btn:hover {
  122.             background-color: #3658b3;
  123.         }
  124.  
  125.         .navbar {
  126.             padding: 15px;
  127.         }
  128.     </style>
  129. </head>
  130.  
  131. <body class="dark-mode">
  132.  
  133.     <!-- Navbar -->
  134.     <?php include("includes/navbar-index.php"); ?>
  135.  
  136.     <!-- Light/Dark Mode Toggle Button -->
  137.     <button class="toggle-btn" id="toggleMode">Switch to Light Mode</button>
  138.  
  139.     <!-- Info Section -->
  140.     <section class="bg-dark text-light text-center py-5">
  141.         <div class="container">
  142.             <div class="d-flex">
  143.                 <div>
  144.                     <h1><span class="text-accent-colour">CubeCloud</span> Bot</h1>
  145.                     <p>CubeCloud Bot is an integrated bot that separates you from the rest of the bots, with everything you need built in.</p>
  146.                     <a class="btn btn-accent" href="">Invite Bot</a>
  147.                     <a class="m-2 btn btn-light" href="">Support Server</a>
  148.                 </div>
  149.                 <img class="img-fluid w-50" src="assets/img/CubeCloudBot.svg" alt="">
  150.             </div>
  151.         </div>
  152.     </section>
  153.  
  154.     <!-- Features Section -->
  155.     <section id="Features" class="py-5">
  156.         <div class="container">
  157.             <h2 class="text-center mb-4">Features</h2>
  158.             <div class="row text-center">
  159.                 <div class="col-sm">
  160.                     <div class="card bg-dark text-light mb-3">
  161.                         <div class="h1 mt-3">
  162.                             <i class="fa-solid fa-clock-rotate-left"></i>
  163.                         </div>
  164.                         <div class="card-body text-center">
  165.                             <h4 class="card-title text-accent-colour">Commands</h4>
  166.                             <p class="card-text">We have more than 50 commands supported in this bot.</p>
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.                 <div class="col-sm">
  171.                     <div class="card bg-dark text-light mb-3">
  172.                         <div class="h1 mt-3">
  173.                             <i class="fa-solid fa-arrow-up-from-bracket"></i>
  174.                         </div>
  175.                         <div class="card-body text-center">
  176.                             <h4 class="card-title text-accent-colour">24/7 Online</h4>
  177.                             <p class="card-text">The biggest support community server for the bot available for you anytime.</p>
  178.                         </div>
  179.                     </div>
  180.                 </div>
  181.                 <div class="col-sm">
  182.                     <div class="card bg-dark text-light mb-3">
  183.                         <div class="h1 mt-3">
  184.                             <i class="fa-solid fa-folder-open"></i>
  185.                         </div>
  186.                         <div class="card-body text-center">
  187.                             <h4 class="card-title text-accent-colour">Customization</h4>
  188.                             <p class="card-text">Fully customizable Discord bot, completely FREE!</p>
  189.                         </div>
  190.                     </div>
  191.                 </div>
  192.             </div>
  193.         </div>
  194.     </section>
  195.  
  196.     <!-- Statistics Section -->
  197.     <section id="Statistics" class="py-5 bg-dark text-light">
  198.         <div class="container">
  199.             <div class="py-2 text-center">
  200.                 <h2>Statistics</h2>
  201.             </div>
  202.             <div class="row align-items-center justify-content-center text-center">
  203.                 <div class="col">
  204.                     <img src="assets/img/statics.svg" alt="" class="img-fluid d-none d-md-block">
  205.                 </div>
  206.                 <div class="col-sm p-5 h1">
  207.                     <i class="fa-solid fa-server text-accent-colour"></i>
  208.                     <h5>70+</h5>
  209.                     <h5>Servers</h5>
  210.                 </div>
  211.                 <div class="col-sm p-5 h1">
  212.                     <i class="fa-solid fa-user-group text-accent-colour"></i>
  213.                     <h5>90k+</h5>
  214.                     <h5>Users</h5>
  215.                 </div>
  216.                 <div class="col-sm p-5 h1">
  217.                     <i class="fa-solid fa-hashtag text-accent-colour"></i>
  218.                     <h5>50+</h5>
  219.                     <h5>Commands</h5>
  220.                 </div>
  221.             </div>
  222.         </div>
  223.     </section>
  224.  
  225.     <!-- FAQ Section -->
  226.     <section id="FAQ" class="py-5">
  227.         <div class="container">
  228.             <h2 class="text-center mb-3">Frequently Asked Questions</h2>
  229.             <div class="accordion accordion-flush" id="your-faq">
  230.                 <div class="accordion-item">
  231.                     <h5 class="accordion-header" id="question-1">
  232.                         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#answer-1">
  233.                             How can I invite the bot?
  234.                         </button>
  235.                     </h5>
  236.                     <div class="accordion-collapse collapse" id="answer-1" data-bs-parent="#your-faq">
  237.                         <div class="p-3">
  238.                             You can invite the bot on this page or in Discord. Just click on the bot and add it to your server.
  239.                         </div>
  240.                     </div>
  241.                 </div>
  242.             </div>
  243.         </div>
  244.     </section>
  245.  
  246.     <!-- Footer -->
  247.     <?php include("includes/footer.php"); ?>
  248.  
  249.     <!-- Javascript -->
  250.     <?php include("includes/javascript.php"); ?>
  251.  
  252.     <!-- Toggle Mode Script -->
  253.     <script>
  254.         const toggleButton = document.getElementById("toggleMode");
  255.  
  256.         toggleButton.addEventListener("click", () => {
  257.             document.body.classList.toggle("light-mode");
  258.             document.body.classList.toggle("dark-mode");
  259.  
  260.             if (document.body.classList.contains("light-mode")) {
  261.                 toggleButton.textContent = "Switch to Dark Mode";
  262.                 document.body.style.color = "#000";  // Change text color to black for light mode
  263.             } else {
  264.                 toggleButton.textContent = "Switch to Light Mode";
  265.                 document.body.style.color = "#f4f4f4";  // Keep text color white for dark mode
  266.             }
  267.         });
  268.     </script>
  269.  
  270. </body>
  271.  
  272. </html>
  273.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!