add app icons
This commit is contained in:
parent
3987a11aff
commit
5a98b1f5f6
12 changed files with 131 additions and 1345 deletions
|
@ -1,39 +1,52 @@
|
|||
<style>
|
||||
@keyframes hue {
|
||||
0% {
|
||||
filter: hue-rotate(0deg);
|
||||
<!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);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: hue-rotate(360deg);
|
||||
h1 {
|
||||
animation: hue 2s infinite linear;
|
||||
color:red;
|
||||
padding:0;
|
||||
margin:0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
animation: hue 2s infinite linear;
|
||||
color:red;
|
||||
padding:0;
|
||||
margin:0;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
#body {
|
||||
width: 100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
height: 100%;
|
||||
|
||||
#body {
|
||||
width: 100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="body">
|
||||
<h1>i-eat.rocks</h1>
|
||||
<p>v0.0.1</p>
|
||||
<a href = 'https://www.possiblyaxolotl.com/'>Created by PossiblyAxolotl</a>
|
||||
</div>
|
||||
<link rel="stylesheet" href="/apps/standard.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="body">
|
||||
<h1>i-eat.rocks</h1>
|
||||
<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>
|
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;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
input {
|
||||
border: inset white 4px;
|
||||
background-color: #dbdbdb;
|
||||
}
|
||||
|
||||
*:focus, *:active {
|
||||
outline: none;
|
||||
}
|
|
@ -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
Type 'help' for help</textarea>
|
||||
<form id="form">
|
||||
<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">
|
||||
</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"
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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
10
drag.js
|
@ -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
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="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>
|
||||
|
|
25
style.css
25
style.css
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue