Merge pull request #10 from advika31/main

color palette added
riyaahlawat · Jun 16, 2024 · ee59654 · ee59654
2 parents cdc27a0 + 447e59a
commit ee59654
Show file tree

Hide file tree

Showing 2 changed files with 344 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="styles-header.css">
   <link rel="stylesheet" href="./styles-type.css">
   <link rel="stylesheet" href="styles-footer.css">
+  <link rel="stylesheet" href="palette.css">
 </head>
 
 <body>
@@ -42,7 +43,7 @@
     </div>
     <div class="header-icons">
       <div class="footer-item">
-        <a class="footer-icons" href="" target="_blank">
+        <a class="footer-icons" href="void:javascrpit(0)" >
           <i class="fa fa-paint-brush"></i>
         </a>
       </div>
@@ -59,9 +60,147 @@
 
       <!-- <img src="i-icon.svg" class=" alt="Icon 2"> -->
       <!-- <img src="keyboard.svg" class=" alt="Icon 3"> -->
+
+  </div>
+</div>
 
-    </div>
+<!-- Colour palette by Advika and Pulak -->
+
+<style>
+  .theme-selector {
+      display: none;
+      position: fixed;
+      top: 50px;
+      right: 20px;
+      width: 400px;
+      z-index: 1000;
+      background-color: #073642;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      padding: 20px;
+  }
+
+  .theme-selector.show {
+      display: block;
+  }
+</style>
+
+<div class="theme-selector">
+  <div class="container">
+      <div class="search-bar">
+          <i class="fa-solid fa-magnifying-glass"></i>
+          <input type="text" placeholder="Search..." id="search-input">
+      </div>
+      <ul id="theme-list">
+          <li class="theme-item" data-theme-class="theme-bento">
+              <span class="theme-name"><b>bento</b></span>
+              <div class="color-palette">
+                  <span class="color-button" style="background: #2d394d;"></span>
+                  <span class="color-button" style="background: #ff7a90;"></span>
+                  <span class="color-button" style="background: #fffaf8;"></span>
+              </div>
+          </li>
+
+          <li class="theme-item" data-theme-class="theme-blue-dolphin">
+              <span class="theme-name">blue dolphin</span>
+              <div class="color-palette">
+                  <span class="color-button" style="background: #00e4ff;"></span>
+                  <span class="color-button" style="background: #014961;"></span>
+                  <span class="color-button" style="background: #ffcefb;"></span>
+              </div>
+          </li>
+
+          <li class="theme-item" data-theme-class="theme-monokai">
+            <span class="theme-name">monokai</span>
+            <div class="color-palette">
+                <span class="color-button" style="background: #a6e22e;"></span>
+                <span class="color-button" style="background: #e6db74;"></span>
+                <span class="color-button" style="background: #e2e2dc;"></span>
+            </div>
+        </li>
+
+        <li class="theme-item" data-theme-class="theme-fledling">
+          <span class="theme-name">fledling</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #fc6e83;"></span>
+              <span class="color-button" style="background: #474747;"></span>
+              <span class="color-button" style="background: #e6d5d3;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-lavender">
+          <span class="theme-name">lavender</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #ada6c2;"></span>
+              <span class="color-button" style="background: #e4e3e9;"></span>
+              <span class="color-button" style="background: #2f2a41;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-dark">
+          <span class="theme-name">dark</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #eee;"></span>
+              <span class="color-button" style="background: #444;"></span>
+              <span class="color-button" style="background: #191919;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-bushido">
+          <span class="theme-name">bushido</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #ec4c56;"></span>
+              <span class="color-button" style="background: #596172;"></span>
+              <span class="color-button" style="background: #f6f0e9;"></span>
+          </div>
+      </li>
+
+      <li class="theme-item" data-theme-class="theme-lime">
+          <span class="theme-name">lime</span>
+          <div class="color-palette">
+              <span class="color-button" style="background: #93c247;"></span>
+              <span class="color-button" style="background: #4b5257;"></span>
+              <span class="color-button" style="background: #bfcfdc;"></span>
+          </div>
+      </li>
+      </ul>
   </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+      const themeItems = document.querySelectorAll('.theme-item');
+
+      themeItems.forEach(item => {
+          item.addEventListener('click', function() {
+              themeItems.forEach(item => item.classList.remove('selected'));
+              this.classList.add('selected');
+
+              const themeClass = this.getAttribute('data-theme-class');
+              document.body.className = themeClass;
+          });
+      });
+
+      const searchInput = document.getElementById('search-input');
+      if (searchInput) {
+          searchInput.addEventListener('input', function() {
+              const filter = searchInput.value.toLowerCase();
+              themeItems.forEach(item => {
+                  const themeName = item.querySelector('.theme-name').textContent.toLowerCase();
+                  if (themeName.includes(filter)) {
+                      item.style.display = '';
+                  } else {
+                      item.style.display = 'none';
+                  }
+              });
+          });
+      }
+
+      document.querySelector('.fa-paint-brush').addEventListener('click', function() {
+          document.querySelector('.theme-selector').classList.toggle('show');
+      });
+  });
+</script>
 
   <!--  Type started (Riya Ahlawat and Samriddhi) -->
   <main>
@@ -152,7 +291,7 @@ <h3>AWS Lambda ⚡</h3>
           consume.</p>
       </li>
       <li>
-        <h3>Amazon RDS 🗄️</h3>
+        <h3>Amazon RDS 🗄</h3>
         <p>Amazon Relational Database Service (RDS) makes it easy to set up, operate, and scale a relational database in
           the cloud. It provides cost-efficient and resizable capacity while automating time-consuming administration
           tasks.</p>

diff --git a/palette.css b/palette.css
@@ -0,0 +1,202 @@
+/* Color palette by Advika and Pulak */
+.theme-selector {
+    display: flex;
+    left: 35%;
+    top: 0%;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    margin: -20px;
+    padding: 10px;
+    background-color: var(--bg-color, #002b36);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--text-color, #eee);
+
+}
+
+.theme-selector.container {
+    width: 400px;
+    max-width: 100%;
+    background-color: var(--sub-alt-color, #073642);
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.theme-selector .search-bar {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background-color: var(--sub-alt-color, #073642);
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+.theme-selector .search-bar i {
+    color: var(--text-color,#eee);
+    margin-right: 10px;
+}
+
+.theme-selector .search-bar input {
+    width: 100%;
+    padding: 5px;
+    border: none;
+    background: transparent;
+    color:  var(--text-color, #eee);
+    font-size: 1rem;
+    outline: none;
+}
+
+.theme-selector #theme-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.theme-selector .theme-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: var(--sub-alt-color, #002b36);
+    border-radius: 5px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.theme-selector .theme-name {
+    font-size: 1rem;
+    color:  var(--text-color, #eee);
+}
+
+.theme-selector .color-palette {
+    display: flex;
+}
+
+.theme-selector .color-button {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-left: 5px;
+    cursor: pointer;
+    border: 1px solid var(--sub-alt-color, #073642);
+}
+
+
+/* Color - theme options*/
+
+.theme-bento {
+  --sub-alt-color:#30466d;
+  --bgColor: #2d394d;
+  --textColor: #fffaf8;
+  --black: #ff7a90;
+  --incorrect: #bc42ba;
+  --hover: #4a768d;
+  --correct: #263041;
+  --wrong-highlighted: #fc2032;
+  --neon: #f04040;
+}
+
+.theme-blue-dolphin {
+  --sub-alt-color:#689da3;
+  --bgColor: #003950;
+  --textColor: #82eaff;
+  --black: #ffcefb;
+  --incorrect: #ffbde6;
+  --hover: #00e4ff;
+  --correct: #014961;
+  --wrong-highlighted: #d1a5fd;
+  --neon: #ff8188;
+
+}
+
+.theme-monokai {
+    --sub-alt-color:#717f54;
+    --bgColor: #272822;
+    --black: #a6e22e;
+    --hover: #e6db74;
+    --correct: #1f201b;
+    --textColor: #e2e2dc;
+    --incorrect: #ad637e;
+    --neon: #fd971f;
+    --wrong-highlighted: #f92672;
+  }
+
+.theme-fledling {
+  --bgColor: #3b363f;
+  --black: #fc6e83;
+  --hover: #8e5568;
+  --sub-alt-color: #fc6e83;
+  --textColor: #e6d5d3;
+  --incorrect: #f52443;
+  --neon: #bd001c;
+  --wrong-highlighted: #ff0a2f;
+  --correct: #c5cd54;
+}
+
+.theme-lavender {
+  --sub-alt-color:#a19bb9;
+  --bgColor: #ada6c2;
+  --black: #e4e3e9;
+  --hover: #e4e3e9;
+  --correct: #a19bb9;
+  --textColor: #2f2a41;
+  --incorrect: #ca4754;
+  --neon: #7e2a33;
+  --wrong-highlighted: #ca4754;
+}
+
+nav .textButton {
+  border-radius: 10rem !important;
+  background: var(--text-color);
+  color: var(--main-color);
+}
+
+nav .textButton:hover {
+  color: var(--bg-color);
+  background: var(--text-color);
+}
+
+body.crtmode nav .textButton {
+  box-shadow: 3px 0 1px var(--crt-text-color-glow),
+    -3px 0 var(--crt-text-color-glow), 0 0 3px;
+}
+
+.theme-dark {
+  --bgColor: #111;
+  --black: #eee;
+  --hover: #444;
+  --sub-alt-color: #191919;
+  --correct: #191919;
+  --textColor: #eee;
+  --inncorrect: #da3333;
+  --wrong-highlighted: #da3333;
+  --neon: #791717;
+}
+
+.theme-bushido {
+  --bgColor: #242933;
+  --black: #ec4c56;
+  --hover: #596172;
+  --sub-alt-color: #1c222d;
+  --textColor: #f6f0e9;
+  --incorrect: #ec4c56;
+  --wrong-highlighted: #9b333a;
+  --correct: #ecdc4c;
+  --neon: #bdb03d;
+}
+
+.theme-lime {
+  --bgColor: #7c878e;
+  --black: #93c247;
+  --hover: #4b5257;
+  --sub-alt-color: #737d82;
+  --textColor: #bfcfdc;
+  --incorrect: #ea4221;
+  --wrong-highlighted: #7e2a33;
+  --correct: #ea4221;
+  --neon: #7e2a33;
+}