Merge pull request #15 from PulakS004/fixes-Pulak

Minor fixes

index.html

@@ -79,6 +79,15 @@
         <input type="text" placeholder="Search..." id="search-input">
       </div> -->
       <ul id="theme-list">
+        <li class="theme-item" data-theme-class="theme-cheesecake">
+          <span class="theme-name"><b>cheesecake</b></span>
+          <div class="color-palette">
+            <span class="color-button" style="background: #ffeec5;"></span>
+            <span class="color-button" style="background: #be0065;"></span>
+            <span class="color-button" style="background: #5b4f52;"></span>
+          </div>
+        </li>
+
         <li class="theme-item" data-theme-class="theme-bento">
           <span class="theme-name"><b>bento</b></span>
           <div class="color-palette">
@@ -129,7 +138,7 @@
           <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>
+            <span class="color-button" style="background: #111;"></span>
           </div>
         </li>
 
@@ -219,7 +228,7 @@ <h2>AWS Cloud Clubs</h2>
       The clubs aim to foster innovation, enhance technical knowledge, and prepare members for cloud-related careers by
       offering resources, mentorship, and networking opportunities. To know more about AWS CC, <a
         href="https://aws.amazon.com/developer/community/students/cloudclubs/?community-captains-all.sort-by=item.additionalFields.sortPosition&community-captains-all.sort-order=asc&awsf.filter-location=*all&awsf.filter-year=*all"
-        _target=blank> click here!</a></p>
+        target="_blank"> click here!</a></p>
     <h2>AWS Services</h2>
     <p>AWS Services encompass a wide array of cloud computing products that offer solutions for computing power,
       storage, and networking, tailored to meet the needs of businesses of all sizes. These services enable companies to
@@ -232,29 +241,48 @@ <h2>AWS Services</h2>
       <li>
         <h3>Amazon EC2 🚀</h3>
         <p>Amazon Elastic Compute Cloud (EC2) provides scalable computing capacity in the AWS cloud. Using Amazon EC2
-          eliminates your need to invest in hardware up front, so you can develop and deploy applications faster.</p>
+          eliminates your need to invest in hardware up front, so you can develop and deploy applications faster.<a
+          href="https://aws.amazon.com/ec2/"
+          target="_blank"> click here!</a></p>
       </li>
       <li>
         <h3>Amazon S3 💾</h3>
         <p>Amazon Simple Storage Service (S3) is an object storage service that offers industry-leading scalability,
-          data availability, security, and performance.</p>
+          data availability, security, and performance.<a
+          href="https://aws.amazon.com/s3/"
+          target="_blank"> click here!</a></p>
       </li>
       <li>
         <h3>AWS Lambda ⚡</h3>
         <p>AWS Lambda lets you run code without provisioning or managing servers. You pay only for the compute time you
-          consume.</p>
+          consume.<a
+          href="https://aws.amazon.com/lambda/"
+          target="_blank"> click here!</a></p>
       </li>
       <li>
         <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>
+          tasks.<a
+          href="https://aws.amazon.com/rds/"
+          target="_blank"> click here!</a></p>
       </li>
       <li>
         <h3>Amazon DynamoDB 📊</h3>
         <p>Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at
           any scale. It’s a fully managed, multi-region, multi-active, durable database with built-in security, backup
-          and restore, and in-memory caching.</p>
+          and restore, and in-memory caching.<a
+          href="https://aws.amazon.com/dynamodb/"
+          target="_blank"> click here!</a></p>
+      </li>
+      <li>
+        <h3>Amazon Route 53 🌐</h3>
+        <p>Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. It is designed
+           for developers and corporations to route the end users to Internet applications by translating human-readable 
+           names into the numeric IP addresses. You can use Route 53 to perform three main
+           functions: domain registration, DNS routing, and health checking.<a
+          href="https://aws.amazon.com/route53/"
+          target="_blank"> click here!</a></p>
       </li>
     </ul>
   </div>

js/palette.js

@@ -1,5 +1,7 @@
 document.addEventListener('DOMContentLoaded', function () {
     const themeItems = document.querySelectorAll('.theme-item');
+    const themeSelector = document.querySelector('.theme-selector'); 
+    const toggleButton = document.querySelector('.fa-paint-brush');
 
     themeItems.forEach(item => {
       item.addEventListener('click', function () {
@@ -29,4 +31,12 @@ document.addEventListener('DOMContentLoaded', function () {
     document.querySelector('.fa-paint-brush').addEventListener('click', function () {
       document.querySelector('.theme-selector').classList.toggle('show');
     });
+
+      document.addEventListener('click', function (event) { // Added block
+        // Check if the click is outside the theme selector and the toggle button
+        if (!themeSelector.contains(event.target) && !toggleButton.contains(event.target)) {
+            themeSelector.classList.remove('show');
+        }
+
+    });
   });

styles/palette.css

@@ -104,6 +104,18 @@
 
 /* Color - theme options*/
 
+.theme-cheesecake {
+    --sub-alt-color:#5b4f52;
+    --bgColor: #ffeec5;
+    --textColor: #be0065;
+    --black: #5b4f52;
+    --incorrect: #860000;
+    --hover: #5b4f52;
+    --correct: #10af0a;
+    --wrong-highlighted: #ffc0cb;
+    --neon: #0298af;
+}
+
 .theme-bento {
   --sub-alt-color:#30466d;
   --bgColor: #2d394d;