<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>MeHealth</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="../css/style.css">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

</head>

<body>

    <div class="wrapper">
   <!-- Sidebar Holder start -->
   <nav id="sidebar">
    <div class="sidebar-header">
        <h3><a class="hero-brand" href="/" title="Home"><img alt="MeHealth" src="img/logo.jpeg"></a></h3>
    </div>

    <ul class="list-unstyled components">
        <li>
            <a href="/home">Covid Data</a>
        </li>
        <li>
            <a href="/covid/home">Covid Detection</a>
        </li>
        <li>
        <li>
            <a href="/covid/precautions">Precations</a>
        </li>
        <li>
            <a href="/covid/after-precautions">Precations(after covid +ve)</a>
        </li> 
        <li>
            <a href="/covid/plasma-donars">Plasma donars</a>
        </li>                
        </li>
        <li>
            <a href="/depression/home">Depression Detection</a>
        </li>  
        <li>
            <a href="/mealone">Chat bot</a>  
        </li>
        <li>
            <a href="/live-consultation">Live Consultation</a>
        </li>
    </ul>

</nav>
<!-- Sidebar Holder ends -->
<!-- Page Content Holder -->
<div id="content">

<!-- Sidebar Holder ends -->
        <!-- Page Content Holder -->
        <div id="content">

                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="navbar-btn">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item active">
                                
                            </li>
                        </ul>
                    </div>
                </div>
 <div class="container">


        <div class="slideshow-container">

            <div class="mySlides">
            
                <img src="../img/285.jpg" style="width:100%">
               
             </div>

            <div class="mySlides">

                <img src="../img/health.jpg" style="width:100%">

            </div>
            <div class="mySlides">

                <img src="../img/pandemic.jpg" style="width:100%">

            </div>
            <div class="mySlides">

                <img src="../img/lockdown.jpg" style="width:100%">

            </div>
            <div class="mySlides">

                <img src="../img/stay.jpg" style="width:100%">

            </div>

        </div>
        <br>

        <div style="text-align:center">
            <span class="dot"></span>
            <!--<span class="dot"></span>-->
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>

        <script>
            var slideIndex = 0;
            showSlides();

            function showSlides() {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                slideIndex++;
                if (slideIndex > slides.length) { slideIndex = 1 }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex - 1].style.display = "block";
                dots[slideIndex - 1].className += " active";
                setTimeout(showSlides, 2000); 
            }
        </script><br /><br />
        <center>
            <h2>Precautions</h2>
        </center>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="../img/wash.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                        <p>Clean hands deserve two thumbs up</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="../img/safedist.jpg" alt="Nature" style="width:100%">
                    <div class="caption">
                        <p>Let's stay 6ft away spread no virus today</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">

                    <img src="../img/cough.jpg" alt="Fjords" style="width:100%">
                    <div class="caption">
                        <p>Avoid coughing without protection at public places</p>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">

                    <img src="../img/mask.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                        <p>Wear mask when you entered into public places</p>
                    </div>

                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">

                    <img src="../img/dontouch.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                        <p>Avoid touching face unneccesarily</p>
                    </div>

                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">

                    <img src="../img/stayhome.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                        <p>Keep calm and stay home&stay safe</p>
                    </div>

                </div>
            </div>
        </div><br /><br />
        <div class="youtube">
            <iframe width="100%" height="500" src="https://www.youtube.com/embed/PSnSo9kYlH4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        
    </div>    
            

   </div>

    </div>
    

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
                $(this).toggleClass('active');
            });
        });
    </script>
</body>

</html>