add guestbook
This commit is contained in:
PossiblyAxolotl
parent
7673bc1a5d
commit
77ff4a8814
17 changed files with 310 additions and 11 deletions
40
apps/do.html
Normal file
40
apps/do.html
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Do I eat rocks?</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
|
||||||
|
font-family: Impact, "Anton", Haettenschweiler, 'Arial Bold', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
align-content: center;
|
||||||
|
height: 100lvh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color:white;
|
||||||
|
font-size: 100px;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h1>YES</h1>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
apps/guestbook/index.html
Normal file
43
apps/guestbook/index.html
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Guestbook</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/apps/guestbook/style.css">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const macroURL = "https://script.google.com/macros/s/AKfycbzVEt7olTT5OtvTyQZVK6G_lHJeHkkDpogsWXYtgqQAtn-UtXIitqLkDg2pgRI20Klk6Q/exec";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="/apps/guestbook/tracker.js" defer></script>
|
||||||
|
<script src="/apps/guestbook/reciever.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="header">
|
||||||
|
<h1 style="color:coral; animation:hue 2s linear infinite;">ROCK GUESTBOOK</h1>
|
||||||
|
<p>Have your name sealed in stone for eternity</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="loading">Loading...</p>
|
||||||
|
<div id="data"></div>
|
||||||
|
|
||||||
|
<form id="submitForm">
|
||||||
|
<label id="namelabel">Name (64 characters left):</label>
|
||||||
|
<input maxlength="64" id="name" placeholder="Name" name="name" required type="text" minlength="2" /><br><br>
|
||||||
|
<label id="msglabel">Message (600 characters left):</label>
|
||||||
|
<textarea maxlength="600" placeholder="Message" id="message" name="message" required type="text"></textarea><br>
|
||||||
|
<input class="button" type="submit" id="submitButton" value="Submit">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<summary>Rules</summary>
|
||||||
|
<li>No politics</li>
|
||||||
|
<li>Keep it PG</li>
|
||||||
|
<li>Be nice</li>
|
||||||
|
<li>Don't make a bunch of posts, this is more of a one time thing</li>
|
||||||
|
<li>You agree to the <button onclick="window.top.postMessage('win https://www.possiblyaxolotl.com/terms/ ToS+PP 600 400')">ToS and Privacy Policy</button></li>
|
||||||
|
</ol>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
apps/guestbook/reciever.js
Normal file
48
apps/guestbook/reciever.js
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
fetch(macroURL)
|
||||||
|
.then(response => {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
let totalPosts = 0;
|
||||||
|
const entriesDiv = document.getElementById("data");
|
||||||
|
|
||||||
|
data.forEach(entry => {
|
||||||
|
const entryDiv = document.createElement("div");
|
||||||
|
entryDiv.className = "post";
|
||||||
|
const dateTime = new Date(entry.datetime);
|
||||||
|
|
||||||
|
let mins = dateTime.getMinutes();
|
||||||
|
if (mins < 10) {
|
||||||
|
mins = `0${mins}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const username = document.createElement("strong");
|
||||||
|
const messg = document.createElement("p");
|
||||||
|
const date = document.createElement("sub");
|
||||||
|
|
||||||
|
username.innerText = entry.name;
|
||||||
|
messg.innerText = entry.message;
|
||||||
|
date.innerText = `${dateTime.toDateString()} @ ${dateTime.getHours()}:${mins}`
|
||||||
|
|
||||||
|
let htmlContent = messg.innerHTML;
|
||||||
|
|
||||||
|
htmlContent = htmlContent.replace(/<(\/?(?:h1|h2|b|i|red|orange|yellow|green|blue|purple|rainbow))>/g, (match, p1) => {return `<${p1}>`;});
|
||||||
|
|
||||||
|
htmlContent = htmlContent.replace(/:fish:|:axo:|:axcket:|:approve:|:enby:|:woah:/g, matched => emoji[matched]);
|
||||||
|
|
||||||
|
messg.innerHTML = htmlContent;
|
||||||
|
|
||||||
|
entryDiv.appendChild(username);
|
||||||
|
entryDiv.appendChild(messg);
|
||||||
|
entryDiv.appendChild(date);
|
||||||
|
|
||||||
|
entriesDiv.appendChild(entryDiv);
|
||||||
|
|
||||||
|
totalPosts ++;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('loading').innerText = `Total posts: ${totalPosts}`;
|
||||||
|
})
|
||||||
|
.catch( err => {
|
||||||
|
console.error('Error: ', err);
|
||||||
|
});
|
||||||
BIN
apps/guestbook/rocks.png
Normal file
BIN
apps/guestbook/rocks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
112
apps/guestbook/style.css
Normal file
112
apps/guestbook/style.css
Normal file
|
|
@ -0,0 +1,112 @@
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background-image: url("/apps/guestbook/rocks.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hue {
|
||||||
|
0% {
|
||||||
|
filter:hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
filter:hue-rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
text-align: center;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
width: 100%;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-shadow: 2px 2px 0px white;
|
||||||
|
outline: 2px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
label, li, summary, p, sub, strong {
|
||||||
|
color:white;
|
||||||
|
text-shadow: 2px 2px 4px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: block;
|
||||||
|
margin:2px;
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
button, .button, button:hover {
|
||||||
|
border: outset white 4px;
|
||||||
|
background-color: rgb(219, 219, 219);
|
||||||
|
color:black;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
margin:2px;
|
||||||
|
|
||||||
|
box-shadow: 0px 0px 2px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active, .button:active {
|
||||||
|
border: inset white 4px;
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
form {
|
||||||
|
display:grid;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
padding:25px;
|
||||||
|
|
||||||
|
background-color: rgba(255,255,255,0.25);
|
||||||
|
|
||||||
|
border: ridge 4px white;
|
||||||
|
margin:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
display:grid;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
padding:8px;
|
||||||
|
|
||||||
|
background-color: rgba(255,255,255,0.25);
|
||||||
|
|
||||||
|
border: ridge 4px white;
|
||||||
|
margin:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
margin:10px;
|
||||||
|
padding-bottom:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading {
|
||||||
|
margin-left:8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data {
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: 400px;
|
||||||
|
|
||||||
|
border-top: ridge 8px rgba(255, 255, 255, 0.50);
|
||||||
|
border-bottom: ridge 8px rgba(255, 255, 255, 0.50);
|
||||||
|
}
|
||||||
33
apps/guestbook/tracker.js
Normal file
33
apps/guestbook/tracker.js
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
const nameLabel = document.getElementById("namelabel");
|
||||||
|
const nameBox = document.getElementById("name");
|
||||||
|
|
||||||
|
nameBox.addEventListener("input", function() {
|
||||||
|
nameLabel.innerText = `Name (${64 - nameBox.value.length} characters left):`;
|
||||||
|
})
|
||||||
|
|
||||||
|
const msgLabel = document.getElementById("msglabel");
|
||||||
|
const msgBox = document.getElementById("message");
|
||||||
|
|
||||||
|
msgBox.addEventListener("input", function() {
|
||||||
|
msgLabel.innerText = `Message (${600 - msgBox.value.length} characters left):`;
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById("submitForm").reset();
|
||||||
|
|
||||||
|
document.getElementById("submitForm").addEventListener("submit", function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const formData = new FormData(event.target);
|
||||||
|
|
||||||
|
document.getElementById("submitButton").disabled = true;
|
||||||
|
|
||||||
|
fetch(macroURL, {
|
||||||
|
method:"POST",
|
||||||
|
body: new URLSearchParams(formData)
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
event.target.reset();
|
||||||
|
window.location.reload()
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -44,8 +44,9 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="body">
|
<div id="body">
|
||||||
<h1>i-eat.rocks</h1>
|
<h1>i-eat.rocks</h1>
|
||||||
<p>Rock-OS v0.1.1</p>
|
<p>Rock-OS v0.1.2</p>
|
||||||
<p>Created by PossiblyAxolotl</p>
|
<p>Created by PossiblyAxolotl</p>
|
||||||
|
<p><a style="color:purple; text-decoration: underline; cursor:pointer;" onclick="window.top.postMessage('url mailto:possiblyaxolotl@i-eat.rocks')">Contact</a></p>
|
||||||
<button onclick="window.top.postMessage('url https://directory.possiblyaxolotl.com')">PossiblyAxolotl Directory</button>
|
<button onclick="window.top.postMessage('url https://directory.possiblyaxolotl.com')">PossiblyAxolotl Directory</button>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,6 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<textarea style="width: 100%; height: 100%; resize: none; border:none; font-size: large; margin:0;">I've eaten nothing but rocks for 3 days...
I don't know how much longer I can keep this going... I need food</textarea>
|
<textarea style="width: 100%; height: 100%; resize: none; border:none; font-size: large; margin:0;">I've eaten nothing but rocks for 3 days...
I don't know how much longer I can keep this going... I need food

--- January 21

It's been so long... I don't know where I end end and the rocks begin.

--- March 12

I've started to see things I'm not sure are really there... creatures of pure stone. Can they see me? Why doesn't anyone else notice?

--- April 17</textarea>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -12,6 +12,8 @@ button, button:hover {
|
||||||
background-color: rgb(219, 219, 219);
|
background-color: rgb(219, 219, 219);
|
||||||
color:black;
|
color:black;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
margin:2px;
|
margin:2px;
|
||||||
|
|
@ -25,6 +27,7 @@ button:active {
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
border-radius: 0;
|
||||||
border: inset white 4px;
|
border: inset white 4px;
|
||||||
background-color: #dbdbdb;
|
background-color: #dbdbdb;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,8 @@
|
||||||
document.getElementById("form").addEventListener("submit", event => {
|
document.getElementById("form").addEventListener("submit", event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const ft = document.getElementById("formtext");
|
const ft = document.getElementById("formtext");
|
||||||
const command = ft.value;
|
const command = ft.value.toLowerCase();
|
||||||
|
|
||||||
ft.value = "";
|
ft.value = "";
|
||||||
ta.value += "\n> " + command;
|
ta.value += "\n> " + command;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,6 @@
|
||||||
|
|
||||||
<p>Page coming soon!</p>
|
<p>Page coming soon!</p>
|
||||||
|
|
||||||
<button onclick="createWindow('https://www.possiblyaxolotl.com', 'possiblyaxolotl', '900', '500')">Created by PossiblyAxolotl</button><button onclick="createWindow('https://ko-fi.com/possiblyaxolotl/?hidefeed=true&widget=true&embed=true&preview=true', 'donate', '400', '630')">support me!</button><button onclick="createWindow('apps/info.html', 'info', '350', '190')">info</button>
|
<button onclick="createWindow('https://www.possiblyaxolotl.com', 'possiblyaxolotl', '900', '500')">Created by PossiblyAxolotl</button><button onclick="createWindow('https://ko-fi.com/possiblyaxolotl/?hidefeed=true&widget=true&embed=true&preview=true', 'donate', '400', '630')">support me!</button><button onclick="createWindow('apps/info.html', 'info', '350', '230')">info</button>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
11
humans.txt
Normal file
11
humans.txt
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* TEAM */
|
||||||
|
Creator: PossiblyAxolotl
|
||||||
|
Flags: 🇨🇦 🏳️🌈 💛🤍💜🖤
|
||||||
|
Contact: possiblyaxolotl@i-eat.rocks, me@possiblyaxolotl.com
|
||||||
|
Location: Canada 🇨🇦
|
||||||
|
|
||||||
|
/* SITE */
|
||||||
|
Last update: 08/15/2024
|
||||||
|
Language: English
|
||||||
|
Standards: HTML5, CSS3, Javscript
|
||||||
|
Software: VSCodium
|
||||||
1
images/icons/music.svg
Normal file
1
images/icons/music.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1697 1697" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M848.353,0c468.218,0 848.352,380.134 848.352,848.353c0,468.218 -380.134,848.352 -848.352,848.352c-468.219,0 -848.353,-380.134 -848.353,-848.352c0,-468.219 380.134,-848.353 848.353,-848.353Zm-0,537.016c-171.832,-0 -311.337,139.505 -311.337,311.337c-0,171.831 139.505,311.337 311.337,311.337c171.831,-0 311.337,-139.506 311.337,-311.337c-0,-171.832 -139.506,-311.337 -311.337,-311.337Z" style="fill:url(#_Radial1);"/><circle cx="848.353" cy="848.353" r="230.62" style="fill:#b6b6b6;"/><defs><radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(848.353,0,0,848.353,848.353,848.353)"><stop offset="0" style="stop-color:#fff;stop-opacity:1"/><stop offset="1" style="stop-color:#d3d3d3;stop-opacity:1"/></radialGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
images/icons/rock.png
Normal file
BIN
images/icons/rock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
BIN
images/icons/terminal.png
Normal file
BIN
images/icons/terminal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 B |
16
index.html
16
index.html
|
|
@ -21,19 +21,25 @@
|
||||||
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>notepad</sub></p>
|
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>notepad</sub></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="app" ondblclick="createWindow('https://bandcamp.com/EmbeddedPlayer/album=3902721364/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/artwork=small/track=3286219329/transparent=true', 'rock music', '400px', '120px')">
|
<div class="app" ondblclick="createWindow('https://bandcamp.com/EmbeddedPlayer/album=3902721364/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/artwork=small/track=3286219329/transparent=true', 'rock music', '400px', '120px')">
|
||||||
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>rock music</sub></p>
|
<p><img src="images/icons/music.svg" width="48px" height="48px" /><sub>rock music</sub></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="app" ondblclick="createWindow('apps/terminal.html', 'terminal', '800', '500')">
|
<div class="app" ondblclick="createWindow('https://www.youtube.com/embed/zOnMIjl19g8?si=1J3CPY5fF8B0SWEW', 'rock', '384px', '216px')">
|
||||||
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>terminal</sub></p>
|
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>rock</sub></p>
|
||||||
|
</div>
|
||||||
|
<div class="app" ondblclick="createWindow('apps/terminal.html', 'terminal', '800px', '500px')">
|
||||||
|
<p><img src="images/icons/terminal.png" width="48px" height="48px" /><sub>terminal</sub></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="icons">
|
<div class="icons">
|
||||||
<div class="app" ondblclick="createWindow('https://do.i-eat.rocks', 'should I eat rocks?', '300', '300')">
|
<div class="app" ondblclick="createWindow('apps/do.html', 'should I eat rocks?', '300', '300')">
|
||||||
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>eat rocks?</sub></p>
|
<p><img src="images/icons/rock.png" width="48px" height="48px" /><sub>eat rocks?</sub></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="app" ondblclick="createWindow('https://www3.cbox.ws/box/?boxid=3540114&boxtag=qbEaqt', 'rockchat', '300', '450')">
|
<div class="app" ondblclick="createWindow('https://www3.cbox.ws/box/?boxid=3540114&boxtag=qbEaqt', 'rockchat', '300', '450')">
|
||||||
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>chatroom</sub></p>
|
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>chatroom</sub></p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="app" ondblclick="createWindow('apps/guestbook', 'guestbook', '500px', '600px')">
|
||||||
|
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>guestbook</sub></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script defer>
|
<script defer>
|
||||||
|
|
|
||||||
|
|
@ -110,11 +110,10 @@ body, html {
|
||||||
background: url("images/ui/wallpaper1.png");
|
background: url("images/ui/wallpaper1.png");
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
max-width: 99vw;
|
|
||||||
|
|
||||||
padding:0;
|
padding:0;
|
||||||
margin:0;
|
margin:0;
|
||||||
min-height: 100vh;
|
height: 100lvh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app {
|
.app {
|
||||||
|
|
@ -135,4 +134,5 @@ body, html {
|
||||||
.icons {
|
.icons {
|
||||||
margin:4px;
|
margin:4px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue