➕ Add illustrations + particle.js

web/locales/en.json

@@ -12,6 +12,8 @@
     "on_demand_text": "Create and share your ideas on our lab-room platform. Join tutors labs, learn more about your interests and broaden your horizon.",
     "git": "Git",
     "git_text": "The wolds leading, powerful collaboration tool at your disposal on our servers. Keep in touch with your workmates and make sharing simpler then ever.",
+    "learning_objects": "Learning Objects Notebooks",
+    "learning_objects_text": "Create a Web-based interactive chunks of e-learning to explain a learning objective, which can be used, reused or referenced during technology supported learning.",
     "available_swarmlab": "Available Swarmlab Lab-rooms",
     "bug": "Found a bug? Help us fix it!",
     "more_info": "More Info",
@@ -34,7 +36,6 @@
     "node_text4": "Learn How to providing a bi-directional communication channel between a client and a server.",
     "python_header": "Python, scipy",
     "python_text": "This Labroom provides a Python-based ecosystem of open-source software for mathematics, science, engineering and Web development",
-
     "doc-text-02": "The Swarmlabs platform",
     "doc-text-03": "The Main page",
     "doc-text-04": "My lab",

web/package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@babel/runtime": {
-      "version": "7.10.5",
+      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
-      "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -617,9 +617,9 @@
       }
     },
     "i18next": {
-      "version": "19.6.2",
+      "version": "19.7.0",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.7.0.tgz",
-      "integrity": "sha512-Zyd/Z32FY+sD+Eg6sLj5DeDSlrIN3WZ4onuOBRGcjDx/rvodsyUZ9TJ2Y+3aD9Vu8MPbiMU2WesIER/rs1ioyw==",
+      "integrity": "sha512-sxZhj6u7HbEYOMx81oGwq5MiXISRBVg2wRY3n6YIbe+HtU8ydzlGzv6ErHdrRKYxATBFssVXYbc3lNZoyB4vfA==",
       "requires": {
         "@babel/runtime": "^7.10.1"
       }
@@ -987,6 +987,11 @@
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "particles.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/particles.js/-/particles.js-2.0.0.tgz",
+      "integrity": "sha1-IThsQyjWx/lngKIB6W7t/AnHNvY="
+    },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -1079,9 +1084,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.5",
+      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "registry-auth-token": {
       "version": "4.2.0",

web/package.json

@@ -13,10 +13,11 @@
     "express": "~4.16.1",
     "express-session": "^1.17.1",
     "http-errors": "~1.6.3",
-    "i18next": "^19.6.2",
+    "i18next": "^19.7.0",
     "i18next-express-middleware": "^2.0.0",
     "i18next-node-fs-backend": "^2.1.3",
     "morgan": "~1.9.1",
-    "nodemon": "^2.0.4"
+    "nodemon": "^2.0.4",
+    "particles.js": "^2.0.0"
   }
 }

web/public/assets/particlesjs-config.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 10,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#087fff"
+    },
+    "shape": {
+      "type": "polygon",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 6,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

web/public/javascripts/bs-init.js

@@ -1,5 +1,15 @@
-$(document).ready(function(){
+$(document).ready(function () {
 	$('[data-bs-hover-animate]')
-		.mouseenter( function(){ var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) })
+		.mouseenter(function () {
-		.mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
+			var elem = $(this);
+			elem.addClass('animated ' + elem.attr('data-bs-hover-animate'))
+		})
+		.mouseleave(function () {
+			var elem = $(this);
+			elem.removeClass('animated ' + elem.attr('data-bs-hover-animate'))
+		});
 });
+
+window.onload = function () {
+	particlesJS.load('particles-js', '../assets/particlesjs-config.json');
+}

web/public/stylesheets/styles.min.css

@@ -272,7 +272,7 @@
 
 .navigation-clean-button,
 .navigation-clean-search {
-    background: #fff;
+    background: transparent !important;
     padding-top: .75rem;
     padding-bottom: .75rem;
     color: #333;
@@ -1136,3 +1136,23 @@ ul ul a {
         padding: 10px !important
     }
 }
+
+#particles-js canvas {
+    display: block;
+    vertical-align: bottom;
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
+    transition: opacity .8s ease, transform 1.4s ease
+}
+
+#particles-js {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -10;
+    top: 0;
+    left: 0
+}

web/views/index.ejs

@@ -1,24 +1,24 @@
 <%- include("partials/header.ejs") %>
 
-<header style="background-color: #f8f9fa;">
+<header style="height: 90vh;">
-  <div class="container text-center mb-5 mt-4">
+  <div id="particles-js"></div>
-    <div class="row">
+  <div class="container mb-5 mt-4">
-      <div class="col-sm-12 mx-auto">
+    <div class="col-sm-12 mt-5">
-        <h2 style="height: 40px;"><%= t('welcome') %></h2>
+      <h1><%= t('welcome') %></h1>
-      </div>
+      <p style="font-size: 20px;"><%= t('welcome_text') %></p>
-      <div class="col-sm-12 mt-2">
+      <a href="/documentation#getStarted" class="btn btn-primary rounded-pill btn-md mt-1" role="button"
-        <p style="font-size: 20px;"><%= t('welcome_text') %></p>
+        data-bs-hover-animate="pulse" style="color: rgb(255,255,255);">Get Started!</a>
-      </div>
+    </div>
+    <div class="container col-sm-12 col-lg-6 mt-5">
+      <img class="img-fluid float-right" src="/images/undraw_content_team_3epn.svg" alt="">
     </div>
   </div>
-
-  <div class="mt-3 mx-1"
-    style="background: url(/images/undraw_work_together_h63l.svg) center / contain; height: 35vh; background-repeat: no-repeat;">
-  </div>
-
 </header>
 
 <section class="features-icons bg-light text-center" id="features">
+  <div class="mb-5 pb-4">
+    <h2> Ready-to-Use Virtual Labs one click away. </h2>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col-lg-4">
@@ -56,24 +56,35 @@
 </section>
 <section class="showcase" id="services">
   <div class="container-fluid p-0">
-    <div class="row no-gutters">
+    <div class="row no-gutters mb-5">
-      <div class="col-lg-6 order-lg-2 text-white showcase-img"
+      <div class="col-lg-6 order-lg-2 text-white" style="background: url(/images/undraw_server_q2pb.svg) center / contain; height: 35vh; background-repeat:
-        style="background: url(/images/thomas-jensen-ISG-rUel0Uw-unsplash.jpg) center / cover;"><span></span></div>
+        no-repeat;"><span></span></div>
       <div class="col-lg-6 my-auto order-lg-1 showcase-text">
         <h2><strong><%= t('on_demand') %>&nbsp; </strong></h2>
         <p class="lead mb-0"><%= t('on_demand_text') %></p><a class="btn btn-light border-dark" role="button"
           data-bs-hover-animate="pulse" style="margin: 0;margin-top: 20px;"
-          href="https://api-client.swarmlab.io:8088">api-client.swarmlab</a>
+          href="https://api-client.swarmlab.io:8088">See more!</a>
       </div>
     </div>
-    <div class="row no-gutters">
+    <div class="row no-gutters mt-5">
-      <div class="col-lg-6 text-white showcase-img"
+      <div class="col-lg-6 text-white" style="background: url(/images/undraw_version_control_9bpv.svg) center / contain; height: 35vh;
-        style="background: url(/images/yancy-min-842ofHC6MaI-unsplash.jpg) center / cover;"><span></span></div>
+        background-repeat: no-repeat;"><span></span>
+      </div>
       <div class="col-lg-6 my-auto order-lg-1 showcase-text" style="margin: 0;">
         <h2><strong><%= t('git') %></strong></h2>
         <p class="lead mb-0"><%= t('git_text') %></p><a class="btn btn-light border-dark" role="button"
+          data-bs-hover-animate="pulse" style="margin: 0;margin-top: 20px;" href="https://git.swarmlab.io:3000">See
+          more!</a>
+      </div>
+    </div>
+    <div class="row no-gutters mt-5 ">
+      <div class="col-lg-6 order-lg-2 text-white" style="background: url(/images/undraw_taking_notes_tjaf.svg) center / contain; height: 35vh; background-repeat:
+        no-repeat;"><span></span></div>
+      <div class="col-lg-6 my-auto order-lg-1 showcase-text">
+        <h2><strong><%= t('learning_objects') %>&nbsp; </strong></h2>
+        <p class="lead mb-0"><%= t('learning_objects_text') %></p><a class="btn btn-light border-dark" role="button"
           data-bs-hover-animate="pulse" style="margin: 0;margin-top: 20px;"
-          href="https://git.swarmlab.io:3000">git.swarmlab</a>
+          href="https://api-client.swarmlab.io:8088">See more!</a>
       </div>
     </div>
   </div>

web/views/partials/footer.ejs

@@ -40,6 +40,7 @@
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" defer="defer"></script>
 <script src="/javascripts/bs-init.js"></script>
 <script src="/javascripts/search.js"></script>
 </body>

web/views/partials/header.ejs

@@ -17,7 +17,7 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-light navbar-expand-md navigation-clean-button">
+    <nav class="navbar navbar-expand-md navigation-clean-button">
         <div class="container"><a class="navbar-brand text-monospace" href="/">swarmlab.io</a><button
                 data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle
                     navigation</span><span class="navbar-toggler-icon"></span></button>