michael/web-learning-manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update to maintainer version

Browse Source
This commit is contained in:
Michael Reber 2022-07-03 22:27:47 +02:00
parent 5cd558eb6c
commit 13c0db3539
12 changed files with 5155 additions and 835 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

7
README.md
View File

@ -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.

306
assets/css/login.css Normal file
View File

@ -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;
}
}

512
assets/css/styles.css
View File

@ -1,32 +1,43 @@
@charset "utf-8"; @charset "utf-8";
/*------------------------- /*-------------------------
Simple reset Simple reset
--------------------------*/ --------------------------*/
*{ * {
margin:0; margin: 0;
padding:0; padding: 0;
font-family: system-ui; font-family: system-ui;
} }
html { html {
/* Full height */ /* Full height */
height: 100%; height: 100%;
/* The image used */ /* The image used */
background-image: url("../../images/background.jpg"); background-image: url("../../assets/images/background.jpg");
background-color: #373743;
background-color: #373743; /* Center and scale the image nicely */
/* Center and scale the image nicely */ background-position: center center;
background-position: center center; background-size: cover;
background-size: cover;
font: 14px normal Arial, Helvetica, sans-serif; font: 14px normal Arial, Helvetica, sans-serif;
z-index: -4; z-index: -4;
overflow-y: scroll; 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 File manager
@ -34,9 +45,11 @@ html {
.filemanager { .filemanager {
width: 95%; width: 95%;
max-width:1340px; max-width: 1340px;
min-height: 500px;
position: relative; position: relative;
margin: 30px auto 50px; margin: 30px auto 50px;
background-color: rgb(0 0 0 / 40%);
} }
@media all and (max-width: 965px) { @media all and (max-width: 965px) {
@ -49,24 +62,93 @@ html {
.filemanager .header { .filemanager .header {
font-size: large; font-size: large;
height: 30px; height: 30px;
background-color: beige; background-color: #002751!important;
text-align: center; text-align: center;
padding-top: 5px; padding-top: 5px;
color: white;
font-weight: 700;
} }
#nowWatched { #nowWatched {
display: none; display: none;
} }
.fancybox-slide { .fancybox-slide {
padding: 20px 50px !important; 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 Breadcrumps
-------------------------*/ -------------------------*/
.filemanager .breadcrumbs { .filemanager .breadcrumbs {
color: #ffffff; color: #ffffff;
margin-left:20px; margin-left: 20px;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 35px; line-height: 35px;
@ -82,13 +164,12 @@ html {
} }
.filemanager .breadcrumbs .arrow { .filemanager .breadcrumbs .arrow {
color: #6a6a72; color: #6a6a72;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 20px; line-height: 20px;
} }
/*------------------------- /*-------------------------
Search box Search box
-------------------------*/ -------------------------*/
@ -104,12 +185,13 @@ html {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-top: 6px; margin-top: 6px;
margin-right: 15px;
} }
.filemanager .search:before { .filemanager .search:before {
content: ''; content: '';
position: absolute; position: absolute;
margin-top:12px; margin-top: 12px;
width: 10px; width: 10px;
height: 11px; height: 11px;
border-radius: 50%; border-radius: 50%;
@ -149,21 +231,27 @@ html {
-webkit-appearance: none; -webkit-appearance: none;
} }
::-webkit-input-placeholder { /* WebKit browsers */ ::-webkit-input-placeholder {
color: #4d535e; /* WebKit browsers */
} color: #4d535e;
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #4d535e;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #4d535e;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #4d535e;
} }
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #4d535e;
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #4d535e;
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #4d535e;
}
/*------------------------- /*-------------------------
Content area Content area
@ -175,8 +263,10 @@ html {
} }
.filemanager .data.animated { .filemanager .data.animated {
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */ -webkit-animation: showSlowlyElement 700ms;
animation: showSlowlyElement 700ms; /* Standard syntax */ /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms;
/* Standard syntax */
} }
.filemanager .data li { .filemanager .data li {
@ -252,20 +342,23 @@ html {
margin: 0 auto; margin: 0 auto;
display: none; display: none;
font-family: Arial; font-family: Arial;
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */ -webkit-animation: showSlowlyElement 700ms;
animation: showSlowlyElement 700ms; /* Standard syntax */ /* Chrome, Safari, Opera */
animation: showSlowlyElement 700ms;
/* Standard syntax */
} }
.filemanager .nothingfound .nofiles { .filemanager .nothingfound .nofiles {
margin: 30px auto; margin: 30px auto;
top: 3em; top: 3em;
border-radius: 50%; border-radius: 50%;
position:relative; position: relative;
background-color: #d72f6e; background-color: #d72f6e;
width: 11em; width: 11em;
height: 11em; height: 11em;
line-height: 11.4em; line-height: 11.4em;
} }
.filemanager .nothingfound .nofiles:after { .filemanager .nothingfound .nofiles:after {
content: '×'; content: '×';
position: absolute; position: absolute;
@ -287,26 +380,37 @@ html {
} }
@media all and (max-width:965px) { @media all and (max-width:965px) {
.filemanager .data li { .filemanager .data li {
width: 100%; width: 100%;
margin: 5px 0; margin: 5px 0;
} }
} }
/* Chrome, Safari, Opera */ /* Chrome, Safari, Opera */
@-webkit-keyframes showSlowlyElement { @-webkit-keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; } 100% {
0% { transform: scale(1.2); opacity: 0; } transform: scale(1);
opacity: 1;
}
0% {
transform: scale(1.2);
opacity: 0;
}
} }
/* Standard syntax */ /* Standard syntax */
@keyframes showSlowlyElement {
100% { transform: scale(1); opacity: 1; }
0% { transform: scale(1.2); opacity: 0; }
}
@keyframes showSlowlyElement {
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(1.2);
opacity: 0;
}
}
/*------------------------- /*-------------------------
Icons Icons
@ -315,42 +419,41 @@ html {
.icon { .icon {
font-size: 23px; font-size: 23px;
} }
.icon.folder { .icon.folder {
display: inline-block; display: inline-block;
margin: 1em 0.3em 0em 1em; margin: 1em 0.3em 0em 1em;
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
} }
.icon.folder:before { .icon.folder:before {
content: ''; content: '';
float: left; float: left;
background-color: #7ba1ad; background-color: #002751!important;
width: 1.5em; width: 1.5em;
height: 0.45em; height: 0.45em;
margin-left: 0.07em; margin-left: 0.07em;
margin-bottom: -0.07em; margin-bottom: -0.07em;
border-top-left-radius: 0.1em; border-top-left-radius: 0.1em;
border-top-right-radius: 0.1em; border-top-right-radius: 0.1em;
box-shadow: 1.25em 0.25em 0 0em #002751!important;
box-shadow: 1.25em 0.25em 0 0em #7ba1ad;
} }
.icon.folder:after { .icon.folder:after {
content: ''; content: '';
float: left; float: left;
clear: left; clear: left;
background-color: #01356d!important;
background-color: #a0d4e4;
width: 3em; width: 3em;
height: 2.25em; height: 2.25em;
border-radius: 0.1em; border-radius: 0.1em;
} }
.icon.folder.full:before { .icon.folder.full:before {
height: 0.55em; height: 0.55em;
} }
.icon.folder.full:after { .icon.folder.full:after {
height: 2.15em; height: 2.15em;
box-shadow: 0 -0.12em 0 0 #ffffff; box-shadow: 0 -0.12em 0 0 #ffffff;
@ -369,10 +472,12 @@ html {
overflow: hidden; overflow: hidden;
box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset; box-shadow: 1.74em -2.1em 0 0 #A4A7AC inset;
} }
.icon.file:first-line { .icon.file:first-line {
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
} }
.icon.file:after { .icon.file:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -384,129 +489,75 @@ html {
right: -4px; right: -4px;
} }
.icon.file.f-avi, .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-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; box-shadow: 1.74em -2.1em 0 0 #7e70ee inset;
} }
.icon.file.f-avi:after,
.icon.file.f-flv: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 {
.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; border-bottom-color: #5649c1;
} }
.icon.file.f-mp2, .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-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; box-shadow: 1.74em -2.1em 0 0 #5bab6e inset;
} }
.icon.file.f-mp2:after,
.icon.file.f-mp3: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 {
.icon.file.f-m3u:after,
.icon.file.f-wma:after,
.icon.file.f-xls:after,
.icon.file.f-xlsx:after {
border-bottom-color: #448353; border-bottom-color: #448353;
} }
.icon.file.f-doc, .icon.file.f-doc, .icon.file.f-docx, .icon.file.f-psd {
.icon.file.f-docx,
.icon.file.f-psd{
box-shadow: 1.74em -2.1em 0 0 #03689b inset; box-shadow: 1.74em -2.1em 0 0 #03689b inset;
} }
.icon.file.f-doc:after, .icon.file.f-doc:after, .icon.file.f-docx:after, .icon.file.f-psd:after {
.icon.file.f-docx:after,
.icon.file.f-psd:after {
border-bottom-color: #2980b9; border-bottom-color: #2980b9;
} }
.icon.file.f-gif, .icon.file.f-gif, .icon.file.f-jpg, .icon.file.f-jpeg, .icon.file.f-pdf, .icon.file.f-png {
.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; box-shadow: 1.74em -2.1em 0 0 #e15955 inset;
} }
.icon.file.f-gif:after,
.icon.file.f-jpg: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 {
.icon.file.f-jpeg:after,
.icon.file.f-pdf:after,
.icon.file.f-png:after {
border-bottom-color: #c6393f; border-bottom-color: #c6393f;
} }
.icon.file.f-deb, .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-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; box-shadow: 1.74em -2.1em 0 0 #867c75 inset;
} }
.icon.file.f-deb:after,
.icon.file.f-dmg: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 {
.icon.file.f-gz:after,
.icon.file.f-rar:after,
.icon.file.f-zip:after,
.icon.file.f-7z:after {
border-bottom-color: #685f58; border-bottom-color: #685f58;
} }
.icon.file.f-html, .icon.file.f-html, .icon.file.f-rtf, .icon.file.f-xml, .icon.file.f-xhtml {
.icon.file.f-rtf,
.icon.file.f-xml,
.icon.file.f-xhtml {
box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset; box-shadow: 1.74em -2.1em 0 0 #a94bb7 inset;
} }
.icon.file.f-html:after,
.icon.file.f-rtf:after, .icon.file.f-html:after, .icon.file.f-rtf:after, .icon.file.f-xml:after, .icon.file.f-xhtml:after {
.icon.file.f-xml:after,
.icon.file.f-xhtml:after {
border-bottom-color: #d65de8; border-bottom-color: #d65de8;
} }
.icon.file.f-js { .icon.file.f-js {
box-shadow: 1.74em -2.1em 0 0 #d0c54d inset; box-shadow: 1.74em -2.1em 0 0 #d0c54d inset;
} }
.icon.file.f-js:after { .icon.file.f-js:after {
border-bottom-color: #a69f4e; border-bottom-color: #a69f4e;
} }
.icon.file.f-css, .icon.file.f-css, .icon.file.f-saas, .icon.file.f-scss {
.icon.file.f-saas,
.icon.file.f-scss {
box-shadow: 1.74em -2.1em 0 0 #44afa6 inset; box-shadow: 1.74em -2.1em 0 0 #44afa6 inset;
} }
.icon.file.f-css:after,
.icon.file.f-saas:after, .icon.file.f-css:after, .icon.file.f-saas:after, .icon.file.f-scss:after {
.icon.file.f-scss:after {
border-bottom-color: #30837c; border-bottom-color: #30837c;
} }
/*---------------------------- /*----------------------------
The Demo Footer The Demo Footer
-----------------------------*/ -----------------------------*/
footer { footer {
width: 770px; width: 770px;
font: normal 16px Arial, Helvetica, sans-serif; font: normal 16px Arial, Helvetica, sans-serif;
padding: 15px 35px; padding: 15px 35px;
@ -514,28 +565,26 @@ footer {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -420px; margin-left: -420px;
background-color: #1f1f1f;
background-color:#1f1f1f; background-image: linear-gradient(to bottom, #1f1f1f, #101010);
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);
border-radius:2px 2px 0 0; z-index: 1;
box-shadow: 0 -1px 4px rgba(0,0,0,0.4);
z-index:1;
} }
footer a.tz{ footer a.tz {
font-weight:normal; font-weight: normal;
font-size:16px !important; font-size: 16px !important;
text-decoration:none !important; text-decoration: none !important;
display:block; display: block;
margin-right: 300px; margin-right: 300px;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color:#bfbfbf !important; color: #bfbfbf !important;
z-index:1; z-index: 1;
} }
footer a.tz:before{ footer a.tz:before {
content: ''; content: '';
width: 138px; width: 138px;
height: 20px; height: 20px;
@ -544,17 +593,17 @@ footer a.tz:before{
bottom: -3px; bottom: -3px;
} }
footer .close{ footer .close {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
width: 8px; width: 8px;
height: 8px; height: 8px;
top:10px; top: 10px;
right:10px; right: 10px;
z-index: 3; z-index: 3;
} }
footer #tzine-actions{ footer #tzine-actions {
position: absolute; position: absolute;
top: 8px; top: 8px;
width: 500px; width: 500px;
@ -564,7 +613,7 @@ footer #tzine-actions{
z-index: 2; z-index: 2;
} }
footer #tzine-actions iframe{ footer #tzine-actions iframe {
display: inline-block; display: inline-block;
height: 21px; height: 21px;
width: 95px; width: 95px;
@ -574,84 +623,95 @@ footer #tzine-actions iframe{
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
#bsaHolder, footer{ display:none;} #bsaHolder, footer {
display: none;
}
} }
/* Popup Test */ /* Popup Test */
.popup { .popup {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
/* The actual popup */ /* The actual popup */
.popup .popuptext { .popup .popuptext {
visibility: hidden; visibility: hidden;
width: 160px; width: 160px;
background-color: #555; background-color: #555;
color: #fff; color: #fff;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
padding: 8px 0; padding: 8px 0;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 125%; bottom: 125%;
left: 50%; left: 50%;
margin-left: -80px; margin-left: -80px;
} }
/* Popup arrow */ /* Popup arrow */
.popup .popuptext::after { .popup .popuptext::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
border-color: #555 transparent transparent transparent; border-color: #555 transparent transparent transparent;
} }
/* Toggle this class - hide and show the popup */ /* Toggle this class - hide and show the popup */
.popup .show { .popup .show {
visibility: visible; visibility: visible;
-webkit-animation: fadeIn 1s; -webkit-animation: fadeIn 1s;
animation: fadeIn 1s; animation: fadeIn 1s;
} }
/* Add animation (fade in the popup) */ /* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn { @-webkit-keyframes fadeIn {
from {opacity: 0;} from {
to {opacity: 1;} opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes fadeIn { @keyframes fadeIn {
from {opacity: 0;} from {
to {opacity:1 ;} opacity: 0;
}
to {
opacity: 1;
}
} }
.button { .button {
background-color: #373743; background-color: #373743;
border: none; border: none;
color: white; color: white;
padding: 15px 32px; padding: 15px 32px;
margin-left: 10px; margin-left: 10px;
margin-top:40px; margin-top: 40px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
width: 200px; width: 200px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
transition: 0.3s background-color; transition: 0.3s background-color;
@ -665,16 +725,48 @@ footer #tzine-actions iframe{
min-height: 700px; min-height: 700px;
} }
/* michu naming fixes:*/ /* naming fixes:*/
.filemanager .data li .name { .filemanager .data li .name {
width: 194px; width: 194px;
top: 22px; top: 22px;
white-space: inherit; white-space: inherit;
margin-left: 12px; margin-left: 12px;
} }
.icon.file { .icon.file {
margin: 0.9em 0.6em 0.8em 0.6em; margin: 0.9em 0.6em 0.8em 0.6em;
/*margin: 5px 0px 0px -60px;*/ /*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;
}

0
images/background.jpg → assets/images/background.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 827 KiB

After

Width:  |  Height:  |  Size: 827 KiB

BIN
assets/images/michu-it_logo_weiss.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

206
assets/js/script.js
View File

@ -1,11 +1,11 @@
$(function(){ $(function () {
var filemanager = $('.filemanager'), var filemanager = $('.filemanager'),
breadcrumbs = $('.breadcrumbs'), breadcrumbs = $('.breadcrumbs'),
fileList = filemanager.find('.data'); fileList = filemanager.find('.data');
// Start by fetching the file data from scan.php with an AJAX request // Start by fetching the file data from scan.php with an AJAX request
$.get('scan.php', function(data) { $.get('scan.php', function (data) {
var response = [data], var response = [data],
currentPath = '', currentPath = '',
@ -17,7 +17,7 @@ $(function(){
// This event listener monitors changes on the URL. We use it to // This event listener monitors changes on the URL. We use it to
// capture back/forward navigation in the browser. // capture back/forward navigation in the browser.
$(window).on('hashchange', function(){ $(window).on('hashchange', function () {
goto(window.location.hash); goto(window.location.hash);
@ -26,9 +26,8 @@ $(function(){
}).trigger('hashchange'); }).trigger('hashchange');
// Hiding and showing the search box // Hiding and showing the search box
filemanager.find('.search').click(function(){ filemanager.find('.search').click(function () {
var search = $(this); var search = $(this);
@ -36,19 +35,18 @@ $(function(){
search.find('input[type=search]').show().focus(); search.find('input[type=search]').show().focus();
}); });
// Listening for keyboard input on the search field. // Listening for keyboard input on the search field.
// We are using the "input" event which detects cut and paste // We are using the "input" event which detects cut and paste
// in addition to keyboard input. // in addition to keyboard input.
filemanager.find('input').on('input', function(e){ filemanager.find('input').on('input', function (e) {
folders = []; folders = [];
files = []; files = [];
var value = this.value.trim(); var value = this.value.trim();
if(value.length) { if (value.length) {
filemanager.addClass('searching'); filemanager.addClass('searching');
@ -60,21 +58,21 @@ $(function(){
window.location.hash = encodeURIComponent(currentPath); window.location.hash = encodeURIComponent(currentPath);
} }
}).on('keyup', function(e){ }).on('keyup', function (e) {
// Clicking 'ESC' button triggers focusout and cancels the search // Clicking 'ESC' button triggers focusout and cancels the search
var search = $(this); var search = $(this);
if(e.keyCode == 27) { if (e.keyCode == 27) {
search.trigger('focusout'); search.trigger('focusout');
} }
}).focusout(function(e){ }).focusout(function (e) {
// Cancel the search // Cancel the search
var search = $(this); var search = $(this);
if(!search.val().trim().length) { if (!search.val().trim().length) {
window.location.hash = encodeURIComponent(currentPath); window.location.hash = encodeURIComponent(currentPath);
search.hide(); search.hide();
@ -82,14 +80,13 @@ $(function(){
} }
}); });
// Clicking on folders // Clicking on folders
fileList.on('click', 'li.folders', function(e){ fileList.on('click', 'li.folders', function (e) {
e.preventDefault(); e.preventDefault();
var nextDir = $(this).find('a.folders').attr('href'); var nextDir = $(this).find('a.folders').attr('href');
if(filemanager.hasClass('searching')) { if (filemanager.hasClass('searching')) {
// Building the breadcrumbs // Building the breadcrumbs
breadcrumbsUrls = generateBreadcrumbs(nextDir); breadcrumbsUrls = generateBreadcrumbs(nextDir);
@ -106,9 +103,8 @@ $(function(){
currentPath = nextDir; currentPath = nextDir;
}); });
// Clicking on breadcrumbs // Clicking on breadcrumbs
breadcrumbs.on('click', 'a', function(e){ breadcrumbs.on('click', 'a', function (e) {
e.preventDefault(); e.preventDefault();
var index = breadcrumbs.find('a').index($(this)), var index = breadcrumbs.find('a').index($(this)),
@ -121,19 +117,19 @@ $(function(){
}); });
function getCookie(cname) { function getCookie(cname) {
var name = cname + "="; var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie); var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';'); var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) { for (var i = 0; i < ca.length; i++) {
var c = ca[i]; var c = ca[i];
while (c.charAt(0) == ' ') { while (c.charAt(0) == ' ') {
c = c.substring(1); c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
} }
if (c.indexOf(name) == 0) { return "";
return c.substring(name.length, c.length);
}
}
return "";
} }
// Navigates to the given hash (path) // Navigates to the given hash (path)
@ -187,10 +183,10 @@ $(function(){
} }
// Splits a file path and turns it into clickable breadcrumbs // Splits a file path and turns it into clickable breadcrumbs
function generateBreadcrumbs(nextDir){ function generateBreadcrumbs(nextDir) {
var path = nextDir.split('/').slice(0); var path = nextDir.split('/').slice(0);
for(var i=1;i<path.length;i++){ for (var i = 1; i < path.length; i++) {
path[i] = path[i-1]+ '/' +path[i]; path[i] = path[i - 1] + '/' + path[i];
} }
return path; return path;
} }
@ -202,9 +198,9 @@ $(function(){
demo = response, demo = response,
flag = 0; flag = 0;
for(var i=0;i<path.length;i++){ for (var i = 0; i < path.length; i++) {
for(var j=0;j<demo.length;j++){ for (var j = 0; j < demo.length; j++) {
if(demo[j].name === path[i]){ if (demo[j].name === path[i]) {
flag = 1; flag = 1;
demo = demo[j].items; demo = demo[j].items;
break; break;
@ -219,22 +215,22 @@ $(function(){
// Recursively search through the file tree // Recursively search through the file tree
function searchData(data, searchTerms) { function searchData(data, searchTerms) {
data.forEach(function(d){ data.forEach(function (d) {
if(d.type === 'folder') { if (d.type === 'folder') {
searchData(d.items,searchTerms); searchData(d.items, searchTerms);
if(d.name.toLowerCase().match(searchTerms)) { if (d.name.toLowerCase().match(searchTerms)) {
folders.push(d); folders.push(d);
} }
} }
else if(d.type === 'file') { else if (d.type === 'file') {
if(d.name.toLowerCase().match(searchTerms)) { if (d.name.toLowerCase().match(searchTerms)) {
files.push(d); files.push(d);
} }
} }
}); });
return {folders: folders, files: files}; return { folders: folders, files: files };
} }
@ -244,7 +240,7 @@ $(function(){
var scannedFolders = [], var scannedFolders = [],
scannedFiles = []; scannedFiles = [];
if(Array.isArray(data)) { if (Array.isArray(data)) {
data.forEach(function (d) { data.forEach(function (d) {
@ -257,7 +253,7 @@ $(function(){
}); });
} }
else if(typeof data === 'object') { else if (typeof data === 'object') {
scannedFolders = data.folders; scannedFolders = data.folders;
scannedFiles = data.files; scannedFiles = data.files;
@ -267,131 +263,128 @@ $(function(){
// Empty the old result and make the new one // Empty the old result and make the new one
fileList.empty().hide(); fileList.empty().hide();
if(!scannedFolders.length && !scannedFiles.length) { if (!scannedFolders.length && !scannedFiles.length) {
filemanager.find('.nothingfound').show(); filemanager.find('.nothingfound').show();
} }
else { else {
filemanager.find('.nothingfound').hide(); filemanager.find('.nothingfound').hide();
} }
if(scannedFolders.length) { if (scannedFolders.length) {
scannedFolders.forEach(function(f) { scannedFolders.forEach(function (f) {
var itemsLength = f.items.length, var itemsLength = f.items.length,
name = escapeHTML(f.name), name = escapeHTML(f.name),
icon = '<span class="icon folder"></span>'; icon = '<span class="icon folder"></span>';
// Function need to checked by MR! -> Otherwise delete!!! // Function need to checked by MR! -> Otherwise delete!!!
// icon = '<span class="icon folder"></span>', // icon = '<span class="icon folder"></span>',
// iconpath = 'images/icons/' + f.path + '.png'; // iconpath = 'images/icons/' + f.path + '.png';
// function imageExists(image_url){
// var http = new XMLHttpRequest();
// http.open('HEAD', image_url, false); // function imageExists(image_url){
// http.send();
// // var http = new XMLHttpRequest();
// return http.status != 404;
// } // http.open('HEAD', image_url, false);
// http.send();
// if (imageExists(iconpath)) { //
// icon = '<div style="display:inline-block;margin:5px 5px 5px 5px;border-radius:8px;width:100px;height:100px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' +iconpath + '\');"></div>'; // return http.status != 404;
// } else if(itemsLength) { // }
// icon = '<span class="icon folder full"></span>';
// } // if (imageExists(iconpath)) {
// icon = '<div style="display:inline-block;margin:5px 5px 5px 5px;border-radius:8px;width:100px;height:100px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' +iconpath + '\');"></div>';
if(itemsLength) { // } else if(itemsLength) {
// icon = '<span class="icon folder full"></span>';
// }
if (itemsLength) {
icon = '<span class="icon folder full"></span>'; icon = '<span class="icon folder full"></span>';
} }
if(itemsLength == 1) { if (itemsLength == 1) {
itemsLength += ' item'; itemsLength += ' item';
} }
else if(itemsLength > 1) { else if (itemsLength > 1) {
itemsLength += ' items'; itemsLength += ' items';
} }
else { else {
itemsLength = 'Empty'; 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) fileList.append(folder)
}); });
} }
if(scannedFiles.length) { if (scannedFiles.length) {
scannedFiles.forEach(function(f) { scannedFiles.forEach(function (f) {
var fileSize = bytesToSize(f.size), var fileSize = bytesToSize(f.size),
name = escapeHTML(f.name), name = escapeHTML(f.name),
fileType = name.split('.'), fileType = name.split('.'),
icon = '<span class="icon file"></span>'; icon = '<span class="icon file"></span>';
fileType = fileType[fileType.length-1]; fileType = fileType[fileType.length - 1];
if (fileType == "db") { if (fileType == "db") {
return; return;
} }
if (fileType == "jpg") { if (fileType == "jpg") {
icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>'; icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>';
var file = $('<li class="files"><a data-fancybox="images" href="'+ f.path+'" title="'+ f.path +'" target="_blank" class="files">'+icon+'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span></a></li>'); var file = $('<li class="files"><a data-fancybox="images" href="' + f.path + '" title="' + f.path + '" target="_blank" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>');
} else if (fileType == "jpeg") { } else if (fileType == "jpeg") {
icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>'; icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>';
var file = $('<li class="files"><a data-fancybox="images" href="'+ f.path+'" title="'+ f.path +'" target="_blank" class="files">'+icon+'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span></a></li>');file.appendTo(fileList); var file = $('<li class="files"><a data-fancybox="images" href="' + f.path + '" title="' + f.path + '" target="_blank" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>'); file.appendTo(fileList);
} else if (fileType == "png") { } else if (fileType == "png") {
icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>'; icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>';
var file = $('<li class="files"><a data-fancybox="images" href="'+ f.path+'" title="'+ f.path +'" class="files">'+icon+'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span></a></li>');file.appendTo(fileList); var file = $('<li class="files"><a data-fancybox="images" href="' + f.path + '" title="' + f.path + '" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>'); file.appendTo(fileList);
} else if (fileType == "gif") { } else if (fileType == "gif") {
icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>'; icon = '<div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(\'' + f.path + '\');"></div>';
var file = $('<li class="files"><a data-fancybox="images" href="'+ f.path+'" title="'+ f.path +'" class="files">'+icon+'<span class="name">'+ name +'</span> <span class="details">'+fileSize+'</span></a></li>');file.appendTo(fileList); var file = $('<li class="files"><a data-fancybox="images" href="' + f.path + '" title="' + f.path + '" class="files">' + icon + '<span class="name">' + name + '</span> <span class="details">' + fileSize + '</span></a></li>'); file.appendTo(fileList);
} else { } else {
icon = '<span class="icon file f-'+fileType+'">.'+fileType+'</span>'; icon = '<span class="icon file f-' + fileType + '">.' + fileType + '</span>';
} }
if (fileType == "mp4") { if (fileType == "mp4") {
// adding watched courses to cookie information - dev // adding watched courses to cookie information - dev
//var arr = ['001 - Course Introduction.mp4', 'bar', 'Home/IT Basics and Sysadmin Topics/DNS and BIND Deep Dive/004 - DNS Concepts - Terms and Definitions.mp4']; //var arr = ['001 - Course Introduction.mp4', 'bar', 'Home/IT Basics and Sysadmin Topics/DNS and BIND Deep Dive/004 - DNS Concepts - Terms and Definitions.mp4'];
//var json_str = JSON.stringify(arr); //var json_str = JSON.stringify(arr);
//setCookie('watchedVideoArray', json_str); //setCookie('watchedVideoArray', json_str);
var style = "";
var style="";
// https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163 // https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163
// get saved cookie information // get saved cookie information
var json_str=getCookie("watchedVideoArray"); var json_str = getCookie("watchedVideoArray");
if (json_str != "") { if (json_str != "") {
var arr_watchstatus = JSON.parse(json_str); var arr_watchstatus = JSON.parse(json_str);
if (arr_watchstatus.includes(f.path)) { if (arr_watchstatus.includes(f.path)) {
style='style="display: inline;"'; style = 'style="display: inline;"';
} }
} }
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 { } 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>'); 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>');
} }
file.appendTo(fileList); file.appendTo(fileList);
}); });
} }
// Generate the breadcrumbs // Generate the breadcrumbs
var url = ''; var url = '';
if(filemanager.hasClass('searching')){ if (filemanager.hasClass('searching')) {
url = '<span>Search results: </span>'; url = '<span>Search results: </span>';
fileList.removeClass('animated'); fileList.removeClass('animated');
@ -405,29 +398,28 @@ $(function(){
var name = u.split('/'); var name = u.split('/');
if (i !== breadcrumbsUrls.length - 1) { if (i !== breadcrumbsUrls.length - 1) {
url += '<a href="'+u+'"><span class="folderName">' + name[name.length-1] + '</span></a> <span class="arrow">→</span> '; url += '<a href="' + u + '"><span class="folderName">' + name[name.length - 1] + '</span></a> <span class="arrow">→</span> ';
document.getElementById("backButton").href = "#"+u; document.getElementById("backButton").href = "#" + u;
} }
else { else {
url += '<span class="folderName">' + name[name.length-1] + '</span>'; url += '<span class="folderName">' + name[name.length - 1] + '</span>';
} }
}); });
} }
breadcrumbs.text('').append(url); breadcrumbs.text('').append(url);
// Show the generated elements // Show the generated elements and hide loader
fileList.fadeIn(); document.querySelector(".loader").style.display = "none";
fileList.fadeIn();
} }
// This function escapes special html characters in names // This function escapes special html characters in names
function escapeHTML(text) { function escapeHTML(text) {
return text.replace(/\&/g,'&amp;').replace(/\</g,'&lt;').replace(/\>/g,'&gt;'); return text.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
} }
// Convert file sizes from bytes to human readable units // Convert file sizes from bytes to human readable units
function bytesToSize(bytes) { function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];

225
index.php
View File

@ -1,109 +1,154 @@
<?php <?php
require(__DIR__.'/login.php'); require(__DIR__ . '/login.php');
define('PROJECT_ROOT', getcwd()); define('PROJECT_ROOT', getcwd());
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head lang="en">
<title>MIT Learning Manager 2.5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <head lang="en">
<!-- Include our stylesheets --> <title>Michu IT Learning Manager 2.0</title>
<link href="assets/css/styles.css?random=<?php echo uniqid(); ?>" rel="stylesheet"/> <meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Font Awesome --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <!-- 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" />
<!-- Matomo --> <!-- Matomo -->
<script type="text/javascript"> <script type="text/javascript">
var _paq = window._paq = window._paq || []; var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */ /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']); _paq.push(["setCookieDomain", "*.michu-it.com"]);
_paq.push(['enableLinkTracking']); _paq.push(['trackPageView']);
(function() { _paq.push(['enableLinkTracking']);
var u="https://analytics.michu-it.com/"; (function() {
_paq.push(['setTrackerUrl', u+'matomo.php']); var u="https://analytics.michu-it.com/";
_paq.push(['setSiteId', '3']); _paq.push(['setTrackerUrl', u+'matomo.php']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; _paq.push(['setSiteId', '3']);
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); 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> </script>
<!-- End Matomo Code --> <noscript><p><img src="https://analytics.michu-it.com/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
</head> <!-- End Matomo Code -->
<body>
<div class="filemanager">
<div class="header">
MIT 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>
<ul class="data"></ul> </head>
<div class="nothingfound">
<div class="nofiles"></div> <body>
<span>Error! - No files here.</span> <div class="filemanager">
</div> <div class="header">
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>
<span>Error! - No files here.</span>
</div> </div>
<!-- Include our script files --> </div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="assets/js/script.js?random=<?php echo uniqid(); ?>"></script> <!-- Include our script files -->
<!-- FancyBox --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <script src="assets/js/script.js?random=<?php echo uniqid(); ?>"></script>
<script type="text/javascript"> <!-- FancyBox -->
function getCookie(cname) { <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
var name = cname + "="; <script type="text/javascript">
var decodedCookie = decodeURIComponent(document.cookie); function getCookie(cname) {
var ca = decodedCookie.split(';'); var name = cname + "=";
for(var i = 0; i < ca.length; i++) { var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i]; var c = ca[i];
while (c.charAt(0) == ' ') { while (c.charAt(0) == ' ') {
c = c.substring(1); c = c.substring(1);
} }
if (c.indexOf(name) == 0) { if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length); return c.substring(name.length, c.length);
} }
}
return "";
}
function setCookie(cname,cvalue) {
document.cookie = cname + "=" + cvalue + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
} }
return "";
}
// initialize array only if emty function setCookie(cname, cvalue) {
var json_str=getCookie("watchedVideoArray"); document.cookie = cname + "=" + cvalue + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
if (json_str == "") { }
// If never used this page create an initial array
var arr_watchstatus = [
"netcloud-init"
];
} else {
// Decode allready watched elements from cookie
var arr_watchstatus = JSON.parse(json_str);
}
$(document).on('afterClose.fb', function( e, instance, slide ) { // initialize array only if emty
console.info( slide.opts.$orig ); var json_str = getCookie("watchedVideoArray");
//console.info( slide.opts.$orig[0].dataset.src ); //Gets Video Path from clicked link if (json_str == "") {
// If never used this page create an initial array
var arr_watchstatus = [
"netcloud-init"
];
} else {
// Decode allready watched elements from cookie
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>";
// append new value to the array $(document).on('afterClose.fb', function(e, instance, slide) {
arr_watchstatus.push(slide.opts.$orig[0].dataset.src); // adds new video path to array! console.info(slide.opts.$orig);
var json_str = JSON.stringify(arr_watchstatus); // JSON encodes the array //console.info( slide.opts.$orig[0].dataset.src ); //Gets Video Path from clicked link
setCookie('watchedVideoArray', json_str); // Set new JSON Value to cookie
//parent.location.reload(true); // append new value to the array
arr_watchstatus.push(slide.opts.$orig[0].dataset.src); // adds new video path to array!
slide.opts.$orig[0].childNodes[5].style.display = "inline"; // After closing set green thick! var json_str = JSON.stringify(arr_watchstatus); // JSON encodes the array
setCookie('watchedVideoArray', json_str); // Set new JSON Value to cookie
//parent.location.reload(true);
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> </script>
</html> </body>
</html>

595
login.php
View File

@ -1,36 +1,39 @@
<?php <?php
############################################################### ###############################################################
# Page Password Protect 1.3 # Page Password Protect 1.4
############################################################### ###############################################################
# By Michael R. - swiss # By Michael R. - swiss
############################################################### ###############################################################
# LOGIN OVERRIDE FUNCTION FOR LOCAL ACCESS! # LOGIN OVERRIDE FUNCTION FOR LOCAL ACCESS!
function getUserIP() { function getUserIP()
$client = @$_SERVER['HTTP_CLIENT_IP']; {
$forward = @$_SERVER['HTTP_X_FORWARDED_FOR']; $client = @$_SERVER['HTTP_CLIENT_IP'];
$remote = $_SERVER['REMOTE_ADDR']; $forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote = $_SERVER['REMOTE_ADDR'];
if(filter_var($client, FILTER_VALIDATE_IP)) { if (filter_var($client, FILTER_VALIDATE_IP)) {
$ip = $client; $ip = $client;
} } elseif (filter_var($forward, FILTER_VALIDATE_IP)) {
elseif(filter_var($forward, FILTER_VALIDATE_IP)) { $ip = $forward;
$ip = $forward; } else {
} $ip = $remote;
else { }
$ip = $remote; return $ip;
}
return $ip;
} }
$user_ip = getUserIP(); $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 ($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 ); $LOGIN_INFORMATION = array($adminPassword);
defined('USE_USERNAME') or define('USE_USERNAME', false); defined('USE_USERNAME') or define('USE_USERNAME', false);
// time out after NN minutes of inactivity. Set to 0 to not timeout // time out after NN minutes of inactivity. Set to 0 to not timeout
defined('TIMEOUT_MINUTES') or define('TIMEOUT_MINUTES', 0); defined('TIMEOUT_MINUTES') or define('TIMEOUT_MINUTES', 0);
@ -41,408 +44,174 @@ if ($user_ip != "83.150.6.68") {
// timeout in seconds // timeout in seconds
$timeout = (TIMEOUT_MINUTES == 0 ? 0 : time() + TIMEOUT_MINUTES * 60); $timeout = (TIMEOUT_MINUTES == 0 ? 0 : time() + TIMEOUT_MINUTES * 60);
// logout? // logout?
if(isset($_GET['logout'])) { if (isset($_GET['logout'])) {
setcookie("verify", '', $timeout, '/'); // clear password; setcookie("verify", '', $timeout, '/'); // clear password;
header('Location: ' . "/study/"); //header('Location: ' . "/$script_path");
exit(); header('Location: ' . "/study");
exit();
} }
if(!function_exists('showLoginPasswordProtect')) { if (!function_exists('showLoginPasswordProtect')) {
// show login form // show login form
function showLoginPasswordProtect($error_msg) { function showLoginPasswordProtect($error_msg)
?> {
<!DOCTYPE html> ?>
<html > <!DOCTYPE html>
<head> <html>
<meta charset="UTF-8">
<title>Please provide password!</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>
</head>
<body onLoad="document.getElementsByTagName('input')[0].focus();" <head>
<div class="container"> <meta charset="UTF-8">
<div class="row"> <title>Please provide MLP</title>
<div class="login"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<!--<div class="login__check"></div>--> <meta name="theme-color" content="#191a1b" />
<div class="login__lock"><i class="fa fa-lock" aria-hidden="true"></i></div> <link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Open+Sans'>
<div class="login__form"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="assets/css/login.css?random=<?php echo uniqid(); ?>" rel="stylesheet" />
<form method="post"> <!-- Matomo -->
<div class="login__row"> <script type="text/javascript">
<svg class="login__icon pass svg-icon" viewBox="0 0 20 20"> var _paq = window._paq = window._paq || [];
<path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" /> /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
</svg> _paq.push(["setCookieDomain", "*.michu-it.com"]);
<input type="password" name="access_password" class="login__input pass" placeholder="Password"/> _paq.push(['trackPageView']);
</div> _paq.push(['enableLinkTracking']);
<button type="submit" value="Submit" class="login__submit">Login</button> (function() {
</form> var u="https://analytics.michu-it.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
<p class="login__signup">Please provide the correct password!</p> _paq.push(['setSiteId', '3']);
<font color="red" style="font-size: x-small";><?php echo $error_msg; ?></font> var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
</div> g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
</div> })();
</script>
</div> <noscript><p><img src="https://analytics.michu-it.com/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>
</div> <!-- End Matomo Code -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> </head>
<script>
$(document).ready(function() {
var animating = false,
submitPhase1 = 1100,
submitPhase2 = 400,
logoutPhase1 = 800,
$login = $(".login"),
$app = $(".app");
function ripple(elem, e) {
$(".ripple").remove();
var elTop = elem.offset().top,
elLeft = elem.offset().left,
x = e.pageX - elLeft,
y = e.pageY - elTop;
var $ripple = $("<div class='ripple'></div>");
$ripple.css({top: y, left: x});
elem.append($ripple);
};
$(document).on("click", ".login__submit", function(e) {
if (animating) return;
animating = true;
var that = this;
ripple($(that), e);
$(that).addClass("processing");
setTimeout(function() {
$(that).addClass("success");
setTimeout(function() {
$app.show();
$app.css("top");
$app.addClass("active");
}, submitPhase2 - 70);
setTimeout(function() {
$login.hide();
$login.addClass("inactive");
animating = false;
$(that).removeClass("success processing");
}, submitPhase2);
}, submitPhase1);
});
});
</script>
</body> <body onLoad="document.getElementsByTagName('input')[0].focus();" <div class="container">
</html> <div class="row">
<div class="login">
<div class="login__lock">
<div class="netcloud-logo"></div>
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
<div class="login__form">
<?php <form method="post">
// stop at this point <div class="login__row">
die(); <svg class="login__icon pass svg-icon" viewBox="0 0 20 20">
} <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
</svg>
<input type="password" name="access_password" class="login__input pass" placeholder="Password" />
</div>
<button type="submit" value="Submit" class="login__submit">Login</button>
</form>
<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>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function() {
var animating = false,
submitPhase1 = 1100,
submitPhase2 = 400,
logoutPhase1 = 800,
$login = $(".login"),
$app = $(".app");
function ripple(elem, e) {
$(".ripple").remove();
var elTop = elem.offset().top,
elLeft = elem.offset().left,
x = e.pageX - elLeft,
y = e.pageY - elTop;
var $ripple = $("<div class='ripple'></div>");
$ripple.css({
top: y,
left: x
});
elem.append($ripple);
};
$(document).on("click", ".login__submit", function(e) {
if (animating) return;
animating = true;
var that = this;
ripple($(that), e);
$(that).addClass("processing");
setTimeout(function() {
$(that).addClass("success");
setTimeout(function() {
$app.show();
$app.css("top");
$app.addClass("active");
}, submitPhase2 - 70);
setTimeout(function() {
$login.hide();
$login.addClass("inactive");
animating = false;
$(that).removeClass("success processing");
}, submitPhase2);
}, submitPhase1);
});
});
</script>
</body>
</html>
<?php
// stop at this point
die();
}
} }
// user provided password // user provided password
if (isset($_POST['access_password'])) { if (isset($_POST['access_password'])) {
$login = isset($_POST['access_login']) ? $_POST['access_login'] : ''; $login = isset($_POST['access_login']) ? $_POST['access_login'] : '';
$pass = $_POST['access_password']; $pass = $_POST['access_password'];
if (!USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION) if (
|| (USE_USERNAME && ( !array_key_exists($login, $LOGIN_INFORMATION) || $LOGIN_INFORMATION[$login] != $pass ) ) !USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION)
) { || (USE_USERNAME && (!array_key_exists($login, $LOGIN_INFORMATION) || $LOGIN_INFORMATION[$login] != $pass))
showLoginPasswordProtect("wrong password!"); ) {
} showLoginPasswordProtect("wrong password!");
else { } else {
// set cookie if password was validated // set cookie if password was validated
setcookie("verify", md5($login.'%'.$pass), $timeout, '/'); setcookie("verify", md5($login . '%' . $pass), $timeout, '/');
// Some programs (like Form1 Bilder) check $_POST array to see if parameters passed // Some programs (like Form1 Bilder) check $_POST array to see if parameters passed
// So need to clear password protector variables // So need to clear password protector variables
unset($_POST['access_login']); unset($_POST['access_login']);
unset($_POST['access_password']); unset($_POST['access_password']);
unset($_POST['Submit']); unset($_POST['Submit']);
header('Location: ' . $logoutURL . '/study/'); //header('Location: ' . $logoutURL . "/$script_path");
} header('Location: ' . $logoutURL . "/study");
} }
else { } else {
// check if password cookie is set // check if password cookie is set
if (!isset($_COOKIE['verify'])) { if (!isset($_COOKIE['verify'])) {
showLoginPasswordProtect(""); showLoginPasswordProtect("");
} }
// check if cookie is good // check if cookie is good
$found = false; $found = false;
foreach($LOGIN_INFORMATION as $key=>$val) { foreach ($LOGIN_INFORMATION as $key => $val) {
$lp = (USE_USERNAME ? $key : '') .'%'.$val; $lp = (USE_USERNAME ? $key : '') . '%' . $val;
if ($_COOKIE['verify'] == md5($lp)) { if ($_COOKIE['verify'] == md5($lp)) {
$found = true; $found = true;
// prolong timeout // prolong timeout
if (TIMEOUT_CHECK_ACTIVITY) { if (TIMEOUT_CHECK_ACTIVITY) {
setcookie("verify", md5($lp), $timeout, '/'); setcookie("verify", md5($lp), $timeout, '/');
} }
break; break;
}
}
if (!$found) {
showLoginPasswordProtect("");
} }
}
if (!$found) {
showLoginPasswordProtect("");
}
} }
} }
?> ?>

4110
manage.php Normal file
View File

File diff suppressed because it is too large Load Diff

3
phpinfo.php Normal file
View File

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

23
scan.php
View File

@ -5,22 +5,23 @@ $dir = "Home";
$response = scan($dir); $response = scan($dir);
// This function scans the files folder recursively, and builds a large array // This function scans the files folder recursively, and builds a large array
function scan($dir){ function scan($dir)
{
$files = array(); $files = array();
// Is there actually such a folder/file? // Is there actually such a folder/file?
if(file_exists($dir)){ if (file_exists($dir)) {
foreach(scandir($dir) as $f) { foreach (scandir($dir) as $f) {
if(!$f || $f[0] == '.') { if (!$f || $f[0] == '.') {
continue; // Ignore hidden files continue; // Ignore hidden files
} }
if(is_dir($dir . '/' . $f)) { if (is_dir($dir . '/' . $f)) {
// Remove Synology Temp-Folders, if they exists! // Remove Synology Temp-Folders, if they exists!
if($f != '@eaDir') { if ($f != '@eaDir') {
// The path is a folder // The path is a folder
$files[] = array( $files[] = array(
"name" => $f, "name" => $f,
@ -29,8 +30,7 @@ function scan($dir){
"items" => scan($dir . '/' . $f) // Recursively get the contents of the folder "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 // It is a file
$files[] = array( $files[] = array(
"name" => $f, "name" => $f,
@ -40,7 +40,6 @@ function scan($dir){
); );
} }
} }
} }
return $files; return $files;
@ -54,4 +53,4 @@ echo json_encode(array(
"type" => "folder", "type" => "folder",
"path" => $dir, "path" => $dir,
"items" => $response "items" => $response
)); ));