Skip to content

Commit

Permalink
terminal added
Browse files Browse the repository at this point in the history
  • Loading branch information
NurAktar committed Jul 28, 2024
1 parent 28821d3 commit 6ab4ade
Show file tree
Hide file tree
Showing 15 changed files with 167 additions and 38 deletions.
Binary file added Aero.cur
Binary file not shown.
Binary file added Terminal_22445.ico
Binary file not shown.
2 changes: 1 addition & 1 deletion dragable.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Make the DIV element draggable:
dragElement(document.getElementById("window_box"));

dragElement(document.getElementById("terminal"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
Expand Down
Binary file added image/icon/terminal.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified image/preview/dark-bg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file added iterm_terminal_icon_161274.ico
Binary file not shown.
3 changes: 1 addition & 2 deletions main-style.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ html,*{
box-sizing: border-box;
margin: 0;
padding: 0;
cursor: url("Aero.cur"),auto;
}
body{
font-family: 'Josefin Sans';
Expand All @@ -17,7 +18,6 @@ body{
width: 100vw;
height: 100vh;
padding: 3px 2px;
z-index: 1;
}
.icon-container{
display: flex;
Expand All @@ -31,7 +31,6 @@ body{
background-color: none;
border-radius: 2px;
border: solid transparent 1px;
z-index: 2;
}
.icon-container:hover{
background-color: #ffffff2c;
Expand Down
63 changes: 28 additions & 35 deletions main.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud-PC</title>
<link rel="stylesheet" href="main-style.css">
<link rel="stylesheet" href="terminal/cli-style.css">
</head>
<body>
<div onmousedown="clicked_icon_field()" id="icon-field" class="icon-field" oncontextmenu="contextHandler(event)">
<!-- internal OS Tools and apps -->
<!-- desktop contextmenu -->
<div id="context-menu">
<div class="item">New Folder</div>
<div class="hr"></div>
Expand All @@ -23,6 +26,7 @@
<div class="item">Open in Terminal</div>
<div class="item">Properties</div>
</div>
<!-- folder contextmenu -->
<div id="folder-menu">
<div onclick="rename()" class="item">Rename</div>
<div class="hr"></div>
Expand All @@ -32,6 +36,20 @@
<div class="item">Open in Terminal</div>
<div class="item">Properties</div>
</div>
<!-- terminal UI -->
<div id="terminal">
<div id="terminalheader" class=Menu>
<div onclick="terminalClose()" class="Buttons Close"></div>
<div class="Buttons Minimize"></div>
<div class="Buttons Zoom"></div>
<span>Terminal</span>
</div>
<div class="Screen">
<!-- <p class="line4">><span class="cursor4">_</span></p> -->
<textarea name="" id="console" spellcheck="false">Console:~$ </textarea>
</div>
</div>
<!-- Internal OS Tools and Apps -->
<div id="f1" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/user-home.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Home" disabled id="icon_text" class="icon-text">
Expand All @@ -40,42 +58,15 @@
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f3" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f4" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f5" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f6" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f7" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f8" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f9" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f10" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
</div>
<div id="f11" oncontextmenu="folderfun(event)" ondblclick="dblclicked_icon(this)" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('image/icon/blue/folder-documents.ico')"></div>
<input onclick="icon_text(this)" onkeypress="enter(event)" type="text" value="Documents" id="icon_text" class="icon-text">
<div id="f3" oncontextmenu="folderfun(event)" ondblclick="terminalOpen()" onmouseenter="dragIcon(this)" onmouseup="clicked_icon(this)" class="icon-container">
<div class="icon-img" style="background-image: url('Terminal_22445.ico')"></div>
<input onkeypress="enter(event)" type="text" value="Terminal" disabled id="icon_text" class="icon-text">
</div>





<!-- <div class="window_box">
<div class="window_bar">
<div class="win_button">
Expand Down Expand Up @@ -116,4 +107,6 @@
</body>
<script src="main.js"></script>
<script src="dragable.js"></script>
<script src="terminal/process.js"></script>
<script src="terminal/script.js"></script>
</html>
Binary file added terminal-cli.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added terminal.ico
Binary file not shown.
79 changes: 79 additions & 0 deletions terminal/cli-style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
@import url('https://fonts.googleapis.com/css2?family=Zain:wght@400&display=swap');

#terminal{
position:absolute;
z-index: 1;
font-family: zain;
}
#terminalheader span{
position: relative;
left: 190px;
}
#terminal .Buttons {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #000;
position: relative;
top: 6px;
left: 10px;
background-color: #ff0011;
border-color: #9d252b;
display: inline-block;
}
#terminal .Buttons:hover{
filter: contrast(1.5) saturate(1.5);
}

#terminal .Minimize {
left: 15px;
background-color: #ffc100;
border-color: #9d802c;
}

#terminal .Zoom {
left: 21px;
background-color: #00d742;
border-color: #049931;
}

#terminal .Menu {
z-index: 10;
width: 550px;
box-sizing: border-box;
height: 25px;
/* background-color: #bbb; */
background-color: #ffeaea;
margin: 0 auto;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

#terminal .Screen {
cursor:auto;
/* background-color: #151515; */
background-color: #151515b5;
backdrop-filter: blur(3px);
box-sizing: border-box;
width: 550px;
height: 400px;
margin: 0 auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

/* code starting here */
#terminal textarea{
cursor: text;
width:100%;
height: 100%;
background: none;
color: rgb(30, 255, 0);
outline: none;
border:none;
resize: none;
font-family: zain;
font-size: 24px;
font-weight: 400;
caret-shape: block;
}
20 changes: 20 additions & 0 deletions terminal/process.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
function clear(){
let cli = document.getElementById("console");
cli.value = "Console:~$ ";
pos = console.value.length;
typing = 0;left = 0;
}
function process(keyword){
if(keyword == 'hi'){
return 'hi nur';
}
else if (keyword == 'assalamualikum'){
return 'walikymassalam nur';
}
else if(keyword == "clear"){
clear();
}
else{
return 'wrong keyword!';
}
}
38 changes: 38 additions & 0 deletions terminal/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
tm = document.getElementById('terminal');
console = document.getElementById('console');
let pos = console.value.length;
let typing = 0;
let left = 0;
console.addEventListener("keydown",(k)=>{
if(k.key == 'Enter'){
k.preventDefault();
let newtext = console.value.substr(pos,);
if(newtext.length != 0){
p = process(newtext);
pos += newtext.length+p.length+13;
console.value += '\n'+p+'\nConsole:~$ ';
}
}
if(k.ctrlKey && k.key == 'Backspace'){
k.preventDefault();
}
if(k.key == 'Backspace' || k.key == 'Delete'){
if(pos >= console.value.length){
k.preventDefault();
}
}
if(k.key == 'ArrowUp' || k.key == 'ArrowDown' || k.key == 'ArrowRight' || k.key == 'ArrowLeft'){
if(console.selectionEnd <= 3){
console.selectionEnd = 3;
}
}
});

function terminalClose(){
tm.style.display = "none";
clear();
}

function terminalOpen(){
tm.style.display = "block";
}
Binary file added terminal_icon_215293.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6ab4ade

Please sign in to comment.