diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/css/style.css | 331 | ||||
| -rw-r--r-- | static/ejs/pages/home.ejs | 81 | ||||
| -rw-r--r-- | static/ejs/pages/me.ejs | 88 | ||||
| -rw-r--r-- | static/ejs/partials/bar.ejs | 7 | ||||
| -rw-r--r-- | static/ejs/partials/meta.ejs | 1 | ||||
| -rw-r--r-- | static/html/index.html | 62 | ||||
| -rw-r--r-- | static/img/favicon.png (renamed from static/webimg/favicon.png) | bin | 70631 -> 70631 bytes | |||
| -rw-r--r-- | static/img/twitch.png | bin | 0 -> 6800 bytes |
8 files changed, 430 insertions, 140 deletions
diff --git a/static/css/style.css b/static/css/style.css index bbdd598..ee92164 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -13,114 +13,289 @@ * 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&display=swap'); + @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 { - --bg-color-main: #0f0f0f; - --text-color: #ddd; - - --bg-color-submit-button: #649b44; - --bg-color-sec-submit-button: #75b450; - --bg-color-submit-button-na: #555; - --bg-color-submit-button-na-2: #333; - --border-color-submit-button: #a5df84; - --border-color-submit-button-highlight: #d3f3c0; - --border-color-submit-button-na: #888; - --text-color-submit-button: #ddd; - --text-color-submit-button-na: #aaa; - --text-color-submit-button-highlight: #fff; -} -html, body { + --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; - min-height: 100vh; -} -body { - background: var(--bg-color-main); - color: var(--text-color); + } + + 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; - flex-direction: column; justify-content: center; align-items: center; -} + } -.container { - margin: 0 30px; + .wrapper { display: flex; - flex-grow: 1; flex-direction: column; justify-content: center; - padding: 40px 0; -} + align-items: center; + } -.content { - display: flex; - flex-direction: column; - justify-content: center; + .wrapper section { + margin: 8px 0; + padding: 8px; + min-width: 384px; + } +/* NAVIGATION */ +nav { + width: 100%; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; } -.content section { - padding: 14px; -} -h1,h2,h3 { - font-family: "Manrope", sans-serif; +nav a.button img { + width: 16px; + height: auto; + border-radius: 4px; + margin-right: 8px; } -input[type=submit] { - background: linear-gradient(0deg, var(--bg-color-sec-submit-button), var(--bg-color-submit-button)); - padding: 2px 12px; - border-radius: 5px; - border: 1px solid var(--border-color-submit-button); - color: var(--text-color-submit-button); +/* MAIN PAGE */ +section#brand { + display: flex; + flex-direction: row; + justify-content: center; } - -input[type=submit]:hover { - background: linear-gradient(0deg, var(--bg-color-submit-button), var(--bg-color-sec-submit-button)); - border: 1px solid var(--border-color-submit-button-highlight); - color: var(--text-color-submit-button-highlight); - cursor: pointer; +section#brand #logo img { + width: 64px; + height: 64px; + transform: rotate(-45deg); } -input[type=submit]:disabled { - background: linear-gradient(0deg, var(--bg-color-submit-button-na-2), var(--bg-color-submit-button-na)); - color: var(--text-color-submit-button-na); - border: 1px solid var(--border-color-submit-button-na); +section#brand #summary { + margin: 0 16px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } - -input[type=submit]:disabled:hover { - cursor: not-allowed; +section#brand #summary p#name { + font-size: 32px; + line-height: 0px; + margin: 0; } -input[type=file]::file-selector-button { - background: linear-gradient(0deg, var(--bg-color-sec-submit-button), var(--bg-color-submit-button)); - padding: 2px 12px; - border-radius: 5px; - border: 1px solid var(--border-color-submit-button); - color: var(--text-color-submit-button); +form#uploadform { + } -input[type=file]::file-selector-button:hover { - background: linear-gradient(0deg, var(--bg-color-submit-button), var(--bg-color-sec-submit-button)); - border: 1px solid var(--border-color-submit-button-highlight); - color: var(--text-color-submit-button-highlight); - cursor: pointer; +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; } -a img:hover { - opacity: 0.75; +form#uploadform input[type="file"]::file-selector-button:hover { + background: linear-gradient(180deg, var(--button-0), var(--button-1)); + cursor: pointer; } -#i_preview { - padding: 16px 0; +/* LINK SECTION */ +.link { + display: flex; + flex-direction: row; } -#preview { - display: block; - margin-left: auto; - margin-right: auto; +.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; + } -#footer { - align-items: center; + .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; - justify-items: 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 new file mode 100644 index 0000000..340c563 --- /dev/null +++ b/static/ejs/pages/home.ejs @@ -0,0 +1,81 @@ +<!-- + 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 new file mode 100644 index 0000000..0c69ef5 --- /dev/null +++ b/static/ejs/pages/me.ejs @@ -0,0 +1,88 @@ +<!-- + 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 new file mode 100644 index 0000000..550d9e2 --- /dev/null +++ b/static/ejs/partials/bar.ejs @@ -0,0 +1,7 @@ +<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 new file mode 100644 index 0000000..38aa1df --- /dev/null +++ b/static/ejs/partials/meta.ejs @@ -0,0 +1 @@ +<link rel="stylesheet" href="../css/style.css">
\ No newline at end of file diff --git a/static/html/index.html b/static/html/index.html deleted file mode 100644 index 212b1aa..0000000 --- a/static/html/index.html +++ /dev/null @@ -1,62 +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. ---> - -<!DOCTYPE html> -<html> - <head> - <title>file hoster</title> - <link rel="stylesheet" href="css/style.css"> - <meta property="og:title" content="iLotterytea's file hoster"> - <meta property="og:description" content="iLotterytea's file hoster. Powered by notdankenough/fh. "> - <meta property="og:image" content="webimg/favicon.png"> - </head> - <body> - <div class="container"> - <div class="content"> - <section id="brand"> - <a href="/"> - <img src="webimg/favicon.png" width="64" title="{{AboutFileHoster}}"> - </a> - </section> - - <section id="uploadform"> - <form action="dank_upload" method="post" enctype="multipart/form-data"> - <p>Select file to upload: </p> - <input accept="image/*" name="file" id="fileu" type="file" onchange="loadFile(event)"> - <input value="Upload" name="submit" type="submit" id="submitbtn" disabled="true"> - </form> - </section> - - </div> - - </div> - <section id="i_preview"> - <img id="preview" src="#" alt=""> - </section> - - </body> - <script> - var loadFile = function(event) { - var out = document.getElementById("preview"); - var btn = document.getElementById("submitbtn"); - out.src = URL.createObjectURL(event.target.files[0]); - btn.disabled = false; - out.onload = function() { - URL.revokeObjectURL(out.src); - } - } - </script> -</html>
\ No newline at end of file diff --git a/static/webimg/favicon.png b/static/img/favicon.png Binary files differindex 4b165b8..4b165b8 100644 --- a/static/webimg/favicon.png +++ b/static/img/favicon.png diff --git a/static/img/twitch.png b/static/img/twitch.png Binary files differnew file mode 100644 index 0000000..d7b64a1 --- /dev/null +++ b/static/img/twitch.png |
