<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Swarmlab.io</title>

  <!-- Bootstrap core CSS -->
  <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="/css/scrolling-nav.css" rel="stylesheet">

</head>

<body id="page-top">


  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">Swarmlab.io</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="http://docs.swarmlab.io/index.html#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="http://docs.swarmlab.io/index.html#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="http://docs.swarmlab.io/index.html#labrooms">Labrooms</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="http://docs.swarmlab.io/index.html#faq">FAQ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="https://api-client.swarmlab.io:8088/" target="_blank">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <header class="bg-primary text-white">
    <div class="container text-center">
      <h1>Welcome to Swarmlab.io</h1>
      <p class="lead">
Swarmlab is a powerful collaboration tool that connects tutors and students in a unique all-in-one environment that gets work done fast and easily
      <h2> Ready-to-Use Virtual Labs one click away. </h2>
      </p>
    </div>
  </header>





  <section id="labrooms">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 mx-auto">
          <h2>Swarmlab Docs</h2>
          <p class="lead">
          </p>
          <p class="lead">
          </p>

                <!-- Search functionality -->
                <nav class="navbar navbar-light justify-content-center mt-4">
                    <form class="form-inline">
                        <button type="button" class="btn btn-primary btn-lg mr-3" id="btnSort">Sort</button>
                        <input class="form-control form-control-lg mr-sm-2" type="search" placeholder="Search: case-sensitive." aria-label="Search" id="search">
                        <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
                    </form>
                </nav>

                <!-- Cardsrow 1-->
                <div class="layout-margin-8 mt-4">

                    <div class="card-deck">

                <!-- start quide -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Quick-start guide!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">

					<ul class="list-group list-group-flush">
					  <li class="list-group-item">
						  The first steps
					  </li>
					  <li class="list-group-item">
						  Register, Login etc
					  </li>
					  <li class="list-group-item">
						  Main Menou
					  </li>
					  <li class="list-group-item">
						  Tutor/Student Menou etc
					  </li>
					</ul>

                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/swarmlab/main.adoc.html#_the_first_steps" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- start quide -->

                <!-- Learning Objects Notebooks -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Learning Objects Notebooks</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">

					A Swarmlab LearningObject Notebook lets users create and share documents that contain <b>live code</b>, visualisation, and many other types of components.
					<ul class="list-group list-group-flush">
					  <li class="list-group-item">
						  Run, Try
                                          </li>
					  <li class="list-group-item">
						  Create, Publish
                                          </li>
                                        </ul>
                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/swarmlab/main.adoc.html#_learning_objects_notebooks" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- Learning Objects Notebooks -->

                <!-- Get Involved -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Create Labroom</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">

					<ul class="list-group list-group-flush">
					  <li class="list-group-item">
						  Enter lab room area
					  </li>
					  <li class="list-group-item">
						  Bootstrap
					  </li>
					  <li class="list-group-item">
						  Tutor/Student Menou etc
					  </li>
					</ul>

                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/swarmlab/main.adoc.html#_creating_a_lab" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- Get Involved -->

                        </div>
                    </div>


                <!-- Cardsrow 2-->
                <div class="layout-margin-8 mt-4">
                    <div class="card-deck">

                <!-- SwarmLab with NoVNC -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>SwarmLab with NoVNC!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">
					<ul class="list-group list-group-flush">
					  <li class="list-group-item">
						  HowTo Use a SwarmLab noVNC Lab.
                                          </li>
                                        </ul>
                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/swarmlab/howto.adoc.html#_quick_1_minute_demo" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- SwarmLab with NoVNC -->

                <!-- gitea -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>SwarmLab gitea!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">

					<ul class="list-group list-group-flush">
					  <li class="list-group-item">
						  create a new repository
                                          </li>
					  <li class="list-group-item">
						  clone repository
                                          </li>
					  <li class="list-group-item">
						  add & commit, push
                                          </li>
                                        </ul>
                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/swarmlab/files/help/HowTo-gitea.adoc.html#cheat-CreateRepository" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- gitea -->

		    </div>
		</div>
                <!-- Cardsrow 2-->

                <!-- Cardsrow 3 contribute-->
                <div class="layout-margin-8 mt-4">
                    <div class="card-deck">

                <!-- SwarmLab contribute -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Get Involved!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">

						We invite anyone to come and participate in the creation of Swarmlab.io. Regardless of your skillset, we’re sure there is something you can add to our community and project.

                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/swarmlab/main.adoc.html#_get_involved" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- Swarmlab contribute -->

		    </div>
		</div>
                <!-- Cardsrow 3 contribute-->

                <!-- Cardsrow 3a docs-->
                <div class="layout-margin-8 mt-4">
                    <div class="card-deck">

                <!-- SwarmLab contribute -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Lab Courses!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <p class="card-text">
                                <small class="text-muted">
					Interactive participatory online lab courses

                                </small></p>
                                <a href="http://docs.swarmlab.io/SwarmLab-HowTos/courses/main.adoc.html" target="_blank">
                                    <button type="button" class="btn btn-outline-primary">Read More</button>
                                </a>
                            </div>
                         </div>
                <!-- Swarmlab contribute -->

		    </div>
		</div>
                <!-- Cardsrow 3a docs-->

                <!-- Cardsrow menouvideo swarmlabvideo-->
                <div class="layout-margin-12 mt-4 text-center">
                                <h3 class="mb-2 bg-info text-white text-center"><b>Swarmlab Videos!</b></h3>
		</div>
                <!-- Cardsrow menouvideo swarmlabvideo-->

                <!-- Cardsrow menouvideo swarmlabvideo cards-->
                <div class="layout-margin-8 mt-4">
                    <div class="card-deck">

                <!-- video 1 -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Create Git Repo!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>

                                <div class="embed-responsive embed-responsive-16by9">
                                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/461064974" allowfullscreen></iframe>
                                </div>  

                            </div>
                         </div>
                <!-- video 1 -->


                <!-- video 2 -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Request Tutor Verification!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <div class="embed-responsive embed-responsive-16by9">
                                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/461065878" allowfullscreen></iframe>
                                </div>
                            </div>
                         </div>
                <!-- vodeo 2 -->

		    </div>
		</div>

                <!-- Cardsrow menouvideo swarmlabvideo cards-->


                <!-- Cardsrow menou it would be useful-->
                <div class="layout-margin-12 mt-4 text-center">
                                <h3 class="mb-2 bg-info text-white text-center"><b>It would be useful!</b></h3>
		</div>
                <!-- Cardsrow menou it would be useful-->



                <!-- Cardsrow 3-->
                <div class="layout-margin-8 mt-4">
                    <div class="card-deck">


                <!-- video 1 -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>Using Asciidoctor!</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>

                                <div class="embed-responsive embed-responsive-16by9">
                                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/183357606" allowfullscreen></iframe>
                                </div>  

                            </div>
                         </div>
                <!-- video 1 -->


                <!-- video 2 -->
                        <div class="card card-shadow text-center">
                            <div class="card-body">
                                <h4 class="card-title"><b>What is Git?</b></h4>
                                <p class="card-text"></p>
                                <div class="dropdown-divider"></div>
                                <div class="embed-responsive embed-responsive-16by9">
                                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/41381741" allowfullscreen></iframe>
                                </div>
                            </div>
                         </div>
                <!-- vodeo 2 -->


		    </div>
		</div>
                <!-- Cardsrow 3-->

                </div>

        </div>
      </div>
    </div>
  </section>













  <!-- Footer -->
  <footer class="py-5 bg-dark">
    <div class="container">
	    <!-- 
      <p class="m-0 text-center text-white">Copyright &copy; swarmlab.io 2020</p>
	    -->
    </div>
    <!-- /.container -->
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Plugin JavaScript -->
  <script src="/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom JavaScript for this theme -->
  <script src="/js/scrolling-nav.js"></script>

<script>
$('#search').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

$('#search').keyup(function (){

    $('.card').removeClass('d-none');

    var filter = $(this).val(); // get the value of the input, which we filter on

    $('.card-deck').find('.card .card-body h4:not(:contains("'+filter+'"))').parent().parent().addClass('d-none');

})



$('#btnSort').click(function (){

    $('.card-deck .card').sort(function(a,b) {

        return $(a).find(".card-title").text() > $(b).find(".card-title").text() ? 1 : -1;

    }).appendTo(".card-deck");

})
</script>





</body>

</html>