Merge pull request #40 from Dsmita03/main

Update of Ui of feature section
suryanshsk · Oct 6, 2024 · 22ab670 · 22ab670
2 parents e438d56 + bdb0219
commit 22ab670
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 14 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -6,6 +6,12 @@
     <title>Python Voice Assistant</title>
     <link rel="stylesheet" href="style.css">
     <script defer src="script.js"></script>
+    <!-- jQuery and Slick Slider -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
+
 </head>
 <body>
     <!-- Header Section -->
@@ -29,26 +35,48 @@ <h1>Python Voice Assistant with Gemini AI</h1>
     <!-- Features Section -->
     <section id="features" class="features-section">
         <h2>Features</h2>
-        <div class="features-container">
+        <div class="features-slider">
             <div class="feature-item">
                 <i class="fas fa-microphone"></i>
                 <h3>Voice Recognition</h3>
-                <p>Processes and understands spoken commands.</p>
+                <p>Processes and understands 
+                    <span></span>spoken commands.
+                </p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-comment-dots"></i>
+                <h3>Text-to-Speech</h3>
+                <p>Converts written text into natural, clear speech,enabling auditory feedback.
+            </p>
             </div>
             <div class="feature-item">
                 <i class="fas fa-cloud-sun"></i>
                 <h3>Weather Updates</h3>
-                <p>Provides real-time weather information.</p>
+                <p>Provides real-time <br>weather information.</p>
             </div>
             <div class="feature-item">
                 <i class="fas fa-newspaper"></i>
                 <h3>News Retrieval</h3>
-                <p>Fetches the latest news headlines.</p>
+                <p>Fetches the latest<br> news headlines.
+                </p>
             </div>
             <div class="feature-item">
                 <i class="fas fa-joke"></i>
                 <h3>Jokes</h3>
-                <p>Delivers fun and entertaining jokes.</p>
+                <p>Delivers fun and entertaining <br>jokes.
+                </p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-book"></i>
+                <h3>Wikipedia Information</h3>
+                <p>Retrieves relevant information from Wiki,offering quick access to knowledge.
+                </p>
+            </div>
+            <div class="feature-item">
+                <i class="fas fa-music"></i>
+                <h3>Music Management</h3>
+                <p>Plays,pauses,and manages your music library,letting you enjoy your favorite tracks.
+                </p>
             </div>
         </div>
     </section>

diff --git a/frontend/script.js b/frontend/script.js
@@ -1,3 +1,4 @@
+// Smooth scroll for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function(e) {
         e.preventDefault();
@@ -6,3 +7,24 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         });
     });
 });
+
+// Slick Slider initialization
+$(document).ready(function(){
+    $('.features-slider').slick({
+        infinite: true,
+        slidesToShow: 3, // Adjust number of slides shown at once
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 2000,
+        arrows: true,  // Adds the arrows for navigation
+        dots: true,    // Adds the pagination dots
+        responsive: [
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1 // Show 1 slide on smaller screens
+                }
+            }
+        ]
+    });
+});
diff --git a/frontend/style.css b/frontend/style.css
@@ -78,32 +78,42 @@ nav ul li a {
     color: white;
 }
 
+
 /* Features Section */
 .features-section {
     padding: 60px 20px;
     text-align: center;
     background-color: #ffffff;
 }
 
-.features-container {
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
+.features-slider {
+    width: 80%;
+    margin: 0 auto; /* Center the slider */
 }
 
 .feature-item {
-    background-color: #f9f9f9;
+    background-color:#B0CFDE;
     padding: 30px;
-    width: 200px;
     text-align: center;
-    margin: 20px;
     border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s; /* Add transition for hover effect */
+
+    /* Ensure equal height for all cards */
+    height: 250px;  /* Set a fixed height */
+    display: flex;   /* Use flexbox for alignment */
+    flex-direction: column; /* Stack children vertically */
+    justify-content: space-between; /* Space items evenly */
+}
+
+.feature-item:hover {
+    transform: scale(1.05); /* Scale up on hover */
 }
 
 .feature-item i {
-    font-size: 2.5rem;
+    font-size: 50px;
     color: #3498db;
-    margin-bottom: 20px;
+    margin-bottom: 15px;
 }
 
 .feature-item h3 {
@@ -113,6 +123,7 @@ nav ul li a {
 
 .feature-item p {
     font-size: 1rem;
+    margin: 0; /* Remove default margin */
 }