Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Road Hazard Detection</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .slide {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }
        .slide.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .tech-card {
            transition: all 0.3s ease;
        }
        .tech-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .dataset-card {
            border-left: 4px solid;
            transition: all 0.3s ease;
        }
        .dataset-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="font-sans bg-gray-50">
    <!-- Navigation Dots -->
    <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 hidden md:block">
        <div class="flex flex-col space-y-4" id="nav-dots"></div>
    </div>

    <!-- Slides Container -->
    <div class="relative overflow-hidden">
        <!-- Previous slides remain the same until slide 7 -->
        <!-- ... (previous slides 1-6 remain unchanged) ... -->

        <!-- Slide 7: Dataset -->
        <div class="slide min-h-screen bg-white">
            <div class="container mx-auto px-6 py-20">
                <h2 class="text-4xl font-bold text-center mb-16 text-gray-800">Our Dataset</h2>
                
                <div class="max-w-5xl mx-auto">
                    <div class="grid md:grid-cols-2 gap-8 mb-12">
                        <!-- Public Dataset -->
                        <div class="dataset-card bg-white rounded-xl p-6 shadow-lg border-l-blue-500">
                            <div class="flex items-center mb-4">
                                <div class="bg-blue-100 rounded-lg p-3 mr-4">
                                    <i class="fas fa-database text-blue-600 text-2xl"></i>
                                </div>
                                <h3 class="text-2xl font-bold text-gray-800">Public Dataset</h3>
                            </div>
                            <p class="text-gray-600 mb-4">
                                We started with publicly available road datasets containing labeled images of potholes and speed bumps from various sources.
                            </p>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <ul class="space-y-2 text-gray-700">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span>10,000+ images from open repositories</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span>Various lighting and weather conditions</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                        <span>Multiple road types (urban, rural, highways)</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <!-- Our Custom Dataset -->
                        <div class="dataset-card bg-white rounded-xl p-6 shadow-lg border-l-purple-500">
                            <div class="flex items-center mb-4">
                                <div class="bg-purple-100 rounded-lg p-3 mr-4">
                                    <i class="fas fa-camera text-purple-600 text-2xl"></i>
                                </div>
                                <h3 class="text-2xl font-bold text-gray-800">Our Custom Dataset</h3>
                            </div>
                            <p class="text-gray-600 mb-4">
                                Each team member contributed by collecting and labeling images from their local areas to enhance diversity.
                            </p>
                            <div class="bg-gray-50 rounded-lg p-4">
                                <ul class="space-y-2 text-gray-700">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                        <span>5,000+ new images collected locally</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                        <span>Each town's unique road conditions captured</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                        <span>Seasonal variations included</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl shadow-lg p-8 mb-10">
                        <h3 class="text-2xl font-bold text-center mb-6 text-gray-800">Annotation Process</h3>
                        <div class="grid md:grid-cols-3 gap-6">
                            <div class="text-center">
                                <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
                                    <i class="fas fa-tag text-blue-600 text-2xl"></i>
                                </div>
                                <h4 class="font-semibold mb-2">Roboflow</h4>
                                <p class="text-sm text-gray-600">Used for consistent labeling across all images</p>
                            </div>
                            <div class="text-center">
                                <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
                                    <i class="fas fa-object-group text-purple-600 text-2xl"></i>
                                </div>
                                <h4 class="font-semibold mb-2">Bounding Boxes</h4>
                                <p class="text-sm text-gray-600">Precise annotation of potholes and speed bumps</p>
                            </div>
                            <div class="text-center">
                                <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
                                    <i class="fas fa-random text-green-600 text-2xl"></i>
                                </div>
                                <h4 class="font-semibold mb-2">Augmentation</h4>
                                <p class="text-sm text-gray-600">Applied transformations to increase diversity</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10">
                        <div class="md:flex">
                            <div class="md:w-1/2 p-8">
                                <h3 class="text-2xl font-bold mb-4 text-gray-800">Final Merged Dataset</h3>
                                <p class="text-gray-600 mb-6">
                                    After careful processing and validation, we combined both datasets to create a robust training set.
                                </p>
                                <div class="space-y-4">
                                    <div class="flex items-start">
                                        <div class="bg-blue-100 rounded-full p-2 mr-4">
                                            <i class="fas fa-chart-pie text-blue-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold">Dataset Statistics</h4>
                                            <ul class="text-sm text-gray-600 mt-1 space-y-1">
                                                <li>15,000+ total images</li>
                                                <li>25,000+ labeled potholes</li>
                                                <li>8,000+ labeled speed bumps</li>
                                                <li>Class balance maintained</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="bg-purple-100 rounded-full p-2 mr-4">
                                            <i class="fas fa-sliders-h text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold">Split</h4>
                                            <ul class="text-sm text-gray-600 mt-1 space-y-1">
                                                <li>70% training set</li>
                                                <li>20% validation set</li>
                                                <li>10% test set</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-6">
                                <img src="https://miro.medium.com/v2/resize:fit:1400/1*Q3TGVXm5W0V5yG5y5y5y5Q.png" 
                                     alt="Dataset samples" class="w-full rounded-lg shadow">
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button onclick="prevSlide()" class="px-6 py-2 border border-gray-300 rounded-full font-medium hover:bg-gray-100 transition duration-300 mr-4">
                            <i class="fas fa-arrow-left mr-2"></i> Back
                        </button>
                        <button onclick="nextSlide()" class="px-6 py-2 bg-purple-600 text-white rounded-full font-medium hover:bg-purple-700 transition duration-300">
                            Next <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- The remaining slides (now shifted down by one) -->
        <!-- Slide 8 becomes Slide 7 (Future Work) -->
        <!-- Slide 9 becomes Slide 8 (Conclusion) -->
        <!-- ... (remaining slides are unchanged except for their numbering) ... -->

    </div>

    <script>
        // Initialize slides
        const slides = document.querySelectorAll('.slide');
        const navDots = document.getElementById('nav-dots');
        let currentSlide = 0;
        
        // Create navigation dots
        slides.forEach((slide, index) => {
            const dot = document.createElement('button');
            dot.className = 'w-3 h-3 rounded-full bg-white bg-opacity-30 focus:outline-none transition duration-300';
            dot.addEventListener('click', () => goToSlide(index));
            navDots.appendChild(dot);
        });
        
        // Update navigation dots
        function updateNavDots() {
            const dots = navDots.querySelectorAll('button');
            dots.forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.className = 'w-3 h-3 rounded-full bg-white focus:outline-none transition duration-300';
                } else {
                    dot.className = 'w-3 h-3 rounded-full bg-white bg-opacity-30 focus:outline-none transition duration-300';
                }
            });
        }
        
        // Show current slide
        function showSlide() {
            slides.forEach((slide, index) => {
                if (index === currentSlide) {
                    slide.classList.add('active');
                } else {
                    slide.classList.remove('active');
                }
            });
            updateNavDots();
        }
        
        // Next slide
        function nextSlide() {
            if (currentSlide < slides.length - 1) {
                currentSlide++;
                showSlide();
            }
        }
        
        // Previous slide
        function prevSlide() {
            if (currentSlide > 0) {
                currentSlide--;
                showSlide();
            }
        }
        
        // Go to specific slide
        function goToSlide(index) {
            currentSlide = index;
            showSlide();
        }
        
        // Keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight') {
                nextSlide();
            } else if (e.key === 'ArrowLeft') {
                prevSlide();
            }
        });
        
        // Initialize
        showSlide();
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sovitich28/presentation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>