mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2024-12-29 10:56:12 +00:00
Something something switching to sass
This commit is contained in:
parent
85afe70daa
commit
4007f47e49
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
images/
|
||||||
400
css/main.css
Normal file
400
css/main.css
Normal file
|
|
@ -0,0 +1,400 @@
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| Sass stylesheet
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| This is all written by me! Fluffy! This is intended to be
|
||||||
|
| compiled before use, I want to make this autocompile for
|
||||||
|
| ease of use, but you may suffer along with me for now :3
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--bg: #151515bb;
|
||||||
|
--bg-1: #242621;
|
||||||
|
--bg-2: #1D1E1C;
|
||||||
|
--bg-3: #151515;
|
||||||
|
--fg:#E8E3E3;
|
||||||
|
--fg-dark: #151515;
|
||||||
|
--red: #B66467;
|
||||||
|
--orange: #FF7700;
|
||||||
|
--green: #8C977D;
|
||||||
|
--black: #151515;
|
||||||
|
--white: #E8E3E3;
|
||||||
|
--shadow: 6px 6px 2px #15151588;
|
||||||
|
--rad: 0px;
|
||||||
|
--square: 33.33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: calc(100% - 2.4rem);
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
height: 2.5rem;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 99;
|
||||||
|
top: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
nav p {
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
nav hr {
|
||||||
|
margin: 0.5rem 0.2rem;
|
||||||
|
padding: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
font-size: 22px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.nav-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.nav-links {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
nav {
|
||||||
|
margin: 0;
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
position: fixed;
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #151515;
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: none;
|
||||||
|
border-top: 3px solid #8C977D;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
}
|
||||||
|
.nav-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.info-text {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-bottom: calc(5rem + 3px) !important;
|
||||||
|
}
|
||||||
|
#back-to-top {
|
||||||
|
bottom: 5rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| INDEX
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.info-text {
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.info-text h1 {
|
||||||
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.info-text p {
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-root {
|
||||||
|
padding: 0.25rem;
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
margin: 0.25rem;
|
||||||
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
max-width: calc(33.33% - 0.5rem);
|
||||||
|
background-color: #151515;
|
||||||
|
border-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
flex: 1 0 150px;
|
||||||
|
transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
.gallery-item:hover {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.gallery-item:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
-o-object-position: center;
|
||||||
|
object-position: center;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| IMAGE
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.image-container {
|
||||||
|
margin: 1rem 0 2rem 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 69vh;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
background-color: #151515;
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-radius: 0;
|
||||||
|
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.image-container {
|
||||||
|
max-height: 42vh !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
width: auto;
|
||||||
|
max-height: inherit;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: calc(100% - 2.4rem);
|
||||||
|
padding: 0.5rem;
|
||||||
|
background-color: #151515;
|
||||||
|
color: #E8E3E3;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0.2rem solid #8C977D;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
}
|
||||||
|
footer a {
|
||||||
|
margin: 0.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: "Secular One", sans-serif;
|
||||||
|
}
|
||||||
|
footer a:hover {
|
||||||
|
color: #FF7700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BODY COMPONENTS
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: 100vw;
|
||||||
|
position: relative;
|
||||||
|
background-color: #151515;
|
||||||
|
background-image: url("../assets/bg.svg");
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
max-width: 1000px;
|
||||||
|
min-height: calc(100vh - 2rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body * {
|
||||||
|
color: #E8E3E3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BUTTONS
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.btn {
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-decoration: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
outline: #E8E3E3 3px solid;
|
||||||
|
color: #E8E3E3;
|
||||||
|
}
|
||||||
|
.btn:where(input[type=file])::-webkit-file-upload-button {
|
||||||
|
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #E8E3E3;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.btn:where(input[type=file])::file-selector-button {
|
||||||
|
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #E8E3E3;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.btn a {
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| FORM
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
form * {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| IMAGES
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.image-container {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 69vh;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-radius: 0;
|
||||||
|
transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
margin: 0 0.2rem 0.1rem 0;
|
||||||
|
width: 19px;
|
||||||
|
height: 18px;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BACK TO TOP
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
#back-to-top {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5rem;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
right: -2.5rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
-o-object-position: center;
|
||||||
|
object-position: center;
|
||||||
|
background-color: #151515;
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
|
||||||
|
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||||
|
}
|
||||||
|
#back-to-top:hover {
|
||||||
|
outline: 0.2rem solid #8C977D;
|
||||||
|
}
|
||||||
|
#back-to-top * {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
display: block;
|
||||||
|
-o-object-position: center;
|
||||||
|
object-position: center;
|
||||||
|
}/*# sourceMappingURL=main.css.map */
|
||||||
1
css/main.css.map
Normal file
1
css/main.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"}
|
||||||
182
css/main.scss
Normal file
182
css/main.scss
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| Sass stylesheet
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| This is all written by me! Fluffy! This is intended to be
|
||||||
|
| compiled before use, I want to make this autocompile for
|
||||||
|
| ease of use, but you may suffer along with me for now :3
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
@import "scss/mixin";
|
||||||
|
@import "scss/variables";
|
||||||
|
|
||||||
|
@import "scss/navigation";
|
||||||
|
@import "scss/body";
|
||||||
|
@import "scss/footer";
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BODY COMPONENTS
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
html {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
|
||||||
|
min-height: 100vh; max-width: 100vw;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
background-image: url("../assets/bg.svg");
|
||||||
|
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0 auto; padding: 1rem;
|
||||||
|
|
||||||
|
max-width: 1000px;
|
||||||
|
|
||||||
|
min-height: calc(100vh - 2rem);
|
||||||
|
|
||||||
|
@include flexDown(space-between);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: $fg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BUTTONS
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.btn {
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: $rad;
|
||||||
|
|
||||||
|
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
outline: $white 3px solid;
|
||||||
|
color: $fg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:where(input[type="file"])::file-selector-button {
|
||||||
|
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: $rad;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-bottom: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| FORM
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
* {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| IMAGES
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.image-container {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 69vh; height: auto;
|
||||||
|
|
||||||
|
@include flexDown(space-between);
|
||||||
|
|
||||||
|
background-color: $bg-alt;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
|
border-radius: $rad;
|
||||||
|
|
||||||
|
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
margin: 0 0.2rem 0.1rem 0;
|
||||||
|
|
||||||
|
width: 19px; height: 18px;
|
||||||
|
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| BACK TO TOP
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
#back-to-top {
|
||||||
|
margin: 0; padding: 0.5rem;
|
||||||
|
|
||||||
|
position: fixed; z-index: 99;
|
||||||
|
right: -2.5rem; bottom: 1rem;
|
||||||
|
|
||||||
|
object-position: center;
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: $shadow;
|
||||||
|
|
||||||
|
transition: right 0.15s cubic-bezier(.19,1,.22,1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
outline: 0.2rem solid $green;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
width: 1.5rem; height: 1.5rem;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -106,7 +106,7 @@ body {
|
||||||
-=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
-=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||||||
*/
|
*/
|
||||||
.default-window {
|
.default-window {
|
||||||
margin: 0 0 2rem; padding: 0.5rem;
|
margin: 0 0 1rem; padding: 0.5rem;
|
||||||
|
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,9 @@ nav hr {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-name p, .nav-name {
|
.nav-name *, .nav-name {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
font-family: "Lexend Deca", sans-serif;
|
font-family: "Lexend Deca", sans-serif;
|
||||||
|
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
@ -78,10 +80,10 @@ nav hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-bottom: 5.5rem !important;
|
margin-bottom: calc(4rem + 3px) !important;
|
||||||
}
|
}
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
bottom: 5.5rem !important;
|
bottom: 5rem !important;
|
||||||
}
|
}
|
||||||
nav .svg {
|
nav .svg {
|
||||||
padding: 0.35rem !important;
|
padding: 0.35rem !important;
|
||||||
|
|
|
||||||
117
css/scss/_body.scss
Normal file
117
css/scss/_body.scss
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| INDEX
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.info-text {
|
||||||
|
margin: 1rem 0; padding: 0;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: $font-header;
|
||||||
|
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-family: $font-body;
|
||||||
|
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-root {
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
|
background-color: $bg; color: $fg;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
border: 0.2rem solid $green;
|
||||||
|
|
||||||
|
border-radius: $rad;
|
||||||
|
box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
margin: 0.25rem; padding: 0;
|
||||||
|
|
||||||
|
height: auto; max-width: calc(33.33% - 0.5rem);
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
border-radius: $rad;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
flex: 1 0 150px;
|
||||||
|
|
||||||
|
transition: transform 0.15s cubic-bezier(.19,1,.22,1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
box-shadow: $shadow;
|
||||||
|
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
|
||||||
|
top: 0; bottom: 0; left: 0; right: 0;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
|
||||||
|
border-radius: $rad;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
| IMAGE
|
||||||
|
|-------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.image-container {
|
||||||
|
margin: 1rem 0 2rem 0; padding: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-height: 69vh; height: auto;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
|
border-radius: $rad;
|
||||||
|
|
||||||
|
transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.image-container {
|
||||||
|
max-height: 42vh !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
max-width: 100%; width: auto;
|
||||||
|
max-height: inherit; height: auto;
|
||||||
|
|
||||||
|
border-radius: $rad;
|
||||||
|
}
|
||||||
22
css/scss/_footer.scss
Normal file
22
css/scss/_footer.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
footer {
|
||||||
|
@include defaultDecoration($page-accent);
|
||||||
|
@include flexLeft(space-around);
|
||||||
|
|
||||||
|
margin: 0 auto !important;
|
||||||
|
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
width: calc(100% - 1.4rem);
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin: 0.5rem;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
font-family: $font-body;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
css/scss/_mixin.scss
Normal file
30
css/scss/_mixin.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
@mixin defaultDecoration($border) {
|
||||||
|
width: calc(100% - 2.4rem);
|
||||||
|
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
background-color: $bg; color: $fg;
|
||||||
|
|
||||||
|
border-radius: $rad;
|
||||||
|
|
||||||
|
border: 0.2rem solid $border;
|
||||||
|
|
||||||
|
box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flexDown($justify) {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
justify-content: $justify;
|
||||||
|
}
|
||||||
|
@mixin flexLeft($justify) {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
justify-content: $justify;
|
||||||
|
}
|
||||||
84
css/scss/_navigation.scss
Normal file
84
css/scss/_navigation.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
nav {
|
||||||
|
@include defaultDecoration($page-accent);
|
||||||
|
@include flexLeft(space-between);
|
||||||
|
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
|
||||||
|
width: calc(100% - 1.4rem); height: 2.5rem;
|
||||||
|
|
||||||
|
position: sticky; z-index: 99;
|
||||||
|
top: 1rem;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
margin: 0.5rem 0.2rem; padding: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-name {
|
||||||
|
@include flexLeft(space-around);
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-family: $font-header;
|
||||||
|
|
||||||
|
font-size: 22px;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.nav-links {
|
||||||
|
@include flexLeft(space-around);
|
||||||
|
|
||||||
|
font-family: $font-body;
|
||||||
|
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.nav-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.nav-links {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 550px) {
|
||||||
|
nav {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
width: calc(100% - 1rem);
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: auto; bottom: 0; left: 0; right: 0;
|
||||||
|
|
||||||
|
background-color: $bg;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-top: 3px solid $green;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
}
|
||||||
|
.nav-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-text {
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-bottom: calc(5rem + 3px) !important;
|
||||||
|
}
|
||||||
|
#back-to-top {
|
||||||
|
bottom: 5rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
44
css/scss/_variables.scss
Normal file
44
css/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
$bg: #151515;
|
||||||
|
$bg-alt: #151515bb;
|
||||||
|
|
||||||
|
$fg: #E8E3E3;
|
||||||
|
$fg-alt: #151515;
|
||||||
|
|
||||||
|
$red: #B66467;
|
||||||
|
$orange: #FF7700;
|
||||||
|
$green: #8C977D;
|
||||||
|
$black: #151515;
|
||||||
|
$white: #E8E3E3;
|
||||||
|
|
||||||
|
$page-accent: #8C977D;
|
||||||
|
|
||||||
|
$shadow: 6px 6px 2px #15151588;
|
||||||
|
$rad: 0;
|
||||||
|
|
||||||
|
$weight-bold: 621;
|
||||||
|
$weight-normal: 400;
|
||||||
|
|
||||||
|
$font-header: 'Lexend Deca', sans-serif;
|
||||||
|
$font-body: 'Secular One', sans-serif;
|
||||||
|
|
||||||
|
// Fallback for items that do not yet support the new sass stylesheet system
|
||||||
|
:root {
|
||||||
|
--bg: #151515bb;
|
||||||
|
--bg-1: #242621;
|
||||||
|
--bg-2: #1D1E1C;
|
||||||
|
--bg-3: #151515;
|
||||||
|
|
||||||
|
--fg:#E8E3E3;
|
||||||
|
--fg-dark: #151515;
|
||||||
|
|
||||||
|
--red: #B66467;
|
||||||
|
--orange: #FF7700;
|
||||||
|
--green: #8C977D;
|
||||||
|
--black: #151515;
|
||||||
|
--white: #E8E3E3;
|
||||||
|
|
||||||
|
--shadow: 6px 6px 2px #15151588;
|
||||||
|
--rad: 0px;
|
||||||
|
|
||||||
|
--square: 33.33%;
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="css/master.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<link rel="stylesheet" href="css/normalise.css">
|
<link rel="stylesheet" href="css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
<!-- Google Fonts -->
|
||||||
|
|
@ -147,7 +147,7 @@
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="image-container space-bottom-large">
|
<div class="image-container">
|
||||||
<img class='image' id='<?php echo $image['id']; ?>' src='<?php echo $image_path; ?>' alt='<?php echo $image_alt; ?>'>
|
<img class='image' id='<?php echo $image['id']; ?>' src='<?php echo $image_path; ?>' alt='<?php echo $image_alt; ?>'>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
201
index.php
201
index.php
|
|
@ -1,121 +1,124 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Lynx Gallery</title>
|
<title>Lynx Gallery</title>
|
||||||
|
|
||||||
<!-- Stylesheets -->
|
<!-- Stylesheets -->
|
||||||
<link rel="stylesheet" href="css/master.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
<link rel="stylesheet" href="css/normalise.css">
|
<link rel="stylesheet" href="css/normalise.css">
|
||||||
|
|
||||||
<!-- Google Fonts -->
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
|
|
||||||
|
|
||||||
<!-- JQuery -->
|
<!-- Google Fonts -->
|
||||||
<script
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@600">
|
||||||
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap">
|
||||||
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
|
||||||
crossorigin="anonymous">
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Sniffle script! -->
|
<!-- JQuery -->
|
||||||
<script src="Sniffle/sniffle.js"></script>
|
<script
|
||||||
<link rel='stylesheet' href='Sniffle/sniffle.css'>
|
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||||
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||||
|
crossorigin="anonymous">
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- Flyout script! -->
|
<!-- Sniffle script! -->
|
||||||
<script src="Flyout/flyout.js"></script>
|
<script src="Sniffle/sniffle.js"></script>
|
||||||
<link rel='stylesheet' href='Flyout/flyout.css'>
|
<link rel='stylesheet' href='Sniffle/sniffle.css'>
|
||||||
|
|
||||||
<?php include "ui/required.php"; ?>
|
<!-- Flyout script! -->
|
||||||
|
<script src="Flyout/flyout.js"></script>
|
||||||
|
<link rel='stylesheet' href='Flyout/flyout.css'>
|
||||||
|
|
||||||
|
<?php include "ui/required.php"; ?>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<?php
|
<?php
|
||||||
include "ui/nav.php";
|
include "ui/nav.php";
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<script>
|
|
||||||
sniffleAdd("Warning", "The website is currently being worked on, some functionality has been restored, but tread carefully as errors may occur", "var(--red)", "<?php echo $root_dir ?>assets/icons/warning.svg");
|
|
||||||
|
|
||||||
if (params.del == "true") {
|
<script>
|
||||||
sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/trash.svg");
|
sniffleAdd("Warning", "The website is currently being worked on, some functionality has been restored, but tread carefully as errors may occur", "var(--red)", "<?php echo $root_dir ?>assets/icons/warning.svg");
|
||||||
}
|
|
||||||
if (params.login == "success") {
|
|
||||||
sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/hand-waving.svg");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="info-text center">
|
if (params.del == "true") {
|
||||||
<?php
|
sniffleAdd("Image Deleted", "Successfully deleted image: <?php echo $_GET['id']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/trash.svg");
|
||||||
// Set time for message
|
}
|
||||||
$time = date("H");
|
if (params.login == "success") {
|
||||||
$timezone = date("e");
|
sniffleAdd("Logged in", "O hi <?php echo $_SESSION['username']; ?>", "var(--green)", "<?php echo $root_dir ?>assets/icons/hand-waving.svg");
|
||||||
if ($time < "12") {
|
}
|
||||||
$time_welc = "Good morning";
|
</script>
|
||||||
} else if ($time >= "12" && $time < "17") {
|
|
||||||
$time_welc = "Good afternoon";
|
|
||||||
} else if ($time >= "17" && $time < "19") {
|
|
||||||
$time_welc = "Good evening";
|
|
||||||
} else if ($time >= "19") {
|
|
||||||
$time_welc = "Good night";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Welcome depending on if user is logged in or not
|
<div class="info-text">
|
||||||
if (isset($_SESSION["username"])) {
|
<?php
|
||||||
echo "<h1>".$time_welc." ".$_SESSION['username']."!</h1>";
|
// Set time for message
|
||||||
} else {
|
$time = date("H");
|
||||||
echo "<h1>".$time_welc."!</h1>";
|
$timezone = date("e");
|
||||||
}
|
if ($time < "12") {
|
||||||
|
$time_welc = "Good morning";
|
||||||
|
} else if ($time >= "12" && $time < "17") {
|
||||||
|
$time_welc = "Good afternoon";
|
||||||
|
} else if ($time >= "17" && $time < "19") {
|
||||||
|
$time_welc = "Good evening";
|
||||||
|
} else if ($time >= "19") {
|
||||||
|
$time_welc = "Good night";
|
||||||
|
}
|
||||||
|
|
||||||
// Random welcome message
|
// Welcome depending on if user is logged in or not
|
||||||
$welcome_message = array("*internal screaming*",
|
if (isset($_SESSION["username"])) {
|
||||||
"Sussy Wussy",
|
echo "<h1>".$time_welc." ".$_SESSION['username']."!</h1>";
|
||||||
"What is this world?",
|
} else {
|
||||||
"Don't forget to drink water!",
|
echo "<h1>".$time_welc."!</h1>";
|
||||||
"Bruh",
|
}
|
||||||
"This is so poorly programmed",
|
|
||||||
"Sorry",
|
|
||||||
"Fluffy made this!",
|
|
||||||
"maybe",
|
|
||||||
"I'm gay",
|
|
||||||
"I wish we were better strangers.",
|
|
||||||
"<span style='color:#ffff00;'>Just like Minecraft!</span>",
|
|
||||||
"If I were you, I'd run now",
|
|
||||||
"This is the part where I kill you",
|
|
||||||
"SILICA GEL \"DO NOT EAT\".",
|
|
||||||
"This was supposed to be a simple project",
|
|
||||||
"AAAAAAAAAAAAAAAAAAAA",
|
|
||||||
"Let me out",
|
|
||||||
"nice",
|
|
||||||
"Thank you that you're here",
|
|
||||||
"The weather is dry",
|
|
||||||
"Need me a man 👀");
|
|
||||||
echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="gallery-root flex-left">
|
// Random welcome message
|
||||||
<?php
|
$welcome_message = array("*internal screaming*",
|
||||||
// Reading images from table
|
"Sussy Wussy",
|
||||||
$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
|
"What is this world?",
|
||||||
|
"Don't forget to drink water!",
|
||||||
|
"Bruh",
|
||||||
|
"This is so poorly programmed",
|
||||||
|
"Sorry",
|
||||||
|
"Fluffy made this!",
|
||||||
|
"maybe",
|
||||||
|
"I'm gay",
|
||||||
|
"I wish we were better strangers.",
|
||||||
|
"<span style='color:#ffff00;'>Just like Minecraft!</span>",
|
||||||
|
"If I were you, I'd run now",
|
||||||
|
"This is the part where I kill you",
|
||||||
|
"SILICA GEL \"DO NOT EAT\".",
|
||||||
|
"This was supposed to be a simple project",
|
||||||
|
"AAAAAAAAAAAAAAAAAAAA",
|
||||||
|
"Let me out",
|
||||||
|
"nice",
|
||||||
|
"Thank you that you're here",
|
||||||
|
"The weather is dry",
|
||||||
|
"Need me a man 👀");
|
||||||
|
echo "<p>".$welcome_message[array_rand($welcome_message, 1)]."</p>";
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
while ($image = mysqli_fetch_array($image_request)) {
|
<div class="gallery-root flex-left">
|
||||||
// Getting thumbnail
|
<?php
|
||||||
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
// Reading images from table
|
||||||
$image_path = "images/thumbnails/".$image['imagename'];
|
$image_request = mysqli_query($conn, "SELECT * FROM swag_table ORDER BY id DESC");
|
||||||
} else {
|
|
||||||
$image_path = "images/".$image['imagename'];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Image loading
|
while ($image = mysqli_fetch_array($image_request)) {
|
||||||
echo "<div class='gallery-item'>";
|
// Getting thumbnail
|
||||||
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
if (file_exists("images/thumbnails/".$image['imagename'])) {
|
||||||
echo "</div>";
|
$image_path = "images/thumbnails/".$image['imagename'];
|
||||||
}
|
} else {
|
||||||
?>
|
$image_path = "images/".$image['imagename'];
|
||||||
</div>
|
}
|
||||||
|
|
||||||
<?php include "ui/footer.php"; ?>
|
// Image loading
|
||||||
|
echo "<div class='gallery-item'>";
|
||||||
|
echo "<a href='image.php?id=".$image['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$image['id']."'></a>";
|
||||||
|
echo "</div>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<?php include "ui/footer.php"; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue