Merge branch 'tech-explorer-riyaaa:main' into main

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>
@@ -333,7 +361,7 @@ <h1>Meet the Developers</h1>
       <div class="contacts-container">
           <div class="contacts-map-container">
               <!-- Embed your map iframe here -->
-              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8056942573885!2d77.2294329757856!3d28.665536075646727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1718804452113!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8056942573885!2d77.2294329757856!3d28.665536075646727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1718804452113!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" frameborder="0"></iframe>
           </div>
           <div class="contacts-contact-form-container">
               <h1>Contact Us</h1>
@@ -373,6 +401,7 @@ <h1>Contact Us</h1>
       </div>
     </div>
   </footer>
+  <!-- Footer end -->
 
   <!-- <script src="typing.js"></script> -->
   <script src="js/paragraphs.js"></script>

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');
+        }
+
+    });
   });

js/script.js

@@ -1,15 +1,20 @@
 const typingText = document.querySelector(".typing-text p"),
-inpField = document.querySelector(".wrapper .input-field"),
-tryAgainBtn = document.querySelector(".content button"),
-timeTag = document.querySelector(".time span b"),
-mistakeTag = document.querySelector(".mistake span"),
-wpmTag = document.querySelector(".wpm span"),
-cpmTag = document.querySelector(".cpm span");
+    inpField = document.querySelector(".wrapper .input-field"),
+    tryAgainBtn = document.querySelector(".content button"),
+    timeTag = document.querySelector(".time span b"),
+    mistakeTag = document.querySelector(".mistake span"),
+    wpmTag = document.querySelector(".wpm span"),
+    cpmTag = document.querySelector(".cpm span"),
+    contactBtn = document.getElementById('contacts-contactBtn'),
+    popup = document.getElementById('contacts-popup'),
+    closeBtn = document.querySelector('.contacts_close');
 
 let timer,
-maxTime = 60,
-timeLeft = maxTime,
-charIndex = mistakes = isTyping = 0;
+    maxTime = 60,
+    timeLeft = maxTime,
+    charIndex = mistakes = isTyping = 0,
+    isPopupOpen = false;
+
 
 function loadParagraph() {
     const ranIndex = Math.floor(Math.random() * paragraphs.length);
@@ -19,28 +24,34 @@ function loadParagraph() {
         typingText.innerHTML += span;
     });
     typingText.querySelectorAll("span")[0].classList.add("active");
-    document.addEventListener("keydown", () => inpField.focus());
-    typingText.addEventListener("click", () => inpField.focus());
+    document.addEventListener("keydown", (e) => {
+        if (!isPopupOpen) inpField.focus();
+    });
+    typingText.addEventListener("click", () => {
+        if (!isPopupOpen) inpField.focus();
+    });
 }
 
 function initTyping() {
+    if (isPopupOpen) return; // Prevent typing test when popup is open
+
     let characters = typingText.querySelectorAll("span");
     let typedChar = inpField.value.split("")[charIndex];
-    if(charIndex < characters.length - 1 && timeLeft > 0) {
-        if(!isTyping) {
+    if (charIndex < characters.length && timeLeft > 0) { // Allow typing till the end of characters
+        if (!isTyping) {
             timer = setInterval(initTimer, 1000);
             isTyping = true;
         }
-        if(typedChar == null) {
-            if(charIndex > 0) {
+        if (typedChar == null) { // Backspace
+            if (charIndex > 0) {
                 charIndex--;
-                if(characters[charIndex].classList.contains("incorrect")) {
+                if (characters[charIndex].classList.contains("incorrect")) {
                     mistakes--;
                 }
                 characters[charIndex].classList.remove("correct", "incorrect");
             }
         } else {
-            if(characters[charIndex].innerText == typedChar) {
+            if (characters[charIndex].innerText === typedChar) {
                 characters[charIndex].classList.add("correct");
             } else {
                 mistakes++;
@@ -51,23 +62,23 @@ function initTyping() {
         characters.forEach(span => span.classList.remove("active"));
         characters[charIndex].classList.add("active");
 
-        let wpm = Math.round(((charIndex - mistakes)  / 5) / (maxTime - timeLeft) * 60);
+        let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) * 60);
         wpm = wpm < 0 || !wpm || wpm === Infinity ? 0 : wpm;
-        
+
         wpmTag.innerText = wpm;
         mistakeTag.innerText = mistakes;
         cpmTag.innerText = charIndex - mistakes;
     } else {
         clearInterval(timer);
         inpField.value = "";
-    }   
+    }
 }
 
 function initTimer() {
-    if(timeLeft > 0) {
+    if (timeLeft > 0) {
         timeLeft--;
         timeTag.innerText = timeLeft;
-        let wpm = Math.round(((charIndex - mistakes)  / 5) / (maxTime - timeLeft) * 60);
+        let wpm = Math.round(((charIndex - mistakes) / 5) / (maxTime - timeLeft) * 60);
         wpmTag.innerText = wpm;
     } else {
         clearInterval(timer);
@@ -86,6 +97,32 @@ function resetGame() {
     cpmTag.innerText = 0;
 }
 
+// Function to open the popup
+function openPopup() {
+    popup.style.display = 'flex';
+    isPopupOpen = true;
+    document.getElementById('name').focus(); // Focus on the name input field
+}
+
+// Function to close the popup
+function closePopup() {
+    popup.style.display = 'none';
+    isPopupOpen = false;
+}
+
+// Event listener for the contact button
+contactBtn.addEventListener('click', openPopup);
+
+// Event listener for the close button
+closeBtn.addEventListener('click', closePopup);
+
+// Close the popup if user clicks outside the popup
+window.addEventListener('click', function(event) {
+    if (event.target === popup) {
+        closePopup();
+    }
+});
+
 loadParagraph();
 inpField.addEventListener("input", initTyping);
-tryAgainBtn.addEventListener("click", resetGame);
+tryAgainBtn.addEventListener("click", resetGame);

js/typing.js

@@ -1,3 +1,6 @@
+// EXTRA FILE
+// OLD LOGIC THAT WAS USED IN TYPING AREA
+
 const words = 'Amazon Web Services (AWS) offers a comprehensive suite of cloud computing services, enabling businesses to build and deploy scalable, resilient, and secure applications. With AWS, organizations can access a wide range of services including compute, storage, databases, machine learning, analytics, and more. Services like Amazon EC2 provide resizable compute capacity in the cloud, while Amazon S3 offers highly durable object storage. Managed database services like Amazon RDS and Amazon DynamoDB simplify database management tasks, and AWS Lambda allows developers to run code without provisioning or managing servers. With AWS, businesses can innovate faster, reduce infrastructure costs, and scale their applications globally with ease.'.split(' ');
 const wordsCount = words.length;
 const gameTime = 30 * 1000; // milliseconds

styles/contact.css

@@ -14,15 +14,20 @@
 }
 
 .contacts-popup-things {
-    background-color: rgb(255, 234, 184);
+    background-color: var(--bgColor);
     padding: 20px;
     border-radius: 10px;
     position: relative;
-    width: 90%;
+    width: 70%;
     max-width: 1200px;
     height: 70vh;
     box-sizing: border-box;
     overflow: auto; /* Enable scrolling for large content */
+/*     border-radius: 20px; */
+/*     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.752); */
+    border-radius: 10px;
+    box-shadow: 0 5px 15px var(--black);
+    display: flex;
 }
 
 .contacts_close {
@@ -35,6 +40,7 @@
 
 .contacts-container {
     display: flex;
+    flex-direction: row;
     width: 100%;
     height: 100%;
 }
@@ -50,15 +56,16 @@
 }
 
 .contacts-contact-form-container {
-    background-color: rgb(255, 234, 184);
-    padding: 30px;
+    background-color: var(--bgColor);
+    padding: 20px 30px 10px 30px; /* Adjusted padding to add more space at the top */
     box-sizing: border-box;
+    margin-bottom: 10px; /* Added margin-bottom to create space below the form */
 }
 
 .contacts-contact-form-container h1 {
     text-align: center;
     margin-bottom: 20px;
-    color: #be0065;
+    color: var(--textColor);
 }
 
 .contacts-contact-form {
@@ -73,27 +80,45 @@
     border-radius: 10px;
     outline: none;
     background: #ffffff;
-    color: #be0065;
-    border: 2px solid #d91c81;
+    color: var(--textColor);
+    border: 2px solid var(--textColor);
     font-size: 14px;
 }
 
 .contacts-contact-form input::placeholder, .contacts-contact-form textarea::placeholder {
-    color: #be0065;
+    color: #121111;
 }
 
 .contacts-contact-form button {
     padding: 10px 40px;
     border: none;
     border-radius: 20px;
-    background-color: #be0065;
-    color: rgb(255, 238, 197);
+    background-color: var(--textColor);
+    color: var(--bgColor);
     font-size: 14px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     align-self: center;
+    margin: 10px; /* Added margin-top to create space above the button */
 }
 
 .contacts-contact-form button:hover {
-    background-color: #c2186a;
+    background-color: var(--textColor);
+}
+
+/* Media query for small screens */
+@media (max-width: 768px) {
+    .contacts-container {
+        flex-direction: column;
+    }
+
+    .contacts-map-container {
+        order: 2; /* Map goes below the contact form */
+        width: 100%;
+    }
+
+    .contacts-contact-form-container {
+        order: 1; /* Contact form goes above the map */
+        width: 100%;
+    }
 }