➕ Add illustrations + particle.js

4 years ago · ee927f3d2e
13 changed files with 203 additions and 40 deletions
--- a/web/locales/en.json
+++ b/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",
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -5,9 +5,9 @@
  "requires": true,
  "dependencies": {
    "@babel/runtime": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
-      "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+      "version": "7.11.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
@ -617,9 +617,9 @@
      }
    },
    "i18next": {
-      "version": "19.6.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.6.2.tgz",
-      "integrity": "sha512-Zyd/Z32FY+sD+Eg6sLj5DeDSlrIN3WZ4onuOBRGcjDx/rvodsyUZ9TJ2Y+3aD9Vu8MPbiMU2WesIER/rs1ioyw==",
+      "version": "19.7.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-19.7.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
    },
    "registry-auth-token": {
      "version": "4.2.0",
--- a/web/package.json
+++ b/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"
  }
 }
--- a/web/public/assets/particlesjs-config.json
+++ b/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
+}
--- a/web/public/images/undraw_content_team_3epn.svg
+++ b/web/public/images/undraw_content_team_3epn.svg
--- a/web/public/images/undraw_server_q2pb.svg
+++ b/web/public/images/undraw_server_q2pb.svg
--- a/web/public/images/undraw_taking_notes_tjaf.svg
+++ b/web/public/images/undraw_taking_notes_tjaf.svg
--- a/web/public/images/undraw_version_control_9bpv.svg
+++ b/web/public/images/undraw_version_control_9bpv.svg
--- a/web/public/javascripts/bs-init.js
+++ b/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')) })
-		.mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
+		.mouseenter(function () {
+			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');
+}
--- a/web/public/stylesheets/styles.min.css
+++ b/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
+}
--- a/web/views/index.ejs
+++ b/web/views/index.ejs
@ -1,24 +1,24 @@
 <%- include("partials/header.ejs") %>

-<header style="background-color: #f8f9fa;">
-  <div class="container text-center mb-5 mt-4">
-    <div class="row">
-      <div class="col-sm-12 mx-auto">
-        <h2 style="height: 40px;"><%= t('welcome') %></h2>
-      </div>
-      <div class="col-sm-12 mt-2">
-        <p style="font-size: 20px;"><%= t('welcome_text') %></p>
-      </div>
+<header style="height: 90vh;">
+  <div id="particles-js"></div>
+  <div class="container mb-5 mt-4">
+    <div class="col-sm-12 mt-5">
+      <h1><%= t('welcome') %></h1>
+      <p style="font-size: 20px;"><%= t('welcome_text') %></p>
+      <a href="/documentation#getStarted" class="btn btn-primary rounded-pill btn-md mt-1" role="button"
+        data-bs-hover-animate="pulse" style="color: rgb(255,255,255);">Get Started!</a>
+    </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="col-lg-6 order-lg-2 text-white showcase-img"
-        style="background: url(/images/thomas-jensen-ISG-rUel0Uw-unsplash.jpg) center / cover;"><span></span></div>
+    <div class="row no-gutters mb-5">
+      <div class="col-lg-6 order-lg-2 text-white" style="background: url(/images/undraw_server_q2pb.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('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="col-lg-6 text-white showcase-img"
-        style="background: url(/images/yancy-min-842ofHC6MaI-unsplash.jpg) center / cover;"><span></span></div>
+    <div class="row no-gutters mt-5">
+      <div class="col-lg-6 text-white" style="background: url(/images/undraw_version_control_9bpv.svg) center / contain; height: 35vh;
+        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>
--- a/web/views/partials/footer.ejs
+++ b/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>
--- a/web/views/partials/header.ejs
+++ b/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>