diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..96d84bb --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# Images from uploads to the website, including thumbnails +images/ + +# CSS map, I don't think its needed for upload... I think? +*.map \ No newline at end of file diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..e69de29 diff --git a/Flyout/.flyout.css.swp b/Flyout/.flyout.css.swp new file mode 100644 index 0000000..c092334 Binary files /dev/null and b/Flyout/.flyout.css.swp differ diff --git a/Flyout/flyout.css b/Flyout/flyout.css new file mode 100644 index 0000000..530919d --- /dev/null +++ b/Flyout/flyout.css @@ -0,0 +1,60 @@ +.flyout-dim { + margin: 0; padding: 0; + + width: 100vw; height: 100vh; + + display: none; + + top: 0; bottom: 0; left: 0; right: 0; + + position: fixed; z-index: 999; + + background-color: var(--bg); + backdrop-filter: blur(8px); + + opacity: 0; + + transition: opacity 1s cubic-bezier(.19,1,.22,1), filter 1s cubic-bezier(.19,1,.22,1); +} + +.flyout { + margin: 0; padding: 0.5rem; + + max-width: 621px; width: calc(100% - 3.5rem); + max-height: 20rem; height: auto; min-height: 10rem; + + position: fixed; z-index: 9999; + left: 50%; bottom: -15rem; + transform: translateX(-50%) scale(0.5); + + overflow-y: auto; + + background-color: var(--bg); + backdrop-filter: blur(8px); + color: white; + + transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1); + + border-radius: var(--rad); + border: 0.2rem solid var(--green); + /*outline: 0.5rem solid var(--bg);*/ +} + +.flyout-header { + font-size: 20px; + font-family: "Lexend Deca", sans-serif; +} + +.flyout-actionbox { + display: inline; + box-sizing: border-box; +} + +/* Worlds shittest workaround to a problem I have no clue how to fix */ +.flyout-actionbox *, +.flyout-actionbox * * { + width: 100%; +} +.flyout-actionbox * * * { + width: auto; +} diff --git a/Flyout/flyout.js b/Flyout/flyout.js new file mode 100644 index 0000000..c929271 --- /dev/null +++ b/Flyout/flyout.js @@ -0,0 +1,54 @@ +$(document).ready(function() { + var flyoutRoot = document.getElementById("#flyoutRoot"); + var flyoutDim = document.getElementById("#flyoutDim"); + + var flyoutHeader = document.getElementById("#flyoutHeader"); + var flyoutDescription = document.getElementById("#flyoutDescription"); + var flyoutActionbox = document.getElementById("#flyoutActionbox"); +}); + +function flyoutShow(header, description, actionbox) { + // Hide overflow + document.querySelector("html").style.overflow = "hidden"; + // Checking if actionbox is set + if (typeof actionbox === 'undefined') { + flyoutActionbox.style.display = "none"; + } else if (actionbox == "") { + flyoutActionbox.style.display = "none"; + } else { + flyoutActionbox.style.display = "block"; + } + + // Set information in flyout + flyoutHeader.textContent = header; + flyoutDescription.textContent = description; + $(flyoutActionbox).html(actionbox); + + // Show the flyout + flyoutRoot.style.display = "flex"; + // Show the dim + flyoutDim.style.display = "block"; + setTimeout(function(){ + // Show the flyout + flyoutRoot.style.transform = "translateX(-50%) scale(1)"; + flyoutRoot.style.bottom = "1rem"; + // Show the dim + flyoutDim.style.opacity = "1"; + }, 1); +}; + +function flyoutClose() { + // Show overflow + document.querySelector("html").style.overflow = "auto"; + // Hide the flyout + flyoutRoot.style.transform = "translateX(-50%) scale(0.5)"; + flyoutRoot.style.bottom = "-20rem"; + // Hide the dim + flyoutDim.style.opacity = "0"; + setTimeout(function(){ + // Hide the flyout + flyoutRoot.style.display = "none"; + // Hide the dim + flyoutDim.style.display = "none"; + }, 500); +}; diff --git a/Sniffle/sniffle.css b/Sniffle/sniffle.css new file mode 100644 index 0000000..79c3751 --- /dev/null +++ b/Sniffle/sniffle.css @@ -0,0 +1,113 @@ +/* + Sniffle CSS + + Written simply for easy changing! +*/ + + +/* + Base notification stacking + + It allows for the notifications to stack simply + Due to div having no height initself there is no + reason in hiding it when no notifications are showing +*/ +.sniffle { + margin: 0; padding: 0 1rem; + + max-width: 621px; width: calc(100% - 1rem); + + top: 0.5rem; left: 50%; + transform: translateX(-50%); + + position: fixed; z-index: 999; +} + +/* + Notification body + + It contains 2 child elements, + am image .sniffle-img + and a text div .sniffle-content +*/ +.sniffle-notification { + margin-bottom: 0.5rem; padding: 0.5rem; + + max-width: calc(100% - 1rem); min-height: 2.5rem; + + display: flex; flex-direction: row; overflow-y: hidden; + + z-index: 999; + + background-color: #151515; + + box-shadow: var(--shadow); + + transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); + + border-radius: var(--rad); +} +.sniffle-notification:hover { + transform: scale(1.05); + + cursor: pointer; +} + +/* + Notification content Root + + Overflow is hidden incase the description of the message is too long too display + And to prevent text from overflowing the notification +*/ +.sniffle-content { + margin: 0 auto; + + width: calc(100% - 3.5rem); + flex-direction: column; flex-wrap: wrap; + + overflow-y: hidden; +} + +/* + Notification icon/image +*/ +.sniffle-img { + margin-right: 1rem; + + max-width: 2.5rem; width: auto; + height: auto; + + object-fit: contain; +} +/* + Notification header +*/ +.sniffle-header { + margin: 0 0 0.25rem 0; padding: 0; + + font-size: 15px; + font-weight: 621; + font-family: "Lexend Deca", sans-serif; + + color: var(--fg); +} +/* + Notification description +*/ +.sniffle-description { + margin: 0; padding: 0; + font-size: 14px; + + word-wrap: break-word; + font-weight: 500; + font-family: 'Secular One', sans-serif; + + color: var(--fg); +} +.sniffle-description::after { + content: '\A Click\00A0 to\00A0 dissmiss'; + + white-space: pre; + + opacity: 0.6; +} diff --git a/Sniffle/sniffle.js b/Sniffle/sniffle.js new file mode 100644 index 0000000..111e4b3 --- /dev/null +++ b/Sniffle/sniffle.js @@ -0,0 +1,52 @@ +/* + Close notification + Used by the notifications themself, don't use in code +*/ +function sniffleClose(a) { + a.closest(".sniffle-notification").style.transform="translateY(-20rem) scale(0.8)"; + a.closest(".sniffle-notification").style.opacity="0"; + + setTimeout(function(){ + a.closest(".sniffle-notification").style.display="none"; + a.remove() + }, 200); +}; + + +/* + Add notification + + Header > Required + Takes in String input + + Description > Required + Takes in String input + + Img > Optional + Takes in String input +*/ +function sniffleAdd(header, description, colour, img) { + // Colour is optional, so check if it was added or not + if (typeof colour === 'undefined') { + colour = ''; + } else { + colour = `style="background-color:${colour};"`; + } + + // Image is optional, so check if it was added or not + if (typeof img === 'undefined') { + img = ''; + } else { + img = ``; + } + + var newSniffle = `
\ + ${img}\ +
\ +

${header}

\ +

${description}

\ +
\ +
`; + + $(".sniffle").append(newSniffle); +}; diff --git a/info/about.php b/about.php similarity index 67% rename from info/about.php rename to about.php index 1e9e6ca..ee9296e 100644 --- a/info/about.php +++ b/about.php @@ -3,36 +3,64 @@ - Gallery - - - - + Lynx Gallery + + + + + + + + + + + + + + + + + + + - + -
+

What is Fluffys Amazing Gallery?

Fluffys Amazing Gallery is a smol project I originally started to control the images on my main page, but quickly turned into something much bigger...

What Do I want this to become in the future? No clue, but I do want this to be usable by others, if its a file they download a docker image they setup on your own web server.

Will it become that any time soon? No, but. I am going to work on this untill it becomes what I want it to be!

+
+ +

Can you add "A" or "B"?

+

No.

+ +
+

How do I use this!

First you must obtain the invite code. If you don't have one and are interested in trying this, feel free to DM me on Telegram!

But once you're done doing that, you can start making your account at the signup page here.

From there you should be able to go and login at this fancy page here!

Now you should see "Welcome (your username)" at the homepage. From there navigate to the navbar and click on the upload button. Choose your file, enter the description and your image is up!

+
+

Credits!

To Carty for being super cool again and helping me get started with SQL and PHP!

To Phosphor for providing nice SVG icons.

To mrHDash...

- + diff --git a/account/account.php b/account/account.php index 624ca5e..86feae8 100644 --- a/account/account.php +++ b/account/account.php @@ -3,51 +3,77 @@ - Account - - - - + Lynx Gallery + + + + + + + + + + + + + + + + + + + -
+ - + diff --git a/account/login.php b/account/login.php index c013abf..8d2a939 100644 --- a/account/login.php +++ b/account/login.php @@ -3,121 +3,73 @@ - Login - - - - + Lynx Gallery + + + + + + + + + + + + + + + + + + + - -
- - -
- - - - + sniffleAdd('Whatcha doing here?', 'You are already logged in! No need to try again', 'var(--black)', 'assets/icons/warning.svg'); + + + + + + + + diff --git a/account/password-reset.php b/account/password-reset.php index de6c47c..1692224 100644 --- a/account/password-reset.php +++ b/account/password-reset.php @@ -3,100 +3,69 @@ - Account - - - - + Lynx Gallery + + + + + + + + + + + + + + + + + + + -
- - -
- -
-

Reset Password

-

After reset, you will be kicked out to login again

-
- - - +
+

Reset Password

+

After reset, you will be kicked out to login again

+
+ + + +
+
- + + + diff --git a/account/signup.php b/account/signup.php index 597ce8c..19e5b70 100644 --- a/account/signup.php +++ b/account/signup.php @@ -3,186 +3,71 @@ - Sign Up - - - - + Lynx Gallery + + + + + + + + + + + + + + + + + + + -
- - -
- -