index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIPLOMAT - Home</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        header {
            background: #351431;
            color: #fff;
            padding: 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        header h1 {
            font-size: 4rem;
            font-weight: bold;
            margin: 0;
            letter-spacing: 0.1em;
            transform: scaleY(1.2);
            transition: transform 0.1s ease-out;
        }
        header p {
            color: #fff;
            margin: 0;
            font-size: 1.2rem;
            margin-top: 0.5rem;
        }
        nav {
            display: flex;
            justify-content: center;
            background: #351431;
            padding: 1rem;
        }
        nav a {
            position: relative;
            margin: 0 1rem;
            padding: 0.5rem 1rem;
            text-decoration: none;
            color: #fff;
            border-radius: 5px;
            overflow: hidden;
        }
        nav a:before, nav a:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: #96bdc6;
            top: 0;
            left: -100%;
            transition: all 0.3s ease;
        }
        nav a:after {
            top: auto;
            bottom: 0;
            left: 100%;
        }
        nav a:hover:before {
            left: 100%;
        }
        nav a:hover:after {
            left: -100%;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            padding: 2rem;
        }
        h2 {
            color: #351431;
        }
        p {
            color: #666;
        }
        .images {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 2rem 0;
        }
        .images img {
            max-width: 30%;
            height: auto;
            margin-bottom: 1rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        .interact-section {
            position: relative;
            overflow: hidden;
            background-color: #d5e5e8;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: 2rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .interact-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .interact-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        .interact-content img {
            width: 100%;
            max-width: 600px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-bottom: 1rem;
        }
        .interact-text {
            flex: 1;
            max-width: 100%;
            margin-left: 2rem;
            text-align: center;
        }
        .video-section {
            position: relative;
            overflow: hidden;
            background-color: #d5e5e8;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: 2rem;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .video-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .video-section h2 {
            text-align: center;
            margin-bottom: 1rem;
        }
        .video-section p {
            text-align: center;
            margin-bottom: 2rem;
            color: #666;
        }
        .button-row {
            display: flex;
            justify-content: space-around;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        .button-row button {
            padding: 1rem 2rem;
            font-size: 1.5rem;
            border: none;
            border-radius: 50px;
            background-color: #732c6b;
            color: white;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 0.5rem;
        }
        .button-row button:hover {
            background-color: #5e2256;
            transform: scale(1.05);
        }
        .video-row {
            display: none;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            opacity: 0;
            transform: translateY(100px);
            transition: opacity 1s ease-out, transform 1s ease-out;
            flex-wrap: wrap;
        }
        .video-row.visible {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }
        .video {
            flex: 1;
            max-width: 100%;
        }
        .video iframe {
            width: 100%;
            height: 500px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .video-text {
            flex: 1;
            max-width: 100%;
            margin-left: 2rem;
            text-align: left;
        }
        .tweak-section {
            position: relative;
            overflow: hidden;
            background-color: #d5e5e8;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: 2rem;
            opacity: 0;
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .tweak-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .tweak-section h2 {
            text-align: center;
            margin-bottom: 1rem;
        }
        .tweak-section p {
            text-align: center;
            margin-bottom: 2rem;
            color: #666;
        }
        .tweak-button {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        .tweak-button button {
            padding: 1rem 2rem;
            font-size: 1.5rem;
            border: none;
            border-radius: 50px;
            background-color: #5e2256;
            color: white;
            cursor: pointer;
            transition: background 0.3s, transform 0.3s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 0.5rem;
        }
        .tweak-button button:hover {
            background-color: #732c6b;
            transform: scale(1.05);
        }
        footer {
            background: #351431;
            color: #fff;
            text-align: center;
            padding: 1rem 0;
            margin-top: 2rem;
        }
        footer p {
            color: #fff;
        }
        .divider {
            height: 2px;
            background-color: #351431;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <header>
    <h1 id="logo">DIPLOMAT</h1>
    <p>Deep Learning-Based Identity Preserving Labeled-Object Multi-Animal Tracking</p>
    <a href="https://github.com/TravisWheelerLab/DIPLOMAT" target="_blank" style="text-decoration: none; color: white;">
        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo" style="width: 20px; vertical-align: middle;">
        <span style="margin-left: 0.5rem;">DIPLOMAT</span>
    </a>
    </header>
    
    <nav>
        <a href="index.html">Home</a>
        <a href="installation.html">Installation</a>
        <a href="supplementary.html">Supplementary Information</a>
    </nav>

    <div class="container">
        <section>
            <h2>About</h2>
            <p>DIPLOMAT provides a multi-animal tracking/pose-estimation interface that (1) reduces identity swaps and body part losses, and (2) simplifies correction of automated tracking errors. After pre-processing a video with a pose estimation tool (currently supporting SLEAP and DeepLabCut packages), DIPLOMAT computes a multi-animal maximum-probability trace to <b>Track</b> multiple animals (and their body parts); it then provides an intuitive and memory/time efficient <b>Interact</b> interface to edit and re-track as needed. DIPLOMAT differs from other multi-animal tracking packages by working directly off of confidence maps instead of running peak detection, allowing for more accurate tracking results.</p>
        </section>

        <div class="images">
            <img src="https://raw.githubusercontent.com/TravisWheelerLab/DIPLOMAT/main/docs/source/_static/imgs/example1.png" alt="Example of tracking 2 Degus in a Box">
            <img src="https://raw.githubusercontent.com/TravisWheelerLab/DIPLOMAT/main/docs/source/_static/imgs/example2.png" alt="Example of tracking 3 Rats">
        </div>

        <div class="divider"></div>

        <section class="interact-section" id="interact-section">
            <div class="interact-content">
                <img src="interact_retrack_gif.gif" alt="Interact Interface">
                <div class="interact-text">
                    <h2>Using the Interact Interface</h2>
                    <p>Here we can make precise adjustments to our model's predicted points and re-run the Viterbi algorithm</p>
                </div>
            </div>
        </section>

        <div class="divider"></div>

        <section class="video-section" id="video-section">
            <h2 class="text-3xl text-dark-purple mb-4">Explore Our Features</h2>
            <p class="text-lg text-gray-700">Learn more about DIPLOMAT's functionalities through our video guides.</p>
            <div class="button-row">
                <button onclick="showVideo('track-interact')">Track and Interact</button>
                <button onclick="showVideo('interact')">Interact</button>
            </div>

            <div id="track-interact" class="video-row">
                <div class="video">
                    <iframe src="https://www.youtube.com/embed/T-8y4f_4XTA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="video-text">
                    <h3 class="text-2xl text-dark-purple mb-2">Track and Interact Interface</h3>
                    <p>Introduction on how you can track and interact with pose data in DIPLOMAT, leveraging models created through SLEAP or DeepLabCut (DLC).</p>
                </div>
            </div>

            <div id="interact" class="video-row">
                <div class="video">
                    <iframe src="https://www.youtube.com/embed/-Y9z8KOVSEo" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="video-text">
                    <h3 class="text-2xl text-dark-purple mb-2">Interact Interface</h3>
                    <p>Overview of the visual settings, continuous labeling, single/multi body part labeling modes, and re-running the Viterbi algorithm</p>
                </div>
            </div>
        </section>

        <div class="divider"></div>

        <section class="tweak-section" id="tweak-section">
            <h2 class="text-3xl text-dark-purple mb-4">Additional Features: Tweak Interface</h2>
            <p class="text-lg text-gray-700">The Tweak Interface allows for fine-tuning to minimize identity swaps and other issues. Explore the tutorial video to learn more.</p>
            <div class="tweak-button">
                <button onclick="showTweakVideo()">Explore Tweak Interface</button>
            </div>
            <div id="tweak" class="video-row">
                <div class="video">
                    <iframe src="https://www.youtube.com/embed/OC1soECO2r4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="video-text">
                    <h3 class="text-2xl text-dark-purple mb-2">Tweak Interface</h3>
                    <p>Tutorial on navigating the Tweak Interface</p>
                </div>
            </div>
        </section>
    </div>

    <footer>
        <p>&copy; 2024 DIPLOMAT Project</p>
        <p>See <code>LICENSE</code> for details.</p>
    </footer>

    <script>
        function showVideo(videoId) {
            const videoRows = document.querySelectorAll('.video-row');
            videoRows.forEach(row => {
                row.classList.remove('visible');
            });
            const selectedVideo = document.getElementById(videoId);
            selectedVideo.classList.add('visible');
        }

        function showTweakVideo() {
            const videoRows = document.querySelectorAll('.video-row');
            videoRows.forEach(row => {
                row.classList.remove('visible');
            });
            const tweakSection = document.getElementById('tweak');
            tweakSection.classList.add('visible');
        }

        window.addEventListener('scroll', () => {
            const videoSection = document.getElementById('video-section');
            const rect = videoSection.getBoundingClientRect();
            if (rect.top < window.innerHeight && rect.bottom >= 0) {
                videoSection.classList.add('visible');
            }
        });

        window.addEventListener('scroll', () => {
            const interactSection = document.getElementById('interact-section');
            const rect = interactSection.getBoundingClientRect();
            if (rect.top < window.innerHeight && rect.bottom >= 0) {
                interactSection.classList.add('visible');
            }
        });

        window.addEventListener('scroll', () => {
            const tweakSection = document.getElementById('tweak-section');
            const rect = tweakSection.getBoundingClientRect();
            if (rect.top < window.innerHeight && rect.bottom >= 0) {
                tweakSection.classList.add('visible');
            }
        });

        document.addEventListener('mousemove', (e) => {
            const logo = document.getElementById('logo');
            const movementX = (e.clientX - window.innerWidth / 2) / 50;
            const movementY = (e.clientY - window.innerHeight / 2) / 50;
            logo.style.transform = `scaleY(1.2) translate(${movementX}px, ${movementY}px)`;
        });
    </script>
</body>
</html>