Style.

partners/kujira/bot/index.html

@@ -7,6 +7,8 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
 
     <title>Funttastic + Kujira + Hummingbot</title>
 </head>
@@ -49,7 +51,7 @@ <h2 class="sub-heading">Installation</h2>
 
 <details>
     <summary class="details-heading">
-        <span style="font-size:22px; font-weight:bold">Cloning Repository</span>
+        <span style="font-size:21px; font-weight:bolder"><i style="font-size:17px;" class="fas fa-chevron-right "></i> Cloning Repository</span>
     </summary>
     <h4 class="sub-heading">Step 1 - Install Git</h4>
     <p>Install Git to be able to clone the repository:</p>
@@ -75,7 +77,7 @@ <h4 class="sub-heading">Step 2 - Cloning Repository</h4>
 
 <details>
     <summary class="details-heading">
-        <span style="font-size:22px; font-weight:bold">Opening Script Main Menu</span>
+            <span style="font-size:21px; font-weight:bolder"><i style="font-size:17px;" class="fas fa-chevron-right "></i> Opening Script Main Menu</span>
     </summary>
     <h4 class="sub-heading">Step 1 - After cloning the repository</h4>
     <p>Open the repository folder with the command below:</p>
@@ -90,7 +92,7 @@ <h4 class="sub-heading">Step 2 - Start the installation helper script</h4>
 
 <details>
     <summary class="details-heading">
-        <span style="font-size:22px; font-weight:bold">Installation Steps</span>
+        <span style="font-size:21px; font-weight:bolder"><i style="font-size:17px;" class="fas fa-chevron-right "></i> Installation Steps</span>
     </summary>
 
     <h4 class="sub-heading">Step 1 - Select the installation option from the main menu</h4>
@@ -120,7 +122,7 @@ <h4 class="sub-heading">Step 5 - Default installation settings?</h4>
 
 <details>
     <summary class="details-heading">
-        <span style="font-size:22px; font-weight:bold">Opening The Frontend</span>
+        <span style="font-size:21px; font-weight:bolder"><i style="font-size:17px;" class="fas fa-chevron-right "></i> Opening The Frontend</span>
     </summary>
 
     <h4 class="sub-heading">Step 1 - From the main menu, select the Actions option</h4>
@@ -134,7 +136,7 @@ <h4 class="sub-heading">Step 1 - From the main menu, select the Actions option</
     <p>To open the Frontend, select the <strong>[7] OPEN FUNTTASTIC FRONTEND</strong> option by typing "7" and press <strong>Enter</strong>.</p>
     <img src="../../../assets/images/script/actions_menu.png" alt="Actions Menu">
 
-    <p>When you choose the option to open the Funttastic Frontend, it will open in your web browser, or you can use the URL <a href="http://localhost:50000/">http://localhost:50000/</a>.</p>
+    <p>When you choose the option to open the Funttastic Frontend, it will open in your web browser, or you can use the URL <a href="http://localhost:30000/">http://localhost:30000/</a>.</p>
 
     <p>You will see a screen as shown below.</p>
     <p>Enter your username and password defined during installation.</p>
@@ -146,7 +148,7 @@ <h4 class="sub-heading">Step 1 - From the main menu, select the Actions option</
 
 <details>
     <summary class="details-heading">
-        <span style="font-size:22px; font-weight:bold">Adding Wallet</span>
+        <span style="font-size:21px; font-weight:bolder"><i style="font-size:17px;" class="fas fa-chevron-right "></i> Adding Wallet</span>
     </summary>
 
     <h4 class="sub-heading">Step 1 - Adding Wallet With Mnemonic</h4>
@@ -172,7 +174,7 @@ <h4 class="sub-heading">Step 2 - Confirming Wallet Addition</h4>
 
 <details>
     <summary class="details-heading">
-        <span style="font-size:22px; font-weight:bold">Configuring Strategy & Workers</span>
+        <span style="font-size:21px; font-weight:bolder"><i style="font-size:17px;" class="fas fa-chevron-right "></i> Configuring Strategy & Workers</span>
     </summary>
 
     <h4 class="sub-heading">Step 1 - Go To Strategy Configuration Files Directory</h4>
@@ -364,5 +366,15 @@ <h2 class="sub-heading">How to contact us</h2>
 <p>If you need more info you can contact us here:</p>
 <a href="https://funttastic.com/discord" target="_blank">https://funttastic.com/discord</a>
 
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const detailsHeading = document.querySelector('.details-heading');
+        const details = document.querySelector('.details');
+
+        detailsHeading.addEventListener('click', function() {
+            details.classList.toggle('open');
+        });
+    });
+</script>
 </body>
 </html>

partners/kujira/bot/styles.css

@@ -27,8 +27,9 @@ img  {
 }
 
 .sub-heading {
-    font-size: 24px;
+    font-size: 19px;
     margin-top: 30px;
+    font-weight: bold;
 }
 
 .btn-list {
@@ -77,20 +78,39 @@ img  {
     font-weight: bold;
     margin-top: 20px;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 2px 3px;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
 }
 
 .details-heading:hover {
-    color: #007bff;
+    background-color: rgba(6, 177, 250, 0.22);
 }
 
-.details-heading::marker {
-    content: "▶";
+.details-heading::before {
+    margin-right: 10px;
+    transition: transform 0.3s ease;
+}
+
+.open .details-heading::before {
+    transform: rotate(90deg);
 }
 
 .details-heading:focus {
     outline: none;
 }
 
+.details-content {
+    display: none;
+}
+
+.open .details-content {
+    display: block;
+}
+
 code {
     display: block;
     padding: 10px;