Show sourcecode
The following files exists in this folder. Click to view.
Webserver1/Ovningar/Slutprojekt/
.env
DEBUG/
Media/
account.js
account.php
callback_log.txt
change_account_details.php
composer.json
composer.lock
forgot_pass.php
forgot_pass_new_pass.php
header.php
index.php
login.php
mediaplayer.php
node_modules/
package-lock.json
package.json
signup.php
style.css
upload.js
upload_callback.php
upload_callback_simulated.php
upload_chunk.php
upload_errors.log
upload_form.php
upload_handler.php
upload_success.log
vendor/
verify_file.php
verifypage.php
style.css
228 lines ASCII Windows (CRLF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
@font-face {
font-family: 'Roboto';
src: url(Media/Fonts/Roboto-VariableFont_wdth\,wght.ttf);
}
@font-face {
font-family: 'Arimo';
src: url(Media/Fonts/Arimo-VariableFont_wght.ttf);
}
.icon {
color: white;
}
.big-icon {
font-size: 4rem !important;
}
body {
margin: 0;
background-color: rgb(33, 35, 42);
color: white;
}
main {
margin: 1rem;
}
.text-center {
text-align: center;
}
/* Header */
header {
background-color: rgb(18, 47, 64);
color: white;
display: grid;
grid-template-columns: 25% 65% 10%;
width: 100%;
justify-content: space-between;
justify-items: center;
align-items: center;
padding: 1rem;
box-sizing: border-box;
}
header nav {
display: flex;
gap: 1rem;
width: 100%;
justify-content: space-evenly;
}
header a {
text-decoration: none;
color: white;
}
header a:not(.icon)::after {
display: block;
content: '';
width: 0%;
height: 1px;
background-color: white;
position: relative;
top: 0;
left: 0;
transition: 0.2s;
}
header a:hover::after {
width: 100%;
}
/* Kort */
.media-row {
width:95vw;
height:auto;
white-space: nowrap;
position: relative;
overflow-x:scroll;
overflow-y:hidden;
padding: 0.5vw;
scrollbar-color: lightblue transparent;
}
.card-wrapper {
color: white;
}
.card {
float: none;
margin: 0.5vw;
display: inline-grid;
align-content: center;
width: 30%;
height: 10rem;
box-shadow: 0px 0px 8px black;
background-color: rgb(33, 50, 73);
border-radius: 4px;
overflow: hidden;
position: relative;
transition: 0.2s;
cursor: pointer;
border: 1px solid black;
}
.card::after {
content: '';
inset: 0;
position: absolute;
display: block;
background: linear-gradient(0deg, black 0%, rgba(255, 255, 255, 0) 100%);
}
.card:hover {
scale: 1.05;
border: 1px solid white;
}
.card img {
width: 100%;
height: auto;
object-fit: fill;
}
.card h3 {
font-size: larger;
margin: 0.25rem;
z-index: 2;
}
.card .desc {
display: block;
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
}
.card p {
margin: 0;
margin: 0.25rem;
font-size: smaller;
position: relative;
}
.card p.description {
max-height: 3rem;
overflow: clip;
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.card p.author {
display: flex;
justify-content: flex-end;
align-items: center;
}
p.author > .small-icon {
font-size: medium;
padding: 0.1rem;
}
/* Uppladdning */
#upload-form {
display: flex;
align-items: center;
justify-content: center;
/* flex-direction: column; */
}
#drop-zone {
border: 1px solid rgba(255, 255, 255, 0.355);
background-color: #b8b8b851;
border-radius: 3px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.208);
display: flex;
align-items: center;
cursor: pointer;
justify-content: center;
width: 70vw;
height: 50vh;
}
#drop-zone input[type="file"] {
display: none;
}
#video-metadata .row {
display: flex;
justify-content: space-between;
}
.series-info.hidden, #pre-upload-info.hidden {
display: none !important;
}
/* Mediaplayer */
.video-container {
display: grid;
align-items: center;
justify-content: center;
margin: auto;
max-width: 80vw;
}
.video-container > video {
aspect-ratio: 16/9;
width: 80vw;
object-fit: contain;
background-color: black;
margin: auto;
}
#mediaplayer-video-title {
text-align: center;
font-family: 'Arimo', Verdana, Geneva, Tahoma, sans-serif;
font-weight: 800;
font-size: xx-large;
}
#mediaplayer-video-description {
background-color: #b8b8b851;
font-family: 'Roboto';
padding: 0 1rem;
margin: 0 0 1rem 0;
}
/* Account */
#accountpage-main {
display: grid;
grid-template-columns: 70% 30%;
}
#manage-window {
width: 20rem;
border: 1px solid white;
display: grid;
}
#manage-window .row {
display: grid;
grid-template-columns: 40% 60%;
align-items: center;
}
#manage-window.hidden {
opacity: 0;
pointer-events: none;
}
#manage-window img {
width: 100%;
border-bottom: 1px solid white;
}