homepage images

2 months ago · e2abab96ef
parent fd4a8164c4
commit e2abab96ef
6 changed files with 155 additions and 23 deletions
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -22,9 +22,12 @@
                    <img src="{{ site.base }}/img/SENS-logo-nobg.png"
                         srcset="{{ site.base }}/img/SENS-logo-nobg.png 2x"
                         alt="Awesome" id="logo">
+                        <p style="font-size: 15px;">Sensing and Networking Systems Lab</p>
+
                </a>
-                <ul class="nav nav-pills justify-content-center">
+                <div class="container">

+                    <ul class="nav nav-pills justify-content-center">
                        {% assign shorturl = page.url | replace:'.html','' | replace:'index','' %}
                        {% for item in site.navigation %}

@ -46,10 +49,16 @@
                            </li>

                        {% endfor %}
-
                    </ul>
+                    <hr class="half-width-hr">    
+
+
+                </div>
+
            </div>
  
+
+
            {% if page.image %}
                <img src="{{ page.image }}"
                     alt="{{ page.title }}"
--- a/carousel.html
+++ b/carousel.html
@ -0,0 +1,25 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Carousel</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <div class="carousel">
+        <div class="carousel-inner">
+            <div class="carousel-item active">
+                <img src="img/activty/greenScreen-4.png" alt="Image 1">
+            </div>
+            <div class="carousel-item">
+                <img src="img/activty/20240730_153345.jpg" alt="Image 2">
+            </div>
+            <div class="carousel-item">
+                <img src="img/activty/20240318_195731.jpg" alt="Image 3">
+            </div>
+        </div>
+        <button class="carousel-control prev" onclick="prevSlide()">&#10094;</button>
+        <button class="carousel-control next" onclick="nextSlide()">&#10095;</button>
+    </div>
+    
+    <script src="js/script.js"></script>
+</body>
--- a/css/group.scss
+++ b/css/group.scss
@ -10,8 +10,8 @@ body {
 }

 .header {
-    border-bottom: 1px solid $light-gray;
-    padding-bottom: 10px;
+    border-bottom: 0px solid $light-gray;
+    padding-bottom: 5px;
    margin-bottom: 20px;
    text-align: center;
 }
@ -53,8 +53,8 @@ a > .fa {

 /* Group logo */
 #logo {
-    width: 120px;
-    height: 55px;
+    width: 180px;
+    height: 80px;
    margin: 2px 0 8px 0;
 }

@ -148,3 +148,12 @@ svg {
    // make the alignment just like img from bootstrap's reboot.scss
    vertical-align: middle;
 }
+
+
+.half-width-hr {
+    width: 100%;               /* Set the width to 50% of the page */
+    border: none;              /* Remove default border styling */
+    height: 1px;               /* Set the height of the line */
+    background-color: $light-gray;   /* Set the color of the line */
+    margin: 20px auto;         /* Center the line horizontally and add margin above/below */
+}
--- a/css/styles.css
+++ b/css/styles.css
@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+}
+
+.carousel {
+    position: relative;
+    width: 150%;
+    max-width: 1000px;
+    overflow: hidden;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.carousel-inner {
+    display: flex;
+    transition: transform 2s ease-in-out;
+}
+
+.carousel-item {
+    min-width: 100%;
+    transition: opacity 1.9s ease-in-out;
+}
+
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain; /* Ensures the entire image fits within the carousel item */
+    display: block;
+    background-color: rgb(255, 255, 255); /* Optional: add a background color if there's empty space */
+}
+
+
+.carousel-control {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+.carousel-control.prev {
+    left: 20px;
+}
+
+.carousel-control.next {
+    right: 20px;
+}
--- a/index.html
+++ b/index.html
@ -26,6 +26,11 @@ role-tables:

 ---

+
+<iframe src="carousel.html" style="width:100%; height:600px; border:none;"></iframe>
+
+
+
 <div class="jumbotron">
    <p>
        The <b>Laboratory of Sensing and Networking Systems (SENS)</b> at <b>EPFL</b> an interdisciplinary research group dedicated to 
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,26 @@
+let currentIndex = 0;
+
+function showSlide(index) {
+    const slides = document.querySelectorAll('.carousel-item');
+    if (index >= slides.length) {
+        currentIndex = 0;
+    } else if (index < 0) {
+        currentIndex = slides.length - 1;
+    } else {
+        currentIndex = index;
+    }
+
+    const offset = -currentIndex * 100;
+    document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
+}
+
+function nextSlide() {
+    showSlide(currentIndex + 1);
+}
+
+function prevSlide() {
+    showSlide(currentIndex - 1);
+}
+
+// Optional: Automatically move to the next slide every 3 seconds
+setInterval(nextSlide, 8000);