Update to maintainer version

master
Michael Reber 2 years ago
parent 5cd558eb6c
commit 13c0db3539

3
.gitignore vendored

@ -1,2 +1 @@
# Ignore the dev_files directory
_NEW
._*

@ -1,2 +1,7 @@
# web-learning-manager
# Netcloud Learning Manager
The Netcloud learning manager is a webtool, which was developed for all employees of the company Netcloud AG, in order to educate themselves independently and personally with licensed videos from LinkedIn Learning and the Linuxacademy.
The application can be accessed at the following URL: https://learning-manager.apps.netcloud.local/
The password is in our internal wiki.

@ -0,0 +1,306 @@
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
html,
body {
font-size: 50%;
}
}
svg {
display: inline-block;
width: 2rem;
height: 2rem;
overflow: visible;
}
.svg-icon {
cursor: pointer;
}
.svg-icon path {
stroke: rgba(255, 255, 255, 0.9);
fill: none;
stroke-width: 1;
}
input,
button {
outline: none;
border: none;
}
.netcloud-logo {
background-image: url("../../assets/images/Netcloud-Logo_Weiss.png");
width: 104px;
height: 60px;
background-size: contain;
margin-top: 30px;
background-repeat: no-repeat;
}
.container {
position: relative;
height: 100%;
background-image: url("../../assets/images/background.jpg");
background-size: cover;
overflow: auto;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.row {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15rem;
margin-top: -26.5rem;
width: 30rem;
height: 53rem;
overflow: hidden;
}
.login {
position: relative;
height: 100%;
background: -webkit-linear-gradient(top, rgba(113, 113, 113, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
background: linear-gradient(to bottom, rgb(96 121 148 / 80%) 0%, rgb(2 24 47 / 65%) 100%);
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
-webkit-transform: scale(1);
transform: scale(1);
}
.login.inactive {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.login__lock {
position: absolute;
/*top: 8rem;*/
left: 10rem;
width: 14rem;
height: 2.8rem;
font-size: 128px;
}
@media screen and (min-width: 769px) {
.login__lock {
font-size: 152px;
}
}
.login__check {
position: absolute;
top: 16rem;
left: 13.5rem;
width: 14rem;
height: 2.8rem;
background: #fff;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.login__check:before {
content: "";
position: absolute;
left: 0;
bottom: 100%;
width: 2.8rem;
height: 5.2rem;
background: #fff;
box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2);
}
.login__form {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
padding: 1.5rem 2.5rem;
text-align: center;
}
.login__row {
height: 5rem;
padding-top: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.login__icon {
margin-bottom: -0.4rem;
margin-right: 0.5rem;
}
.login__icon.name path {
stroke-dasharray: 73.50196075439453;
stroke-dashoffset: 73.50196075439453;
-webkit-animation: animatePath 2s 0.5s forwards;
animation: animatePath 2s 0.5s forwards;
}
.login__icon.pass path {
stroke-dasharray: 92.10662841796875;
stroke-dashoffset: 92.10662841796875;
-webkit-animation: animatePath 2s 0.5s forwards;
animation: animatePath 2s 0.5s forwards;
}
.login__input {
display: inline-block;
width: 22rem;
height: 100%;
padding-left: 1.5rem;
font-size: 1.5rem;
background: transparent;
color: #FDFCFD;
}
.login__submit {
position: relative;
width: 100%;
height: 4rem;
margin: 5rem 0 2.2rem;
color: rgba(255, 255, 255, 0.8);
background: #383838;
font-size: 1.5rem;
border-radius: 3rem;
cursor: pointer;
overflow: hidden;
-webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
}
.login__submit:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.5rem;
margin-top: -1.5rem;
width: 3rem;
height: 3rem;
border: 2px dotted #fff;
border-radius: 50%;
border-left: none;
border-bottom: none;
-webkit-transition: opacity 0.1s 0.4s;
transition: opacity 0.1s 0.4s;
opacity: 0;
}
.login__submit.processing {
width: 4rem;
font-size: 0;
}
.login__submit.processing:after {
opacity: 1;
-webkit-animation: rotate 0.5s 0.4s infinite linear;
animation: rotate 0.5s 0.4s infinite linear;
}
.login__submit.success {
-webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
-webkit-transform: scale(30);
transform: scale(30);
opacity: 0.9;
}
.login__submit.success:after {
-webkit-transition: opacity 0.1s 0s;
transition: opacity 0.1s 0s;
opacity: 0;
-webkit-animation: none;
animation: none;
}
.login__signup {
font-size: 1.2rem;
color: #ABA8AE;
}
.login__signup a {
color: #fff;
cursor: pointer;
}
.ripple {
position: absolute;
width: 15rem;
height: 15rem;
margin-left: -7.5rem;
margin-top: -7.5rem;
background: rgba(0, 0, 0, 0.4);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: animRipple 0.4s;
animation: animRipple 0.4s;
border-radius: 50%;
}
@-webkit-keyframes animRipple {
to {
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
}
@keyframes animRipple {
to {
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
}
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}
@keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}

@ -1,6 +1,4 @@
@charset "utf-8";
/*-------------------------
Simple reset
--------------------------*/
@ -15,18 +13,31 @@ html {
/* Full height */
height: 100%;
/* The image used */
background-image: url("../../images/background.jpg");
background-image: url("../../assets/images/background.jpg");
background-color: #373743;
/* Center and scale the image nicely */
background-position: center center;
background-size: cover;
font: 14px normal Arial, Helvetica, sans-serif;
z-index: -4;
overflow-y: scroll;
/*Fix for moving page because of scrole baar*/
}
.netcloud-logo {
background-image: url("../../assets/images/michu-it_logo_weiss.png");
width: 132px;
height: 60px;
float: right;
background-size: contain;
margin-top: 46px;
background-repeat: no-repeat;
margin-right: 8px;
}
.compensate-for-scrollbar {
margin-right: inherit !important;
}
/*-------------------------
File manager
@ -35,8 +46,10 @@ html {
.filemanager {
width: 95%;
max-width: 1340px;
min-height: 500px;
position: relative;
margin: 30px auto 50px;
background-color: rgb(0 0 0 / 40%);
}
@media all and (max-width: 965px) {
@ -49,10 +62,13 @@ html {
.filemanager .header {
font-size: large;
height: 30px;
background-color: beige;
background-color: #002751!important;
text-align: center;
padding-top: 5px;
color: white;
font-weight: 700;
}
#nowWatched {
display: none;
}
@ -60,6 +76,72 @@ html {
.fancybox-slide {
padding: 20px 50px !important;
}
/*-------------------------
Page loader
-------------------------*/
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #ffffff;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
/*-------------------------
Breadcrumps
-------------------------*/
@ -88,7 +170,6 @@ html {
line-height: 20px;
}
/*-------------------------
Search box
-------------------------*/
@ -104,6 +185,7 @@ html {
width: 40px;
height: 40px;
margin-top: 6px;
margin-right: 15px;
}
.filemanager .search:before {
@ -149,22 +231,28 @@ html {
-webkit-appearance: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
::-webkit-input-placeholder {
/* WebKit browsers */
color: #4d535e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #4d535e;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #4d535e;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #4d535e;
}
/*-------------------------
Content area
-------------------------*/
@ -175,8 +263,10 @@ html {
}
.filemanager .data.animated {
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms; /* Standard syntax */
-webkit-animation: showSlowlyElement 700ms;
/* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms;
/* Standard syntax */
}
.filemanager .data li {
@ -252,8 +342,10 @@ html {
margin: 0 auto;
display: none;
font-family: Arial;
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms; /* Standard syntax */
-webkit-animation: showSlowlyElement 700ms;
/* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms;
/* Standard syntax */
}
.filemanager .nothingfound .nofiles {
@ -266,6 +358,7 @@ html {
height: 11em;
line-height: 11.4em;
}
.filemanager .nothingfound .nofiles:after {
content: '×';
position: absolute;
@ -287,26 +380,37 @@ html {
}
@media all and (max-width:965px) {
.filemanager .data li {
width: 100%;
margin: 5px 0;
}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(1.2);
opacity: 0;
}
}
/* Standard syntax */
@keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(1.2);
opacity: 0;
}
}
/*-------------------------
Icons
@ -315,42 +419,41 @@ html {
.icon {
font-size: 23px;
}
.icon.folder {
display: inline-block;
margin: 1em 0.3em 0em 1em;
background-color: transparent;
overflow: hidden;
}
.icon.folder:before {
content: '';
float: left;
background-color: #7ba1ad;
background-color: #002751!important;
width: 1.5em;
height: 0.45em;
margin-left: 0.07em;
margin-bottom: -0.07em;
border-top-left-radius: 0.1em;
border-top-right-radius: 0.1em;
box-shadow: 1.25em 0.25em 0 0em #7ba1ad;
box-shadow: 1.25em 0.25em 0 0em #002751!important;
}
.icon.folder:after {
content: '';
float: left;
clear: left;
background-color: #a0d4e4;
background-color: #01356d!important;
width: 3em;
height: 2.25em;
border-radius: 0.1em;
}
.icon.folder.full:before {
height: 0.55em;
}
.icon.folder.full:after {
height: 2.15em;
box-shadow: 0 -0.12em 0 0 #ffffff;
@ -369,10 +472,12 @@ html {
overflow: hidden;
box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset;
}
.icon.file:first-line {
font-size: 13px;
font-weight: 700;
}
.icon.file:after {
content: '';
position: absolute;
@ -384,129 +489,75 @@ html {
right: -4px;
}
.icon.file.f-avi,
.icon.file.f-flv,
.icon.file.f-mkv,
.icon.file.f-mov,
.icon.file.f-mpeg,
.icon.file.f-mpg,
.icon.file.f-mp4,
.icon.file.f-m4v,
.icon.file.f-wmv {
.icon.file.f-avi, .icon.file.f-flv, .icon.file.f-mkv, .icon.file.f-mov, .icon.file.f-mpeg, .icon.file.f-mpg, .icon.file.f-mp4, .icon.file.f-m4v, .icon.file.f-wmv {
box-shadow: 1.74em -2.1em 0 0 #7e70ee inset;
}
.icon.file.f-avi:after,
.icon.file.f-flv:after,
.icon.file.f-mkv:after,
.icon.file.f-mov:after,
.icon.file.f-mpeg:after,
.icon.file.f-mpg:after,
.icon.file.f-mp4:after,
.icon.file.f-m4v:after,
.icon.file.f-wmv:after {
.icon.file.f-avi:after, .icon.file.f-flv:after, .icon.file.f-mkv:after, .icon.file.f-mov:after, .icon.file.f-mpeg:after, .icon.file.f-mpg:after, .icon.file.f-mp4:after, .icon.file.f-m4v:after, .icon.file.f-wmv:after {
border-bottom-color: #5649c1;
}
.icon.file.f-mp2,
.icon.file.f-mp3,
.icon.file.f-m3u,
.icon.file.f-wma,
.icon.file.f-xls,
.icon.file.f-xlsx {
.icon.file.f-mp2, .icon.file.f-mp3, .icon.file.f-m3u, .icon.file.f-wma, .icon.file.f-xls, .icon.file.f-xlsx {
box-shadow: 1.74em -2.1em 0 0 #5bab6e inset;
}
.icon.file.f-mp2:after,
.icon.file.f-mp3:after,
.icon.file.f-m3u:after,
.icon.file.f-wma:after,
.icon.file.f-xls:after,
.icon.file.f-xlsx:after {
.icon.file.f-mp2:after, .icon.file.f-mp3:after, .icon.file.f-m3u:after, .icon.file.f-wma:after, .icon.file.f-xls:after, .icon.file.f-xlsx:after {
border-bottom-color: #448353;
}
.icon.file.f-doc,
.icon.file.f-docx,
.icon.file.f-psd{
.icon.file.f-doc, .icon.file.f-docx, .icon.file.f-psd {
box-shadow: 1.74em -2.1em 0 0 #03689b inset;
}
.icon.file.f-doc:after,
.icon.file.f-docx:after,
.icon.file.f-psd:after {
.icon.file.f-doc:after, .icon.file.f-docx:after, .icon.file.f-psd:after {
border-bottom-color: #2980b9;
}
.icon.file.f-gif,
.icon.file.f-jpg,
.icon.file.f-jpeg,
.icon.file.f-pdf,
.icon.file.f-png {
.icon.file.f-gif, .icon.file.f-jpg, .icon.file.f-jpeg, .icon.file.f-pdf, .icon.file.f-png {
box-shadow: 1.74em -2.1em 0 0 #e15955 inset;
}
.icon.file.f-gif:after,
.icon.file.f-jpg:after,
.icon.file.f-jpeg:after,
.icon.file.f-pdf:after,
.icon.file.f-png:after {
.icon.file.f-gif:after, .icon.file.f-jpg:after, .icon.file.f-jpeg:after, .icon.file.f-pdf:after, .icon.file.f-png:after {
border-bottom-color: #c6393f;
}
.icon.file.f-deb,
.icon.file.f-dmg,
.icon.file.f-gz,
.icon.file.f-rar,
.icon.file.f-zip,
.icon.file.f-7z {
.icon.file.f-deb, .icon.file.f-dmg, .icon.file.f-gz, .icon.file.f-rar, .icon.file.f-zip, .icon.file.f-7z {
box-shadow: 1.74em -2.1em 0 0 #867c75 inset;
}
.icon.file.f-deb:after,
.icon.file.f-dmg:after,
.icon.file.f-gz:after,
.icon.file.f-rar:after,
.icon.file.f-zip:after,
.icon.file.f-7z:after {
.icon.file.f-deb:after, .icon.file.f-dmg:after, .icon.file.f-gz:after, .icon.file.f-rar:after, .icon.file.f-zip:after, .icon.file.f-7z:after {
border-bottom-color: #685f58;
}
.icon.file.f-html,
.icon.file.f-rtf,
.icon.file.f-xml,
.icon.file.f-xhtml {
.icon.file.f-html, .icon.file.f-rtf, .icon.file.f-xml, .icon.file.f-xhtml {
box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset;
}
.icon.file.f-html:after,
.icon.file.f-rtf:after,
.icon.file.f-xml:after,
.icon.file.f-xhtml:after {
.icon.file.f-html:after, .icon.file.f-rtf:after, .icon.file.f-xml:after, .icon.file.f-xhtml:after {
border-bottom-color: #d65de8;
}
.icon.file.f-js {
box-shadow: 1.74em -2.1em 0 0 #d0c54d inset;
}
.icon.file.f-js:after {
border-bottom-color: #a69f4e;
}
.icon.file.f-css,
.icon.file.f-saas,
.icon.file.f-scss {
.icon.file.f-css, .icon.file.f-saas, .icon.file.f-scss {
box-shadow: 1.74em -2.1em 0 0 #44afa6 inset;
}
.icon.file.f-css:after,
.icon.file.f-saas:after,
.icon.file.f-scss:after {
.icon.file.f-css:after, .icon.file.f-saas:after, .icon.file.f-scss:after {
border-bottom-color: #30837c;
}
/*----------------------------
The Demo Footer
-----------------------------*/
footer {
width: 770px;
font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px;
@ -514,10 +565,8 @@ footer {
bottom: 0;
left: 50%;
margin-left: -420px;
background-color: #1f1f1f;
background-image: linear-gradient(to bottom, #1f1f1f, #101010);
border-radius: 2px 2px 0 0;
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
z-index: 1;
@ -574,11 +623,10 @@ footer #tzine-actions iframe{
}
@media (max-width: 1024px) {
#bsaHolder, footer{ display:none;}
#bsaHolder, footer {
display: none;
}
}
/* Popup Test */
@ -593,6 +641,7 @@ footer #tzine-actions iframe{
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
@ -609,6 +658,7 @@ footer #tzine-actions iframe{
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
@ -621,6 +671,7 @@ footer #tzine-actions iframe{
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
@ -628,14 +679,23 @@ footer #tzine-actions iframe{
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.button {
@ -665,7 +725,7 @@ footer #tzine-actions iframe{
min-height: 700px;
}
/* michu naming fixes:*/
/* naming fixes:*/
.filemanager .data li .name {
width: 194px;
@ -678,3 +738,35 @@ footer #tzine-actions iframe{
margin: 0.9em 0.6em 0.8em 0.6em;
/*margin: 5px 0px 0px -60px;*/
}
.fancybox-slide > div:nth-child(2) {
display: block !important;
}
.fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous {
display: flex !important;
}
.speedControl {
width: 2em !important;
padding: 2px !important;
border: 1px inset silver !important;
box-sizing: border-box !important;
background: black !important;
align-self: stretch !important;
margin: 0 0 0 0.5em !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.indicator {
user-select: none;
color: white;
height: 25%;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient( to left top, #002751, #b3b3b3);
font-size: 0.7em;
font-family: sans-serif;
}

Before

Width:  |  Height:  |  Size: 827 KiB

After

Width:  |  Height:  |  Size: 827 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

@ -26,7 +26,6 @@ $(function(){
}).trigger('hashchange');
// Hiding and showing the search box
filemanager.find('.search').click(function () {
@ -36,7 +35,6 @@ $(function(){
search.find('input[type=search]').show().focus();
});
// Listening for keyboard input on the search field.
// We are using the "input" event which detects cut and paste
// in addition to keyboard input.
@ -82,7 +80,6 @@ $(function(){
}
});
// Clicking on folders
fileList.on('click', 'li.folders', function (e) {
e.preventDefault();
@ -106,7 +103,6 @@ $(function(){
currentPath = nextDir;
});
// Clicking on breadcrumbs
breadcrumbs.on('click', 'a', function (e) {
e.preventDefault();
@ -318,7 +314,7 @@ $(function(){
itemsLength = 'Empty';
}
var folder = $('<li class="folders"><a href="'+ f.path +'" title="'+ f.path +'" class="folders">'+icon+'<span class="name">' + name + '</span> <span class="details">' + itemsLength + '</span><span class="watchStatus"></span></a></li>');
var folder = $('<li class="folders"><a href="' + f.path + '" onclick="_paq.push([\'trackEvent\', \'video-folder\', \'' + f.path + '\']);" title="' + f.path + '" class="folders">' + icon + '<span class="name">' + name + '</span> <span class="details">' + itemsLength + '</span><span class="watchStatus"></span></a></li>');
fileList.append(folder)
});
@ -363,8 +359,6 @@ $(function(){
//var json_str = JSON.stringify(arr);
//setCookie('watchedVideoArray', json_str);
var style = "";
// https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163
// get saved cookie information
@ -376,7 +370,7 @@ $(function(){
}
}
var file = $('<li class="files"><a data-fancybox data-src="'+ f.path+'" title="'+ f.path +'" href="#" class="files">'+icon+'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span><span class="watchStatus" id="notWatchedJet">&#10060;</span><span class="watchStatus" id="nowWatched"' + style + '>&#9989;</span></a></li>');
var file = $('<li class="files"><a data-fancybox data-touch="false" data-src="' + f.path + '" title="' + f.path + '" href="#" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span><span class="watchStatus" id="notWatchedJet">&#10060;</span><span class="watchStatus" id="nowWatched"' + style + '>&#9989;</span></a></li>');
} else {
var file = $('<li class="files"><a href="' + f.path + '" title="' + f.path + '" target="_blank" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>');
@ -387,7 +381,6 @@ $(function(){
}
// Generate the breadcrumbs
var url = '';
@ -416,18 +409,17 @@ $(function(){
breadcrumbs.text('').append(url);
// Show the generated elements
// Show the generated elements and hide loader
document.querySelector(".loader").style.display = "none";
fileList.fadeIn();
}
// This function escapes special html characters in names
function escapeHTML(text) {
return text.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
}
// Convert file sizes from bytes to human readable units
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

@ -5,8 +5,9 @@
<!DOCTYPE html>
<html>
<head lang="en">
<title>MIT Learning Manager 2.5</title>
<title>Michu IT Learning Manager 2.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@ -14,7 +15,6 @@
<!-- Include our stylesheets -->
<link href="assets/css/styles.css?random=<?php echo uniqid(); ?>" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
@ -22,6 +22,7 @@
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setCookieDomain", "*.michu-it.com"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
@ -34,19 +35,25 @@
</script>
<noscript><p><img src="https://analytics.michu-it.com/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
</head>
<body>
<div class="filemanager">
<div class="header">
MIT Learning Manager
Michu IT Learning Manager
</div>
<div class="search">
<input type="search" placeholder="Find a file.." />
</div>
<div class="breadcrumbs"></div>
<a class="button folderName" id="backButton" href=""><i class="fa fa-arrow-left" aria-hidden="true"></i> Go Back</a>
<a class="button" href="./"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<div class="netcloud-logo"></div>
<div class="loader">Loading...</div>
<ul class="data"></ul>
<div class="nothingfound">
<div class="nofiles"></div>
@ -76,6 +83,7 @@
}
return "";
}
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}
@ -92,6 +100,12 @@
var arr_watchstatus = JSON.parse(json_str);
}
// initiate video container
$.fancybox.defaults.video.tpl = '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
'<source src="{{src}}" type="{{format}}" />' +
'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!!' +
"</video><div class='speedControl'><div class='indicator'>1x</div></div>";
$(document).on('afterClose.fb', function(e, instance, slide) {
console.info(slide.opts.$orig);
//console.info( slide.opts.$orig[0].dataset.src ); //Gets Video Path from clicked link
@ -104,6 +118,37 @@
slide.opts.$orig[0].childNodes[5].style.display = "inline"; // After closing set green thick!
});
// setup video play speed functions on modal open:
$(document).on('afterLoad.fb', function( e, instance, slide ) {
//console.info( "Works" );
const video = document.querySelector('video');
const speedControl = document.querySelector('.speedControl');
const indicator = document.querySelector('.indicator');
let mousedown = false;
speedControl.addEventListener('mousedown', () => mousedown = true);
speedControl.addEventListener('mouseup', () => mousedown = false);
speedControl.addEventListener('mouseleave', () => mousedown = false);
speedControl.addEventListener('mousemove', function(e) {
if (!mousedown) return;
const min = 0.5;
const max = 2;
const position = e.pageY - this.offsetTop;
const percent = position / this.offsetHeight;
const height = Math.floor(percent * 1000) / 10 + '%';
const playbackRate = percent * (max - min) + min;
if (playbackRate < 0.5) playbackRate = 0.5;
indicator.style.height = height;
indicator.innerText = playbackRate.toFixed(1) + 'x';
video.playbackRate = playbackRate;
});
});
</script>
</body>
</html>

@ -1,34 +1,37 @@
<?php
###############################################################
# Page Password Protect 1.3
# Page Password Protect 1.4
###############################################################
# By Michael R. - swiss
###############################################################
# LOGIN OVERRIDE FUNCTION FOR LOCAL ACCESS!
function getUserIP() {
function getUserIP()
{
$client = @$_SERVER['HTTP_CLIENT_IP'];
$forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote = $_SERVER['REMOTE_ADDR'];
if (filter_var($client, FILTER_VALIDATE_IP)) {
$ip = $client;
}
elseif(filter_var($forward, FILTER_VALIDATE_IP)) {
} elseif (filter_var($forward, FILTER_VALIDATE_IP)) {
$ip = $forward;
}
else {
} else {
$ip = $remote;
}
return $ip;
}
$user_ip = getUserIP();
//print("Your IP is: ".$user_ip); #FOR DEBUGGING!
$str = strrev($_SERVER['REQUEST_URI']);
$bits = explode('/', $str);
$script_path = strrev($bits[1]);
if ($user_ip != "83.150.6.68") {
# IF IP-ADRESS IS NOT MY IP, CONSTRUCT LOGIN-PAGE:
# IF IP-ADRESS IS NOT NETCLOUD INTERN, CONSTRUCT LOGIN-PAGE:
$adminPassword = "learn@m-it";
$adminPassword = "learn@mit-2021";
$LOGIN_INFORMATION = array($adminPassword);
defined('USE_USERNAME') or define('USE_USERNAME', false);
@ -43,290 +46,52 @@ if ($user_ip != "83.150.6.68") {
// logout?
if (isset($_GET['logout'])) {
setcookie("verify", '', $timeout, '/'); // clear password;
header('Location: ' . "/study/");
//header('Location: ' . "/$script_path");
header('Location: ' . "/study");
exit();
}
if (!function_exists('showLoginPasswordProtect')) {
// show login form
function showLoginPasswordProtect($error_msg) {
function showLoginPasswordProtect($error_msg)
{
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Please provide password!</title>
<title>Please provide MLP</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="theme-color" content="#191a1b" />
<link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--<link rel="stylesheet" href="css/login.css?random=<?php //echo uniqid(); ?>"> -->
<style>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-size: 62.5%;
height: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
html, body {
font-size: 50%;
}
}
svg {
display: inline-block;
width: 2rem;
height: 2rem;
overflow: visible;
}
.svg-icon {
cursor: pointer;
}
.svg-icon path {
stroke: rgba(255, 255, 255, 0.9);
fill: none;
stroke-width: 1;
}
input, button {
outline: none;
border: none;
}
.container {
position: relative;
height: 100%;
background-image: url("//www.blackgate.org/enjoy/img/wood.jpg");
background-size: cover;
overflow: auto;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.row {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15rem;
margin-top: -26.5rem;
width: 30rem;
height: 53rem;
overflow: hidden;
}
.login {
position: relative;
height: 100%;
background: -webkit-linear-gradient(top, rgba(113, 113, 113, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
background: linear-gradient(to bottom, rgba(113, 113, 113, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
-webkit-transform: scale(1);
transform: scale(1);
}
.login.inactive {
opacity: 0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.login__lock {
position: absolute;
top: 8rem;
left: 10rem;
width: 14rem;
height: 2.8rem;
font-size: 128px;
}
@media screen and (min-width: 769px) {
.login__lock {
font-size: 152px;
}
}
.login__check {
position: absolute;
top: 16rem;
left: 13.5rem;
width: 14rem;
height: 2.8rem;
background: #fff;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.login__check:before {
content: "";
position: absolute;
left: 0;
bottom: 100%;
width: 2.8rem;
height: 5.2rem;
background: #fff;
box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2);
}
.login__form {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
padding: 1.5rem 2.5rem;
text-align: center;
}
.login__row {
height: 5rem;
padding-top: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.login__icon {
margin-bottom: -0.4rem;
margin-right: 0.5rem;
}
.login__icon.name path {
stroke-dasharray: 73.50196075439453;
stroke-dashoffset: 73.50196075439453;
-webkit-animation: animatePath 2s 0.5s forwards;
animation: animatePath 2s 0.5s forwards;
}
.login__icon.pass path {
stroke-dasharray: 92.10662841796875;
stroke-dashoffset: 92.10662841796875;
-webkit-animation: animatePath 2s 0.5s forwards;
animation: animatePath 2s 0.5s forwards;
}
.login__input {
display: inline-block;
width: 22rem;
height: 100%;
padding-left: 1.5rem;
font-size: 1.5rem;
background: transparent;
color: #FDFCFD;
}
.login__submit {
position: relative;
width: 100%;
height: 4rem;
margin: 5rem 0 2.2rem;
color: rgba(255, 255, 255, 0.8);
background: #383838;
font-size: 1.5rem;
border-radius: 3rem;
cursor: pointer;
overflow: hidden;
-webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
}
.login__submit:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.5rem;
margin-top: -1.5rem;
width: 3rem;
height: 3rem;
border: 2px dotted #fff;
border-radius: 50%;
border-left: none;
border-bottom: none;
-webkit-transition: opacity 0.1s 0.4s;
transition: opacity 0.1s 0.4s;
opacity: 0;
}
.login__submit.processing {
width: 4rem;
font-size: 0;
}
.login__submit.processing:after {
opacity: 1;
-webkit-animation: rotate 0.5s 0.4s infinite linear;
animation: rotate 0.5s 0.4s infinite linear;
}
.login__submit.success {
-webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
-webkit-transform: scale(30);
transform: scale(30);
opacity: 0.9;
}
.login__submit.success:after {
-webkit-transition: opacity 0.1s 0s;
transition: opacity 0.1s 0s;
opacity: 0;
-webkit-animation: none;
animation: none;
}
.login__signup {
font-size: 1.2rem;
color: #ABA8AE;
}
.login__signup a {
color: #fff;
cursor: pointer;
}
.ripple {
position: absolute;
width: 15rem;
height: 15rem;
margin-left: -7.5rem;
margin-top: -7.5rem;
background: rgba(0, 0, 0, 0.4);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: animRipple 0.4s;
animation: animRipple 0.4s;
border-radius: 50%;
}
@-webkit-keyframes animRipple {
to {
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
}
@keyframes animRipple {
to {
-webkit-transform: scale(3.5);
transform: scale(3.5);
opacity: 0;
}
}
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}
@keyframes animatePath {
to {
stroke-dashoffset: 0;
}
}
</style>
<link href="assets/css/login.css?random=<?php echo uniqid(); ?>" rel="stylesheet" />
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setCookieDomain", "*.michu-it.com"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.michu-it.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '3']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="https://analytics.michu-it.com/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
</head>
<body onLoad="document.getElementsByTagName('input')[0].focus();"
<div class="container">
<body onLoad="document.getElementsByTagName('input')[0].focus();" <div class="container">
<div class="row">
<div class="login">
<!--<div class="login__check"></div>-->
<div class="login__lock"><i class="fa fa-lock" aria-hidden="true"></i></div>
<div class="login__lock">
<div class="netcloud-logo"></div>
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
<div class="login__form">
<form method="post">
@ -339,7 +104,7 @@ if ($user_ip != "83.150.6.68") {
<button type="submit" value="Submit" class="login__submit">Login</button>
</form>
<p class="login__signup">Please provide the correct password!</p>
<p class="login__signup">Please provide the michu-it learning password. Found in our internal wiki.</p>
<font color="red" style="font-size: x-small" ;><?php echo $error_msg; ?></font>
</div>
</div>
@ -364,7 +129,10 @@ if ($user_ip != "83.150.6.68") {
x = e.pageX - elLeft,
y = e.pageY - elTop;
var $ripple = $("<div class='ripple'></div>");
$ripple.css({top: y, left: x});
$ripple.css({
top: y,
left: x
});
elem.append($ripple);
};
@ -394,6 +162,7 @@ if ($user_ip != "83.150.6.68") {
</script>
</body>
</html>
<?php
@ -405,12 +174,12 @@ if ($user_ip != "83.150.6.68") {
if (isset($_POST['access_password'])) {
$login = isset($_POST['access_login']) ? $_POST['access_login'] : '';
$pass = $_POST['access_password'];
if (!USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION)
if (
!USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION)
|| (USE_USERNAME && (!array_key_exists($login, $LOGIN_INFORMATION) || $LOGIN_INFORMATION[$login] != $pass))
) {
showLoginPasswordProtect("wrong password!");
}
else {
} else {
// set cookie if password was validated
setcookie("verify", md5($login . '%' . $pass), $timeout, '/');
@ -419,10 +188,10 @@ if ($user_ip != "83.150.6.68") {
unset($_POST['access_login']);
unset($_POST['access_password']);
unset($_POST['Submit']);
header('Location: ' . $logoutURL . '/study/');
}
//header('Location: ' . $logoutURL . "/$script_path");
header('Location: ' . $logoutURL . "/study");
}
else {
} else {
// check if password cookie is set
if (!isset($_COOKIE['verify'])) {
showLoginPasswordProtect("");

File diff suppressed because it is too large Load Diff

@ -0,0 +1,3 @@
<?php
phpinfo();
?>

@ -5,7 +5,8 @@ $dir = "Home";
$response = scan($dir);
// This function scans the files folder recursively, and builds a large array
function scan($dir){
function scan($dir)
{
$files = array();
@ -29,8 +30,7 @@ function scan($dir){
"items" => scan($dir . '/' . $f) // Recursively get the contents of the folder
);
}
}
else if (is_file($dir . '/' . $f)) {
} else if (is_file($dir . '/' . $f)) {
// It is a file
$files[] = array(
"name" => $f,
@ -40,7 +40,6 @@ function scan($dir){
);
}
}
}
return $files;

Loading…
Cancel
Save