Initial State Commit

public/css/buttons.css

@@ -0,0 +1,46 @@
+.btn-95 {
+    background-color: #c0c0c0;
+    color: black;
+    border: 2px outset gray;
+    border-radius: 0px;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    padding: 6px 12px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.btn-95:hover:not(:disabled) {
+    background-color: #d8d8d8;
+}
+
+.btn-95:active:not(:disabled) {
+    background-color: #b8b8b8;
+    border: 2px inset gray;
+}
+
+.btn-95:disabled {
+    cursor: not-allowed;
+    opacity: .8;
+}
+
+
+textarea {
+    background-color: #c0c0c0;
+    color: black;
+    border: 2px outset gray;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    padding: 6px 12px;
+    resize: vertical;
+}
+
+textarea:hover {
+    background-color: #d8d8d8;
+}
+
+textarea:focus {
+    background-color: #e8e8e8;
+}

public/css/vaporwave.css

@@ -0,0 +1,67 @@
+.overlay {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: transparent;
+    background-size: 5px 5px, 5px 5px;
+    background-position: -1px -1px, -1px -1px;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    mix-blend-mode: difference;
+}
+
+.glitch {
+    clip-path: polygon(0 0, 100% 0, 100% 0.5em, 0 0.5em);
+    animation: glitch 10s linear infinite;
+    transform: translatex(0.1rem);
+}
+
+@keyframes glitch {
+    to {
+        clip-path: polygon(0 calc(100% - .5em), 100% calc(100% - .5em), 0 100%, 0 100%);
+    }
+}
+
+.sun {
+    width: 40vh;
+    height: 40vh;
+    font-size: 1rem;
+    border-radius: 20vh;
+    position: relative;
+    overflow: hidden;
+}
+
+.sun:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    height: 50%;
+    background-color: #f54171;
+    background: linear-gradient(0deg, #2b1165 0%, #1a3a82 37%, #ab24b1 69%, #f54171 100%);
+    background-size: 40vh 40vh;
+    width: 100%;
+}
+
+.sun:after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 50%;
+    background-color: #f54171;
+    background: linear-gradient(0deg, #2b1165 0%, #1a3a82 37%, #ab24b1 69%, #f54171 100%);
+    background-size: 40vh 40vh;
+    background-position: bottom center;
+    clip-path: polygon(0 -10em, 100% -10em, 100% -10.5em, 0 -10.5em, 0 -9em, 100% -9em, 100% -9.5em, 0 -9.5em, 0 -8em, 100% -8em, 100% -8.5em, 0 -8.5em, 0 -7em, 100% -7em, 100% -7.5em, 0 -7.5em, 0 -6em, 100% -6em, 100% -6.5em, 0 -6.5em, 0 -5em, 100% -5em, 100% -5.5em, 0 -5.5em, 0 -4em, 100% -4em, 100% -4.5em, 0 -4.5em, 0 -3em, 100% -3em, 100% -3.5em, 0 -3.5em, 0 -2em, 100% -2em, 100% -2.5em, 0 -2.5em, 0 -1em, 100% -1em, 100% -1.5em, 0 -1.5em, 0 0, 100% 0, 100% -0.5em, 0 -0.5em, 0 0, 100% 0, 100% 0.5em, 0 0.5em, 0 1em, 100% 1em, 100% 1.5em, 0 1.5em, 0 2em, 100% 2em, 100% 2.5em, 0 2.5em, 0 3em, 100% 3em, 100% 3.5em, 0 3.5em, 0 4em, 100% 4em, 100% 4.5em, 0 4.5em, 0 5em, 100% 5em, 100% 5.5em, 0 5.5em, 0 6em, 100% 6em, 100% 6.5em, 0 6.5em, 0 7em, 100% 7em, 100% 7.5em, 0 7.5em, 0 8em, 100% 8em, 100% 8.5em, 0 8.5em, 0 9em, 100% 9em, 100% 9.5em, 0 9.5em);
+    animation: lightEffect 20s linear infinite reverse;
+}
+
+@keyframes lightEffect {
+    to {
+        clip-path: polygon(0 0, 100% 0, 100% 0.5em, 0 0.5em, 0 1em, 100% 1em, 100% 1.5em, 0 1.5em, 0 2em, 100% 2em, 100% 2.5em, 0 2.5em, 0 3em, 100% 3em, 100% 3.5em, 0 3.5em, 0 4em, 100% 4em, 100% 4.5em, 0 4.5em, 0 5em, 100% 5em, 100% 5.5em, 0 5.5em, 0 6em, 100% 6em, 100% 6.5em, 0 6.5em, 0 7em, 100% 7em, 100% 7.5em, 0 7.5em, 0 8em, 100% 8em, 100% 8.5em, 0 8.5em, 0 9em, 100% 9em, 100% 9.5em, 0 9.5em, 0 10em, 100% 10em, 100% 10em, 0 10em, 0 11em, 100% 11em, 100% 11.5em, 0 11.5em, 0 12em, 100% 12em, 100% 12.5em, 0 12.5em, 0 13em, 100% 13em, 100% 13.5em, 0 13.5em, 0 14em, 100% 14em, 100% 14.5em, 0 14.5em, 0 15em, 100% 15em, 100% 15.5em, 0 15.5em, 0 16em, 100% 16em, 100% 16.5em, 0 16.5em, 0 17em, 100% 17em, 100% 17.5em, 0 17.5em, 0 18em, 100% 18em, 100% 18.5em, 0 18.5em, 0 19em, 100% 19em, 100% 19.5em, 0 19.5em, 0 20em, 100% 20em, 100% 20.5em, 0 20.5em);
+    }
+}

public/img/icons/broken.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- old school pixellated netscape broken image icon -->
+<svg viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <g id="borders-and-backgrounds">
+    <path d="M0,0 L10,0 L10,1 L1,1 L1,15 L2,15 L2,16 L0,16 Z" fill="black"></path>
+    <path d="M10,4 l4,0 l0,3 l-1,0 l0,-2 l-3,0 Z" fill="black"></path>
+    <path d="M14,16 l0,-6 l-1,0 l0,5 l-5,0 l0,1 Z" fill="black"></path>
+    <path d="M12,14 l0,-3 l-1,0 l0,2 l-2,0 l0,1 Z" fill="#bcbcc3"></path>
+    <path d="M10,0 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l-1,0 l0,-1 l-1,0 l0,-1 l-1,0 l0,2 l-1,0 Z" fill="#878787"></path>
+    <path d="M2,2 l8,0 l0,3 l2,0 l0,2 l-4,0 l0,5 l-2,0 l0,1 l-2,0 l0,1 l-2,0 Z" fill="#bcbcc3"></path>
+  </g>
+  <g id="lefteye">
+    <path d="M5,3 l2,0 l0,3 l-3,0 l0,-2 l1,0 l0,1 l1,0 l0,-1 l-1,0 Z" fill="#00891e"></path>
+    <path d="M5,4 l1,0 l0,1 l-1,0 Z" fill="#00f248" ></path>
+    <path d="M7,4 l1,0 l0,2 l-1,0 l0,1 l-2,0 l0,-1 l2,0 Z" fill="black" ></path>
+  </g>
+  <g id="righteye">
+    <path d="M8,7 l3,0 l0,2 l-1,0 l0,-1 l-1,0 l0,1 l1,0 l0,1 l-2,0 Z" fill="#0064fb"></path>
+    <path d="M9,8 l1,0 l0,1 l-1,0 Z" fill="#00fbfe"></path>
+    <path d="M10,9 l1,0 l0,1 l-1,0 Z" fill="#003293"></path>
+    <path d="M11,7 l1,0 l0,2 l-1,0 Z" fill="black"></path>
+    <path d="M8,10 l2,0 l0,1 l-2,0 Z" fill="black"></path>
+  </g>
+  <g id="mouth">
+    <path d="M3,8 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l-1,0 l0,-1 l-1,0 l0,-1 l-1,0 l0,-1 l-1,0 Z" fill="#ff3900"></path>
+    <path d="M3,9 l1,0 l0,1 l1,0 l0,1 l1,0 l0,1 l-3,0 Z" fill="#f73ae1"></path>
+    <path d="M3,12 l3,0 l0,1 l-3,0 Z" fill="black"></path>
+  </g>
+</svg>

public/js/main.js

@@ -0,0 +1,187 @@
+document.addEventListener(`DOMContentLoaded`, e => {
+    handleImageGeneratorForm();
+})
+
+const randomPrompts = [
+    `A charming skyscraper, nightfall`,
+    `An intense action figure of a disruptive shrew in an empty marsh, in the golden hour.`,
+]
+
+var generatedImage = ``;
+var nextSubmitAllowedTime = 0;
+
+function generateRandomPrompt() {
+
+    const sentences = [
+        `_TYPE_ of _SUBJECT_ _ACTION_ _ENVIRONMENT_, _EXTRAS_`,
+    ]
+
+    const types = [
+        `An illustration`,
+        `A digital illustration`,
+        `A realistic illustration`,
+        `A artsy illustration`,
+        `A photograph`,
+        `A DSLR Picture`,
+        `A DSLR Photograph`,
+        `A digital painting`,
+        `A digital drawing`,
+        `A digital sketch`,
+        `A film photograph`,
+    ];
+
+    const subjects = [
+        `A penguin`,
+        `A dog`,
+        `A man`,
+        `A woman`,
+        `A cat`,
+        `A kitten`,
+        `A dog`,
+        `A fish`,
+        `A squirrel`,
+        `A chipmunk`,
+        `A capybara`,
+    ];
+
+    const action = [
+        `wearing a tuxedo`,
+        `wearing a top hat`,
+        `dressed with in a long skirt`,
+        `posing for a picture`,
+        `running`,
+        `sleeping on the left side`,
+        `looking at the viewer`,
+        `posing at the viewer`,
+        `posing at the viewer`,
+    ]
+
+    const environments = [
+        `in a green forest`,
+        `in a white room`,
+        `with an interesting background`,
+        `with a studio background`,
+        `with a realistic background`,
+        `with a fantasy background`
+    ];
+
+    const extras = [
+        `masterpiece, masterwork, artsy, creative, imagination, (realistic:1.1)`,
+        `masterpiece, masterwork, artsy, creative, imagination`,
+        `(realistic:1.1), DSLR, picture, photograph, polaroid`,
+        `film photography, kodak gold, kodak, 35mm film, film picture`,
+    ]
+
+    return randomItem(sentences)
+        .replace(/_TYPE_/g,         randomItem(types))
+        .replace(/_SUBJECT_/g,      randomItem(subjects))
+        .replace(/_ACTION_/g,       randomItem(action))
+        .replace(/_ENVIRONMENT_/g,  randomItem(environments))
+        .replace(/_EXTRAS_/g,       randomItem(extras))
+
+}
+
+function randomItem(items) { return items[Math.floor(Math.random()*items.length)]; }
+
+async function handleImageGeneratorForm() {
+    /**
+     * @type {HTMLFormElement}
+     */
+    const imageGeneratorForm = document.getElementById(`image-generator`);
+
+    if ( !!imageGeneratorForm ) {
+
+        // Randomize the prompt as a starting point
+        document.getElementById(`image_description`).value = `vaporwave, (vaporwave style:1.1), synthwave, 80's, aesthetic,`;
+
+        imageGeneratorForm.querySelector(`#random-prompt-button`).addEventListener( `click`, e => {
+            e.preventDefault();
+
+            document.getElementById(`image_description`).value = generateRandomPrompt();
+
+        })
+
+        imageGeneratorForm.querySelector(`#submit-image-button`).addEventListener( `click`, async (e) => {
+
+            // Cancel the default post, we wills end the data to an API endpoint
+            e.preventDefault();
+
+            if ( nextSubmitAllowedTime > new Date().getTime() ) {
+                const s = ((nextSubmitAllowedTime - new Date().getTime()) / 1000).toFixed(1);
+                alert(`Please wait ${s} more seconds before trying to submit`);
+                return;
+            }
+
+            if ( generatedImage == null || !!!generatedImage ) {
+                alert(`This image has already been submited`);
+                return;
+            }
+
+            // Disable the form
+            imageGeneratorForm.classList.add(`loading`);
+            imageGeneratorForm.querySelector(`button.btn-95`).setAttribute(`disabled`, true);
+
+            const fData = new FormData();
+            fData.set(`image_data`, generatedImage);
+
+            const response = await fetch(`/api/image/submit`, {
+                body:   fData,
+                method: `POST`,
+            })
+            .catch( err => {
+                alert("Something went wrong with postiong your image, please try again later.");
+                console.error(err);
+            })
+
+            // Enable the form
+            imageGeneratorForm.classList.remove(`loading`);
+            imageGeneratorForm.querySelector(`button.btn-95`).removeAttribute(`disabled`);
+
+            generatedImage = null;
+            document.getElementById(`submit-image-button`).setAttribute(`disabled`, 123);
+            alert(`Your image has been submitted! Thanks for posting`);
+
+            nextSubmitAllowedTime = new Date().getTime() + (1000 * 15);
+        })
+
+        imageGeneratorForm.addEventListener(`submit`, async (e) => {
+            // Cancel the default post, we wills end the data to an API endpoint
+            e.preventDefault();
+
+            // Disable the form
+            imageGeneratorForm.classList.add(`loading`);
+            imageGeneratorForm.querySelector(`button.btn-95`).setAttribute(`disabled`, true);
+
+            const response = await fetch(`/api/image/generate`, {
+                body:   new FormData(imageGeneratorForm),
+                method: `POST`,
+            })
+            .catch( err => {
+                alert("Something went wrong with generating the image, please try again later.");
+                console.error(err);
+            })
+
+            // Enable the form
+            imageGeneratorForm.classList.remove(`loading`);
+            imageGeneratorForm.querySelector(`button.btn-95`).removeAttribute(`disabled`);
+
+            /**
+             * @type {HTMLDivElement}
+             */
+            const imageResultElement = imageGeneratorForm.querySelector(`#image-generation-result`);
+            const imgPlaceholder = imageResultElement.querySelector(`#tmp-img-placeholder`);
+            if ( !!imgPlaceholder ) {
+                imgPlaceholder.remove();
+            }
+
+            const r = await response.json();
+
+            imageResultElement.style.setProperty(`background-image`, `url('data:image/jpeg;charset=utf-8;base64,${r.images[0]}')`);
+
+            document.getElementById(`submit-image-button`).removeAttribute(`disabled`);
+
+            generatedImage = r.images[0];
+
+        })
+    }
+}

public/main.css

@@ -0,0 +1,223 @@
+@import url("https://fonts.googleapis.com/css2?family=DotGothic16&family=Major+Mono+Display&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
+@import url("/public/css/buttons.css");
+@import url("/public/css/vaporwave.css");
+
+*,
+*:after,
+*:before {
+	box-sizing: border-box;
+}
+
+
+body {
+	font-family: "DotGothic16", serif;
+	letter-spacing: 0.025em;
+	line-height: 1.5;
+	min-height: 100vh;
+	color: #393232;
+    background: linear-gradient(180deg, #2b1165 0%, #1a3a82 37%, #ab24b1 69%, #f54171 100%);
+    /* background: linear-gradient(180deg, #ab24b1 0%, #f54171 37%, #2b1165 69%, #1a3a82 100%); */
+    background-color: #2b1165;
+
+    overflow-x: hidden;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+article {
+	width: 90%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 10vh;
+	margin-bottom: 10vh;
+	padding: 2em;
+	background-color: #c0c0c0;
+	border-left: 2px solid #eee;
+	border-top: 2px solid #eee;
+	border-right: 2px solid #444;
+	border-bottom: 2px solid #444;
+	font-size: 1rem;
+	position: relative;
+}
+
+article:after {
+    content: "x";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    padding-bottom: 0.25em;
+    position: absolute;
+    top: 0.75em;
+    right: 0.75em;
+    width: 1.75em;
+    height: 1.75em;
+    background-color: #c0c0c0;
+    border-left: 2px solid #eee;
+    border-top: 2px solid #eee;
+    border-right: 2px solid #444;
+    border-bottom: 2px solid #444;
+}
+
+.headline {
+	font-size: 2.5em;
+	font-weight: 700;
+}
+
+.subhead {
+	font-size: 1.25em;
+	margin-top: 0.25em;
+}
+
+.article-meta {
+	display: flex;
+	flex-wrap: wrap;
+    flex-flow: column;
+	align-items: flex-start;
+}
+
+.article-meta  div:first-of-type {
+    margin-left: 0.75em;
+    font-size: 0.875em;
+    margin-right: auto;
+    padding-right: 0.75em;
+}
+
+.article-meta  div:last-of-type {
+    font-size: 0.875em;
+}
+
+aside {
+	padding: 1em;
+	border-right: 1px solid #eee;
+	border-bottom: 1px solid #eee;
+	border-left: 1px solid #444;
+	border-top: 1px solid #444;
+	clear: both;
+}
+
+.tag {
+	display: inline-block;
+	margin-right: 0.25em;
+	margin-top: 0.25em;
+	border-right: 1px solid #eee;
+	border-bottom: 1px solid #eee;
+	border-left: 1px solid #444;
+	border-top: 1px solid #444;
+	padding: 0.125em 0.375em;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+}
+
+h2:not(.subhead) {
+	font-size: 1.5em;
+	font-weight: 700;
+	padding-bottom: 0.375em;
+	box-shadow: 0 1px 0 0 #444, 0 2px 0 0 #eee;
+}
+
+figure {
+	background-color: #c0c0c0;
+	box-shadow: 0 0 0 1px #eee, 0 0 0 2px #c0c0c0, 0 0 0 3px #444;
+	position: relative;
+	margin-bottom: 1.25em;
+	width: calc(100% + 1.5em + 2em);
+
+	@media (min-width: 800px) {
+		max-width: 50%;
+	}
+}
+
+figure:nth-of-type(odd) {
+    float: left;
+    margin-right: 1.5em;
+    margin-left: -3em;
+}
+
+figure:nth-of-type(even) {
+    float: right;
+    margin-left: 1.5em;
+    margin-right: -3em;
+}
+
+figure:after {
+    content: "";
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    position: absolute;
+    background-image: linear-gradient(
+            to top,
+            rgba(#ff9100, 0.2) 0%,
+            rgba(#ffe630, 0.2) 60%
+        ),
+        linear-gradient(20deg, rgba(#ff0, 0.5) 0%, rgba(#ff0, 0) 35%);
+    box-shadow: inset 0px 0px 100px rgba(0, 0, 20, 1);
+    z-index: 1;
+}
+
+figure figcaption {
+    font-family: "DotGothic16", monospace;
+    background-color: #8795e8;
+    box-shadow: inset 0 -1px 0 0 #020202;
+    color: #eee;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0.25em;
+    font-size: 0.875em;
+    z-index: 2;
+}
+
+#image-generation-result {
+    border:             2px outset gray;
+    background-color: #c0c0c0;
+    padding:            2px;
+    margin-left:        1rem;
+    height:             512px;
+    width:              512px;
+
+    background-size: cover;
+    background-position: center;
+
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.form-loader {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    width: calc(100% - 16px);
+    height: 100%;
+    background-size: 512px;
+    background-position: center;
+    background-image: url(/public/img/gifs/loading.gif);
+    position: absolute;
+    background-repeat: no-repeat;
+    background-color: #c0c0c0e8;
+}
+
+form:not(.loading) .form-loader {
+    display: none !important;
+}
+
+img.vaporwave-image {
+    max-width: 480px;
+    position: absolute;
+    z-index: 0;
+}
+
+