From ee927f3d2e5ada7623de556010c6ef851a3bcd9a Mon Sep 17 00:00:00 2001 From: Haris Razis Date: Thu, 24 Sep 2020 21:48:59 +0300 Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20illustrations=20+=20particle.?= =?UTF-8?q?js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/locales/en.json | 3 +- web/package-lock.json | 23 ++-- web/package.json | 5 +- web/public/assets/particlesjs-config.json | 110 ++++++++++++++++++ .../images/undraw_content_team_3epn.svg | 1 + web/public/images/undraw_server_q2pb.svg | 1 + .../images/undraw_taking_notes_tjaf.svg | 1 + .../images/undraw_version_control_9bpv.svg | 1 + web/public/javascripts/bs-init.js | 18 ++- web/public/stylesheets/styles.min.css | 22 +++- web/views/index.ejs | 55 +++++---- web/views/partials/footer.ejs | 1 + web/views/partials/header.ejs | 2 +- 13 files changed, 203 insertions(+), 40 deletions(-) create mode 100644 web/public/assets/particlesjs-config.json create mode 100644 web/public/images/undraw_content_team_3epn.svg create mode 100644 web/public/images/undraw_server_q2pb.svg create mode 100644 web/public/images/undraw_taking_notes_tjaf.svg create mode 100644 web/public/images/undraw_version_control_9bpv.svg diff --git a/web/locales/en.json b/web/locales/en.json index 5633bd2..4c3ea50 100644 --- 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", diff --git a/web/package-lock.json b/web/package-lock.json index 984fe36..8849594 100755 --- 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", diff --git a/web/package.json b/web/package.json index 8073e10..be28b84 100755 --- 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" } } diff --git a/web/public/assets/particlesjs-config.json b/web/public/assets/particlesjs-config.json new file mode 100644 index 0000000..c1d27e7 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/web/public/images/undraw_content_team_3epn.svg b/web/public/images/undraw_content_team_3epn.svg new file mode 100644 index 0000000..a313a25 --- /dev/null +++ b/web/public/images/undraw_content_team_3epn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/images/undraw_server_q2pb.svg b/web/public/images/undraw_server_q2pb.svg new file mode 100644 index 0000000..93ebb15 --- /dev/null +++ b/web/public/images/undraw_server_q2pb.svg @@ -0,0 +1 @@ +server \ No newline at end of file diff --git a/web/public/images/undraw_taking_notes_tjaf.svg b/web/public/images/undraw_taking_notes_tjaf.svg new file mode 100644 index 0000000..e1123ea --- /dev/null +++ b/web/public/images/undraw_taking_notes_tjaf.svg @@ -0,0 +1 @@ +taking notes \ No newline at end of file diff --git a/web/public/images/undraw_version_control_9bpv.svg b/web/public/images/undraw_version_control_9bpv.svg new file mode 100644 index 0000000..0c35735 --- /dev/null +++ b/web/public/images/undraw_version_control_9bpv.svg @@ -0,0 +1 @@ +version control \ No newline at end of file diff --git a/web/public/javascripts/bs-init.js b/web/public/javascripts/bs-init.js index 7d8617c..8b76096 100644 --- 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')) }); -}); \ No newline at end of file + .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'); +} \ No newline at end of file diff --git a/web/public/stylesheets/styles.min.css b/web/public/stylesheets/styles.min.css index ef4a756..6b17991 100644 --- 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; @@ -1135,4 +1135,24 @@ ul ul a { #sidebar 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 } \ No newline at end of file diff --git a/web/views/index.ejs b/web/views/index.ejs index f3cabbe..8577fee 100755 --- a/web/views/index.ejs +++ b/web/views/index.ejs @@ -1,24 +1,24 @@ <%- include("partials/header.ejs") %> -
-
-
-
-

<%= t('welcome') %>

-
-
-

<%= t('welcome_text') %>

-
+
+
+
+
+

<%= t('welcome') %>

+

<%= t('welcome_text') %>

+ Get Started! +
+
+
- -
-
-
+
+

Ready-to-Use Virtual Labs one click away.

+
@@ -56,24 +56,35 @@
-
-
+
+

<%= t('on_demand') %> 

<%= t('on_demand_text') %>

api-client.swarmlab + href="https://api-client.swarmlab.io:8088">See more!
-
-
+
+
+

<%= t('git') %>

<%= t('git_text') %>

See + more! +
+
+
+
+
+

<%= t('learning_objects') %> 

+

<%= t('learning_objects_text') %>

git.swarmlab + href="https://api-client.swarmlab.io:8088">See more!
diff --git a/web/views/partials/footer.ejs b/web/views/partials/footer.ejs index 3d019c5..c0c31f9 100644 --- a/web/views/partials/footer.ejs +++ b/web/views/partials/footer.ejs @@ -40,6 +40,7 @@
+ diff --git a/web/views/partials/header.ejs b/web/views/partials/header.ejs index cac38bc..952ff19 100644 --- a/web/views/partials/header.ejs +++ b/web/views/partials/header.ejs @@ -17,7 +17,7 @@ -