added side icons

Akshat111111 · Oct 23, 2024 · 444ff60 · 444ff60
1 parent 0a58220
commit 444ff60
Showing 1 changed file with 174 additions and 0 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -272,6 +272,180 @@ <h2>Buy Stock</h2>
         <button id="sellStockBtn">Sell Stock</button>
     </div>
 
+
+    <div class="side-icons">
+        <div class="icon-content">
+          <a href="https://github.com" target="_blank" aria-label="GitHub" data-social="github">
+            <i class="fab fa-github"></i>
+            <div class="filled"></div>
+          </a>
+        </div>
+        <div class="icon-content">
+          <a href="https://Discord.com" target="_blank" aria-label="Discord" data-social="Discord">
+            <i class="fab fa-discord"></i>
+            <div class="filled"></div>
+          </a>
+        </div>
+        <div class="icon-content">
+
+          <a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn" data-social="linkedin">
+            <i class="fab fa-linkedin-in"></i>
+            <div class="filled"></div>
+          </a>
+        </div>
+        <div class="icon-content">
+          <a href="https://x.com" target="_blank" aria-label="X" data-social="X">
+            <i class="fab fa-x-twitter"></i>
+            <div class="filled"></div>
+          </a>
+        </div>
+        <div class="icon-content">
+          <a href="https://www.facebook.com" target="_blank" aria-label="Facebook" data-social="facebook">
+            <i class="fab fa-facebook-f"></i>
+            <div class="filled"></div>
+          </a>
+        </div>
+
+    <style>
+        .side-icons {
+    position: fixed;
+    right: 20px;
+    top: 30%;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+  }
+
+  .icon-content {
+    position: relative;
+  }
+
+  .icon-content a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    color: #4d4d4d;
+    /* Default icon color */
+    background-color: #fff;
+    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    overflow: hidden;
+    text-decoration: none;
+    position: relative;
+  }
+
+  .icon-content a i {
+    font-size: 24px;
+    position: relative;
+    z-index: 2;
+    /* Icons should be above the background fill */
+  }
+
+  .icon-content a .filled {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    transition: transform 0.3s ease-in-out;
+    transform: scaleY(0);
+    /* Hide the fill initially */
+    transform-origin: bottom;
+    /* Start the fill from the bottom */
+    z-index: 1;
+    /* Background fill should be below the icons */
+  }
+
+  .icon-content a:hover .filled {
+    transform: scaleY(1);
+    /* Scale the fill to full height on hover */
+  }
+
+  .icon-content a:hover i {
+    color: #fff;
+    /* Change icon color to white on hover */
+  }
+
+  .icon-content a[data-social="facebook"] .filled {
+    background-color: #3b5998;
+  }
+
+  .icon-content a[data-social="linkedin"] .filled {
+    background-color: #0077b5;
+  }
+
+  .icon-content a[data-social="X"] .filled {
+    background-color: #080808;
+  }
+
+  .icon-content a[data-social="Discord"] .filled {
+    background-color: #600bfd;
+  }
+
+  .icon-content a[data-social="github"] .filled {
+    background-color: #24292e;
+  }
+
+  /* Optional: add box-shadow on hover */
+  .icon-content a:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Dark mode styles */
+  body.dark-mode .side-icons .icon-content a {
+    background-color: #333;
+    /* Dark background for icons in dark mode */
+    color: #ddd;
+    /* Light icon color in dark mode */
+  }
+
+  body.dark-mode .side-icons .icon-content a:hover .filled {
+    background-color: #444;
+    /* Slightly lighter dark mode background fill */
+  }
+
+  body.dark-mode .side-icons .icon-content a:hover i {
+    color: #fff;
+    /* White icon color on hover in dark mode */
+  }
+
+  /* Dark mode background colors for different icons */
+  body.dark-mode .side-icons .icon-content a[data-social="facebook"] .filled {
+    background-color: #3b5998;
+    /* Darker shade for Facebook in dark mode */
+  }
+
+  body.dark-mode .side-icons .icon-content a[data-social="linkedin"] .filled {
+    background-color: #0077b5;
+    /* Darker shade for LinkedIn in dark mode */
+  }
+
+  body.dark-mode .side-icons .icon-content a[data-social="twitter"] .filled {
+    background-color: #1da1f2;
+    /* Darker shade for Twitter in dark mode */
+  }
+
+  body.dark-mode .side-icons .icon-content a[data-social="youtube"] .filled {
+    background-color: #ff0000;
+    /* Darker shade for YouTube in dark mode */
+  }
+
+  body.dark-mode .side-icons .icon-content a[data-social="github"] .filled {
+    background-color: #444c56;
+    /* Darker shade for GitHub in dark mode */
+  }
+
+  /* Optional: add box-shadow on hover in dark mode */
+  body.dark-mode .side-icons .icon-content a:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+    /* Slightly stronger shadow in dark mode */
+  }
+    </style>
+
+
     <script>
         let web3;
         let userAccount;