v0.0.9 - Added swiper JS/CSS

Added hover.css
Updated index/login layout frontend
Updated getPost.php
This commit is contained in:
Anders 2021-06-04 13:32:19 +02:00
parent 4ce94621a7
commit dc15757c5f
10 changed files with 1241 additions and 395 deletions

View File

@ -3,14 +3,9 @@ require "../../bootstrap.php";
use Backend\Model\Post;
session_start();
if (!isset($_SESSION['token'])) {
header("location: ../../Frontend/index.php?login=notloggedin");
}
header('Content-Type: application/json;charset=UTF-8');
//HOme.php
//Home.php
$data = Post::all();
echo $data;

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,805 @@
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 16px;
}
body {
margin: 0;
--color-text: #111;
--color-number: #999;
--color-bg: #fff;
--color-link: #1352d1;
--color-link-hover: #111;
color: var(--color-text);
background-color: var(--color-bg);
font-family: europa, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
content: '';
position: fixed;
z-index: 1000;
}
.js .loading::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
.js .loading::after {
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5, 0.5, 1);
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover {
color: var(--color-link-hover);
outline: none;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
/* Provide a fallback style for browsers
that don't support :focus-visible */
outline: none;
background: lightgrey;
}
a:focus:not(:focus-visible) {
/* Remove the focus indicator on mouse-focus for browsers
that do support :focus-visible */
background: transparent;
}
a:focus-visible {
/* Draw a very noticeable focus style for
keyboard-focus on browsers that do support
:focus-visible */
outline: 2px solid red;
background: transparent;
}
.frame {
padding: 3rem 5vw;
text-align: center;
position: relative;
z-index: 1000;
}
.frame__title {
font-size: 1.525rem;
margin: 0 0 1rem;
font-weight: normal;
cursor: default;
}
.frame__tagline {
color: #999;
max-width: 300px;
margin: 1rem auto;
}
.frame__links {
display: flex;
align-items: center;
justify-content: center;
}
.frame__links a:not(:last-child) {
margin-right: 2rem;
}
.github {
width: 24px;
height: 24px;
}
.content {
display: grid;
width: 100%;
margin: 0 auto;
padding: 10vh 25px;
max-width: 1050px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 200px;
grid-gap: 4rem;
grid-row-gap: 6rem;
justify-content: center;
list-style: none;
}
.content__item {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
counter-increment: itemcounter;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.link {
cursor: pointer;
font-size: 18px;
position: relative;
white-space: nowrap;
color: var(--color-text);
}
.link::before,
.link::after {
position: absolute;
width: 100%;
height: 1px;
background: currentColor;
top: 100%;
left: 0;
pointer-events: none;
}
.link::before {
content: '';
/* show by default */
}
.link--metis {
font-family: bely-display, sans-serif;
text-transform: lowercase;
}
.link--metis::before {
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}
.link--metis:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.link--io {
font-family: europa, sans-serif;
}
.link--io::before {
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.link--io:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
.link--io::after {
content: '';
top: calc(100% + 4px);
transform-origin: 0% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.link--io:hover::after {
transform-origin: 100% 50%;
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.4, 1, 0.8, 1);
}
.link--thebe {
font-family: angie-sans, sans-serif;
text-transform: uppercase;
}
.link--thebe::before {
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.link--thebe:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 2, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
.link--thebe::after {
content: '';
top: calc(100% + 4px);
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.4s 0.1s cubic-bezier(0.2, 1, 0.8, 1);
}
.link--thebe:hover::after {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}
.link--leda {
overflow: hidden;
line-height: 2;
font-family: orpheuspro, serif;
font-weight: 700;
}
.link--leda::before {
height: 2px;
top: calc(100% - 5px);
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}
.link--leda:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.link--leda::after {
content: attr(data-text);
height: 100%;
top: 0;
background: none;
transform-origin: 100% 50%;
transform: translate3d(150%, 0, 0);
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}
.link--leda:hover::after {
transform: translate3d(0, 0, 0);
}
.link--leda span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.5, 0.5, 0.3, 1);
}
.link--leda:hover span {
transform: translate3d(-150%, 0, 0);
}
.link--ersa {
padding: 0 10px;
font-family: halyard-display, sans-serif;
letter-spacing: 1px;
text-indent: 1px;
text-transform: uppercase;
}
.link--ersa::before {
top: 50%;
height: 2px;
transform-origin: 100% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}
.link--ersa:hover::before {
transform-origin: 0% 50%;
transform: scale3d(1, 1, 1);
}
.link--ersa span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.4, 1, 0.8, 1);
}
.link--ersa:hover span {
transform: scale3d(1.1, 1.1, 1.1);
}
.link--elara {
font-family: aktiv-grotesk-extended, sans-serif;
font-size: 1.375rem;
}
.link--elara::before {
transform-origin: 50% 100%;
transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
}
.link--elara:hover::before {
transform: translate3d(0, 2px, 0) scale3d(1.08, 3, 1);
clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%, 0 100%, 100% 100%, 100% 0%);
}
.link--elara span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}
.link--elara:hover span {
transform: translate3d(0, -2px, 0);
}
.link--dia {
font-family: freightdispcmp-pro, serif;
font-size: 1.75rem;
}
.link--dia::before,
.link--dia::after {
opacity: 0;
transform-origin: 50% 0%;
transform: translate3d(0, 3px, 0);
transition-property: transform, opacity;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.8, 1);
}
.link--dia:hover::before,
.link--dia:hover::after {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0.2, 0, 0.3, 1);
}
.link--dia::after {
content: '';
top: calc(100% + 4px);
width: 70%;
left: 15%;
}
.link--dia::before,
.link--dia:hover::after {
transition-delay: 0.1s;
}
.link--dia:hover::before {
transition-delay: 0s;
}
.link--kale {
font-family: halyard-display, sans-serif;
font-weight: 600;
text-transform: lowercase;
}
.link--kale::before {
height: 10px;
top: 100%;
opacity: 0;
}
.link--kale:hover::before {
opacity: 1;
animation: lineUp 0.3s ease forwards;
}
@keyframes lineUp {
0% {
transform-origin: 50% 100%;
transform: scale3d(1, 0.045, 1);
}
50% {
transform-origin: 50% 100%;
transform: scale3d(1, 1, 1);
}
51% {
transform-origin: 50% 0%;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 50% 0%;
transform: scale3d(1, 0.045, 1);
}
}
.link--kale::after {
content: '';
transition: opacity 0.3s;
opacity: 0;
transition-delay: 0s;
}
.link--kale:hover::after {
opacity: 1;
transition-delay: 0.3s;
}
.link--carpo {
font-family: adrianna-extended, sans-serif;
text-transform: uppercase;
font-weight: 700;
}
.link--carpo::before {
transform-origin: 0% 50%;
transform: scale3d(0, 1, 1);
transition: transform 0.3s;
}
.link--carpo:hover::before {
transform: scale3d(1, 1, 1);
}
.link--carpo::after {
content: '';
top: calc(100% + 4px);
transition: transform 0.3s;
transform-origin: 100% 50%;
}
.link--carpo:hover::after {
transform: scale3d(0, 1, 1);
}
.link--helike {
font-family: aktiv-grotesk-extended, sans-serif;
font-weight: bold;
}
.link--helike:hover span {
animation: glitchText 0.4s linear;
}
@keyframes glitchText {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
.link--helike::before {
height: 2px;
opacity: 0;
}
.link--helike:hover::before {
opacity: 1;
animation: glitchLine 0.4s steps(2, start) forwards;
}
@keyframes glitchLine {
0% {
transform: scale3d(1, 1, 1);
}
10% {
transform: translate3d(10px, 0, 0);
}
20% {
transform: translate3d(0, 4px, 0);
}
30% {
transform: scale3d(0.1, 1.4, 1) translate3d(0, -25px, 0);
transform-origin: 100% 0%;
}
40% {
transform: scale3d(1, 0.3, 1) translate3d(0, 25px, 0);
}
50% {
transform: scale3d(0.5, 0.3, 1) translate3d(-100px, -80px, 0);
}
60% {
transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0);
}
70% {
transform: scale3d(0.5, 0.5, 1) translate3d(0, 20px, 0);
}
80% {
transform: translate3d(-30, 10px, 0) scale3d(1, 0.4, 1);
transform-origin: 100% 0%;
}
90% {
transform: scale3d(1, 0.5, 1) translate3d(0, -15px, 0);
;
transform-origin: 0% 50%;
}
100% {
opacity: 1;
}
}
.link--mneme {
font-family: aktiv-grotesk-extended, sans-serif;
font-size: 0.875rem;
text-transform: uppercase;
}
.link--mneme::before {
height: 100%;
top: 0;
opacity: 0;
}
.link--mneme:hover::before {
opacity: 1;
animation: coverUp 0.3s ease forwards;
}
@keyframes coverUp {
0% {
transform-origin: 50% 100%;
transform: scale3d(1, 0.045, 1);
}
50% {
transform-origin: 50% 100%;
transform: scale3d(1, 1, 1);
}
51% {
transform-origin: 50% 0%;
transform: scale3d(1, 1, 1);
}
100% {
transform-origin: 50% 0%;
transform: scale3d(1, 0.045, 1);
}
}
.link--mneme::after {
content: '';
transition: opacity 0.3s;
}
.link--mneme:hover::after {
opacity: 0;
}
.link--iocaste {
font-family: lust-fine, sans-serif;
overflow: hidden;
padding: 7px 0;
}
.link__graphic {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
fill: none;
stroke: #000;
stroke-width: 1px;
}
.link__graphic--slide {
top: -3px;
stroke-width: 2px;
transition: transform 0.7s;
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.link:hover .link__graphic--slide {
transform: translate3d(-66.6%, 0, 0);
}
.link--herse {
font-family: freight-display-pro, serif;
font-size: 1.375rem;
font-weight: bold;
}
.link--herse::before {
display: none;
}
.link__graphic--stroke path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.link:hover .link__graphic--stroke path {
stroke-dashoffset: 0;
}
/* Trick from https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/ */
.link__graphic--arc {
top: 73%;
left: -23%;
}
.link__graphic--arc path {
transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.link:hover .link__graphic--arc path {
transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
transition-duration: 0.3s;
}
.link--carme {
font-family: angie-sans, sans-serif;
font-size: 1.25rem;
}
.link--carme::before {
display: none;
}
.link__graphic--scribble {
top: 100%;
}
.link__graphic--scribble path {
transition: stroke-dashoffset 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.link:hover .link__graphic--scribble path {
transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
transition-duration: 0.3s;
}
.link--eirene {
font-family: europa, sans-serif;
font-weight: bold;
}
.link--eirene::before {
height: 7px;
border-radius: 20px;
transform: scale3d(1, 1, 1);
transition: transform 0.2s, opacity 0.2s;
transition-timing-function: cubic-bezier(0.2, 0.57, 0.67, 1.53);
}
.link--eirene:hover::before {
transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
transition-duration: 0.4s;
opacity: 1;
transform: scale3d(1.2, 0.1, 1);
}
.link--eirene span {
transform: translate3d(0, -4px, 0);
display: inline-block;
transition: transform 0.2s 0.05s cubic-bezier(0.2, 0.57, 0.67, 1.53);
}
.link--eirene:hover span {
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
transition-duration: 0.4s;
transition-delay: 0s;
}
@media screen and (min-width: 53em) {
.frame {
text-align: left;
z-index: 100;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
padding: 3rem 3.5rem;
pointer-events: none;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto auto;
grid-template-areas: 'title links'
'... ...'
'author ...';
}
.frame__title-wrap {
grid-area: title;
}
.frame__title {
margin: 0;
}
.frame__tagline {
position: relative;
margin-left: 0;
}
.frame__links {
grid-area: links;
padding: 0;
justify-self: end;
align-self: start;
justify-content: start;
}
.frame__author {
grid-area: author;
}
.frame a {
pointer-events: auto;
}
}

View File

@ -0,0 +1,266 @@
body {
font-family: "Fira Sans", sans-serif;
background-color: #ffe53b;
background-image: linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 0;
transform: translateX(0);
}
.blog-slider {
width: 95%;
position: relative;
max-width: 60vw;
margin: auto;
background: #fff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 25px;
border-radius: 25px;
height: 400px;
transition: all 0.3s;
}
@media screen and (max-width: 992px) {
.blog-slider {
max-width: 65vw;
height: 400px;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider {
height: 350px;
}
}
.blog-slider__item {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.blog-slider__item {
flex-direction: column;
}
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
opacity: 1;
transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
opacity: 1;
transform: none;
}
.blog-slider__content {
padding-right: 25px;
}
.blog-slider__content > * {
opacity: 0;
transform: translateY(25px);
transition: all 0.4s;
}
.blog-slider__code {
color: #7b7992;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.blog-slider__title {
font-size: 24px;
font-weight: 700;
color: #0d0925;
margin-bottom: 20px;
}
.blog-slider__text {
color: #4e4a67;
margin-bottom: 30px;
line-height: 1.5em;
}
.blog-slider__button {
display: inline-flex;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
.blog-slider__button {
width: 100%;
}
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.blog-slider .swiper-pagination-custom,
.blog-slider .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.blog-slider__pagination {
margin-left: auto;
margin-right: auto;
flex-direction: row;
z-index: 21;
width: fit-content;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.blog-slider__pagination {
transform: translateX(-50%);
justify-content: center;
align-items: center;
}
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0px 8px;
}
@media screen and (max-width: 768px) {
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
}
.blog-slider__pagination .swiper-pagination-bullet {
width: 11px;
height: 11px;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: #fd3838;
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
input[type="checkbox"]#hamburger {
position: fixed;
top: -999%;
left: -999%;
}
label[for="hamburger"] {
display: block;
position: fixed;
top: 5px;
right: 5px;
height: 50px;
width: 50px;
background: #2F9AA9;
z-index: 1030;
cursor: pointer;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
box-shadow: 1px 2px 5px #464647;
}
label[for="hamburger"] > ul {
width: 100%;
height: 60%;
position: Absolute;
top: 20%;
left: 0;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
flex-direction: column;
justify-content: space-around;
}
label[for="hamburger"] > ul > li {
width: 25px;
height: 3px;
background: #464647;
margin: auto;
transition: all .4s ease;
position: relative;
top: 0;
bottom: 0;
}
input[type="checkbox"]:checked#hamburger + label + div > main > div > div > div > .front {
transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(25deg);
}
input[type="checkbox"]:checked#hamburger + label > ul > li:first-child {
transform: rotate(45deg);
top: 30%;
}
input[type="checkbox"]:checked#hamburger + label > ul > li:nth-child(2) {
display: none;
}
input[type="checkbox"]:checked#hamburger + label > ul > li:last-child {
transform: rotate(-45deg);
bottom: 30%;
left: 0;
}
body {
z-index: 10;
}
.layer {
z-index: 3;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: .4s;
transform: perspective(800px) scale(1) translateX(0) rotateY(0);
transform-style: preserve-3d;
opacity: 0;
pointer-events: none;
}
.showlayer {
opacity: 1;
pointer-events: all;
}
.transform-none {
transform: none !important;
}
nav {
vertical-align: center;
}
nav ul {
padding-left: 66.66%;
font-size: larger;
line-height: 2;
}
ul li {
list-style-type: none;
}
nav ul li a {
display: Block;
color: White;
cursor: pointer;
padding: 5px;
margin-bottom: 10%;
text-decoration: none;
}
nav ul li a:hover {
color: black;
}
.front {
transition: .4s;
}

View File

@ -0,0 +1 @@
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

13
Frontend/Assets/JS/swiper.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -5,395 +5,56 @@
<title>ITSKP</title>
<script type="text/javascript" src="Assets/JS/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="Assets/JS/swiper-bundle.min.js"></script>
<script src="Assets/JS/swiper-bundle.min.js"></script>
<script type="text/javascript" src="Assets/JS/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/CSS/main.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/swiper-bundle.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/pagination.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/hover.css"/>
</head>
<style>
body {
font-family: "Fira Sans", sans-serif;
background-color: #ffe53b;
background-image: linear-gradient(147deg, #ffe53b 0%, #fd3838 74%);
}
.blog-slider {
width: 95%;
position: relative;
max-width: 800px;
margin: auto;
background: #fff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 25px;
border-radius: 25px;
height: 400px;
transition: all 0.3s;
}
@media screen and (max-width: 992px) {
.blog-slider {
max-width: 680px;
height: 400px;
}
}
@media screen and (max-width: 768px) {
.blog-slider {
min-height: 500px;
height: auto;
margin: 180px auto;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider {
height: 350px;
}
}
.blog-slider__item {
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.blog-slider__item {
flex-direction: column;
}
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
opacity: 1;
transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
opacity: 1;
transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
transition-delay: 1.7s;
}
.blog-slider__img {
width: 300px;
flex-shrink: 0;
height: 300px;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
border-radius: 20px;
transform: translateX(-80px);
overflow: hidden;
}
.blog-slider__img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
border-radius: 20px;
opacity: 0.8;
}
.blog-slider__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
border-radius: 20px;
transition: all 0.3s;
}
@media screen and (max-width: 768px) {
.blog-slider__img {
transform: translateY(-50%);
width: 90%;
}
}
@media screen and (max-width: 576px) {
.blog-slider__img {
width: 95%;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.blog-slider__img {
height: 270px;
}
}
.blog-slider__content {
padding-right: 25px;
}
@media screen and (max-width: 768px) {
.blog-slider__content {
margin-top: -80px;
text-align: center;
padding: 0 30px;
}
}
@media screen and (max-width: 576px) {
.blog-slider__content {
padding: 0;
}
}
.blog-slider__content > * {
opacity: 0;
transform: translateY(25px);
transition: all 0.4s;
}
.blog-slider__code {
color: #7b7992;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.blog-slider__title {
font-size: 24px;
font-weight: 700;
color: #0d0925;
margin-bottom: 20px;
}
.blog-slider__text {
color: #4e4a67;
margin-bottom: 30px;
line-height: 1.5em;
}
.blog-slider__button {
display: inline-flex;
background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
.blog-slider__button {
width: 100%;
}
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.blog-slider .swiper-pagination-custom,
.blog-slider .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.blog-slider__pagination {
display: flex;
margin-left: auto;
margin-right: auto;
flex-direction: row;
z-index: 21;
width: fit-content !important;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.blog-slider__pagination {
transform: translateX(-50%);
left: 50% !important;
top: 205px;
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
}
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0px 8px;
}
@media screen and (max-width: 768px) {
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
}
.blog-slider__pagination .swiper-pagination-bullet {
width: 11px;
height: 11px;
display: block;
border-radius: 10px;
background: #062744;
opacity: 0.2;
transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
opacity: 1;
background: #fd3838;
width: 30px;
box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
@media screen and (max-width: 768px) {
.blog-slider__pagination .swiper-pagination-bullet-active {
height: 11px;
width: 30px;
}
}
</style>
<body class="position-relative">
<nav class="layer" id="layer">
<ul>
<li class="content__item"><a class="link link--elara text-white" href="index.php">Home</a></li>
<li class="content__item"><a class="link link--elara text-white" href="https://bib.itskp-odense.dk/">Bulltitin Board</a></li>
<li class="content__item"><a class="link link--elara text-white" href="https://udlaan.itskp-odense.dk/">Udlån af udstyr</a></li>
<li class="content__item"><a class="link link--elara text-white" href="login.php">Login</a></li>
</ul>
</nav>
<input type="checkbox" name="hamburger" id="hamburger" onclick="shownav()"/>
<label for="hamburger">
<ul><li></li><li></li><li></li></ul>
</label>
<div id="app" class="min-vh-100 d-flex flex-column">
<form action="../Backend/controller/login.php" method="POST">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" name="loginsubmit" placeholder="login">
</form>
<main class="d-flex position-relative" style="flex: auto;">
<div class="container d-grid align-items-center pt-5 pb-5" style="contain: content">
<div class="row justify-content-center">
<div class="col-md-12 h-100" style="border-radius: 4px">
<div class="blog-slider">
<div class="blog-slider front home" id="front">
<div class="blog-slider__wrp swiper-wrapper">
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor2</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
<div class="blog-slider__item swiper-slide">
<!--<div class="blog-slider__img">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg" alt="">
</div>-->
<div class="blog-slider__content">
<span class="blog-slider__code">26 December 2019</span>
<div class="blog-slider__title">Lorem Ipsum Dolor</div>
<div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
<!--<a href="#" class="blog-slider__button">READ MORE</a>-->
</div>
</div>
</div>
<div class="blog-slider__pagination"></div>
</div>
@ -417,28 +78,26 @@
type: 'bullets',
clickable: true,
dynamicBullets: true,
dynamicMainBullets: 3,
dynamicMainBullets: 1,
}
});
$(document).ready(function() {
$('#layer').removeClass('showlayer');
$('#front').addClass('transform-none');
$('#hamburger').prop('checked', '');
})
/*dasdasda*/
$( document ).ready(function() {
$.ajax({
type: 'POST',
url: '../Backend/controller/getPost.php',
success:function (data) {
console.log(data);
},
error:function (data) {
console.log(data);
}
});
});
function shownav() {
if($('#layer').hasClass('showlayer')) {
$('#layer').removeClass('showlayer');
$('#front').addClass('transform-none');
}
else {
$('#layer').addClass('showlayer');
$('#front').removeClass('transform-none');
}
}
</script>
</body>
</html>

107
Frontend/login.php Normal file
View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ITSKP</title>
<script type="text/javascript" src="Assets/JS/jquery-3.6.0.min.js"></script>
<script src="Assets/JS/swiper-bundle.min.js"></script>
<script type="text/javascript" src="Assets/JS/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/CSS/main.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/swiper-bundle.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/pagination.min.css"/>
<link rel="stylesheet" type="text/css" href="Assets/CSS/hover.css"/>
</head>
<body class="position-relative">
<nav class="layer" id="layer">
<ul>
<li class="content__item"><a class="link link--elara text-white" href="index.php">Home</a></li>
<li class="content__item"><a class="link link--elara text-white" href="https://bib.itskp-odense.dk/">Bulltitin Board</a></li>
<li class="content__item"><a class="link link--elara text-white" href="https://udlaan.itskp-odense.dk/">Udlån af udstyr</a></li>
<li class="content__item"><a class="link link--elara text-white" href="login.php">Login</a></li>
</ul>
</nav>
<input type="checkbox" name="hamburger" id="hamburger" onclick="shownav()"/>
<label for="hamburger">
<ul><li></li><li></li><li></li></ul>
</label>
<div id="app" class="min-vh-100 d-flex flex-column">
<main class="d-flex position-relative" style="flex: auto;">
<div class="container d-grid align-items-center pt-5 pb-5" style="contain: content">
<div class="row justify-content-center">
<div class="col-md-6 h-100" style="border-radius: 4px">
<div class="card text-black-50 front">
<div class="card-header">Login</div>
<div class="card-body">
<form method="POST" action="../Backend/controller/login.php">
<div class="form-group row mb-4">
<label for="username" class="col-md-4 col-form-label text-md-right">Username</label>
<div class="col-md-6">
<input id="username" type="text" class="form-control" name="username" required autocomplete="username" autofocus>
</div>
</div>
<div class="form-group row mb-4">
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control" name="password" required autocomplete="current-password">
</div>
</div>
<div class="form-group row">
<div class="col-md-8 offset-md-4">
<button type="submit" name="loginsubmit" class="btn btn-primary">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script type="text/javascript">
var swiper = new Swiper('.blog-slider', {
effect: 'fade',
loop: true,
mousewheel: {
invert: false,
},
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
type: 'bullets',
clickable: true,
dynamicBullets: true,
dynamicMainBullets: 3,
}
});
$(document).ready(function() {
$('#layer').removeClass('showlayer');
$('#front').addClass('transform-none');
$('#hamburger').prop('checked', '');
})
function shownav() {
if($('#layer').hasClass('showlayer')) {
$('#layer').removeClass('showlayer');
$('#front').addClass('transform-none');
}
else {
$('#layer').addClass('showlayer');
$('#front').removeClass('transform-none');
}
}
</script>
</body>
</html>