diff --git a/include/lucidAuth.template.php b/include/lucidAuth.template.php index bbbd26a..9dc8689 100644 --- a/include/lucidAuth.template.php +++ b/include/lucidAuth.template.php @@ -33,6 +33,47 @@ $pageLayout['full'] = <<<'FULL' FULL; +$pageLayout['full2'] = <<<'FULL2' + + + + + lucidAuth + + + + + + + + + + + +
+
+
+
+
+ + %1$s +
+
+ %2$s +
+
+ + +
+
+
+ + +FULL2; + $pageLayout['bare'] = <<<'BARE' @@ -77,11 +118,23 @@ $contentLayout['login'] = <<<'LOGIN' Secure! LOGIN; -$contentLayout['manage'] = <<<'MANAGE' +$contentLayout['manage']['header'] = <<<'MANAGE_HEADER' Ingelogd als %1$s --- [EN NL] [Log uit] -
+ +MANAGE_HEADER; +$contentLayout['manage']['section'] = <<<'MANAGE_SECTION' -
-MANAGE; +MANAGE_SECTION; ?> \ No newline at end of file diff --git a/public/lucidAuth.manage.php b/public/lucidAuth.manage.php index 0ad71a9..9075744 100644 --- a/public/lucidAuth.manage.php +++ b/public/lucidAuth.manage.php @@ -12,7 +12,7 @@ try { $allUsers = $pdoDB->query(' - SELECT User.Username, Role.Rolename, COUNT(DISTINCT SecureToken.Value) AS Sessions + SELECT User.Id, User.Username, Role.Rolename, COUNT(DISTINCT SecureToken.Value) AS Sessions FROM User LEFT JOIN Role ON (User.RoleId=Role.Id) @@ -25,19 +25,22 @@ } foreach($allUsers as $row) { - $tableRows[] = sprintf('%1$s%2$s%3$s', + $tableRows[] = sprintf('%2$s%3$s%4$s', + $row['Id'], explode('\\', $row['Username'])[1], $row['Rolename'], $row['Sessions'] ); } - echo sprintf($pageLayout['full'], - sprintf($contentLayout['manage'], - $validateTokenResult['name'], + echo sprintf($pageLayout['full2'], + sprintf($contentLayout['manage']['header'], + $validateTokenResult['name'] + ), + sprintf($contentLayout['manage']['section'], implode($tableRows) - ) - ); + ) + ); } else { // No cookie containing valid authentication token found; // explicitly deleting any remaining cookie, then redirecting to loginpage diff --git a/public/misc/script.manage.js b/public/misc/script.manage.js index f7e6c98..1766e5b 100644 --- a/public/misc/script.manage.js +++ b/public/misc/script.manage.js @@ -5,9 +5,29 @@ $(document).ready(function(){ $('#btnnewuser').click(function() { var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0'); - $('#usertable tbody').append($('' + newUser + 'User0')); + $('#usertable tbody').append($('' + newUser + 'User0')); // Call `editableTableWidget()` again to include the newly added `` // To prevent recreating multiple new editors; reference the already existing `` $('#usertable').editableTableWidget({editor: $('#editor')}); }); + + if (localStorage.getItem('theme') !== null) { + $('#theme').addClass(localStorage.getItem('theme')); + } + + $('.logo .sub').click(function(event) { + var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"]; + + if (event.ctrlKey) { + var selectedTheme = classes[~~(Math.random()*classes.length)]; + + $('#theme').removeClass(classes.join(' ')).addClass(selectedTheme); + localStorage.setItem('theme', selectedTheme); + } + if (event.altKey) { + $('#theme').removeClass(classes.join(' ')); + localStorage.removeItem('theme'); + } + }); + }); \ No newline at end of file diff --git a/public/misc/script.theme.js b/public/misc/script.theme.js deleted file mode 100644 index 5532021..0000000 --- a/public/misc/script.theme.js +++ /dev/null @@ -1,19 +0,0 @@ -$(document).ready(function() { - if (localStorage.getItem('theme') != '') { - $('html').addClass(localStorage.getItem('theme')); - } - - $('.logo .sub').on('click', function(event) { - if (event.ctrlKey) { - var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"]; - var selectedTheme = classes[~~(Math.random()*classes.length)]; - - $('html').removeClass().addClass(selectedTheme); - localStorage.setItem('theme', selectedTheme); - } - if (event.altKey) { - $('html').removeClass(); - localStorage.removeItem('theme'); - } - }); -}); \ No newline at end of file diff --git a/public/misc/style.css b/public/misc/style.css index 1bf0cd9..8abf93a 100644 --- a/public/misc/style.css +++ b/public/misc/style.css @@ -116,13 +116,16 @@ body { margin-top: 7px; width: 20px; } + .main header button, .main section button { margin-left: 160px; text-transform: uppercase; } + .main header .buttons, .main section .buttons { text-align: center; } + .main header .buttons button, .main section .buttons button { margin-left: inherit; } @@ -130,7 +133,7 @@ body { width: 100%; } .main section table * { - font-size: 12px; + font-size: 14px; padding: 2px; margin: 0; } @@ -199,26 +202,4 @@ body { } .main span#user nav { display: inline; - } - .main span#user #pluginlogos { - display: none; - position: absolute; - top: 72px; - right: 10px; - height: 112px; - width: 250px; - border: 1px solid rgb(0, 51, 153); - box-shadow: black 0px 0px 20px; - box-sizing: border-box; - padding-top: 5px; - background: white; - font-size: inherit; - font-weight: bold; - } - .main span#user #pluginlogos img { - width: 75px; - height: 75px; - filter: saturate(500%) contrast(200%) grayscale(100%) opacity(50%); - transition: all 375ms; - cursor: pointer; - } + } \ No newline at end of file diff --git a/public/misc/style.panes.css b/public/misc/style.panes.css new file mode 100644 index 0000000..f060c14 --- /dev/null +++ b/public/misc/style.panes.css @@ -0,0 +1,50 @@ +body{ + margin: 0; +} +.wrapper{ + min-height: 100vh; + background: #FFFFFF; + display: flex; + flex-direction: column; +} +.header { + height: 125px; + background: #FFFFFF; + color: #000000; +} +.content { + display: flex; + flex: 1; + background: #333333; + color: #000; + min-height: 0px; + max-height: 100vh; +} +.columns{ + display: flex; + flex:1; +} +.main{ + flex: 1; + order: 2; + background: #fff; + border: 3px solid #CCCCCC; + border-radius: 5px; + height: 400px; + margin-top: auto; + margin-bottom: auto; +} +.main section { + overflow-y: scroll; + height: calc(100% - 125px); +} +.sidebar-first{ + width: 25%; + background: transparent; + order: 1; +} +.sidebar-second{ + width: 25%; + order: 3; + background: transparent; +} \ No newline at end of file diff --git a/public/misc/style.theme.css b/public/misc/style.theme.css index 382eb0a..1d78ca5 100644 --- a/public/misc/style.theme.css +++ b/public/misc/style.theme.css @@ -1,39 +1,39 @@ -html.tablecloth { - height: 100%; - background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.6) 0, rgba(68, 68, 68, 0.2) 2em), - repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.4) 0, rgba(68, 68, 68, 0.1) 2em), #666; - background-blend-mode: multiply; -} - -html.weave { - background: linear-gradient(45deg, #666 12%, transparent 0, transparent 88%, #666 0), - linear-gradient(135deg, transparent 37%, #888 0, #888 63%, transparent 0), - linear-gradient(45deg, transparent 37%, #666 0, #666 63%, transparent 0), - #444; - background-size: 40px 40px; -} - -html.madras { - height: 100%; - background-color: #e9d4b9; - background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), - repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); -} - -html.tartan { - height: 100%; - background-color: #a0302c; - background-image: repeating-linear-gradient(20deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), - repeating-linear-gradient(290deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), - repeating-linear-gradient(145deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px); -} - -html.seigaiha { - background-color: grey; - background-image: radial-gradient(circle at 100% 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), - radial-gradient(circle at 0 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), - radial-gradient(circle at 50% 100%, silver 10%, grey 11%, grey 23%, silver 24%, silver 30%, grey 31%, grey 43%, silver 44%, silver 50%, grey 51%, grey 63%, silver 64%, silver 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0)), - radial-gradient(circle at 100% 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), - radial-gradient(circle at 0 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); - background-size: 100px 50px; +#theme.tablecloth { + height: 100%; + background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.6) 0, rgba(68, 68, 68, 0.2) 2em), + repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.4) 0, rgba(68, 68, 68, 0.1) 2em), #666; + background-blend-mode: multiply; +} + +#theme.weave { + background: linear-gradient(45deg, #666 12%, transparent 0, transparent 88%, #666 0), + linear-gradient(135deg, transparent 37%, #888 0, #888 63%, transparent 0), + linear-gradient(45deg, transparent 37%, #666 0, #666 63%, transparent 0), + #444; + background-size: 40px 40px; +} + +#theme.madras { + height: 100%; + background-color: #e9d4b9; + background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), + repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); +} + +#theme.tartan { + height: 100%; + background-color: #a0302c; + background-image: repeating-linear-gradient(20deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), + repeating-linear-gradient(290deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), + repeating-linear-gradient(145deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px); +} + +#theme.seigaiha { + background-color: grey; + background-image: radial-gradient(circle at 100% 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), + radial-gradient(circle at 0 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), + radial-gradient(circle at 50% 100%, silver 10%, grey 11%, grey 23%, silver 24%, silver 30%, grey 31%, grey 43%, silver 44%, silver 50%, grey 51%, grey 63%, silver 64%, silver 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0)), + radial-gradient(circle at 100% 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), + radial-gradient(circle at 0 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)); + background-size: 100px 50px; } \ No newline at end of file