Initial commit

README.md

+# Daxid
+
+Ceci est le résultat d'une statification d'un framasite [cf ticket](https://gitlab.tetras-libre.fr/tetras-libre-admin/sys-admin/-/issues/118).
+Cette page une présentation et demonstration de tetras lab.

app/views/base/footer/footer.js

+$(document).ready(function(){
+// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
+	$('#login-modal').modal();
+
+});
\ No newline at end of file

app/views/base/nav/nav.js

+$(document).ready(function () {
+//pour l'édition du menu
+	$('.editMenuLabel').click(function () {
+		console.log('coucou')
+		//on récupere toutes les infos stockées dans l'id du boutton
+		let splittedId = this.id.split("-")
+		//et on remplit le formulaire caché avec
+		$('.addToMenuForm input[name = id]').val(splittedId[1])
+		//on modifie le titre et le boutton de la fenetre modale "à la sauvage"
+		$('#add-to-menu-modal h4').html("Modifier l'élement du menu");
+		$('#add-to-menu-modal button').html("Editer");
+
+		//gestion du pré-remplissage avec l'ancien nom
+		$('#add-to-menu-modal input[name=label]').val(splittedId[2]);
+		setTimeout(function () {
+			Materialize.updateTextFields();
+		},50)
+		//et on ouvre la modale
+		$('#add-to-menu-modal').modal('open');
+	})
+	$('.goToEditParams').click(function (event) {
+		event.preventDefault()
+		$("#siteOptionsModal").modal('open')
+		$("a[href=#options-params]").click()
+	})
+
+	$(".button-collapse").sideNav();
+	$('.navItems').click(()=>{
+		$('.button-collapse').sideNav('hide');
+	})
+
+	// Hide Header on on scroll down
+	var didScroll;
+	var lastScrollTop = 0;
+	var delta = 5;
+	var navbarHeight = $('#mainNav').outerHeight();
+
+	$(window).scroll(function(event){
+		didScroll = true;
+	});
+
+	setInterval(function() {
+		if (didScroll) {
+			hasScrolled();
+			didScroll = false;
+		}
+	}, 250);
+
+	function hasScrolled() {
+		var st = $(this).scrollTop();
+
+		// Make sure they scroll more than delta
+		if(Math.abs(lastScrollTop - st) <= delta)
+			return;
+
+		// If they scrolled down and are past the navbar, add class .nav-up.
+		// This is necessary so you never see what is "behind" the navbar.
+		if (st > lastScrollTop && st > navbarHeight){
+			// Scroll Down
+			$('#mainNav').removeClass('nav-down').addClass('nav-up');
+		} else {
+			// Scroll Up
+			if(st + $(window).height() < $(document).height()) {
+				$('#mainNav').removeClass('nav-up').addClass('nav-down');
+			}
+		}
+
+		lastScrollTop = st;
+	}
+})
\ No newline at end of file

app/views/modules/gallery/show.js

+/*! Lightbox v2.10.0
+* by Lokesh Dhakar
+*
+* More info:
+	* http://lokeshdhakar.com/projects/lightbox2/
+	*
+* Copyright 2007, 2018 Lokesh Dhakar
+* Released under the MIT license
+* https://github.com/lokesh/lightbox2/blob/master/LICENSE
+*
+* @preserve
+*/
+
+// Uses Node, AMD or browser globals to create a module.
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		// Node. Does not work with strict CommonJS, but
+		// only CommonJS-like environments that support module.exports,
+		// like Node.
+		module.exports = factory(require('jquery'));
+	} else {
+		// Browser globals (root is window)
+		root.lightbox = factory(root.jQuery);
+	}
+}(this, function ($) {
+
+	function Lightbox(options) {
+		this.album = [];
+		this.currentImageIndex = void 0;
+		this.init();
+
+		// options
+		this.options = $.extend({}, this.constructor.defaults);
+		this.option(options);
+	}
+
+	// Descriptions of all options available on the demo site:
+	// http://lokeshdhakar.com/projects/lightbox2/index.html#options
+	Lightbox.defaults = {
+		albumLabel: 'Image %1 of %2',
+		alwaysShowNavOnTouchDevices: false,
+		fadeDuration: 600,
+		fitImagesInViewport: true,
+		imageFadeDuration: 600,
+		// maxWidth: 800,
+		// maxHeight: 600,
+		positionFromTop: 50,
+		resizeDuration: 700,
+		showImageNumberLabel: true,
+		wrapAround: false,
+		disableScrolling: false,
+		/*
+		Sanitize Title
+		If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
+		This will free you to add html tags, such as links, in the caption.
+
+		If the caption data is user submitted or from some other untrusted source, then set this to true
+		to prevent xss and other injection attacks.
+		 */
+		sanitizeTitle: false
+	};
+
+	Lightbox.prototype.option = function (options) {
+		$.extend(this.options, options);
+	};
+
+	Lightbox.prototype.imageCountLabel = function (currentImageNum, totalImages) {
+		return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
+	};
+
+	Lightbox.prototype.init = function () {
+		var self = this;
+		// Both enable and build methods require the body tag to be in the DOM.
+		$(document).ready(function () {
+			self.enable();
+			self.build();
+		});
+	};
+
+	// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
+	// that contain 'lightbox'. When these are clicked, start lightbox.
+	Lightbox.prototype.enable = function () {
+		var self = this;
+		$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function (event) {
+			self.start($(event.currentTarget));
+			return false;
+		});
+	};
+
+	// Build html for the lightbox and the overlay.
+	// Attach event handlers to the new DOM elements. click click click
+	Lightbox.prototype.build = function () {
+		if ($('#lightbox').length > 0) {
+			return;
+		}
+
+		var self = this;
+		$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
+
+		// Cache jQuery objects
+		this.$lightbox = $('#lightbox');
+		this.$overlay = $('#lightboxOverlay');
+		this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
+		this.$container = this.$lightbox.find('.lb-container');
+		this.$image = this.$lightbox.find('.lb-image');
+		this.$nav = this.$lightbox.find('.lb-nav');
+
+		// Store css values for future lookup
+		this.containerPadding = {
+			top: parseInt(this.$container.css('padding-top'), 10),
+			right: parseInt(this.$container.css('padding-right'), 10),
+			bottom: parseInt(this.$container.css('padding-bottom'), 10),
+			left: parseInt(this.$container.css('padding-left'), 10)
+		};
+
+		this.imageBorderWidth = {
+			top: parseInt(this.$image.css('border-top-width'), 10),
+			right: parseInt(this.$image.css('border-right-width'), 10),
+			bottom: parseInt(this.$image.css('border-bottom-width'), 10),
+			left: parseInt(this.$image.css('border-left-width'), 10)
+		};
+
+		// Attach event handlers to the newly minted DOM elements
+		this.$overlay.hide().on('click', function () {
+			self.end();
+			return false;
+		});
+
+		this.$lightbox.hide().on('click', function (event) {
+			if ($(event.target).attr('id') === 'lightbox') {
+				self.end();
+			}
+			return false;
+		});
+
+		this.$outerContainer.on('click', function (event) {
+			if ($(event.target).attr('id') === 'lightbox') {
+				self.end();
+			}
+			return false;
+		});
+
+		this.$lightbox.find('.lb-prev').on('click', function () {
+			if (self.currentImageIndex === 0) {
+				self.changeImage(self.album.length - 1);
+			} else {
+				self.changeImage(self.currentImageIndex - 1);
+			}
+			return false;
+		});
+
+		this.$lightbox.find('.lb-next').on('click', function () {
+			if (self.currentImageIndex === self.album.length - 1) {
+				self.changeImage(0);
+			} else {
+				self.changeImage(self.currentImageIndex + 1);
+			}
+			return false;
+		});
+
+		/*
+		  Show context menu for image on right-click
+
+		  There is a div containing the navigation that spans the entire image and lives above of it. If
+		  you right-click, you are right clicking this div and not the image. This prevents users from
+		  saving the image or using other context menu actions with the image.
+
+		  To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
+		  set pointer-events to none on the nav div. This is so that the upcoming right-click event on
+		  the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
+		  we set the pointer events back to auto for the nav div so it can capture hover and left-click
+		  events as usual.
+		 */
+		this.$nav.on('mousedown', function (event) {
+			if (event.which === 3) {
+				self.$nav.css('pointer-events', 'none');
+
+				self.$lightbox.one('contextmenu', function () {
+					setTimeout(function () {
+						this.$nav.css('pointer-events', 'auto');
+					}.bind(self), 0);
+				});
+			}
+		});
+
+
+		this.$lightbox.find('.lb-loader, .lb-close').on('click', function () {
+			self.end();
+			return false;
+		});
+	};
+
+	// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
+	Lightbox.prototype.start = function ($link) {
+		var self = this;
+		var $window = $(window);
+
+		$window.on('resize', $.proxy(this.sizeOverlay, this));
+
+		$('select, object, embed').css({
+			visibility: 'hidden'
+		});
+
+		this.sizeOverlay();
+
+		this.album = [];
+		var imageNumber = 0;
+
+		function addToAlbum($link) {
+			self.album.push({
+				alt: $link.attr('data-alt'),
+				link: $link.attr('href'),
+				title: $link.attr('data-title') || $link.attr('title')
+			});
+		}
+
+		// Support both data-lightbox attribute and rel attribute implementations
+		var dataLightboxValue = $link.attr('data-lightbox');
+		var $links;
+
+		if (dataLightboxValue) {
+			$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
+			for (var i = 0; i < $links.length; i = ++i) {
+				addToAlbum($($links[i]));
+				if ($links[i] === $link[0]) {
+					imageNumber = i;
+				}
+			}
+		} else {
+			if ($link.attr('rel') === 'lightbox') {
+				// If image is not part of a set
+				addToAlbum($link);
+			} else {
+				// If image is part of a set
+				$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
+				for (var j = 0; j < $links.length; j = ++j) {
+					addToAlbum($($links[j]));
+					if ($links[j] === $link[0]) {
+						imageNumber = j;
+					}
+				}
+			}
+		}
+
+		// Position Lightbox
+		var top = $window.scrollTop() + this.options.positionFromTop;
+		var left = $window.scrollLeft();
+		this.$lightbox.css({
+			top: top + 'px',
+			left: left + 'px'
+		}).fadeIn(this.options.fadeDuration);
+
+		// Disable scrolling of the page while open
+		if (this.options.disableScrolling) {
+			$('html').addClass('lb-disable-scrolling');
+		}
+
+		this.changeImage(imageNumber);
+	};
+
+	// Hide most UI elements in preparation for the animated resizing of the lightbox.
+	Lightbox.prototype.changeImage = function (imageNumber) {
+		var self = this;
+
+		this.disableKeyboardNav();
+		var $image = this.$lightbox.find('.lb-image');
+
+		this.$overlay.fadeIn(this.options.fadeDuration);
+
+		$('.lb-loader').fadeIn('slow');
+		this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
+
+		this.$outerContainer.addClass('animating');
+
+		// When image to show is preloaded, we send the width and height to sizeContainer()
+		var preloader = new Image();
+		preloader.onload = function () {
+			var $preloader;
+			var imageHeight;
+			var imageWidth;
+			var maxImageHeight;
+			var maxImageWidth;
+			var windowHeight;
+			var windowWidth;
+
+			$image.attr({
+				'alt': self.album[imageNumber].alt,
+				'src': self.album[imageNumber].link
+			});
+
+			$preloader = $(preloader);
+
+			$image.width(preloader.width);
+			$image.height(preloader.height);
+
+			if (self.options.fitImagesInViewport) {
+				// Fit image inside the viewport.
+				// Take into account the border around the image and an additional 10px gutter on each side.
+
+				windowWidth = $(window).width();
+				windowHeight = $(window).height();
+				maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
+				maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
+
+				// Check if image size is larger then maxWidth|maxHeight in settings
+				if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
+					maxImageWidth = self.options.maxWidth;
+				}
+				if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
+					maxImageHeight = self.options.maxHeight;
+				}
+
+				// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
+				// option than we need to size down while maintaining the aspect ratio.
+				if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
+					if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
+						imageWidth = maxImageWidth;
+						imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
+						$image.width(imageWidth);
+						$image.height(imageHeight);
+					} else {
+						imageHeight = maxImageHeight;
+						imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
+						$image.width(imageWidth);
+						$image.height(imageHeight);
+					}
+				}
+			}
+			self.sizeContainer($image.width(), $image.height());
+		};
+
+		preloader.src = this.album[imageNumber].link;
+		this.currentImageIndex = imageNumber;
+	};
+
+	// Stretch overlay to fit the viewport
+	Lightbox.prototype.sizeOverlay = function () {
+		this.$overlay
+			.width($(document).width())
+			.height($(document).height());
+	};
+
+	// Animate the size of the lightbox to fit the image we are showing
+	Lightbox.prototype.sizeContainer = function (imageWidth, imageHeight) {
+		var self = this;
+
+		var oldWidth = this.$outerContainer.outerWidth();
+		var oldHeight = this.$outerContainer.outerHeight();
+		var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
+		var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
+
+		function postResize() {
+			self.$lightbox.find('.lb-dataContainer').width(newWidth);
+			self.$lightbox.find('.lb-prevLink').height(newHeight);
+			self.$lightbox.find('.lb-nextLink').height(newHeight);
+			self.showImage();
+		}
+
+		if (oldWidth !== newWidth || oldHeight !== newHeight) {
+			this.$outerContainer.animate({
+				width: newWidth,
+				height: newHeight
+			}, this.options.resizeDuration, 'swing', function () {
+				postResize();
+			});
+		} else {
+			postResize();
+		}
+	};
+
+	// Display the image and its details and begin preload neighboring images.
+	Lightbox.prototype.showImage = function () {
+		this.$lightbox.find('.lb-loader').stop(true).hide();
+		this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
+
+		this.updateNav();
+		this.updateDetails();
+		this.preloadNeighboringImages();
+		this.enableKeyboardNav();
+	};
+
+	// Display previous and next navigation if appropriate.
+	Lightbox.prototype.updateNav = function () {
+		// Check to see if the browser supports touch events. If so, we take the conservative approach
+		// and assume that mouse hover events are not supported and always show prev/next navigation
+		// arrows in image sets.
+		var alwaysShowNav = false;
+		try {
+			document.createEvent('TouchEvent');
+			alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
+		} catch (e) {
+		}
+
+		this.$lightbox.find('.lb-nav').show();
+
+		if (this.album.length > 1) {
+			if (this.options.wrapAround) {
+				if (alwaysShowNav) {
+					this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
+				}
+				this.$lightbox.find('.lb-prev, .lb-next').show();
+			} else {
+				if (this.currentImageIndex > 0) {
+					this.$lightbox.find('.lb-prev').show();
+					if (alwaysShowNav) {
+						this.$lightbox.find('.lb-prev').css('opacity', '1');
+					}
+				}
+				if (this.currentImageIndex < this.album.length - 1) {
+					this.$lightbox.find('.lb-next').show();
+					if (alwaysShowNav) {
+						this.$lightbox.find('.lb-next').css('opacity', '1');
+					}
+				}
+			}
+		}
+	};
+
+	// Display caption, image number, and closing button.
+	Lightbox.prototype.updateDetails = function () {
+		var self = this;
+
+		// Enable anchor clicks in the injected caption html.
+		// Thanks Nate Wright for the fix. @https://github.com/NateWr
+		if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
+			this.album[this.currentImageIndex].title !== '') {
+			var $caption = this.$lightbox.find('.lb-caption');
+			if (this.options.sanitizeTitle) {
+				$caption.text(this.album[this.currentImageIndex].title);
+			} else {
+				$caption.html(this.album[this.currentImageIndex].title);
+			}
+			$caption.fadeIn('fast')
+				.find('a').on('click', function (event) {
+				if ($(this).attr('target') !== undefined) {
+					window.open($(this).attr('href'), $(this).attr('target'));
+				} else {
+					location.href = $(this).attr('href');
+				}
+			});
+		}
+
+		if (this.album.length > 1 && this.options.showImageNumberLabel) {
+			var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
+			this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
+		} else {
+			this.$lightbox.find('.lb-number').hide();
+		}
+
+		this.$outerContainer.removeClass('animating');
+
+		this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function () {
+			return self.sizeOverlay();
+		});
+	};
+
+	// Preload previous and next images in set.
+	Lightbox.prototype.preloadNeighboringImages = function () {
+		if (this.album.length > this.currentImageIndex + 1) {
+			var preloadNext = new Image();
+			preloadNext.src = this.album[this.currentImageIndex + 1].link;
+		}
+		if (this.currentImageIndex > 0) {
+			var preloadPrev = new Image();
+			preloadPrev.src = this.album[this.currentImageIndex - 1].link;
+		}
+	};
+
+	Lightbox.prototype.enableKeyboardNav = function () {
+		$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
+	};
+
+	Lightbox.prototype.disableKeyboardNav = function () {
+		$(document).off('.keyboard');
+	};
+
+	Lightbox.prototype.keyboardAction = function (event) {
+		var KEYCODE_ESC = 27;
+		var KEYCODE_LEFTARROW = 37;
+		var KEYCODE_RIGHTARROW = 39;
+
+		var keycode = event.keyCode;
+		var key = String.fromCharCode(keycode).toLowerCase();
+		if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
+			this.end();
+		} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
+			if (this.currentImageIndex !== 0) {
+				this.changeImage(this.currentImageIndex - 1);
+			} else if (this.options.wrapAround && this.album.length > 1) {
+				this.changeImage(this.album.length - 1);
+			}
+		} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
+			if (this.currentImageIndex !== this.album.length - 1) {
+				this.changeImage(this.currentImageIndex + 1);
+			} else if (this.options.wrapAround && this.album.length > 1) {
+				this.changeImage(0);
+			}
+		}
+	};
+
+	// Closing time. :-(
+	Lightbox.prototype.end = function () {
+		this.disableKeyboardNav();
+		$(window).off('resize', this.sizeOverlay);
+		this.$lightbox.fadeOut(this.options.fadeDuration);
+		this.$overlay.fadeOut(this.options.fadeDuration);
+		$('select, object, embed').css({
+			visibility: 'visible'
+		});
+		if (this.options.disableScrolling) {
+			$('html').removeClass('lb-disable-scrolling');
+		}
+	};
+
+	return new Lightbox();
+}));
+
+$(document).ready(function () {
+	lightbox.option({
+		'alwaysShowNavOnTouchDevices': true,
+		'resizeDuration': 300,
+		'wrapAround': true,
+		'showImageNumberLabel': ""
+	})
+
+	// $('.carousselImage').hover(
+	// 	function () {
+	// 	$(this).animate({
+	// 		'padding-top' : 0,
+	// 		'padding-right' : 0,
+	// 		'padding-bottom' : 0,
+	// 		'padding-left' : 0,
+	// 	}, "medium")
+	// 	}, function () {
+	// 		$(this).animate({
+	// 			'padding-top' : 7,
+	// 			'padding-right' : 7,
+	// 			'padding-bottom' : 7,
+	// 			'padding-left' : 7,
+	// 		}, "medium")
+	// 	})
+});

app/views/modules/headband/show.js

+$(document).ready(function () {
+	$('.headbandShowOnScroll').each(function (i, el) {
+		scrollFireOptions.push(
+			{selector: '#'+el.id, offset: 200, callback: function(el1) {
+					$(el1).animate({'left' :'-=2000'}, 300, 'swing')
+				} })
+	})
+})
\ No newline at end of file

app/views/modules/paralax/show.js

+$(document).ready(function () {
+	$('.parallax').parallax();
+})
\ No newline at end of file

index.html

+<!DOCTYPE html>
+<html lang="fr">
+
+
+
+<head>
+	<style type="text/css">
+		@font-face {
+			font-family: 'Material Icons';
+			font-style: normal;
+			font-weight: 400;
+			src: url('public/fonts/iconfont/MaterialIcons-Regular.eot'); /* For IE6-8 */
+			src: local('Material Icons'),
+			local('MaterialIcons-Regular'),
+			url('public/fonts/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
+			url('public/fonts/iconfont/MaterialIcons-Regular.woff') format('woff'),
+			url('public/fonts/iconfont/MaterialIcons-Regular.ttf') format('truetype');
+		}
+	</style>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1"/>
+	<title>Tetras-Lab</title>
+	<meta property="og:image" content="medias/5fde03ea9f603.png" />
+	<meta name="description" content="The data intelligence platform" />
+	<meta name="keywords" content="data, jupyter, voila, notebook, dashboard" />
+	<meta http-equiv="content-language" content="en_EN" />
+	<meta name="language" content="en_EN" />
+	<link rel="icon" type="image/png" href="medias/5fde03ea9f603.png" />
+	<!-- CSS  -->
+	<link href="public/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+	<link href="public/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+	<style type="text/css" id="themeClassCSS">
+		.menu-background {
+		background-color: #5a8264 !important;
+		}
+		.main-background {
+		background-color: #ffffff !important;
+		}
+		.main-color, .main-color * {
+		color: #5e5c64 !important;
+		}
+		.contrasted-color, .contrasted-color * {
+		color: #ffffff !important;
+		}
+		.second-background {
+		background-color: #81a88b !important;
+		}
+		.second-color, .second-color * {
+		color: #f6f5f4 !important;
+		}
+	</style>
+
+	<style type="text/css">
+
+		@font-face {
+			font-family: 'Maven Pro';
+			src:  url('public/fonts/customFonts/MavenPro-Regular.ttf')  format('truetype');
+		}
+		@font-face {
+		font-family: 'Maven Pro';
+		src:  url('public/fonts/customFonts/MavenPro-Regular.ttf')  format('truetype');
+		}
+	</style>
+	<style type="text/css" id="fontClassCSS">
+		.title-font, .title-font *  {
+		font-family: 'Maven Pro','sans-serif' ;
+		font-size:  200  %  !important  ;
+		}
+		.main-font , .main-font * {
+		font-family: 'Maven Pro','sans-serif' ;
+		font-stretch: ultra-expanded !important;
+		}
+
+
+	</style>
+
+</head><body>
+
+
+
+
+<nav class="nav menu-background fixed nav-down" id="mainNav" role="navigation" style="z-index: 999">
+	<div class=" nav-wrapper container parent-hover">
+		<a id="logo-container" href="#" class="brand-logo second-color title-font relative " >
+							<img style="height: 59px; width: auto; margin-right: 20px; vertical-align: middle; padding: 0 0 5px 0"  src="medias/5fde03ea9f603.png" alt="">
+										<span id="siteTitle" style="font-size: 0.9em !important; vertical-align: middle" class="">Tetras-Lab</span>
+
+		</a>
+
+		<ul class="right hide-on-med-and-down" style="max-width : 70%; max-height: 60px; overflow: hidden !important; padding-left: 30px !important; margin-left: -30px !important;">
+
+
+		</ul>
+																																																																<a href="#" data-activates="mobileNav" class="button-collapse no-margin"><i class="material-icons second-color">menu</i></a>
+			<ul class="side-nav menu-background" id="mobileNav" style=" margin-top: 56px" id="mobileNav">
+
+
+			</ul>
+
+
+	</div>
+</nav>
+<div class="" style="margin-top: 64px">
+							<section class="relative moduleSectionContainer" id="645a3fc4a6b2b">
+
+					<div class="second-background">
+	<div class="container module ">
+		<div class="section" style="padding-top: 50px !important;padding-bottom: 50px !important;">
+			<div class="row  valign-wrapper no-margin relative">
+				<div class="col s12  headbandShowOnScroll relative" style=" left: +2000px" id="headbandShowOnScroll-645a3fc4a6b2b">
+					<div class="  second-color title-font editable center-align" id="moduleValue-title">
+						<h4><b>An open source platform built around Jupyter Lab</b></h4><div><h5>for data science and monitoring<br /></h5></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+				</section>
+
+
+									<section class="relative moduleSectionContainer" id="645a38ec3a640">
+
+					<div class="second-background relative module" style="overflow: hidden">
+	<div class="container">
+
+		<div class="section relative" style="padding-top: 60px !important;padding-bottom: 60px !important; z-index: 10">
+			<div class="row no-margin  relative">
+				<div class="col s12 xl4" style="padding: 0 25px 0 0 !important;">
+					<div class="row">
+						<div class="col s12  second-color title-font editable " id="moduleValue-title">
+							<h4 align="left"><i>From notebooks to Web apps in just a few clicks !</i><br /></h4>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col s12  second-color main-font editable" id="moduleValue-content" style="text-align: justify">
+							<h5 align="center">We provide an easy to deploy infrastructure that allows fruitful interactions between <b>stakeholders</b>, <b>data scientists</b> and <b>developers</b> working on decision support systems.</h5><div><p><br /></p></div><h5 align="left"><i>Source code : </i><a href="https://gitlab.com/tetras-lab"><span><br />https://gitlab.com/tetras-lab</span></a></h5><h5 align="left"><i>Demo : </i><a href="https://demo.tetras-lab.io"><span><br />https://demo.tetras-lab.io</span></a></h5><div><h5><i>JupyterCon2023 keynote :<br /></i><a href="https://www.youtube.com/watch?v=TMZ7SF9Pef4">Link to Youtube video<i><br /></i><span></span></a></h5></div>
+						</div>
+					</div>
+				</div>
+				<div class="relative col s12 xl8 " style="padding: 0 0 0 25px !important;">
+										<div class="video-container" id="videoContainer-645a38ec3a640">
+													<iframe width="560" height="315" src="https://www.youtube.com/embed/tDQRnnZfn1o?si=PEXY5zCv2ef-F9R3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+					</div>
+
+				</div>
+
+
+			</div>
+		</div>
+	</div>
+</div>
+
+
+				</section>
+
+
+									<section class="relative moduleSectionContainer" id="645a625f3e7ab">
+
+					<div class="main-background">
+
+		<div class="section" style="height: 150px !important;">
+
+		</div>
+</div>
+
+
+				</section>
+
+
+									<section class="relative moduleSectionContainer" id="645a56dd9ebae">
+
+					<div class="parallax-container valign-wrapper module paralax" >
+	<div class="section no-pad-bot relative">
+
+		<div class="container " style="margin-top: 50px !important; margin-bottom: 50px !important;">
+			<div class=" row center contrasted-color title-font editable " id="moduleValue-text" style="font-size: 130%">
+				<h4><br /></h4>
+			</div>
+		</div>
+	</div>
+	<div class="parallax"><img id="moduleValue-imgUrl" src="medias/645a61f00237d.png" alt=""></div>
+</div>
+
+
+				</section>
+
+
+									<section class="relative moduleSectionContainer" id="645a626478ce9">
+
+					<div class="main-background">
+
+		<div class="section" style="height: 150px !important;">
+
+		</div>
+</div>
+
+
+				</section>
+
+
+									<section class="relative moduleSectionContainer" id="645a3caa0ce89">
+
+					<link href="public/js/lightbox/css/lightbox.css" rel="stylesheet">
+<div class="main-background module">
+	<div class="container" style="padding: 30px 0">
+
+		<div class="columnContainer"  >
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a34ae2e91f.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl0" width="100%" data-caption=""  src="medias/645a34ae2e91f.png" alt="">
+
+
+							</a>
+					</div>
+
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a347a9279d.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl1" width="100%" data-caption=""  src="medias/645a347a9279d.png" alt="">
+
+
+							</a>
+					</div>
+
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a348440cde.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl2" width="100%" data-caption=""  src="medias/645a348440cde.png" alt="">
+
+
+							</a>
+					</div>
+
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a348f81971.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl3" width="100%" data-caption=""  src="medias/645a348f81971.png" alt="">
+
+
+							</a>
+					</div>
+
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a348905732.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl4" width="100%" data-caption=""  src="medias/645a348905732.png" alt="">
+
+
+							</a>
+					</div>
+
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a3d7be061a.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl5" width="100%" data-caption=""  src="medias/645a3d7be061a.png" alt="">
+
+
+							</a>
+					</div>
+
+												<div class="relative carousselImage" style="padding: 5px">
+													<a  class="responsive-img" style="cursor: zoom-in" data-lightbox="galery-645a3caa0ce89"  width="100%" data-caption=""  href="medias/645a4dc22f1fa.png" >
+								<img class="responsive-img " id="moduleValue-imgUrl6" width="100%" data-caption=""  src="medias/645a4dc22f1fa.png" alt="">
+
+
+							</a>
+					</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+					</div>
+	</div>
+
+</div>
+
+
+
+				</section>
+
+
+									<section class="relative moduleSectionContainer" id="5fca655d54dfd">
+
+					<div class="main-background">
+
+		<div class="container module">
+		<div class="section" style="padding-top: 40px !important;padding-bottom: 40px !important;">
+
+			<!--   Icon Section   -->
+			<div class="row center-align">
+															<div class="three-block">
+							<div class="icon-block center-align" style="text-align: center; width: 100%">
+								<div class="relative">
+
+									<h2 class="center second-color center-align">
+										<i class="material-icons" id="moduleValue-icon1">access_time</i>
+									</h2>
+								</div>
+								<div class=" main-color main-font editable center-align" id="moduleValue-content1">
+									<h5>Save time and money<br /><br /></h5><p>We propose an integrated environment from data gathering to interactive dataviz. <br />Develop in Jupyter, share in Voilà web apps.<br /></p>
+								</div>
+							</div>
+						</div>
+
+															<div class="three-block">
+							<div class="icon-block center-align" style="text-align: center; width: 100%">
+								<div class="relative">
+
+									<h2 class="center second-color center-align">
+										<i class="material-icons" id="moduleValue-icon2">tag_faces</i>
+									</h2>
+								</div>
+								<div class=" main-color main-font editable center-align" id="moduleValue-content2">
+									<h5>Friendly to use...<br />...and to manage !<br /></h5><p>We are following a KISS approach, <br />providing vanilla standard components,<br />with just a tiny bit of glue to hold it tight.<br /></p>
+								</div>
+							</div>
+						</div>
+
+															<div class="three-block">
+							<div class="icon-block center-align" style="text-align: center; width: 100%">
+								<div class="relative">
+
+									<h2 class="center second-color center-align">
+										<i class="material-icons" id="moduleValue-icon3">extension</i>
+									</h2>
+								</div>
+								<div class=" main-color main-font editable center-align" id="moduleValue-content3">
+									<h5>Modular and extensible<br /><br /></h5><p>It is quite easy to extend the platform with data connector using few lines of Python, <br />or even with full Docker micro-services.<br /></p>
+								</div>
+							</div>
+						</div>
+
+							</div>
+
+		</div>
+	</div>
+</div>
+
+
+
+				</section>
+
+
+
+<section class="relative moduleSectionContainer module" id="footer">
+	<footer class="page-footer second-background base ">
+	<div class="container main-color">
+		<div class="row" style="margin-bottom: 0 !important;">
+
+			<div class="col m12 l5 s12  relative" >
+				<div class="editable main-font second-color relative" id="moduleValue-leftText"  style="margin: 0 20px !important;">
+					<p class="second-color">Copyright 2020<br />Tétras Libre SARL<br /></p>
+				</div>
+			</div>
+
+</footer>
+</section>
+
+
+
+
+					<a class="fixed btn-floating btn-large menu-background waves-effect waves-light tooltipped light-shadow" data-position="left"
+	   data-delay="350" data-tooltip="retour haut de page" id="ScrollTopBtn" style="opacity : 0; z-index: 200 !important; bottom: 20px; right: 20px ">
+		<i class="material-icons second-color medium">arrow_upward</i>
+	</a>
+</div>
+
+<!--  Scripts-->
+
+<script src="public/js/jquery-2.1.1.min.js"></script>
+<script src="public/js/materialize.min.js"></script>
+
+
+
+<script>
+	SiteOptions = {"font":{"name":"Pro","title":{"name":"Maven Pro","local":"MavenPro","css1":"Maven Pro","css2":"sans-serif"},"main":{"name":"Maven Pro","local":"MavenPro","css1":"Maven Pro","css2":"sans-serif"}},"theme":{"name":"Custom","menu_background":"#5a8264","main_background":"#ffffff","main_color":"#5e5c64","contrasted_color":"#ffffff","second_background":"#81a88b","second_color":"#f6f5f4"},"params":{"title":"Tetras-Lab","titleSize":"small","favIcon":"..\/medias\/5fde03ea9f603.png","siteLogo":"..\/medias\/5fde03ea9f603.png","lang":"en_EN","description":"The data intelligence platform","keywords":"data, jupyter, voila, notebook, dashboard","isPublished":"true"}};
+	CSRFToken= ''
+	isAdminPage =""
+	scrollFireOptions = []
+</script>
+
+<script src="public/js/init.js"></script>
+<script src="app/views/base/nav/nav.js"></script>
+<script src="app/views/base/footer/footer.js" ></script>
+<script src="public/js/adminEditScripts.js"></script>
+
+
+	<script src="app/views/modules/headband/show.js"></script>
+	<script src="app/views/modules/video/show.js"></script>
+	<script src="app/views/modules/free_space/show.js"></script>
+	<script src="app/views/modules/paralax/show.js"></script>
+	<script src="app/views/modules/gallery/show.js"></script>
+	<script src="app/views/modules/three_goals/show.js"></script>
+	<script src="app/views/modules/separator/show.js"></script>
+	<script src="app/views/modules/contact/show.js"></script>
+<script>
+	$(document).ready(function () {
+
+			Materialize.scrollFire(scrollFireOptions);
+
+	})
+</script>
+<div id="modalCroppingImage" class="modal big-modal modal-fixed-header" style="z-index: 12000">
+	<div class="modal-header" style="z-index: 6001">
+		<h5 class="white-text" style="padding: 15px !important; margin: 0 !important;">Recadrer l'image <i>(optionnel)</i></h5>
+		<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat right"><i class="material-icons white-text">clear</i></a>
+	</div>
+
+	<div class="modal-content relative" id="croppingModalContainer" style="padding: 0 !important;">
+
+	</div>
+</div></body>
+</html>