summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/css/style.css301
-rw-r--r--static/ejs/pages/home.ejs81
-rw-r--r--static/ejs/pages/me.ejs88
-rw-r--r--static/ejs/partials/bar.ejs7
-rw-r--r--static/ejs/partials/meta.ejs1
-rw-r--r--static/img/favicon.pngbin70631 -> 0 bytes
-rw-r--r--static/img/twitch.pngbin6800 -> 0 bytes
7 files changed, 0 insertions, 478 deletions
diff --git a/static/css/style.css b/static/css/style.css
deleted file mode 100644
index ee92164..0000000
--- a/static/css/style.css
+++ /dev/null
@@ -1,301 +0,0 @@
-/**
- * Copyright 2022 ilotterytea
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Manrope:wght@500;600;700&family=SourceCodePro:wght@500,600,700&display=swap');
- @import url('https://use.fontawesome.com/releases/v6.1.2/css/all.css');
-
- :root {
- --text-black: #151515;
- --text-white: #fff;
- --button-0: #7aa751;
- --button-1: #84b458;
- --button-border: #63a62f;
- --button-text-shadow: #4c9021;
- }
-
- html, body, h1, h2, h3, p {
- margin: 0;
- padding: 0;
- }
-
- body {
- font-family: "Inter", sans-serif;
- font-size: 14px;
- background: var(--text-black);
- color: var(--text-white);
- }
-
- h1,h2,h3 {
- font-family: "Manrope", sans-serif;
- }
-
- .container {
- width: 100%;
- min-height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .wrapper {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
-
- .wrapper section {
- margin: 8px 0;
- padding: 8px;
- min-width: 384px;
- }
-/* NAVIGATION */
-nav {
- width: 100%;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: row;
-}
-
-
-nav a.button img {
- width: 16px;
- height: auto;
- border-radius: 4px;
- margin-right: 8px;
-}
-
-/* MAIN PAGE */
-section#brand {
- display: flex;
- flex-direction: row;
- justify-content: center;
-}
-section#brand #logo img {
- width: 64px;
- height: 64px;
- transform: rotate(-45deg);
-}
-section#brand #summary {
- margin: 0 16px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
-}
-section#brand #summary p#name {
- font-size: 32px;
- line-height: 0px;
- margin: 0;
-}
-
-form#uploadform {
-
-}
-
-form#uploadform button#submit {
- float:right;
-}
-form#uploadform input[type="file"]::file-selector-button {
- background: linear-gradient(0deg, var(--button-0), var(--button-1));
- border: var(--button-border) solid 1px;
- font-family: "Source Code Pro", monospace;
- color: var(--text-white);
- text-shadow: 0 -1px 0 var(--button-text-shadow);
- text-align: center;
- text-decoration: none;
- border-radius: 5px;
- padding: 2px 6px;
-}
-
-form#uploadform input[type="file"]::file-selector-button:hover {
- background: linear-gradient(180deg, var(--button-0), var(--button-1));
- cursor: pointer;
-}
-
-/* LINK SECTION */
-.link {
- display: flex;
- flex-direction: row;
-}
-.link #link {
- background: #ddd;
- overflow-x: scroll;
- text-overflow: ellipsis;
- display: table;
- margin: 0 auto;
- max-width: 50%;
-}
- /* ME SECTION */
- .infoblock {
- background: linear-gradient(0deg, #000, #222);
- border: #222 solid 1px;
- display: flex;
- flex-direction: column;
- vertical-align: middle;
- border-radius: 5px;
- width: 512px;
- }
-
- .infoblock .user_summary {
- display: flex;
- flex-direction: row;
- }
-
- .summary p#desc {
- text-align: justify;
- }
-
- .summary #name {
- margin: 12px 0;
- }
-
- .infoblock .user_summary div {
- margin: 5px;
- }
-
- .infoblock .user_summary .pfp {
- display: flex;
- justify-content: center;
- }
-
- .pfp img {
- width: auto;
- height: 64px;
- border-radius: 5px;
- }
-
- .infoblock .action_buttons {
- display: flex;
- flex-direction: row-reverse;
- }
-
- .infoblock .action_buttons a.button {
- margin: 0 4px;
- }
-
- /* ME/IMAGES SECTION! */
-
- #images h2#name {
- padding: 6px;
- }
-
- .items {
- display: flex;
- flex-direction: column;
- overflow-y: scroll;
- max-height: 512px;
- background: #222;
- border: #444 solid 1px;
- border-radius: 4px;
- }
-
- .item {
- background: #525252;
- border-radius: 4px;
- padding: 5px;
- margin: 5px;
- display: flex;
- flex-direction: column;
- }
-
- .item #info {
- display: flex;
- flex-direction: row;
- }
-
- .item #info div {
- margin: 5px;
- }
-
- .item #info #numeration {
- display: flex;
- justify-content: center;
- align-items: center;
- font-family: "Manrope", sans-serif;
- font-weight: 800;
- font-size: 18px;
- }
-
- .item #info #summary {
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
-
- .item #info #summary #timestamp {
- color: #d7ccff;
- }
-
- .item #info #thumbnail img {
- width: 64px;
- height: auto;
- }
-
- .item #info #actions {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-content: center;
- }
-
- /* AUTHENTICATION SECTION */
- .infoblock#authk .action_buttons {
- display: flex;
- flex-direction: row;
- }
- .infoblock#authk .action_buttons button {
- flex-grow: 1;
- margin: 2px;
- }
- /* BUTTONS */
- .button {
- background: linear-gradient(0deg, var(--button-0), var(--button-1));
- border: var(--button-border) solid 1px;
- font-family: "Source Code Pro", monospace;
- color: var(--text-white);
- text-shadow: 0 -1px 0 var(--button-text-shadow);
- text-align: center;
- text-decoration: none;
- border-radius: 5px;
- padding: 2px 6px;
- }
-
- .button:hover {
- background: linear-gradient(180deg, var(--button-0), var(--button-1));
- cursor: pointer;
- }
- .button.twitch {
- font-family: "Inter", sans-serif;
- padding: 6px;
- margin: 8px;
- vertical-align: middle;
- display: flex;
- flex-direction: row;
- background: linear-gradient(0deg, #5f1481, #821ab3);
- border: #66158b solid 1px;
- text-shadow: 0 -1px 0 #691591;
-}
-.button.twitch:hover {
- background: linear-gradient(180deg, #5f1481, #821ab3);
-}
-
-/* SOON (tm) */
-soontm {
- color: #444;
- text-decoration: wavy;
- font-style: italic;
-} \ No newline at end of file
diff --git a/static/ejs/pages/home.ejs b/static/ejs/pages/home.ejs
deleted file mode 100644
index 340c563..0000000
--- a/static/ejs/pages/home.ejs
+++ /dev/null
@@ -1,81 +0,0 @@
-<!--
- Copyright 2022 NotDankEnough (ilotterytea)
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-
-<!DOCTYPE html>
-<html>
- <head>
- <title>Picbin</title>
- <%- include("../partials/meta") %>
-
- </head>
- <body>
- <nav>
- <% if (!user) {%>
- <a href="https://id.twitch.tv/oauth2/authorize?response_type=code&redirect_uri=<%= uri %>&client_id=<%= cid %>" class="button twitch">
- <span class="fa-brands fa-twitch" style="margin-right:8px;"></span>
- <p>Log in with Twitch</p>
- </a>
- <% } else { %>
- <a href="/me" class="button twitch">
- <img src="<%= user.pic %>">
- <p><%= user.name %></p>
- </a>
- <button onclick="logout()" class="button twitch">
- <span class="fa-solid fa-arrow-right-from-bracket"></span>
- </button>
- <% } %>
-
- <a href="https://github.com/notdankenough/picbin" class="button twitch">
- <span class="fa-brands fa-github"></span>
- </a>
- </nav>
- <div class="container">
- <div class="wrapper">
- <section id="brand">
- <div id="logo">
- <img src="../img/favicon.png">
- </div>
- <div id="summary">
- <p id="name"><span style="font-weight:800;font-family:'Manrope', sans-serif;">Pic</span>ture<span style="font-weight:800;font-family:'Manrope',sans-serif;">Bin</span></p>
- </div>
- </section>
- <section id="form">
- <form action="/upload" method="post" id="uploadform">
- <label>Select file to upload:</label><br>
- <input accept="image/*" type="file" name="file" id="file">
- <button type="submit" id="submit" class="button">Upload!</button>
- </form>
- </section>
- </div>
- </div>
- </body>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <script src="https://malsup.github.io/jquery.form.js"></script>
- <script type="text/javascript">
- function logout() {
- document.cookie = "id=;Max-Age=-999999";
- document.cookie = "key=;Max-Age=-999999";
- window.location.reload();
- }
-
- $("#uploadform").ajaxForm({
- dataType: "text",
- success: (response) => {
- window.location.replace(response.split('/')[response.split('/').length - 1]);
- }
- });
- </script>
-</html> \ No newline at end of file
diff --git a/static/ejs/pages/me.ejs b/static/ejs/pages/me.ejs
deleted file mode 100644
index 0c69ef5..0000000
--- a/static/ejs/pages/me.ejs
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
- Copyright 2022 NotDankEnough (ilotterytea)
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-
-<!DOCTYPE html>
-<html>
- <head>
- <title><%= user.name %> - Image Hoster</title>
- <%- include("../partials/meta") %>
- </head>
- <body>
- <div class="container">
- <div class="wrapper">
- <section class="infoblock">
- <a href="/" class="button">Go back...</a>
- </section>
- <section class="infoblock">
- <div class="user_summary">
- <div class="pfp">
- <img src="<%= user.pic %>">
- </div>
- <div class="summary">
- <h2 id="name"><%= user.name%> (<%= user.alias_id %>)</h2>
- <p id="desc"><%= user.desc %></p>
- </div>
- </div>
- <div class="action_buttons">
-
- </div>
- </section>
- <section class="infoblock" id="authk">
- <h2 id="name">
- <span class="fa-solid fa-key"></span> Authentication Key
- </h2>
- <p>An authentication key is required if you want to upload images under your account <soontm>and be able to delete them.</soontm></p>
- <div class="action_buttons">
- <button value="<%= authKey %>" id="authkey" class="button" onclick="copyAuthkey()">Copy to Clipboard</button>
- </div>
- </section>
- <section class="infoblock">
- <h2 id="name">
- Files (<%= images.length %>)
- </h2>
- <div class="items">
- <% images.forEach((image, index) => { %>
- <div class="item">
- <div id="info">
- <div id="numeration">
- <p><%= index + 1 %></p>
- </div>
- <div id="thumbnail">
- <img src="../images/<%= image.storage_id %>">
- </div>
- <div id="summary">
- <!--<p id="desc"><% if (!image.description) {%> No description provided. <% } else { %> <%= image.description %> <%}%></p>-->
- <p id="timestamp" title="Timestamp"><span class="fa-solid fa-stamp"></span> <%= image.timestamp %></p>
- </div>
- <div id="actions">
- <a href="/<%= image.id %>" class="button">View</a>
- </div>
- </div>
- </div>
- <%})%>
- </div>
- </section>
- </div>
- </div>
- </body>
- <script>
- function copyAuthkey() {
- var text = document.getElementById("authkey");
- navigator.clipboard.writeText(text.value);
- alert("Copied the authentication key!");
- }
- </script>
-</html> \ No newline at end of file
diff --git a/static/ejs/partials/bar.ejs b/static/ejs/partials/bar.ejs
deleted file mode 100644
index 550d9e2..0000000
--- a/static/ejs/partials/bar.ejs
+++ /dev/null
@@ -1,7 +0,0 @@
-<nav>
- <div class="content">
- <a href="#">
- API
- </a>
- </div>
-</nav> \ No newline at end of file
diff --git a/static/ejs/partials/meta.ejs b/static/ejs/partials/meta.ejs
deleted file mode 100644
index 38aa1df..0000000
--- a/static/ejs/partials/meta.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<link rel="stylesheet" href="../css/style.css"> \ No newline at end of file
diff --git a/static/img/favicon.png b/static/img/favicon.png
deleted file mode 100644
index 4b165b8..0000000
--- a/static/img/favicon.png
+++ /dev/null
Binary files differ
diff --git a/static/img/twitch.png b/static/img/twitch.png
deleted file mode 100644
index d7b64a1..0000000
--- a/static/img/twitch.png
+++ /dev/null
Binary files differ