<!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 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 >
< div class = "layout-margin-8 mt-4" >
< div class = "card-deck" >
<!-- video 3 -->
< div class = "card card-shadow text-center" >
< div class = "card-body" >
< h4 class = "card-title" > < b > Bootstrap Playground!< / 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/487900928" allowfullscreen > < / iframe >
< / div >
< / div >
< / div >
<!-- vodeo 3 -->
<!-- video 4 -->
< div class = "card card-shadow text-center" >
< div class = "card-body" >
< h4 class = "card-title" > < b > Run Playground!< / 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/488469305" allowfullscreen > < / iframe >
< / div >
< / div >
< / div >
<!-- vodeo 4 -->
< / 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 © 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 >
