add app icons
This commit is contained in:
parent
3987a11aff
commit
5a98b1f5f6
12 changed files with 131 additions and 1345 deletions
|
@ -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 {
|
@keyframes hue {
|
||||||
0% {
|
0% {
|
||||||
filter: hue-rotate(0deg);
|
filter: hue-rotate(0deg);
|
||||||
|
@ -30,10 +37,16 @@
|
||||||
|
|
||||||
text-align: center;
|
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>
|
<h1>i-eat.rocks</h1>
|
||||||
<p>v0.0.1</p>
|
<p>Rock-OS v0.1.0</p>
|
||||||
<a href = 'https://www.possiblyaxolotl.com/'>Created by PossiblyAxolotl</a>
|
<p>Created by PossiblyAxolotl</p>
|
||||||
</div>
|
<button onclick="window.top.postMessage('url https://directory.possiblyaxolotl.com')">PossiblyAxolotl Directory</button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
1128
apps/slimekoban.html
1128
apps/slimekoban.html
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
@ -23,3 +23,12 @@ button:active {
|
||||||
border: inset white 4px;
|
border: inset white 4px;
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: inset white 4px;
|
||||||
|
background-color: #dbdbdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:focus, *:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
|
@ -4,6 +4,9 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Terminal</title>
|
<title>Terminal</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="standard.css">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
|
@ -36,15 +39,18 @@
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="standard.css">
|
input {
|
||||||
|
background-color: black;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<textarea id="output" readonly>Rockterm
Type 'help' for help</textarea>
|
<textarea id="output" readonly>Rockterm
Type 'help' for help</textarea>
|
||||||
<form id="form">
|
<form id="form">
|
||||||
<label> $</label>
|
<label> $</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">
|
<input id="submit" type="submit" title="submit" value="submit">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
@ -60,7 +66,8 @@
|
||||||
if (command != "help") {
|
if (command != "help") {
|
||||||
window.top.postMessage(command)
|
window.top.postMessage(command)
|
||||||
} else {
|
} 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"
|
ta.value += "\nurl (url) - go to url"
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -23,8 +23,6 @@
|
||||||
|
|
||||||
<p>Page coming soon!</p>
|
<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>
|
<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>
|
||||||
|
|
||||||
<p><a onclick="window.top.postMessage('url https://directory.possiblyaxolotl.com')" style="text-decoration: underline; color: purple;">PossiblyAxolotl Directory</a></p>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -4,20 +4,22 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="standard.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form id="form">
|
<form id="form">
|
||||||
<input id="url" type="url" placeholder="url">
|
<input id="url" type="url" placeholder="url" required>
|
||||||
<input id="titl" type="text" placeholder="title">
|
<input id="titl" type="text" placeholder="title" required>
|
||||||
<input id="wid" type="number" placeholder="width">
|
<input id="wid" type="number" placeholder="width" required>
|
||||||
<input id="hei" type="number" placeholder="height">
|
<input id="hei" type="number" placeholder="height" required>
|
||||||
<input type="submit">
|
<button>submit</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById("form").addEventListener("submit", event => {
|
document.getElementById("form").addEventListener("submit", event => {
|
||||||
event.preventDefault()
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -9,5 +9,7 @@ window.onmessage = function(e) {
|
||||||
window.location.href='/favicon.ico';
|
window.location.href='/favicon.ico';
|
||||||
} else if (dat[0] == "url") {
|
} else if (dat[0] == "url") {
|
||||||
window.location.href = dat[1];
|
window.location.href = dat[1];
|
||||||
|
} else if (dat[0] == "wg") {
|
||||||
|
createWindow("/apps/windowgen.html", "WINDOWGEN™", "250px", "150px")
|
||||||
}
|
}
|
||||||
}
|
}
|
10
drag.js
10
drag.js
|
@ -19,9 +19,7 @@ function clampPos() {
|
||||||
if (sPosY < tPad) {selected.style.top = tPad + "px"};
|
if (sPosY < tPad) {selected.style.top = tPad + "px"};
|
||||||
if (sPosY > bPad) {selected.style.top = bPad + "px"};
|
if (sPosY > bPad) {selected.style.top = bPad + "px"};
|
||||||
|
|
||||||
if (selected) {
|
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "all"; })
|
||||||
selected.getElementsByTagName("iframe")[0].style.pointerEvents = "all";
|
|
||||||
}
|
|
||||||
|
|
||||||
selected = null;
|
selected = null;
|
||||||
|
|
||||||
|
@ -46,7 +44,7 @@ addEventListener("mousedown", event => {
|
||||||
};
|
};
|
||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
selected.getElementsByTagName("iframe")[0].style.pointerEvents = "none";
|
document.querySelectorAll("iframe").forEach(item => { item.style.pointerEvents = "none"; })
|
||||||
zIndex ++;
|
zIndex ++;
|
||||||
selected.style.zIndex = zIndex;
|
selected.style.zIndex = zIndex;
|
||||||
}
|
}
|
||||||
|
@ -54,7 +52,7 @@ addEventListener("mousedown", event => {
|
||||||
});
|
});
|
||||||
|
|
||||||
addEventListener("mousemove", event => {
|
addEventListener("mousemove", event => {
|
||||||
if (selected && mouseDown > 0) {
|
if (selected) {
|
||||||
let curL = selected.style.left.replace("px", "");
|
let curL = selected.style.left.replace("px", "");
|
||||||
let curT = selected.style.top.replace("px", "");
|
let curT = selected.style.top.replace("px", "");
|
||||||
|
|
||||||
|
@ -117,7 +115,7 @@ function createWindow(url, title, width, height) {
|
||||||
|
|
||||||
const head = document.createElement("div");
|
const head = document.createElement("div");
|
||||||
head.classList = "header drag";
|
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>`;
|
const frame = `<iframe class='content' src='${url}' width='${width}' height='${height}'></iframe>`;
|
||||||
|
|
||||||
|
|
BIN
images/icons/home.png
Normal file
BIN
images/icons/home.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.2 KiB |
27
index.html
27
index.html
|
@ -7,16 +7,35 @@
|
||||||
|
|
||||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
<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="drag.js?v=4" defer></script>
|
||||||
<script src="commands.js" defer></script>
|
<script src="commands.js?v=2" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<script defer>
|
||||||
addEventListener("DOMContentLoaded", e => {
|
addEventListener("DOMContentLoaded", e => {
|
||||||
createWindow('apps/welcome.html', 'welcome', '300px', '335px');
|
createWindow('apps/welcome.html', 'welcome', '300px', '235px');
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
25
style.css
25
style.css
|
@ -4,10 +4,15 @@
|
||||||
font-smooth: never;
|
font-smooth: never;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, h1, button {
|
p, h1, button, sub {
|
||||||
font-family: "PC", monospace;
|
font-family: "PC", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
color: white;
|
||||||
|
font-size: x-small;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
0% {
|
0% {
|
||||||
transform: scale(0%);
|
transform: scale(0%);
|
||||||
|
@ -111,3 +116,21 @@ body, html {
|
||||||
margin:0;
|
margin:0;
|
||||||
min-height: 100vh;
|
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;
|
||||||
|
}
|
Loading…
Reference in a new issue