wip

data/www/browserconfig.xml

@@ -1,2 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>$spicyPurple</TileColor></tile></msapplication></browserconfig>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/favicon/mstile-70x70.png"/>
+            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <square310x310logo src="/favicon/mstile-310x3150.png"/>
+            <square310x310logo src="/favicon/mstile-310x310.png"/>
+            <TileColor>#333333</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/www/js/global.js

@@ -10,7 +10,56 @@ const hideModal = function () {
     $modalsRoot.addClass('hidden').find('form').trigger('reset');
 };
 
+const hideDropdowns = function () {
+    $('.dropdown').removeClass('dropdown-show');
+};
+
 jQuery(document).ready(function ($) {
+     $('.dropdown .trigger').on('click', function(event) {
+        event.stopPropagation();
+        var $dropdown = $(this).closest('.dropdown');
+        var $menu = $dropdown.find('ul.dropdown-menu');
+
+        $('.dropdown').not($dropdown).removeClass('dropdown-show');
+        $dropdown.toggleClass('dropdown-show');
+
+         // Adjust dropdown position to prevent overflow
+        var triggerHeight = $(this).outerHeight() + 20;
+        var triggerOffset = $(this).offset();
+        var menuWidth = $menu.outerWidth();
+        var windowWidth = $(window).width();
+        var menuHeight = $menu.outerHeight();
+        var windowHeight = $(window).height();
+
+        // Set the top position
+        $menu.css('top', triggerHeight + 'px');
+
+        // Adjust the left position to prevent overflow
+        if (triggerOffset.left + menuWidth > windowWidth) {
+            $menu.css('left', 'auto');
+            $menu.css('right', 0);
+        } else {
+            $menu.css('left', 0);
+            $menu.css('right', 'auto');
+        }
+
+        // Adjust the top position to prevent bottom overflow
+        var menuOffset = $menu.offset();
+        if (menuOffset.top + menuHeight > windowHeight) {
+            $menu.css('top', -menuHeight + 'px');
+        } else {
+            $menu.css('top', triggerHeight + 'px');
+        }
+    });
+
+    $(document).on('click', function() {
+        $('.dropdown').removeClass('dropdown-show');
+    });
+
+    $(window).on('resize', function() {
+        $('.dropdown.dropdown-show .trigger').trigger('click');
+    });
+
     $(document).on('click', '.modal-close', function () {
         hideModal();
     });
@@ -18,6 +67,7 @@ jQuery(document).ready(function ($) {
     $(document).keyup(function (e) {
         if (e.key === "Escape") {
             hideModal();
+            hideDropdowns();
         }
     });
 

data/www/scss/base/_fonts.scss

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'Sixtyfour';
+    src: url('../../webfonts/Sixtyfour-Regular.ttf') format('truetype');
+}

data/www/scss/base/_html.scss

@@ -1,29 +1,151 @@
 * {
-    font-family: 'Roboto', 'Arial', 'sans-serif';
+	font-family: 'Work Sans', 'Roboto', 'Arial', 'sans-serif';
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
 html {
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    background-color: $blueDark;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-self: stretch;
+	background-color: #111;
 }
 
-body {
-    margin: 0;
-    padding: 0;
-    flex: 1;
-    background-color: $blueDark;
-    color: $white;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-self: stretch;
+body, html {
+	height: 100%;
+	font-family: Arial, sans-serif;
+}
+
+.container {
+	display: flex;
+	height: 100vh;
+}
+
+.chips-green {
+	background-image: url('../../img/spot-green.png');
+	background-repeat: no-repeat;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: -1;
+	transform: translateX(-20%) translateY(-20%);
+}
+
+.chips-red {
+	background-image: url('../../img/spot-red.png');
+	background-repeat: no-repeat;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	position: fixed;
+	z-index: -1;
+	transform: translateX(-10%) translateY(40%);
+}
+
+.chips-blue {
+	background-image: url('../../img/spot-blue.png');
+	background-repeat: no-repeat;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	position: fixed;
+	z-index: -1;
+	transform: translateX(80%) translateY(0%);
+}
+
+
+main {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+
+	.context-bar {
+		padding: 10px;
+		position: sticky;
+		top: 0;
+		z-index: 1000;
+		max-height: 80px;
+		border-bottom: 2px solid rgba(0, 0, 0, 0.2);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		.context-menu {
+			flex: 1;
+
+			.inner {
+				border-radius: 4px;
+				background: #777;
+
+				ul {
+
+					li {
+
+					}
+				}
+			}
+		}
+
+		.context-divider {
+			width: 1px;
+			height: 100%;
+			background: #222;
+			margin-left: 20px;
+			margin-right: 20px;
+		}
+
+		.context-user {
+			display: flex;
+			margin-right: 20px;
+
+			.trigger {
+				color: white;
+
+				.avatar {
+					width: 32px;
+					height: 32px;
+					background: $pinkyRed;
+					border-radius: 4px;
+					margin-right: 10px;
+					display: flex;
+					flex-direction: row;
+					justify-content: center;
+					align-items: center;
+					text-align: center;
+					font-weight: bold;
+					font-size: 14px;
+					border: 1px solid #444;
+				}
+
+				i {
+					margin-top: -5px;
+					margin-left: 10px;
+				}
+			}
+		}
+	}
+
+	.main-container {
+		display: flex;
+		flex: 1;
+		overflow: hidden; /* Prevent main-container from overflowing */
+
+		.main-content {
+			flex: 2;
+			overflow-y: auto;
+			padding: 20px;
+			background-color: transparent;
+		}
+
+		.right-panel {
+			flex: 1;
+			overflow-y: auto;
+			padding: 20px;
+			background-color: transparent;
+		}
+	}
 }
 

data/www/scss/base/_menu.scss

@@ -0,0 +1,190 @@
+
+menu {
+	width: 300px;
+	background: #111;
+	overflow-y: auto;
+	overflow-x: visible;
+	padding: 20px;
+	z-index: 2000;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	border-right: 2px solid rgba(0, 0, 0, 0.2);
+
+	h1.logo {
+		margin: 40px 0 0 0;
+		align-self: stretch;
+		display: flex;
+
+		a {
+			@include pixel-text(0);
+			flex: 1;
+			font-family: 'Sixtyfour', 'Work Sans', 'Arial', 'sans-serif';
+			align-self: stretch;
+			padding-right: 3px;
+			font-size: 20px;
+			text-transform: uppercase;
+			transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			img {
+				flex-shrink: 0;
+				width: 30px;
+				margin-right: 10px;
+				position: absolute;
+				left: 5px;
+				transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
+
+				&.after {
+					opacity: 0;
+				}
+			}
+		}
+	}
+
+	&:hover {
+		h1.logo {
+			a {
+				@include pixel-text(3);
+
+				img {
+					&.before {
+						opacity: 0;
+					}
+
+					&.after {
+					 	animation-duration: 200ms;
+  						animation-name: logotouch;
+					}
+				}
+			}
+		}
+	}
+
+	nav {
+		display: flex;
+		align-self: stretch;
+		flex: 1;
+
+
+		ul {
+			margin: 60px 0 20px 0;
+			flex: 1;
+			align-self: flex-start;
+			display: flex;
+			flex-direction: column;
+			list-style: none;
+
+			li {
+				align-self: stretch;
+				overflow: hidden;
+				position: relative;
+				transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
+				margin: 10px 0;
+
+				a {
+					color: rgba(255, 255, 255, 0.9);
+					font-size: 16px;
+					display: flex;
+					flex-direction: row;
+					justify-content: flex-start;
+					align-items: center;
+					align-self: stretch;
+					flex: 1;
+					padding-top: 5px;
+					padding-bottom: 5px;
+					padding-left: 10px;
+
+					i {
+						color: white;
+						opacity: .2;
+						background: transparent;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						align-self: stretch;
+						padding: 10px 10px;
+						width: 40px;
+						border-radius: 2px;
+						text-align: center;
+						margin-right: 20px;
+					}
+				}
+
+				&:after {
+					background: white;
+					content: "";
+					height: 195px;
+					left: -200px;
+					opacity: .2;
+					position: absolute;
+					top: -50px;
+					transform: rotate(35deg);
+					transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
+					width: 50px;
+					z-index: -2;
+					cursor: pointer;
+				}
+
+				&.active {
+					a {
+						color: $primary;
+						font-weight: bold;
+
+						i {
+							opacity: 1;
+							background: rgba(255, 255, 255, 0.9);
+							background: #017BFF;
+						}
+					}
+				}
+
+				&:hover {
+					background: $primary;
+
+					&:after {
+						z-index: 2;
+						left: 120%;
+						transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
+					}
+
+					a {
+						color: white;
+						font-weight: bold;
+
+						i {
+							color: white;
+							opacity: 1;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	footer {
+		background: rgba(255, 255, 255, 0.01);
+		padding: 20px 0;
+		display: flex;
+		flex-direction: row;
+		align-self: stretch;
+		text-align: center;
+		justify-content: center;
+
+		p {
+			color: #444;
+
+			&.version {
+				a {
+					color: #777;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+}

data/www/scss/components/_dropdown.scss

@@ -0,0 +1,67 @@
+
+.dropdown {
+	position: relative;
+	display: flex;
+	align-self: stretch;
+
+
+	&.dropdown-show ul.dropdown-menu {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.trigger {
+		cursor: pointer;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		align-self: stretch;
+		flex: 1;
+	}
+
+	ul.dropdown-menu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		display: none;
+		background-color: #222;
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+		z-index: 1000;
+		list-style-type: none;
+		margin: 0;
+		overflow: hidden;
+		border-radius: 4px;
+
+		li {
+			padding: 8px 16px;
+			cursor: pointer;
+			display: flex;
+			flex-direction: row;
+			justify-content: flex-start;
+			align-items: center;
+
+			&.danger:hover {
+				background-color: $danger;
+			}
+
+			&:hover {
+				background-color: $seaBlue;
+			}
+
+			a {
+				padding: 8px 16px 8px 8px;
+				color: white;
+				display: flex;
+				flex-direction: row;
+				justify-content: flex-start;
+				align-items: center;
+				align-self: stretch;
+
+				i {
+					margin-right: 15px;
+				}
+			}
+		}
+	}
+}

data/www/scss/components/_keyframes.scss

@@ -0,0 +1,12 @@
+@keyframes logotouch {
+	0% {
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		left: 27px;
+	}
+}

data/www/scss/main.scss

@@ -3,31 +3,34 @@
 @import 'utils/mixins';
 
 // Import base styles
+@import 'base/fonts';
 @import 'base/html';
-
+@import 'base/menu';
 @import 'base/tachyons';
 
 // Import layout styles
-@import 'layout/header';
-@import 'layout/footer';
-@import 'layout/container';
+//@import 'layout/header';
+//@import 'layout/footer';
+//@import 'layout/container';
 
 // Import component styles
-@import 'components/buttons';
-@import 'components/alerts';
-@import 'components/modals';
-@import 'components/panels';
-@import 'components/switches';
-@import 'components/cards';
-@import 'components/empty';
-@import 'components/badges';
-@import 'components/explorer';
-@import 'components/toolbar';
-@import 'components/icons';
+@import 'components/dropdown';
+@import 'components/keyframes';
+//@import 'components/buttons';
+//@import 'components/alerts';
+//@import 'components/modals';
+//@import 'components/panels';
+//@import 'components/switches';
+//@import 'components/cards';
+//@import 'components/empty';
+//@import 'components/badges';
+//@import 'components/explorer';
+//@import 'components/toolbar';
+//@import 'components/icons';
 
 // Import form styles
-@import 'forms/forms';
+//@import 'forms/forms';
 
 // Import pages styles
-@import 'pages/settings';
-@import 'pages/sysinfo';
+//@import 'pages/settings';
+//@import 'pages/sysinfo';

data/www/scss/utils/_mixins.scss

@@ -0,0 +1,31 @@
+@mixin pixel-text($pixelOffset: 1) {
+	text-align: center;
+	text-shadow:
+	#{$pixelOffset}px 0 0 #fff,
+	#{$pixelOffset}px 2px 0 #444,
+	0 #{$pixelOffset}px 0 $limeGreen,
+	-#{$pixelOffset}px 0 0 $seaBlue,
+	0 -#{$pixelOffset}px 0 $pinkyRed;
+	text-decoration: none;
+	background: linear-gradient(90deg, #a0a0a0 0, #bebebe 46%, #dcdcdc 100%);
+	-webkit-background-clip: text;
+	color: transparent;
+}
+
+@mixin pixel-text-to-right($pixelOffset: 1) {
+	text-align: center;
+	text-shadow:
+		-#{$pixelOffset}px 0 0 #fff,
+		-#{$pixelOffset}px #{$pixelOffset*0.5}px 0 black,
+		#{$pixelOffset*2}px #{$pixelOffset}px 0 $limeGreen,
+		#{$pixelOffset*2}px 0 0 $seaBlue,
+		#{$pixelOffset*2}px -#{$pixelOffset}px 0 $pinkyRed;
+	text-decoration: none;
+	background: linear-gradient(90deg, #a0a0a0 0, #bebebe 46%, #dcdcdc 100%);
+	-webkit-background-clip: text;
+	color: transparent;
+}
+
+@mixin pixel-box($pixelOffset: 1) {
+	box-shadow: #{$pixelOffset}px 0 0 #fff, 0 #{$pixelOffset}px 0 $limeGreen, -#{$pixelOffset}px 0 0 $seaBlue, 0 -#{$pixelOffset}px 0 $pinkyRed;
+}

data/www/scss/utils/_variables.scss

@@ -1,5 +1,6 @@
 // Raw Colors
 $blueDark: rgb(15, 0, 53);
+$seaBlue: rgb(2, 123, 255);
 $pinkyRed: rgb(239, 14, 93);
 $limeGreen: rgb(14, 239, 95);
 $bitterPurple: rgb(105, 47, 189);
@@ -11,4 +12,6 @@ $black: rgb(0, 0, 0);
 
 // Type Colors
 $success: $limeGreen;
-$danger: $pinkyRed;
+$danger: $pinkyRed;
+
+$primary: $seaBlue;

views/base.jinja.html

@@ -1,149 +1,243 @@
 <!DOCTYPE html>
 <html lang="{{ LANG }}">
-<head>
-    <title>
-        Obscreen - {% block page_title %}{% endblock %}
-    </title>
-    <meta name="robots" content="noindex, nofollow">
-    <meta name="google" content="notranslate">
-    <link rel="shortcut icon" href="/favicon.ico">
-    <link rel="apple-touch-icon" sizes="57x57" href="{{ STATIC_PREFIX }}favicon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="{{ STATIC_PREFIX }}favicon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="{{ STATIC_PREFIX }}favicon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="{{ STATIC_PREFIX }}favicon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="{{ STATIC_PREFIX }}favicon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="{{ STATIC_PREFIX }}favicon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="{{ STATIC_PREFIX }}favicon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="{{ STATIC_PREFIX }}favicon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ STATIC_PREFIX }}favicon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="{{ STATIC_PREFIX }}favicon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ STATIC_PREFIX }}favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="{{ STATIC_PREFIX }}favicon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ STATIC_PREFIX }}favicon/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">
-    <meta name="msapplication-TileColor" content="#777777">
-    <meta name="msapplication-TileImage" content="{{ STATIC_PREFIX }}favicon/ms-icon-144x144.png">
-    <meta name="theme-color" content="#777777">
+    <head>
+        <title>
+            Obscreen - {% block page_title %}{% endblock %}
+        </title>
+        <meta name="robots" content="noindex, nofollow">
+        <meta name="google" content="notranslate">
+        <link rel="shortcut icon" href="/favicon.ico">
+        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-57x57.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-114x114.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-72x72.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-144x144.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="60x60" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-60x60.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-120x120.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-76x76.png" />
+        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ STATIC_PREFIX }}favicon/apple-touch-icon-152x152.png" />
+        <link rel="icon" type="image/png" href="{{ STATIC_PREFIX }}favicon/favicon-196x196.png" sizes="196x196" />
+        <link rel="icon" type="image/png" href="{{ STATIC_PREFIX }}favicon/favicon-96x96.png" sizes="96x96" />
+        <link rel="icon" type="image/png" href="{{ STATIC_PREFIX }}favicon/favicon-32x32.png" sizes="32x32" />
+        <link rel="icon" type="image/png" href="{{ STATIC_PREFIX }}favicon/favicon-16x16.png" sizes="16x16" />
+        <link rel="icon" type="image/png" href="{{ STATIC_PREFIX }}favicon/favicon-128.png" sizes="128x128" />
+        <meta name="application-name" content="Obscreen"/>
+        <meta name="msapplication-TileColor" content="#333333" />
+        <meta name="msapplication-TileImage" content="{{ STATIC_PREFIX }}favicon/mstile-144x144.png" />
+        <meta name="msapplication-square70x70logo" content="{{ STATIC_PREFIX }}favicon/mstile-70x70.png" />
+        <meta name="msapplication-square150x150logo" content="{{ STATIC_PREFIX }}favicon/mstile-150x150.png" />
+        <meta name="msapplication-wide310x150logo" content="{{ STATIC_PREFIX }}favicon/mstile-310x150.png" />
+        <meta name="msapplication-square310x310logo" content="{{ STATIC_PREFIX }}favicon/mstile-310x310.png" />
+        <meta name="theme-color" content="#333333">
+        <link rel="manifest" href="/manifest.json">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/fontawesome.min.css" />
+        <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/compiled/main.css" />
+        {% block add_css %}{% endblock %}
+        {{ HOOK(H_ROOT_CSS) }}
+    </head>
+    <body>
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/fontawesome.min.css" />
-    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/compiled/main.css" />
-    {% block add_css %}{% endblock %}
-    {{ HOOK(H_ROOT_CSS) }}
-</head>
-<body>
-<div class="container {% block container_class %}{% endblock %}">
+{#        <div class="chips-green"></div>#}
+{#        <div class="chips-red"></div>#}
+{#        <div class="chips-blue"></div>#}
 
-    {% block header %}
-        <header>
-            <h1 class="logo">
-                <a href="{{ url_for('slideshow_slide_list') }}">
-                    <img src="{{ STATIC_PREFIX }}img/logo.png" />
-                    Obscreen
-                </a>
-            </h1>
-
-            {% if not AUTH_ENABLED or (current_user and current_user.is_authenticated) %}
-            <nav>
-                <ul>
-                    {{ HOOK(H_ROOT_NAV_ELEMENT_START) }}
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'slideshow_slide_list' }}">
+        <div class="container {% block container_class %}{% endblock %}">
+            {% block header %}
+                <menu>
+                    <h1 class="logo">
                         <a href="{{ url_for('slideshow_slide_list') }}">
-                            <i class="fa-regular fa-clock"></i> {{ l.slideshow_slide_page_title }}
+                            <img src="{{ STATIC_PREFIX }}img/logo2.png" class="before" />
+                            <img src="{{ STATIC_PREFIX }}img/logo2white.png" class="after" />
+                            Obscreen
                         </a>
-                    </li>
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'slideshow_content_list' }}">
-                        <a href="{{ url_for('slideshow_content_list') }}">
-                            <i class="fa fa-image"></i> {{ l.slideshow_content_page_title }}
-                        </a>
-                    </li>
-                    {% if PLAYLIST_ENABLED %}
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'playlist_list' }}">
-                        <a href="{{ url_for('playlist_list') }}">
-                            <i class="fa fa-bars-staggered"></i> {{ l.playlist_page_title }}
-                        </a>
-                    </li>
+                    </h1>
+
+                    {% if not AUTH_ENABLED or (current_user and current_user.is_authenticated) %}
+                    <nav>
+                        <ul>
+                            {{ HOOK(H_ROOT_NAV_ELEMENT_START) }}
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'slideshow_slide_list' }}">
+                                <a href="{{ url_for('slideshow_slide_list') }}">
+                                    <i class="fa-regular fa-clock"></i> {{ l.slideshow_slide_page_title }}
+                                </a>
+                            </li>
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'slideshow_content_list' }}">
+                                <a href="{{ url_for('slideshow_content_list') }}">
+                                    <i class="fa fa-image"></i> {{ l.slideshow_content_page_title }}
+                                </a>
+                            </li>
+                            {% if PLAYLIST_ENABLED %}
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'playlist_list' }}">
+                                <a href="{{ url_for('playlist_list') }}">
+                                    <i class="fa fa-bars-staggered"></i> {{ l.playlist_page_title }}
+                                </a>
+                            </li>
+                            {% endif %}
+                            {% if FLEET_PLAYER_ENABLED %}
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'fleet_node_player_group_list' }}">
+                                <a href="{{ url_for('fleet_node_player_group_list') }}">
+                                    <i class="fa fa-layer-group"></i> {{ l.fleet_node_player_group_page_title }}
+                                </a>
+                            </li>
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'fleet_node_player_list' }}">
+                                <a href="{{ url_for('fleet_node_player_list') }}">
+                                    <i class="fa fa-tv"></i> {{ l.fleet_node_player_page_title }}
+                                </a>
+                            </li>
+                            {% endif %}
+                            {% if AUTH_ENABLED %}
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'auth_user_list' }}">
+                                <a href="{{ url_for('auth_user_list') }}">
+                                    <i class="fa fa-user"></i> {{ l.auth_page_title }}
+                                </a>
+                            </li>
+                            {% endif %}
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'settings_variable_list' }}">
+                                <a href="{{ url_for('settings_variable_list') }}">
+                                    <i class="fa-solid fa-cogs"></i> {{ l.settings_page_title }}
+                                </a>
+                            </li>
+                            <li class="{{ 'active' if request.url_rule.endpoint == 'sysinfo_attribute_list' }}">
+                                <a href="{{ url_for('sysinfo_attribute_list') }}">
+                                    <i class="fa-solid fa-list-check"></i> {{ l.sysinfo_page_title }}
+                                </a>
+                            </li>
+                            {% if AUTH_ENABLED %}
+                            <li class="user-menu">
+                                <div class="username">
+                                    <i class="fa fa-user"></i>
+                                    {{ current_user.username }}
+                                </div>
+                                <a href="{{ url_for('logout') }}" title="{{ l.logout }}" class="logout">
+                                    <i class="fa fa-right-from-bracket"></i>
+                                </a>
+                            </li>
+                            {% endif %}
+                            {{ HOOK(H_ROOT_NAV_ELEMENT_END) }}
+                        </ul>
+                    </nav>
                     {% endif %}
-                    {% if FLEET_PLAYER_ENABLED %}
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'fleet_node_player_group_list' }}">
-                        <a href="{{ url_for('fleet_node_player_group_list') }}">
-                            <i class="fa fa-layer-group"></i> {{ l.fleet_node_player_group_page_title }}
-                        </a>
-                    </li>
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'fleet_node_player_list' }}">
-                        <a href="{{ url_for('fleet_node_player_list') }}">
-                            <i class="fa fa-tv"></i> {{ l.fleet_node_player_page_title }}
-                        </a>
-                    </li>
-                    {% endif %}
-                    {% if AUTH_ENABLED %}
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'auth_user_list' }}">
-                        <a href="{{ url_for('auth_user_list') }}">
-                            <i class="fa fa-user"></i> {{ l.auth_page_title }}
-                        </a>
-                    </li>
-                    {% endif %}
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'settings_variable_list' }}">
-                        <a href="{{ url_for('settings_variable_list') }}">
-                            <i class="fa-solid fa-cogs"></i> {{ l.settings_page_title }}
-                        </a>
-                    </li>
-                    <li class="{{ 'active' if request.url_rule.endpoint == 'sysinfo_attribute_list' }}">
-                        <a href="{{ url_for('sysinfo_attribute_list') }}">
-                            <i class="fa-solid fa-list-check"></i> {{ l.sysinfo_page_title }}
-                        </a>
-                    </li>
-                    {% if AUTH_ENABLED %}
-                    <li class="user-menu">
-                        <div class="username">
-                            <i class="fa fa-user"></i>
-                            {{ current_user.username }}
+
+
+                   {% block footer %}
+                        <footer>
+                            {{ HOOK(H_ROOT_FOOTER) }}
+
+                            <p class="version">
+                                Obscreen
+                                <a href="https://github.com/jr-k/obscreen/releases/tag/v{{ VERSION }}" target="_blank">
+                                    v{{ VERSION }}
+                                    <i class="fa-brands fa-github"></i>
+                                </a>
+                            </p>
+                        </footer>
+                    {% endblock %}
+                </menu>
+            {% endblock %}
+
+            <main>
+            <div class="context-bar">
+                <div class="context-menu">
+                    <div class="inner">
+                        <ul>
+                            <li>Page 1</li>
+                            <li>Page 2</li>
+                        </ul>
+                    </div>
+                </div>
+
+
+                <div class="context-divider"></div>
+
+                <div class="context-user">
+                    <div class="dropdown">
+                        <div class="trigger">
+                            <div class="avatar">
+                                JR
+                            </div>
+                            <div class="username">
+                                Jessym.R
+                            </div>
+                            <i class="fa fa-sort-down"></i>
                         </div>
-                        <a href="{{ url_for('logout') }}" title="{{ l.logout }}" class="logout">
-                            <i class="fa fa-right-from-bracket"></i>
-                        </a>
-                    </li>
-                    {% endif %}
-                    {{ HOOK(H_ROOT_NAV_ELEMENT_END) }}
-                </ul>
-            </nav>
-            {% endif %}
-        </header>
-    {% endblock %}
+                        <ul class="dropdown-menu">
+                           <li class="danger">
+                               <a href="#_">
+                                   <i class="fa fa-power-off"></i> Déconnexion
+                               </a>
+                           </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+                   <div class="main-container">
+                        <div class="main-content">
+                            <!-- Main content -->
+                            <p>Contenu principal</p>
+                            {% for i in range(1,1000) %}
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            {% endfor %}
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolorfsdfdsfdsfdsfsfdfdsfdsf dsfdsf sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <p>Lorem ipsum dolor sit amet...</p>
+                            <!-- Add more content if needed -->
+                        </div>
+                        <div class="right-panel hidden">
+                            <!-- Right panel content -->
+                            <p>Panel droit</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel drfsdfdsfoit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <p>Contenu du panel droit...</p>
+                            <!-- Add more content if needed -->
+                        </div>
+                    </div>
 
-    {% block page %}
-
-    {% endblock %}
+                <div class="hidden">
+                    {% block page %}{% endblock %}
+                </div>
+            </main>
 
 
-    {% block footer %}
-        <footer>
-            {{ HOOK(H_ROOT_FOOTER) }}
 
-            <p class="version">Obscreen version {{ VERSION }}</p>
-        </footer>
-    {% endblock %}
-</div>
-<script>
-    var secret_key = '{{ SECRET_KEY }}';
-    var l = {
-        'js_common_are_you_sure': '{{ l.common_are_you_sure }}',
-        'js_playlist_delete_confirmation': '{{ l.js_playlist_delete_confirmation }}',
-        'js_slideshow_slide_delete_confirmation': '{{ l.js_slideshow_slide_delete_confirmation }}',
-        'js_slideshow_content_delete_confirmation': '{{ l.js_slideshow_content_delete_confirmation }}',
-        'js_fleet_node_player_group_delete_confirmation': '{{ l.js_fleet_node_player_group_delete_confirmation }}',
-        'js_fleet_node_player_delete_confirmation': '{{ l.js_fleet_node_player_delete_confirmation }}',
-        'js_auth_user_delete_confirmation': '{{ l.js_auth_user_delete_confirmation }}',
-        'js_sysinfo_restart_confirmation': '{{ l.js_sysinfo_restart_confirmation }}',
-        'js_sysinfo_restart_loading': '{{ l.js_sysinfo_restart_loading }}'
-    };
-</script>
-<script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script>
-<script src="{{ STATIC_PREFIX }}js/utils.js"></script>
-<script src="{{ STATIC_PREFIX }}js/global.js"></script>
-{{ HOOK(H_ROOT_JAVASCRIPT) }}
-{% block add_js %}{% endblock %}
-</body>
+        </div>
+        <script>
+            var secret_key = '{{ SECRET_KEY }}';
+            var l = {
+                'js_common_are_you_sure': '{{ l.common_are_you_sure }}',
+                'js_playlist_delete_confirmation': '{{ l.js_playlist_delete_confirmation }}',
+                'js_slideshow_slide_delete_confirmation': '{{ l.js_slideshow_slide_delete_confirmation }}',
+                'js_slideshow_content_delete_confirmation': '{{ l.js_slideshow_content_delete_confirmation }}',
+                'js_fleet_node_player_group_delete_confirmation': '{{ l.js_fleet_node_player_group_delete_confirmation }}',
+                'js_fleet_node_player_delete_confirmation': '{{ l.js_fleet_node_player_delete_confirmation }}',
+                'js_auth_user_delete_confirmation': '{{ l.js_auth_user_delete_confirmation }}',
+                'js_sysinfo_restart_confirmation': '{{ l.js_sysinfo_restart_confirmation }}',
+                'js_sysinfo_restart_loading': '{{ l.js_sysinfo_restart_loading }}'
+            };
+        </script>
+        <script src="{{ STATIC_PREFIX }}js/lib/jquery.min.js"></script>
+        <script src="{{ STATIC_PREFIX }}js/utils.js"></script>
+        <script src="{{ STATIC_PREFIX }}js/global.js"></script>
+        {{ HOOK(H_ROOT_JAVASCRIPT) }}
+        {% block add_js %}{% endblock %}
+    </body>
 </html>