Skip to content

Commit 25b495c

Browse files
FlekerFleker
committed
Working terminal and cmd processing
0 parents  commit 25b495c

File tree

8 files changed

+312
-0
lines changed

8 files changed

+312
-0
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# https://git-scm.com/docs/gitignore
2+
# https://help.github.com/articles/ignoring-files
3+
# Example .gitignore files: https://github.com/github/gitignore
4+
/bower_components/
5+
/node_modules/

‎cli.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
$ = function(param) {
2+
if (param.charAt(0) == "#") {
3+
return document.querySelector(param);
4+
}
5+
return document.querySelectorAll(param);
6+
}
7+
8+
function cli_handler() {
9+
// TODO Handle cases where one 'word' has spaces in quotes
10+
var cmd = $('#entry').value.toLowerCase();
11+
var args = cmd.split(' ');
12+
cli_history_append(cmd);
13+
cli_process(cmd, args);
14+
$('#entry').value = ''; // Clear input
15+
}
16+
17+
function cli_history_append(cmd) {
18+
$('#history').innerHTML += cmd + "<br>";
19+
$('#history').scrollTop = $('#history').scrollHeight; // Force to bottom
20+
}
21+
22+
function cli_process(cmd, args) {
23+
if (args[0] == "hello") {
24+
cli_history_append('Hello.');
25+
return;
26+
}
27+
cli_history_append('Command not recognized');
28+
return;
29+
}

‎index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html>
2+
<head>
3+
<title>MemOS - Memristive Memory Emulator</title>
4+
<link href="style.css" rel="stylesheet" />
5+
</head>
6+
<body>
7+
<div id='splashscreen'>
8+
<!-- Boot Screen -->
9+
<h1>MemOS</h1>
10+
<h2 id='status'>Processing...</h2>
11+
<div class="cssload-thecube">
12+
<div class="cssload-cube cssload-c1"></div>
13+
<div class="cssload-cube cssload-c2"></div>
14+
<div class="cssload-cube cssload-c4"></div>
15+
<div class="cssload-cube cssload-c3"></div>
16+
</div>
17+
</div>
18+
<div id='overlay'></div>
19+
<div id='terminal'>
20+
<div id='history'></div>
21+
<form id='cli' onsubmit="cli_handler(); return false;">
22+
<span>&emsp; &raquo; &nbsp;</span>
23+
<input id='entry' focused autocomplete="off" />
24+
</form>
25+
</div>
26+
<script src="cli.js"></script>
27+
<script src='main.js'></script>
28+
</body>
29+
</html>

‎loading.css

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
.cssload-thecube {
2+
width: 73px;
3+
height: 73px;
4+
margin: 0 auto;
5+
margin-top: 49px;
6+
position: relative;
7+
transform: rotateZ(45deg);
8+
-o-transform: rotateZ(45deg);
9+
-ms-transform: rotateZ(45deg);
10+
-webkit-transform: rotateZ(45deg);
11+
-moz-transform: rotateZ(45deg);
12+
}
13+
.cssload-thecube .cssload-cube {
14+
position: relative;
15+
transform: rotateZ(45deg);
16+
-o-transform: rotateZ(45deg);
17+
-ms-transform: rotateZ(45deg);
18+
-webkit-transform: rotateZ(45deg);
19+
-moz-transform: rotateZ(45deg);
20+
}
21+
.cssload-thecube .cssload-cube {
22+
float: left;
23+
width: 50%;
24+
height: 50%;
25+
position: relative;
26+
transform: scale(1.1);
27+
-o-transform: scale(1.1);
28+
-ms-transform: scale(1.1);
29+
-webkit-transform: scale(1.1);
30+
-moz-transform: scale(1.1);
31+
}
32+
.cssload-thecube .cssload-cube:before {
33+
content: "";
34+
position: absolute;
35+
top: 0;
36+
left: 0;
37+
width: 100%;
38+
height: 100%;
39+
background-color: rgb(43,160,199);
40+
animation: cssload-fold-thecube 2.76s infinite linear both;
41+
-o-animation: cssload-fold-thecube 2.76s infinite linear both;
42+
-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
43+
-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
44+
-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
45+
transform-origin: 100% 100%;
46+
-o-transform-origin: 100% 100%;
47+
-ms-transform-origin: 100% 100%;
48+
-webkit-transform-origin: 100% 100%;
49+
-moz-transform-origin: 100% 100%;
50+
}
51+
.cssload-thecube .cssload-c2 {
52+
transform: scale(1.1) rotateZ(90deg);
53+
-o-transform: scale(1.1) rotateZ(90deg);
54+
-ms-transform: scale(1.1) rotateZ(90deg);
55+
-webkit-transform: scale(1.1) rotateZ(90deg);
56+
-moz-transform: scale(1.1) rotateZ(90deg);
57+
}
58+
.cssload-thecube .cssload-c3 {
59+
transform: scale(1.1) rotateZ(180deg);
60+
-o-transform: scale(1.1) rotateZ(180deg);
61+
-ms-transform: scale(1.1) rotateZ(180deg);
62+
-webkit-transform: scale(1.1) rotateZ(180deg);
63+
-moz-transform: scale(1.1) rotateZ(180deg);
64+
}
65+
.cssload-thecube .cssload-c4 {
66+
transform: scale(1.1) rotateZ(270deg);
67+
-o-transform: scale(1.1) rotateZ(270deg);
68+
-ms-transform: scale(1.1) rotateZ(270deg);
69+
-webkit-transform: scale(1.1) rotateZ(270deg);
70+
-moz-transform: scale(1.1) rotateZ(270deg);
71+
}
72+
.cssload-thecube .cssload-c2:before {
73+
animation-delay: 0.35s;
74+
-o-animation-delay: 0.35s;
75+
-ms-animation-delay: 0.35s;
76+
-webkit-animation-delay: 0.35s;
77+
-moz-animation-delay: 0.35s;
78+
}
79+
.cssload-thecube .cssload-c3:before {
80+
animation-delay: 0.69s;
81+
-o-animation-delay: 0.69s;
82+
-ms-animation-delay: 0.69s;
83+
-webkit-animation-delay: 0.69s;
84+
-moz-animation-delay: 0.69s;
85+
}
86+
.cssload-thecube .cssload-c4:before {
87+
animation-delay: 1.04s;
88+
-o-animation-delay: 1.04s;
89+
-ms-animation-delay: 1.04s;
90+
-webkit-animation-delay: 1.04s;
91+
-moz-animation-delay: 1.04s;
92+
}
93+
94+
95+
96+
@keyframes cssload-fold-thecube {
97+
0%, 10% {
98+
transform: perspective(136px) rotateX(-180deg);
99+
opacity: 0;
100+
}
101+
25%,
102+
75% {
103+
transform: perspective(136px) rotateX(0deg);
104+
opacity: 1;
105+
}
106+
90%,
107+
100% {
108+
transform: perspective(136px) rotateY(180deg);
109+
opacity: 0;
110+
}
111+
}
112+
113+
@-o-keyframes cssload-fold-thecube {
114+
0%, 10% {
115+
-o-transform: perspective(136px) rotateX(-180deg);
116+
opacity: 0;
117+
}
118+
25%,
119+
75% {
120+
-o-transform: perspective(136px) rotateX(0deg);
121+
opacity: 1;
122+
}
123+
90%,
124+
100% {
125+
-o-transform: perspective(136px) rotateY(180deg);
126+
opacity: 0;
127+
}
128+
}
129+
130+
@-ms-keyframes cssload-fold-thecube {
131+
0%, 10% {
132+
-ms-transform: perspective(136px) rotateX(-180deg);
133+
opacity: 0;
134+
}
135+
25%,
136+
75% {
137+
-ms-transform: perspective(136px) rotateX(0deg);
138+
opacity: 1;
139+
}
140+
90%,
141+
100% {
142+
-ms-transform: perspective(136px) rotateY(180deg);
143+
opacity: 0;
144+
}
145+
}
146+
147+
@-webkit-keyframes cssload-fold-thecube {
148+
0%, 10% {
149+
-webkit-transform: perspective(136px) rotateX(-180deg);
150+
opacity: 0;
151+
}
152+
25%,
153+
75% {
154+
-webkit-transform: perspective(136px) rotateX(0deg);
155+
opacity: 1;
156+
}
157+
90%,
158+
100% {
159+
-webkit-transform: perspective(136px) rotateY(180deg);
160+
opacity: 0;
161+
}
162+
}
163+
164+
@-moz-keyframes cssload-fold-thecube {
165+
0%, 10% {
166+
-moz-transform: perspective(136px) rotateX(-180deg);
167+
opacity: 0;
168+
}
169+
25%,
170+
75% {
171+
-moz-transform: perspective(136px) rotateX(0deg);
172+
opacity: 1;
173+
}
174+
90%,
175+
100% {
176+
-moz-transform: perspective(136px) rotateY(180deg);
177+
opacity: 0;
178+
}
179+
}

‎main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
(function() {
2+
// Booting
3+
4+
setTimeout(function() {
5+
// $('#splashscreen').style.display = 'none';
6+
}, 1000);
7+
})();

‎process.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const PROCESS_STATE_WAITING = 1;
2+
const PROCESS_STATE_READY = 2;
3+
4+
(function() {
5+
6+
})();

‎style.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
body {
2+
background-color: black;
3+
font-family: monospace;
4+
color: #efefef;
5+
margin: 0px;
6+
padding: 0px;
7+
overflow-y: hidden;
8+
}
9+
10+
#history {
11+
height: calc(100% - 32px);
12+
padding-left: 8px;
13+
overflow-y: scroll;
14+
}
15+
16+
#entry::before {
17+
content: ">"
18+
}
19+
20+
#entry {
21+
height: 20px;
22+
background-color: black;
23+
color: #efefef;
24+
border: none;
25+
padding-left: 8px;
26+
width: calc(100% - 80px);
27+
border-top: solid 1px rgba(255, 255, 255, 0.1);
28+
padding-top: 2px;
29+
padding-bottom: 2px;
30+
font-family: monospace;
31+
}
32+
33+
#entry:focus {
34+
border: solid 1px #999;
35+
}
36+
37+
/* Fancy Scrollbar */
38+
#history::-webkit-scrollbar {
39+
width: 1em;
40+
}
41+
42+
#history::-webkit-scrollbar-track {
43+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
44+
}
45+
46+
#history::-webkit-scrollbar-thumb {
47+
background-color: darkgrey;
48+
outline: 1px solid slategrey;
49+
}
50+
51+
#splashscreen {
52+
position: fixed;
53+
background-color: #772953;
54+
height: 100vh;
55+
width: 100vw;
56+
}

‎style.min.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
#entry,body{background-color:#000;color:#efefef}body{font-family:monospace}#history{height:calc(100% - 20px)}#entry::before{content:">"}#entry{height:20px;border:none;padding-left:8px;width:calc(100% - 40px)}

0 commit comments

Comments
 (0)