add app icons

This commit is contained in:
PossiblyAxolotl 2024-08-15 23:45:22 -06:00
parent 3987a11aff
commit 5a98b1f5f6
12 changed files with 131 additions and 1345 deletions

View file

@ -1,4 +1,11 @@
<style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Info</title>
<style>
@keyframes hue {
0% {
filter: hue-rotate(0deg);
@ -30,10 +37,16 @@
text-align: center;
}
</style>
</style>
<div id="body">
<link rel="stylesheet" href="/apps/standard.css">
</head>
<body>
<div id="body">
<h1>i-eat.rocks</h1>
<p>v0.0.1</p>
<a href = 'https://www.possiblyaxolotl.com/'>Created by PossiblyAxolotl</a>
</div>
<p>Rock-OS v0.1.0</p>
<p>Created by PossiblyAxolotl</p>
<button onclick="window.top.postMessage('url https://directory.possiblyaxolotl.com')">PossiblyAxolotl Directory</button>
</div>
</body>
</html>

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -23,3 +23,12 @@ button:active {
border: inset white 4px;
background-color: lightgray;
}
input {
border: inset white 4px;
background-color: #dbdbdb;
}
*:focus, *:active {
outline: none;
}

View file

@ -4,6 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terminal</title>
<link rel="stylesheet" href="standard.css">
<style>
* {
background-color: black;
@ -36,15 +39,18 @@
html, body {
height: 100%;
}
</style>
<link rel="stylesheet" href="standard.css">
input {
background-color: black;
border:none;
}
</style>
</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="formtext" type="text" autocomplete="off" style="border: none;">
<input id="submit" type="submit" title="submit" value="submit">
</form>
@ -60,7 +66,8 @@
if (command != "help") {
window.top.postMessage(command)
} else {
ta.value += "\nwin (url) (title) (wid) (height) - create a window";
ta.value += "\nwin (url) (title) (width) (height) - create a window";
ta.value += "\nwg - open windowgen";
ta.value += "\nurl (url) - go to url"
}
})

View file

@ -23,8 +23,6 @@
<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>
<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>
</body>
</html>

View file

@ -4,20 +4,22 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="standard.css">
</head>
<body>
<form id="form">
<input id="url" type="url" placeholder="url">
<input id="titl" type="text" placeholder="title">
<input id="wid" type="number" placeholder="width">
<input id="hei" type="number" placeholder="height">
<input type="submit">
<input id="url" type="url" placeholder="url" required>
<input id="titl" type="text" placeholder="title" required>
<input id="wid" type="number" placeholder="width" required>
<input id="hei" type="number" placeholder="height" required>
<button>submit</button>
</form>
<script>
document.getElementById("form").addEventListener("submit", event => {
event.preventDefault()
window.top.postMessage(`makewin ${document.getElementById("url").value} ${document.getElementById("titl").value} ${document.getElementById("wid").value} ${document.getElementById("hei").value}`)
window.top.postMessage(`win ${document.getElementById("url").value} ${document.getElementById("titl").value} ${document.getElementById("wid").value} ${document.getElementById("hei").value}`)
})
</script>
</body>

View file

@ -9,5 +9,7 @@ window.onmessage = function(e) {
window.location.href='/favicon.ico';
} else if (dat[0] == "url") {
window.location.href = dat[1];
} else if (dat[0] == "wg") {
createWindow("/apps/windowgen.html", "WINDOWGEN™", "250px", "150px")
}
}

10
drag.js
View file

@ -19,9 +19,7 @@ function clampPos() {
if (sPosY < tPad) {selected.style.top = tPad + "px"};
if (sPosY > bPad) {selected.style.top = bPad + "px"};
if (selected) {
selected.getElementsByTagName("iframe")[0].style.pointerEvents = "all";
}
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "all"; })
selected = null;
@ -46,7 +44,7 @@ addEventListener("mousedown", event => {
};
if (selected) {
selected.getElementsByTagName("iframe")[0].style.pointerEvents = "none";
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "none"; })
zIndex ++;
selected.style.zIndex = zIndex;
}
@ -54,7 +52,7 @@ addEventListener("mousedown", event => {
});
addEventListener("mousemove", event => {
if (selected && mouseDown > 0) {
if (selected) {
let curL = selected.style.left.replace("px", "");
let curT = selected.style.top.replace("px", "");
@ -117,7 +115,7 @@ function createWindow(url, title, width, height) {
const head = document.createElement("div");
head.classList = "header drag";
head.innerHTML = "<p>" + title + "</p><button onclick='this.parentNode.parentNode.remove()'>x</button>";
head.innerHTML = "<p>" + title + "</p><button onclick='clampPos(); this.parentNode.parentNode.remove()'>x</button>";
const frame = `<iframe class='content' src='${url}' width='${width}' height='${height}'></iframe>`;

BIN
images/icons/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -7,16 +7,35 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css?v=2">
<link rel="stylesheet" href="style.css?v=3">
<script src="drag.js?v=3" defer></script>
<script src="commands.js" defer></script>
<script src="drag.js?v=4" defer></script>
<script src="commands.js?v=2" defer></script>
</head>
<body>
<div class="icons">
<div class="app" ondblclick="createWindow('apps/welcome.html', 'welcome', '300px', '235px')">
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>Welcome</sub></p>
</div>
<div class="app" ondblclick="createWindow('apps/notepad.html', 'notepad', '500px', '450px')">
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>notepad</sub></p>
</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')">
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>rock music</sub></p>
</div>
<div class="app" ondblclick="createWindow('apps/terminal.html', 'terminal', '800', '500')">
<p><img src="images/icons/home.png" width="48px" height="48px" /><sub>terminal</sub></p>
</div>
</div>
<div class="icons">
<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>
</div>
</div>
<script defer>
addEventListener("DOMContentLoaded", e => {
createWindow('apps/welcome.html', 'welcome', '300px', '335px');
createWindow('apps/welcome.html', 'welcome', '300px', '235px');
})
</script>
</body>

View file

@ -4,10 +4,15 @@
font-smooth: never;
}
p, h1, button {
p, h1, button, sub {
font-family: "PC", monospace;
}
sub {
color: white;
font-size: x-small;
}
@keyframes appear {
0% {
transform: scale(0%);
@ -111,3 +116,21 @@ body, html {
margin:0;
min-height: 100vh;
}
.app {
margin:4px;
width:72px;
display: grid;
text-align: center;
}
.app:active {
margin:2px;
border: dotted 2px black;
transform: translate(2px, 2px);
}
.icons {
margin:4px;
display: flex;
}