PossiblyAxolotl/i-eat.rocks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

create terminal and other apps, standard css

Browse source
This commit is contained in:
PossiblyAxolotl 2024-08-15 20:26:40 -06:00
parent b02fc4ecae
commit 3987a11aff
10 changed files with 180 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/info.html
View file

@ -31,8 +31,9 @@
text-align: center;
}
</style>
<div id="body">
<h1>i-eat.rocks</h1>
<p>v0.0.0</p>
<p>v0.0.1</p>
<a href = 'https://www.possiblyaxolotl.com/'>Created by PossiblyAxolotl</a>
</div>

30
apps/notepad.html
View file

@ -1 +1,29 @@
<textarea style="width: 100%; height: 99%; resize: none; border:none; font-size: large; margin:0;">I've eaten nothing but rocks for 3 days...&NewLine;I don't know how much longer I can keep this going... I need food</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notepad</title>
<style>
* {
padding:0;
margin:0;
height: 100%;
width: 100%;
font-family: monospace;
background: none;
}
textarea {
padding:3px;
max-width: calc(100% - 6px);
max-height: calc(100% - 6px);
}
</style>
</head>
<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...&NewLine;I don't know how much longer I can keep this going... I need food</textarea>
</body>
</html>

25
apps/standard.css Normal file
View file

@ -0,0 +1,25 @@
@font-face {
font-family: "PC";
src: url("/images/ui/joystix monospace.otf");
font-smooth: never;
}
* {
font-family: "PC", monospace;
}
button, button:hover {
border: outset white 4px;
background-color: rgb(219, 219, 219);
color:black;
text-align: center;
margin:2px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.25);
}
button:active {
border: inset white 4px;
background-color: lightgray;
}

69
apps/terminal.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal</title>
<style>
* {
background-color: black;
padding:0;
margin:0;
border:none;
color:white;
}
textarea {
width: calc(100% - 8px);
resize: none;
height: calc(100% - 30px);
padding:4px;
overflow-wrap: anywhere;
}
*:focus, *:active {
outline: none;
}
#formtext {
width: calc(100% - 30px - 95px);
}
label {
width:30px;
}
html, body {
height: 100%;
}
</style>
<link rel="stylesheet" href="standard.css">
</head>
<body>
<textarea id="output" readonly>Rockterm&NewLine;Type 'help' for help</textarea>
<form id="form">
<label>&thinsp;$</label>
<input id="formtext" type="text" autocomplete="off">
<input id="submit" type="submit" title="submit" value="submit">
</form>
<script>
const ta = document.getElementById("output");
document.getElementById("form").addEventListener("submit", event => {
event.preventDefault();
const ft = document.getElementById("formtext");
const command = ft.value;
ft.value = "";
ta.value += "\n> " + command;
if (command != "help") {
window.top.postMessage(command)
} else {
ta.value += "\nwin (url) (title) (wid) (height) - create a window";
ta.value += "\nurl (url) - go to url"
}
})
</script>
</body>
</html>

30
apps/welcome.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="standard.css">
<style>
* {
text-align: center;
}
</style>
</head>
<body>
<script>
function createWindow(url, name, w, h) {
window.top.postMessage(`win ${url} ${name} ${w} ${h}`)
}
</script>
<h1>Hihi</h1>
<p>Page coming soon!</p>
<button onclick="createWindow('https://www.possiblyaxolotl.com', 'possiblyaxolotl', '800', '500')">Created by PossiblyAxolotl</button><button onclick="createWindow('https://www3.cbox.ws/box/?boxid=3540114&boxtag=qbEaqt', 'rockchat', '300', '450')">Chatroom</button><button onclick="createWindow('apps/notepad.html', 'notepad', '500', '450')">notepad</button><button onclick="createWindow('https://ko-fi.com/possiblyaxolotl/?hidefeed=true&widget=true&embed=true&preview=true', 'donate', '400', '630')">support</button><button onclick="createWindow('apps/slimekoban.html', 'slimekoban', '450', '350')">slimekoban</button><button onclick="createWindow('apps/info.html', 'info', '200', '120')">info</button><button onclick="createWindow('apps/terminal.html', 'terminal', '800', '500')">terminal</button>
<p><a onclick="window.top.postMessage('url https://directory.possiblyaxolotl.com')" style="text-decoration: underline; color: purple;">PossiblyAxolotl Directory</a></p>
</body>
</html>

2
apps/windowgen.html
View file

@ -17,7 +17,7 @@
<script>
document.getElementById("form").addEventListener("submit", event => {
event.preventDefault()
window.top.postMessage(`WIN|${document.getElementById("url").value}|${document.getElementById("titl").value}|${document.getElementById("wid").value}|${document.getElementById("hei").value}`)
window.top.postMessage(`makewin ${document.getElementById("url").value} ${document.getElementById("titl").value} ${document.getElementById("wid").value} ${document.getElementById("hei").value}`)
})
</script>
</body>

13
commands.js Normal file
View file

@ -0,0 +1,13 @@
window.onmessage = function(e) {
const dat = e.data.split(" ");
console.log(dat)
/* CREATE WINDOW */
if (dat[0] == "win") {
createWindow(dat[1],dat[2],dat[3]+"px",dat[4]+"px")
} else if (dat[0] == "rock") {
window.location.href='/favicon.ico';
} else if (dat[0] == "url") {
window.location.href = dat[1];
}
}

10
drag.js
View file

@ -131,14 +131,4 @@ function createWindow(url, title, width, height) {
win.style.zIndex = zIndex;
document.body.appendChild(win);
}
/* SUBWINDOW CREATE WINDOW */
window.onmessage = function(e) {
const dat = e.data.split("|");
console.log(dat)
if (dat[0] == "WIN") {
createWindow(dat[1],dat[2],dat[3]+"px",dat[4]+"px")
}
}

31
index.html
View file

@ -7,32 +7,17 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css?v=1">
<link rel="stylesheet" href="style.css?v=2">
<script src="drag.js?v=2" defer></script>
<script src="drag.js?v=3" defer></script>
<script src="commands.js" defer></script>
</head>
<body>
<div class="body">
<div class="header">
<p>Home</p>
</div>
<div class="content">
<h1>Hihi</h1>
<p>Page coming soon!</p>
<button onclick="createWindow('https://www.possiblyaxolotl.com', 'possiblyaxolotl', '800px', '500px')">Created by PossiblyAxolotl</button>
<button onclick="createWindow('box.html', 'test box', '400px', '200px')">Another window</button>
<button onclick="createWindow('https://www3.cbox.ws/box/?boxid=3540114&boxtag=qbEaqt', 'rock eaters chat', '300px', '450px')">Chatroom</button>
<button onclick="createWindow('apps/notepad.html', 'notepad', '500px', '450px')">notepad</button>
<button onclick="createWindow('https://ko-fi.com/possiblyaxolotl/?hidefeed=true&widget=true&embed=true&preview=true', 'donate', '400px', '630px')">support</button>
<button onclick="createWindow('apps/slimekoban.html', 'slimekoban', '450px', '350px')">slimekoban</button>
<button onclick="createWindow('apps/info.html', 'info', '200px', '120px')">info</button>
<button onclick="createWindow('apps/windowgen.html', 'windowgen', '180px', '130px')">windowgen</button>
<p><a href="https://directory.possiblyaxolotl.com">PossiblyAxolotl Directory</a></p>
</div>
</div>
<script defer>
addEventListener("DOMContentLoaded", e => {
createWindow('apps/welcome.html', 'welcome', '300px', '335px');
})
</script>
</body>
</html>

23
style.css
View file

@ -22,7 +22,7 @@ p, h1, button {
animation: appear cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
position: absolute;
border: outset 4px white;
background:white;
background:rgb(219, 219, 219);
text-align: center;
padding:0;
@ -36,23 +36,6 @@ p, h1, button {
box-shadow: 4px 4px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.5);
}
.body {
border: outset 4px white;
background:white;
text-align: center;
padding:0;
margin:auto;
margin-top: 64px;
max-width: 800px;
width: calc(100% - 48px);
box-shadow: 4px 4px rgba(0,0,0,0.5);
margin-bottom: 8px;
}
@media only screen and (max-width:800px) {
.body {
margin-top: 24px;
@ -63,7 +46,7 @@ p, h1, button {
background-color: #4592b5;
color: white;
border-bottom: inset 4px rgb(219, 219, 219);
border: solid 4px rgb(219, 219, 219);
display: flex;
padding:3px;
@ -92,7 +75,7 @@ p, h1, button {
button, button:hover {
border: outset white 4px;
background-color: white;
background-color: rgb(219, 219, 219);
color:black;
text-align: center;