<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praveen Paikadan's Portfolio</title>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
        
        
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Include Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <!-- Include Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-594T1THHTX"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-594T1THHTX');
        </script>


        <!-- styles -->
        <style>
                     Hide scrollbar track
                    ::-webkit-scrollbar-track {
                        background: transparent;  
                    }

                    *{
                        text-align: center;
                    }

                    /* Custom scrollbar */
                    ::-webkit-scrollbar {
                        width: 8px;
                    }

                    /* Scrollbar handle (thumb) */
                    ::-webkit-scrollbar-thumb {
                        background-color: #f1f1f1;
                        border-radius: 10px;
                    }

                    /* Hover effect for scrollbar handle */
                    ::-webkit-scrollbar-thumb:hover {
                        background-color: #e4e4e4;
                    } */

                    body {
                        /* font-family: Arial, sans-serif; */
                        margin: 0;
                        padding: 0;
                        display: flex;
                        width: 100vw;
                        height: 100vh;
                        flex-direction: column;
                    }

                    body {
                        /* background-image: url('1.webp'); */
                        overflow-y: scroll; /* Enable vertical scrolling */
                        font-family: "Roboto Slab", serif;
                    }

                    header {
                        background: linear-gradient(45deg, #3C3388, #8c81ff); /* Updated background color */
                        color: white;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        /* height: 30px; */
                        z-index: 100;
                        height: 4.5rem;
                        padding-right: 15px;
                        padding-left: 15px;
                        align-items: center;
                        border-bottom: 13px solid white ;
                    }

                    #myname {
                        font-size: 1.8rem;
                        line-height: 1;
                        color: white;
                        margin-right:50px;
                        /* display: block; */
                        font-family: "Roboto Slab", serif;
                        font-optical-sizing: auto;
                        font-weight: 700;
                        font-style: normal;
                        white-space: nowrap;
                        justify-self: center;
                    }

                    #header-title {
                        font-size: 1.8rem;
                        line-height: 1.2;
                        color: white;
                        margin: 10px;
                        /* margin-right:50px; */
                        /* display: block; */
                        font-family: "Roboto Slab", serif;
                        font-optical-sizing: auto;
                        font-weight: 700;
                        font-style: normal;
                        white-space: nowrap;
                        justify-self: center;

                    }

                    @keyframes fadeIn {
                        from {
                            opacity: 0;
                            transform: translateY(-20px);
                        }
                        to {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }

                    .container {
                        /* background: rgb(252, 250, 255); */
                        /* position: relative; */
                        display: flex;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        margin-right: 30px;
                        /* align-items: center; */
                        padding-top: 5rem;
                        padding-bottom: 3rem;
                    }

                    .inner-container{
                        display: flex; 
                        flex-direction: row;
                    }
                    
                    .project-list {
                        width: 60%;
                        /* min-width: 500px; */
                        padding: 20px;
                        overflow-y: auto;
                        margin: auto;
                        height: 100%;
                        justify-content: start;
                        overflow: scroll;
                    }
                    .project-card {
                        background: rgb(255, 255, 255);
                        /* background-color: white; */
                        border: 0.5px rgba(0,0,0, 0.1) solid;
                        border-left: 5px solid;
                        border-right: 5px solid grey;
                        border-radius: 20px;
                        margin-bottom: 15px;
                        padding: 15px;
                        cursor: pointer;
                        transition: max-height 0.3s ease;
                        overflow: hidden;
                    }
                    .project-card:hover {
                        box-shadow: 
                            0 4px 15px rgba(163, 106, 238, 0.1),  /* Soft shadow */
                            0 8px 30px rgba(152, 87, 212, 0.15);
                    }
            /* 
                    .details{
                        background: 
                        linear-gradient(to top, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0) 70%),
                        linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0) 70%),
                        linear-gradient(to left, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0) 70%),
                        linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0) 70%);
                    } */

                    .demo-video-container, .swiper-container {
                        width: 50%;
                        min-width: 400px;
                        /* height: 80vh; */
                        /* padding: 10px; */
                        border-left: 1px solid #ddd;
                        align-self: flex-start;
                        justify-self: center;
                        display: none;
                        border: 1px grey solid;
                        margin-top: 15px;
                        margin-left: 10px;
                        border-radius: 15px; /* Rounded corners */
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
                        display: none;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;
                        overflow: hidden;
                        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Horizontal, Vertical, Blur, Spread */
                        border-radius: 8px; /* Optional: for rounded corners */
                        position: sticky;
                        top: 50vh;
                        transform: translateY(-50%);
                        
                    }
                    .demo-video-container p {
                        margin: 5;
                        padding: 2;
                        font-weight: 800;
                        color: rgba(0, 0, 0, 0.4);

                    }
                    iframe {
                        width: 100%;
                        height: 80%;
                        overflow: scroll;
                    }
                    .details {
                        display: none; /* Initially hide detailed content */
                        margin-top: 10px;
                    }
                    .title {
                        font-size: 1.2em;
                        font-weight: bold;
                        color: #292929; /* Dark gray for better contrast */
                        margin-bottom: 5px; /* Space below the title */
                        font-weight: 600;
                    }
                    .short-description {
                        font-size: 0.9em;
                        color: #555; /* Medium gray for short descriptions */
                        margin-bottom: 10px; /* Space below the short description */
                    }
                    

                    #demo-video {
                        width: 100%;
                        justify-content: center;
                    }

                    /* Swiper wrapper (slides container) */
                    .swiper-wrapper {
                        display: flex;
                    }

                    /* Swiper slides */
                    .swiper-slide {
                        display: flex; /* Flexbox to align images */
                        justify-content: center; /* Center images horizontally */
                        align-items: center; /* Center images vertically */
                        width: 100%;
                        height: 100%;
                    }

                    /* Image styling */
                    .swiper-slide img {
                        width: 100%; /* Ensure images fit the width of the container */
                        height: auto; /* Maintain aspect ratio */
                        object-fit: cover; /* Cover the entire container, cropping if necessary */
                        max-height: 100%; /* Restrict the height to the container height */
                    }

                    /* Navigation buttons (default Swiper buttons) */
                    .swiper-button-prev,
                    .swiper-button-next {
                        color: black; /* Button color */
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        z-index: 10;
                        width: 30px; /* Set width for buttons */
                        height: 30px; /* Set height for buttons */
                    }

                    /* Position buttons within the Swiper container */
                    .swiper-button-prev {
                        left: 10px; /* Adjust to fit within the container */
                    }

                    .swiper-button-next {
                        right: 10px; /* Adjust to fit within the container */
                    }

                    /* Pagination dots */
                    .swiper-pagination-bullet {
                        background-color: black; /* Change color */
                        transform: translateY(-100);
                    }

                    .swiper-pagination-fraction {
                        color: black; /* Change color for fraction numbers */
                        font-size: 14px; /* Adjust text size */
                    }

                    .controls {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: rgba(0, 0, 0, 0.7);
                        padding: 10px;
                        /* position: absolute; */
                        bottom: 0;
                        width: 100%;
                        margin-left: 20px;
                        margin-right: 20px;
                    }
                    .controls button {
                        color: white;
                        border: none;
                        background: #7200ec;
                        padding: 8px 12px;
                        cursor: pointer;
                        border-radius: 4px;
                        font-size: 16px;
                        transition: background 0.3s;
                        margin-left: 2px;
                        margin-right: 2px;
                    }
                    .controls button:hover {
                        background: #0056b3;
                    }
                    .controls input[type="range"] {
                        width: 100%;
                        margin: 0 10px;
                    }
                    .timestamp {
                        color: white;
                        font-size: 14px;
                        margin-left: 10px;
                        margin-right: 5px;
                    }

                    footer {
                        background: linear-gradient(45deg, #3C3388, #7162fb); /* Updated background color */
                        color: white;
                        padding: 10px 20px;
                        position: fixed;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        gap: 15px;
                        /* height: 30px; */
                        z-index: 100;
                        padding: 10px;
                    }
                    footer a {
                        color: white;
                        text-decoration: none;
                        transition: color 0.3s;
                        margin-left: 10px;
                        margin-right: 10px;
                        font-size: 1.2rem;
                    }
                    footer a:hover {
                        color: #ddd; /* Change color on hover */
                        
                    }

                    .FEATable{
                        width: 100%;
                        overflow-x: scroll;
                    }


            /* Responsive styles for screens smaller than 600px */
            @media only screen and (max-width: 800px) {

                .container{
                    width: 100%

                }

                .inner-container {
                    flex-direction: column-reverse;
                    align-self: center;
                    width: 100%;
                }

                .project-list{
                    width: 95%;
                    min-width: none;
                    align-self: center;
                    margin-left: 0;
                    margin-right: 0;
                    margin-bottom: 2rem;
                    margin-top: 1.5rem;
                    padding: 0;
                    align-items: center;

                }
                
                .demo-video-container, .swiper-container {
                    margin-left: 0;
                    margin-right: 0;
                    width: 100%;
                    min-width: 0;
                    background-color: white;
                    /* height: 80vh; */
                    /* padding: 10px; */
                    border-left: 1px solid #ddd;
                    align-self: center;
                    justify-self: center;
                    display: none;
                    border: 1px grey solid;
                    margin-top: 0px;
                    margin-bottom: 20px;
                    margin-left: 0px;
                    border-radius: 15px; /* Rounded corners */
                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
                    display: none;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3); /* Horizontal, Vertical, Blur, Spread */
                    border-radius: 8px; /* Optional: for rounded corners */
                    /* position: absolute; */
                    top: 5rem;
                    transform: translateY(0%);
                    
                }

                #myname, #header-title {
                    font-size: 1.2rem;
                }
            }
            .pk{
                font-size: 0.8rem;
            }
        </style>
        <!------------->

</head>

<body>

    <div class="lk" style="display: flex; flex-direction: column;">
        <div class="kj">
            <div class="project-list" id="projectList" >
                <!-- <h4 style="margin: auto">__Click to Expand and View Demo</h4> &nbsp; -->
                <div class="project-card" id="networkschematics">
                    <div title='Click to expand/collapse' onclick="toggleDetails(this, 'https://res.cloudinary.com/dulmprlsh/video/upload/v1737102780/1._Network_Schematics_hqvuoe_frqah4.mp4')">
                        <div class="title">Network Schematics Tool </div>
                        <div class="short-description">Instantly generate schematics for ICM catchment networks.</div>
                    </div>
                    <div class="pk">

                        <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;"><video  width="560" height="315" controls controlslist="nodownload">
                            <source src="https://res.cloudinary.com/dulmprlsh/video/upload/v1737102780/1._Network_Schematics_hqvuoe_frqah4.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video></div>

                        The Network Schematics tool streamlines the generation of schematics for any ICM catchment network, simplifying a process that is often time-consuming and prone to errors in large and complex networks. 
                        This tool empowers users to upload data files generated by running a Ruby script on the ICM network, allowing for extensive customization of the resulting schematics.
                        <br /><br />
                        Users can enhance their schematics through a variety of intuitive actions, including Adding new elements. Deleting unwanted components,
                        modifying or creating connections (edges) between nodes with click-and-drag functionality.
                        <br /><br />
                        The tool supports HTML markup within elements, enabling users to incorporate a wide range of content, such as images, videos, and other chart components, into their schematics.
                        <br /><br />
                        Additionally, the tool allows for the styling of nodes and connections, providing options to edit their appearance for improved visualization. Legends can be easily added and managed, enhancing the clarity and organization of the schematics.
                        <br /><br />
                        Once all modifications are complete, users can save their work for future reference or download the final schematics in JPEG format. This ensures flexibility and ease of use throughout the design process.
                        <br /><br />
                    </div>
                </div>
                
                <div class="project-card" id="flowsurvey">
                    <div title="Click to expand/collapse">
                        <div class="title">Flow Survey Assessment Tool</div>
                        <div class="short-description">A browser-based application for interactive analysis of flow survey data, including flow, depth, and velocity measurements.</div>
                    </div>
                    <div class="pk">

                        <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;"><video  width="560" height="315" controls controlslist="nodownload">
                            <source src="https://res.cloudinary.com/dulmprlsh/video/upload/v1737102721/6._Flow_Survey_Tool_xykomw_pesfwq.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video></div>

                        The Flow Survey Assessment Tool is a browser-based application designed to read flow survey files, specifically FDV (flow, depth, velocity) and R (rainfall) files. This tool generates highly interactive FDV and rainfall plots, offering features such as pan, zoom, and scroll for enhanced user experience. It displays flow, depth, and velocity data against the required rainfall data, highlighting vital metrics like maximum and minimum depth, volume, velocity, and cumulative rainfall volume and depth within the visible time range of the plot.
                        <br /><br />
                        In addition to these plots, the tool generates dynamic scatter graphs and comparative cumulative rainfall depth plots of the data within the view range, allowing users to assess data quality and usability effectively. Users can also download the plots as JPEG images for reporting or further analysis. The tool enables modellers to quickly view and assess flow survey data by simply dragging the FDV files into the tool's interface, facilitating tasks such as interim assessments of flow surveys and event selections for verification.
                    </div>
                </div>

                <div class="project-card" id="designrainfall">
                    <div title="Click to expand/collapse">
                        <div class="title">Design Rainfall Generator [Excel VBA & ICM Exchange/Ruby]</div>
                        <div class="short-description">Automates the generation of design rainfall profiles for ICM model assessments.</div>
                    </div>
                    <div class="pk">

                        <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;"><video  width="560" height="315" controls controlslist="nodownload">
                            <source src="https://res.cloudinary.com/dulmprlsh/video/upload/v1737102897/3._Design_rainfall_clyhwr_touaac.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video></div>

                        The Design Rainfall Generator streamlines the process of creating rainfall profiles for ICM model assessments, automating what is typically a time-consuming and error-prone task. This tool, built with Excel VBA and ICM Exchange Ruby script, processes a standard PDF from Met Éireann (The Irish Meteorological Service), containing rainfall depths, and generates CSV files for various return periods and storm durations and creates as new ICM databse with the rainfall files:
                
                        <ol>
                            <li>The Excel VBA script extracts rainfall data from a Met Éireann PDF file.</li>
                            <li>It generates CSV files corresponding to different storm durations and return periods.</li>
                            <li>An ICM Exchange Ruby script runs on the CSV files, creating an ICM database with the design rainfall files.</li>
                        </ol>
                
                        This tool automates a key part of model assessments for Irish Water catchments, ensuring accuracy and saving significant time in generating design rainfall profiles.
                    </div>
                </div>

                <div class="project-card" id="exclusivesubcatchments">
                    <div title="Click to expand/collapse">
                        <div class="title">Exclusive Subcatchment Selector [Ruby]</div>
                        <div class="short-description">Generates selection lists of exclusive subcatchments draining to specific points of interest within a network.</div>
                    </div>
                    <div class="pk">

                        <div style="display: flex; flex-direction: column; align-items: center; margin-bottom: 10px;"><video  width="560" height="315" controls controlslist="nodownload">
                            <source src="https://res.cloudinary.com/dulmprlsh/video/upload/v1737102806/4._Exclusive_Subcatchments_y2v9td_rfz9e2.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video></div>

                        <p> This Ruby script automates the creation of selection lists for exclusive subcatchments or networks draining to user-labeled points of interest, such as flow and depth monitoring points and ancillaries, within a network model. </p>
                        <p> Exclusive subcatchments refer to those that drain directly to a specific point of interest, excluding any areas draining to upstream points of interest.</p>
                        <p> Identifying these exclusive subcatchments is crucial for projects like Verification, Optioneering, and survey scoping. Manual identification using built-in ICM tools, like US Tracing, can be time-consuming, challenging, and often prone to errors, especially in large and complex networks with multiple points of interest.</p> 
                
                        This script provides a seamless solution, generating accurate selection lists for exclusive subcatchments in seconds, regardless of the network's size or complexity. By significantly reducing the time and effort involved, it ensures perfect accuracy.
                    </div>
                </div>
            </div>
            
            <div class="demo-video-container" id="demo-video-container">
                <video id="demo-video" controls ControlsList="nodownload">
                    <source id="videoSource" src="" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <!-- <div class="controls">
                    <button onclick="playVideo()">Play</button>
                    <button onclick="pauseVideo()">Pause</button>
                    <button onclick="muteVideo()">Mute</button>
                    <button onclick="unmuteVideo()">Unmute</button>
                    <input type="range" id="seekBar" class="seek-bar" value="0" onchange="seekVideo()">
                    <span class="timestamp" id="currentTime">00:00</span>
                    <span class="timestamp"> / </span>
                    <span class="timestamp" id="totalDuration">00:00</span>
                    button onclick="toggleFullscreen()">Fullscreen</button>
                </div> -->
            </div>

            <div class="swiper-container" id="swiper-container" >
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <!-- <footer>
        <a href="mailto:praveenpaikadan@gmail.com">
            <i class="fas fa-envelope"></i> 
        </a>
        <a href="https://www.linkedin.com/in/praveenpaikadan" target="_blank">
            <i class="fab fa-linkedin"></i> 
        </a>
        <a href="https://wa.me/919048941689" title='+91-9048941689, +91-8289919059' target="_blank">
            <i class="fab fa-whatsapp"></i> 
        </a>
        <a href="tel:+919048941689" title='+91-9048941689, +91-8289919059' target="_blank">
            <i class="fas fa-phone"></i> 
        </a>        
    </footer> -->

<!-- <script>

    // scrolling yto project based on queryparameter
    document.addEventListener("DOMContentLoaded", function() {
    // Function to get the value of a specific query parameter
    function getQueryParam(param) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    // Get the value of the 'scrollTo' query parameter
    const targetId = getQueryParam('scrollTo');

    // If the parameter exists, find the corresponding div
    if (targetId) {
        const targetDiv = document.getElementById(targetId);

        if (targetDiv) {
            // Get the position of the target div
            const targetRect = targetDiv.getBoundingClientRect();

            // Click on the first child of the div
            const firstChild = targetDiv.firstElementChild;
            if (firstChild) {
                firstChild.click();
            } else {
                console.warn(`The div with ID "${targetId}" has no child elements to click.`);
            }

            // Calculate the top position considering the sticky header height (6rem)
            const headerHeight = 6.5 * parseFloat(getComputedStyle(document.documentElement).fontSize); // Convert rem to pixels
            const targetScrollPosition = window.scrollY + targetRect.top - headerHeight;

             // Scroll to the adjusted position
             window.scrollTo({
                top: targetScrollPosition,
                behavior: 'smooth',
            });

        } else {
            console.warn(`Element with ID "${targetId}" not found.`);
        }
    }

    });


    // preventing right click on video
    const video = document.getElementById("demo-video");
    video.addEventListener("contextmenu", function(event) {
            event.preventDefault();
        });



    // assigning border colors for cards
    const colors = [
    '#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1', '#F7786B', '#DEAB8A', '#EFC050', '#9B2335', '#FFBB33',
    '#5DADEC', '#D4A5A5', '#FFB7B2', '#F0A830', '#78C850', '#FDBE02', '#34A853', '#E94B3C', '#795548', '#FFB300',
    '#00796B', '#FF5252', '#F15A29', '#FFD662', '#C70039', '#FF5733', '#FFC300', '#DAF7A6', '#D81159', '#FF99C8',
    '#FCF300', '#FF8C42', '#99C24D', '#23B5D3', '#D81159', '#F26430', '#76B041', '#DB5ABA', '#43A8A0', '#F06292'
    ];

    const projectCards = document.querySelectorAll('.project-card');

    projectCards.forEach((card, index) => {
        // Assign different left border color based on index
        card.style.borderLeft = `5px solid ${colors[index % colors.length]}`;
    });

    function toggleDetails(card, link, image=false) {

        var card = card.parentElement;
        const details = card.querySelector('.details');
        
        const videoDemo = document.getElementById('demo-video');
        const imageDemo = document.getElementById('swiper-container');

        const videoSource = document.getElementById('videoSource');

        // Collapse other project cards
        const allCards = document.querySelectorAll('.project-card');
        allCards.forEach(otherCard => {
            if (otherCard !== card) {
                otherCard.querySelector('.details').style.display = 'none';
            }
        });

        if(image === false){
            imageDemo.style.display = 'none';
            // Toggle the clicked card's details
            if (details.style.display === 'none' || details.style.display === '') {
                details.style.display = 'flex';
                videoDemo.style.display = 'flex';
                videoSource.src = link; // Set demo link
                videoDemo.load();
                // videoDemo.play()
            } else {
                details.style.display = 'none';
                videoSource.src = ''; // Clear demo link if collapsing
            }
        }else{
            videoDemo.style.display = 'none';
            videoSource.src = ''
            // Toggle the clicked card's details
            if (details.style.display === 'none' || details.style.display === '') {
                details.style.display = 'flex';

                const swiper = new Swiper('.swiper-container', {
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    slidesPerView: 1, // One image at a time
                    spaceBetween: 10, // Adjust space between slides if needed
                    autoHeight: true, // Dynamically adjust slider height based on the image height
                    pagination: {
                        el: '.swiper-pagination',  // Target pagination element
                        clickable: true,           // Enable click functionality for dots
                        type: 'fraction',          // Shows fraction like "1 / 5"
                    },
                    autoplay: {
                        delay: 4000, // Time between slides in milliseconds (3 seconds)
                        disableOnInteraction: false, // Auto-slide will continue even after manual interactions
                    },

                });

                // Images array from your folder 'image-demo/FEA'
                const images = image

                const swiperWrapper = document.querySelector('.swiper-wrapper');

                // Dynamically add slides to Swiper
                swiperWrapper.innerHTML = ""
                images.forEach(imagePath => {
                    const slide = document.createElement('div');
                    slide.classList.add('swiper-slide');

                    const img = document.createElement('img');
                    img.src = imagePath;

                    slide.appendChild(img);
                    swiperWrapper.appendChild(slide);
                });

            } else {
                details.style.display = 'none';
                // imageDemo.src = ''; // Clear demo link if collapsing
            }
        }
        // document.querySelectorAll('.details').forEach(e =>{e.parentElement.style.boxShadow = (e.style.display === "none" ? "none": '#c094e917')})
        checkAllCardsClosed(image)
    }

    function checkAllCardsClosed(image) {
        const allDetails = document.querySelectorAll('.details');
        const allClosed = Array.from(allDetails).every(detail => detail.style.display === 'none');
        
        if (allClosed) {
            // All cards are closed
            document.getElementById('demo-video-container').style.display = 'none'
            document.getElementById('swiper-container').style.display = 'none'
            // Hide the demo window or perform any other action
        } else {
            if(!image){
                document.getElementById('demo-video-container').style.display = 'flex'
                document.getElementById('swiper-container').style.display = 'none'
            }else{
                document.getElementById('swiper-container').style.display = 'flex'
                document.getElementById('demo-video-container').style.display = 'none'
            }  
        }
    }
</script>


<!-- Not included now -->
<script>
   var seekBar = document.getElementById("seekBar");
    var currentTimeDisplay = document.getElementById("currentTime");
    var totalDurationDisplay = document.getElementById("totalDuration");

    // Update the seek bar and timestamps as the video plays
    video.addEventListener("timeupdate", function() {
        var value = (video.currentTime / video.duration) * 100;
        seekBar.value = value;
        updateTimeDisplays();
    });

    // Set the total duration when the metadata is loaded
    video.addEventListener("loadedmetadata", function() {
        totalDurationDisplay.textContent = formatTime(video.duration);
    });

    function playVideo() {
        video.play();
    }

    function pauseVideo() {
        video.pause();
    }

    function muteVideo() {
        video.muted = true;
    }

    function unmuteVideo() {
        video.muted = false;
    }

    function seekVideo() {
        var time = (seekBar.value * video.duration) / 100;
        video.currentTime = time;
    }

    function toggleFullscreen() {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.mozRequestFullScreen) { // Firefox
            video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) { // Chrome, Safari, and Opera
            video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) { // IE/Edge
            video.msRequestFullscreen();
        }
    }

    function updateTimeDisplays() {
        currentTimeDisplay.textContent = formatTime(video.currentTime);
    }

    function formatTime(seconds) {
        var minutes = Math.floor(seconds / 60);
        var seconds = Math.floor(seconds % 60);
        return (minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
    }
</script> -->

</body>





</html>
