Update to maintainer version

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

3
.gitignore vendored
View File

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

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

View File

@ -1,32 +1,43 @@
@charset "utf-8";
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
* {
margin: 0;
padding: 0;
font-family: system-ui;
}
html {
/* Full height */
height: 100%;
html {
/* Full height */
height: 100%;
/* The image used */
background-image: url("../../images/background.jpg");
background-color: #373743;
/* Center and scale the image nicely */
background-position: center center;
background-size: cover;
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
@ -34,9 +45,11 @@ html {
.filemanager {
width: 95%;
max-width:1340px;
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,24 +62,93 @@ 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;
}
.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
-------------------------*/
.filemanager .breadcrumbs {
color: #ffffff;
margin-left:20px;
margin-left: 20px;
font-size: 13px;
font-weight: 700;
line-height: 35px;
@ -82,13 +164,12 @@ html {
}
.filemanager .breadcrumbs .arrow {
color: #6a6a72;
color: #6a6a72;
font-size: 13px;
font-weight: 700;
line-height: 20px;
}
/*-------------------------
Search box
-------------------------*/
@ -104,12 +185,13 @@ html {
width: 40px;
height: 40px;
margin-top: 6px;
margin-right: 15px;
}
.filemanager .search:before {
content: '';
position: absolute;
margin-top:12px;
margin-top: 12px;
width: 10px;
height: 11px;
border-radius: 50%;
@ -149,21 +231,27 @@ html {
-webkit-appearance: none;
}
::-webkit-input-placeholder { /* 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;
::-webkit-input-placeholder {
/* 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;
}
/*-------------------------
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,20 +342,23 @@ 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 {
margin: 30px auto;
top: 3em;
border-radius: 50%;
position:relative;
position: relative;
background-color: #d72f6e;
width: 11em;
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; }
}
@keyframes showSlowlyElement {
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,28 +565,26 @@ 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;
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;
}
footer a.tz{
font-weight:normal;
font-size:16px !important;
text-decoration:none !important;
display:block;
footer a.tz {
font-weight: normal;
font-size: 16px !important;
text-decoration: none !important;
display: block;
margin-right: 300px;
text-overflow:ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
color:#bfbfbf !important;
z-index:1;
color: #bfbfbf !important;
z-index: 1;
}
footer a.tz:before{
footer a.tz:before {
content: '';
width: 138px;
height: 20px;
@ -544,17 +593,17 @@ footer a.tz:before{
bottom: -3px;
}
footer .close{
footer .close {
position: absolute;
cursor: pointer;
width: 8px;
height: 8px;
top:10px;
right:10px;
top: 10px;
right: 10px;
z-index: 3;
}
footer #tzine-actions{
footer #tzine-actions {
position: absolute;
top: 8px;
width: 500px;
@ -564,7 +613,7 @@ footer #tzine-actions{
z-index: 2;
}
footer #tzine-actions iframe{
footer #tzine-actions iframe {
display: inline-block;
height: 21px;
width: 95px;
@ -574,84 +623,95 @@ footer #tzine-actions iframe{
}
@media (max-width: 1024px) {
#bsaHolder, footer{ display:none;}
#bsaHolder, footer {
display: none;
}
}
/* Popup Test */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* 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 {
background-color: #373743;
border: none;
color: white;
padding: 15px 32px;
margin-left: 10px;
margin-top:40px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 200px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
background-color: #373743;
border: none;
color: white;
padding: 15px 32px;
margin-left: 10px;
margin-top: 40px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 200px;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
cursor: pointer;
box-sizing: border-box;
transition: 0.3s background-color;
@ -665,16 +725,48 @@ footer #tzine-actions iframe{
min-height: 700px;
}
/* michu naming fixes:*/
/* naming fixes:*/
.filemanager .data li .name {
width: 194px;
top: 22px;
white-space: inherit;
margin-left: 12px;
width: 194px;
top: 22px;
white-space: inherit;
margin-left: 12px;
}
.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;*/
}
.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;
}

View File

Before

Width:  |  Height:  |  Size: 827 KiB

After

Width:  |  Height:  |  Size: 827 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -1,11 +1,11 @@
$(function(){
$(function () {
var filemanager = $('.filemanager'),
breadcrumbs = $('.breadcrumbs'),
fileList = filemanager.find('.data');
// 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],
currentPath = '',
@ -17,7 +17,7 @@ $(function(){
// This event listener monitors changes on the URL. We use it to
// capture back/forward navigation in the browser.
$(window).on('hashchange', function(){
$(window).on('hashchange', function () {
goto(window.location.hash);
@ -26,9 +26,8 @@ $(function(){
}).trigger('hashchange');
// Hiding and showing the search box
filemanager.find('.search').click(function(){
filemanager.find('.search').click(function () {
var search = $(this);
@ -36,19 +35,18 @@ $(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.
filemanager.find('input').on('input', function(e){
filemanager.find('input').on('input', function (e) {
folders = [];
files = [];
var value = this.value.trim();
if(value.length) {
if (value.length) {
filemanager.addClass('searching');
@ -60,21 +58,21 @@ $(function(){
window.location.hash = encodeURIComponent(currentPath);
}
}).on('keyup', function(e){
}).on('keyup', function (e) {
// Clicking 'ESC' button triggers focusout and cancels the search
var search = $(this);
if(e.keyCode == 27) {
if (e.keyCode == 27) {
search.trigger('focusout');
}
}).focusout(function(e){
}).focusout(function (e) {
// Cancel the search
var search = $(this);
if(!search.val().trim().length) {
if (!search.val().trim().length) {
window.location.hash = encodeURIComponent(currentPath);
search.hide();
@ -82,14 +80,13 @@ $(function(){
}
});
// Clicking on folders
fileList.on('click', 'li.folders', function(e){
fileList.on('click', 'li.folders', function (e) {
e.preventDefault();
var nextDir = $(this).find('a.folders').attr('href');
if(filemanager.hasClass('searching')) {
if (filemanager.hasClass('searching')) {
// Building the breadcrumbs
breadcrumbsUrls = generateBreadcrumbs(nextDir);
@ -106,9 +103,8 @@ $(function(){
currentPath = nextDir;
});
// Clicking on breadcrumbs
breadcrumbs.on('click', 'a', function(e){
breadcrumbs.on('click', 'a', function (e) {
e.preventDefault();
var index = breadcrumbs.find('a').index($(this)),
@ -121,19 +117,19 @@ $(function(){
});
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
return "";
}
// Navigates to the given hash (path)
@ -187,10 +183,10 @@ $(function(){
}
// Splits a file path and turns it into clickable breadcrumbs
function generateBreadcrumbs(nextDir){
function generateBreadcrumbs(nextDir) {
var path = nextDir.split('/').slice(0);
for(var i=1;i<path.length;i++){
path[i] = path[i-1]+ '/' +path[i];
for (var i = 1; i < path.length; i++) {
path[i] = path[i - 1] + '/' + path[i];
}
return path;
}
@ -202,9 +198,9 @@ $(function(){
demo = response,
flag = 0;
for(var i=0;i<path.length;i++){
for(var j=0;j<demo.length;j++){
if(demo[j].name === path[i]){
for (var i = 0; i < path.length; i++) {
for (var j = 0; j < demo.length; j++) {
if (demo[j].name === path[i]) {
flag = 1;
demo = demo[j].items;
break;
@ -219,22 +215,22 @@ $(function(){
// Recursively search through the file tree
function searchData(data, searchTerms) {
data.forEach(function(d){
if(d.type === 'folder') {
data.forEach(function (d) {
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);
}
}
else if(d.type === 'file') {
if(d.name.toLowerCase().match(searchTerms)) {
else if (d.type === 'file') {
if (d.name.toLowerCase().match(searchTerms)) {
files.push(d);
}
}
});
return {folders: folders, files: files};
return { folders: folders, files: files };
}
@ -244,7 +240,7 @@ $(function(){
var scannedFolders = [],
scannedFiles = [];
if(Array.isArray(data)) {
if (Array.isArray(data)) {
data.forEach(function (d) {
@ -257,7 +253,7 @@ $(function(){
});
}
else if(typeof data === 'object') {
else if (typeof data === 'object') {
scannedFolders = data.folders;
scannedFiles = data.files;
@ -267,131 +263,128 @@ $(function(){
// Empty the old result and make the new one
fileList.empty().hide();
if(!scannedFolders.length && !scannedFiles.length) {
if (!scannedFolders.length && !scannedFiles.length) {
filemanager.find('.nothingfound').show();
}
else {
filemanager.find('.nothingfound').hide();
}
if(scannedFolders.length) {
if (scannedFolders.length) {
scannedFolders.forEach(function(f) {
scannedFolders.forEach(function (f) {
var itemsLength = f.items.length,
name = escapeHTML(f.name),
icon = '<span class="icon folder"></span>';
// Function need to checked by MR! -> Otherwise delete!!!
// icon = '<span class="icon folder"></span>',
// iconpath = 'images/icons/' + f.path + '.png';
// function imageExists(image_url){
// Function need to checked by MR! -> Otherwise delete!!!
// icon = '<span class="icon folder"></span>',
// iconpath = 'images/icons/' + f.path + '.png';
// var http = new XMLHttpRequest();
// http.open('HEAD', image_url, false);
// http.send();
//
// return http.status != 404;
// }
// 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>';
// } else if(itemsLength) {
// icon = '<span class="icon folder full"></span>';
// }
if(itemsLength) {
// function imageExists(image_url){
// var http = new XMLHttpRequest();
// http.open('HEAD', image_url, false);
// http.send();
//
// return http.status != 404;
// }
// 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>';
// } else if(itemsLength) {
// icon = '<span class="icon folder full"></span>';
// }
if (itemsLength) {
icon = '<span class="icon folder full"></span>';
}
}
if(itemsLength == 1) {
if (itemsLength == 1) {
itemsLength += ' item';
}
else if(itemsLength > 1) {
else if (itemsLength > 1) {
itemsLength += ' items';
}
else {
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)
});
}
if(scannedFiles.length) {
if (scannedFiles.length) {
scannedFiles.forEach(function(f) {
scannedFiles.forEach(function (f) {
var fileSize = bytesToSize(f.size),
name = escapeHTML(f.name),
fileType = name.split('.'),
icon = '<span class="icon file"></span>';
fileType = fileType[fileType.length-1];
fileType = fileType[fileType.length - 1];
if (fileType == "db") {
return;
}
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>';
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") {
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") {
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") {
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 {
icon = '<span class="icon file f-'+fileType+'">.'+fileType+'</span>';
}
icon = '<span class="icon file f-' + fileType + '">.' + fileType + '</span>';
}
if (fileType == "mp4") {
// 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 json_str = JSON.stringify(arr);
//setCookie('watchedVideoArray', json_str);
var style="";
var style = "";
// https://stackoverflow.com/questions/2980143/i-want-to-store-javascript-array-as-a-cookie/2980163
// get saved cookie information
var json_str=getCookie("watchedVideoArray");
var json_str = getCookie("watchedVideoArray");
if (json_str != "") {
var arr_watchstatus = JSON.parse(json_str);
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 {
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);
});
}
// Generate the breadcrumbs
var url = '';
if(filemanager.hasClass('searching')){
if (filemanager.hasClass('searching')) {
url = '<span>Search results: </span>';
fileList.removeClass('animated');
@ -405,29 +398,28 @@ $(function(){
var name = u.split('/');
if (i !== breadcrumbsUrls.length - 1) {
url += '<a href="'+u+'"><span class="folderName">' + name[name.length-1] + '</span></a> <span class="arrow">→</span> ';
document.getElementById("backButton").href = "#"+u;
url += '<a href="' + u + '"><span class="folderName">' + name[name.length - 1] + '</span></a> <span class="arrow">→</span> ';
document.getElementById("backButton").href = "#" + u;
}
else {
url += '<span class="folderName">' + name[name.length-1] + '</span>';
url += '<span class="folderName">' + name[name.length - 1] + '</span>';
}
});
}
breadcrumbs.text('').append(url);
// Show the generated elements
fileList.fadeIn();
// 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;');
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'];

225
index.php
View File

@ -1,109 +1,154 @@
<?php
require(__DIR__.'/login.php');
define('PROJECT_ROOT', getcwd());
?>
require(__DIR__ . '/login.php');
define('PROJECT_ROOT', getcwd());
?>
<!DOCTYPE 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">
<html>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 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" />
<head lang="en">
<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">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 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 -->
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_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>
<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>
<!-- 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 -->
<ul class="data"></ul>
<div class="nothingfound">
<div class="nofiles"></div>
<span>Error! - No files here.</span>
</div>
</head>
<body>
<div class="filemanager">
<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>
<!-- Include our script files -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="assets/js/script.js?random=<?php echo uniqid(); ?>"></script>
<!-- FancyBox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
</div>
<!-- Include our script files -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="assets/js/script.js?random=<?php echo uniqid(); ?>"></script>
<!-- FancyBox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script type="text/javascript">
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
c = c.substring(1);
}
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
var json_str=getCookie("watchedVideoArray");
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);
}
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
}
$(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
// initialize array only if emty
var json_str = getCookie("watchedVideoArray");
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
arr_watchstatus.push(slide.opts.$orig[0].dataset.src); // adds new video path to array!
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!
$(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
// append new value to the array
arr_watchstatus.push(slide.opts.$orig[0].dataset.src); // adds new video path to array!
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>
</html>
});
</script>
</body>
</html>

595
login.php
View File

@ -1,36 +1,39 @@
<?php
###############################################################
# Page Password Protect 1.3
# Page Password Protect 1.4
###############################################################
# By Michael R. - swiss
###############################################################
# LOGIN OVERRIDE FUNCTION FOR LOCAL ACCESS!
function getUserIP() {
$client = @$_SERVER['HTTP_CLIENT_IP'];
$forward = @$_SERVER['HTTP_X_FORWARDED_FOR'];
$remote = $_SERVER['REMOTE_ADDR'];
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)) {
$ip = $forward;
}
else {
$ip = $remote;
}
return $ip;
if (filter_var($client, FILTER_VALIDATE_IP)) {
$ip = $client;
} elseif (filter_var($forward, FILTER_VALIDATE_IP)) {
$ip = $forward;
} 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 );
$LOGIN_INFORMATION = array($adminPassword);
defined('USE_USERNAME') or define('USE_USERNAME', false);
// time out after NN minutes of inactivity. Set to 0 to not timeout
defined('TIMEOUT_MINUTES') or define('TIMEOUT_MINUTES', 0);
@ -41,408 +44,174 @@ if ($user_ip != "83.150.6.68") {
// timeout in seconds
$timeout = (TIMEOUT_MINUTES == 0 ? 0 : time() + TIMEOUT_MINUTES * 60);
// logout?
if(isset($_GET['logout'])) {
setcookie("verify", '', $timeout, '/'); // clear password;
header('Location: ' . "/study/");
exit();
if (isset($_GET['logout'])) {
setcookie("verify", '', $timeout, '/'); // clear password;
//header('Location: ' . "/$script_path");
header('Location: ' . "/study");
exit();
}
if(!function_exists('showLoginPasswordProtect')) {
// show login form
function showLoginPasswordProtect($error_msg) {
?>
<!DOCTYPE html>
<html >
<head>
<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>
if (!function_exists('showLoginPasswordProtect')) {
// show login form
function showLoginPasswordProtect($error_msg)
{
?>
<!DOCTYPE html>
<html>
<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__form">
<form method="post">
<div class="login__row">
<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 correct password!</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>
<head>
<meta charset="UTF-8">
<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 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>
</html>
<body onLoad="document.getElementsByTagName('input')[0].focus();" <div class="container">
<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
// stop at this point
die();
}
<form method="post">
<div class="login__row">
<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
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)
|| (USE_USERNAME && ( !array_key_exists($login, $LOGIN_INFORMATION) || $LOGIN_INFORMATION[$login] != $pass ) )
) {
showLoginPasswordProtect("wrong password!");
}
else {
// set cookie if password was validated
setcookie("verify", md5($login.'%'.$pass), $timeout, '/');
// Some programs (like Form1 Bilder) check $_POST array to see if parameters passed
// So need to clear password protector variables
unset($_POST['access_login']);
unset($_POST['access_password']);
unset($_POST['Submit']);
header('Location: ' . $logoutURL . '/study/');
}
}
else {
// check if password cookie is set
if (!isset($_COOKIE['verify'])) {
showLoginPasswordProtect("");
}
// check if cookie is good
$found = false;
foreach($LOGIN_INFORMATION as $key=>$val) {
$lp = (USE_USERNAME ? $key : '') .'%'.$val;
if ($_COOKIE['verify'] == md5($lp)) {
$found = true;
// prolong timeout
if (TIMEOUT_CHECK_ACTIVITY) {
setcookie("verify", md5($lp), $timeout, '/');
}
break;
$login = isset($_POST['access_login']) ? $_POST['access_login'] : '';
$pass = $_POST['access_password'];
if (
!USE_USERNAME && !in_array($pass, $LOGIN_INFORMATION)
|| (USE_USERNAME && (!array_key_exists($login, $LOGIN_INFORMATION) || $LOGIN_INFORMATION[$login] != $pass))
) {
showLoginPasswordProtect("wrong password!");
} else {
// set cookie if password was validated
setcookie("verify", md5($login . '%' . $pass), $timeout, '/');
// Some programs (like Form1 Bilder) check $_POST array to see if parameters passed
// So need to clear password protector variables
unset($_POST['access_login']);
unset($_POST['access_password']);
unset($_POST['Submit']);
//header('Location: ' . $logoutURL . "/$script_path");
header('Location: ' . $logoutURL . "/study");
}
} else {
// check if password cookie is set
if (!isset($_COOKIE['verify'])) {
showLoginPasswordProtect("");
}
// check if cookie is good
$found = false;
foreach ($LOGIN_INFORMATION as $key => $val) {
$lp = (USE_USERNAME ? $key : '') . '%' . $val;
if ($_COOKIE['verify'] == md5($lp)) {
$found = true;
// prolong timeout
if (TIMEOUT_CHECK_ACTIVITY) {
setcookie("verify", md5($lp), $timeout, '/');
}
break;
}
}
if (!$found) {
showLoginPasswordProtect("");
}
}
if (!$found) {
showLoginPasswordProtect("");
}
}
}
?>

4110
manage.php Normal file

File diff suppressed because it is too large Load Diff

3
phpinfo.php Normal file
View File

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

View File

@ -5,22 +5,23 @@ $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();
// Is there actually such a folder/file?
if(file_exists($dir)){
foreach(scandir($dir) as $f) {
if(!$f || $f[0] == '.') {
if (file_exists($dir)) {
foreach (scandir($dir) as $f) {
if (!$f || $f[0] == '.') {
continue; // Ignore hidden files
}
if(is_dir($dir . '/' . $f)) {
if (is_dir($dir . '/' . $f)) {
// Remove Synology Temp-Folders, if they exists!
if($f != '@eaDir') {
if ($f != '@eaDir') {
// The path is a folder
$files[] = array(
"name" => $f,
@ -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;
@ -54,4 +53,4 @@ echo json_encode(array(
"type" => "folder",
"path" => $dir,
"items" => $response
));
));