New App: Terminal

Added new application.
daqingzd · Sep 8, 2021 · 61a022e · 61a022e
1 parent ab5b14b
commit 61a022e
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ For introduce the Ubuntu environment' beauty (on web) and for fun. :) I was insp
 ## To-Do List
 
 * Increase clone apps' functionality
-* [7] Create more clone aplication
+* [8] Create more clone aplication
 * [-] Update interface to similar Ubuntu 21.10 interface
 
 ## Notes

diff --git a/apps/maps/css/app.css b/apps/maps/css/app.css
@@ -1,6 +1,6 @@
 .content-iframe{
-    width: 100%;
-    height: 100%;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
     border: none;
     z-index: -1;
 }

diff --git a/apps/terminal/css/app.css b/apps/terminal/css/app.css
@@ -0,0 +1,28 @@
+body{
+    background: #0008;
+}
+
+.content-iframe{
+    width: 100%;
+    height: 100%;
+    border: none;
+    z-index: -1;
+}
+
+#newTab{
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+#search{
+    position: absolute;
+    right: 35px;
+    top: 0px;
+}
+
+#menu{
+    position: absolute;
+    right: 0px;
+    top: 0px;
+}
diff --git a/apps/terminal/css/main.css b/apps/terminal/css/main.css
@@ -0,0 +1,16 @@
+textarea{
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background: #0000;
+    color: #eee;
+    border: none;
+    resize: none;
+}
+
+textarea{
+    font-family: UbuntuMonoRegular !important;
+    font-size: 16px !important;
+}
diff --git a/apps/terminal/index.html b/apps/terminal/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="../css/app-layout.css">
+        <link rel="stylesheet" href="../css/app-styles.css">
+        <link rel="stylesheet" href="../../css/Font.css">
+        <link rel="stylesheet" href="css/app.css">
+        <script src="js/app.js"></script>
+    </head>
+    <body>
+        <div class="titlebar-container">
+            <div class="titlebar">
+                <button onclick="newTab();" id="newTab" class="special-button">
+                    <img class="special-button-image" draggable="false" src="../../icons/Suru/Suru/scalable/ui/tab-new-symbolic.svg"/>
+                </button>
+
+                <div class="special-title">Terminal</div>
+
+                <button onclick="searchAnything();" id="search" class="special-button">
+                    <img class="special-button-image" draggable="false" src="../../icons/Suru/Suru/scalable/actions/search-symbolic.svg"/>
+                </button>
+
+                <button onclick="openMenu();" id="menu" class="special-button">
+                    <img class="special-button-image" draggable="false" src="../../icons/Suru/Suru/scalable/actions/open-menu-symbolic.svg"/>
+                </button>
+            </div>
+            <div class="content">
+                <iframe src="main.html" class="content-iframe"></iframe>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/apps/terminal/js/app.js b/apps/terminal/js/app.js
@@ -0,0 +1,11 @@
+newTab = () => {
+    alert("It's just a demo :)");
+}
+
+searchAnything = () => {
+    alert("It's just a demo :)");
+}
+
+openMenu = () => {
+    alert("It's just a demo :)");
+}
diff --git a/apps/terminal/js/main.js b/apps/terminal/js/main.js
@@ -0,0 +1,139 @@
+terminal_filesystem={
+    bin:{},
+    boot:{},
+    cdrom:{},
+    dev:{},
+    etc:{},
+    home:{
+        user:{
+            "Desktop":{},
+            "Documents":{},
+            "Downloads":{},
+            "Music":{},
+            "Pictures":{},
+            "Templates":{},
+            "Videos":{},
+        }
+    },
+    lib:{},
+    "lost+found":{},
+    media:{},
+    mnt:{},
+    opt:{},
+    proc:{},
+    root:{},
+    run:{},
+    sbin:{},
+    srv:{},
+    tmp:{},
+    usr:{},
+    var:{}
+};
+
+out=document.querySelector("#out")
+__console_info="Welcome to Terminal";
+outputs=__console_info;
+now_dir="/";
+now_command="";
+
+function updateOutputs(){
+    out.value=outputs;
+}
+
+function updateOutputsWithCommands(){
+    out.value=outputs+"\nuser@desktop:"+now_dir+"# "+now_command;
+    out.scrollBy(0,9999999999999999999999999);
+}
+
+function clearOutputs(){
+    outputs=__console_info;
+    updateOutputs();
+}
+
+function clearCommands(){
+    now_command="";
+}
+
+function writeOutput(_value,add_new_line=1){
+    if(add_new_line==1){
+            outputs+="\n"+_value;
+    }else{
+            outputs+=_value;
+    }
+    out.scrollBy(0,9999999999999999999999999);
+}
+
+function runBashCommand(__command){
+    __command=__command.trim().split(" ");
+    var __the_command=__command[0];
+    if(__the_command=="clear"){
+        clearCommands();
+        clearOutputs();
+        return 0;
+    }
+    writeOutput("user@desktop:"+now_dir+"# "+now_command);
+    if(__the_command=="mkdir"||__the_command=="rmdir"||__the_command=="cp"||__the_command=="mv"||__the_command=="rm"){
+        writeOutput(__the_command+": Read-only file system");
+    }else if(__the_command==""){
+        writeOutput("",0);
+    }else if(__the_command=="apt-get"||__the_command=="apt"||__the_command=="dpkg"){
+        writeOutput("Package manager is busy now.")
+    }else if(__the_command=="su"||__the_command=="sudo"){
+        writeOutput("You are already logged in as root user.")
+    }else if(__the_command=="sh"||__the_command=="bash"){
+        writeOutput(__console_info);
+    }else if(__the_command=="echo"){
+        writeOutput(__command.join(" ").replace("echo ",""))
+    }else if(__the_command=="cd"){
+        if(now_dir=="/"){
+            if(__command[1] in terminal_filesystem){
+                now_dir+=__command[1]+"/";
+                writeOutput("",0);
+            }else{
+                writeOutput("cd: Directory not found");
+            }
+        }else if(__command[1].startsWith("..")){
+            now_dir="/";
+            writeOutput("",0);
+        }else{
+            writeOutput("It's just a demo :)")
+        }
+    }else if(__the_command=="ls"||__the_command=="dir"){
+        if(now_dir=="/"){
+            var __temp=[];
+            for(var i in terminal_filesystem){
+                __temp.push(i);
+            }
+            __temp.forEach((_)=>{writeOutput(_);})
+        }else{
+            writeOutput("It's just a demo. :)")
+        }
+    }else if(__the_command=="help"){
+        writeOutput("\
+mkdir    rmdir   cp      mv      rm\n\
+apt-get  apt     dpkg    su      sudo\n\
+sh       bash    echo    help    clear\n\
+cd       ls      dir")
+    }else{
+        writeOutput(__the_command+": Command not found")
+    }
+    clearCommands();
+    updateOutputsWithCommands();
+}
+
+function handlerKeyPress(){
+    keyCode=window.event.keyCode;
+    keyName=window.event.key;
+    if(keyCode==8){
+        now_command=now_command.substring(0,now_command.length-1);
+    } else if(keyCode==13){
+        runBashCommand(now_command);
+    } else if(keyName.length<2){
+        now_command+=keyName;
+    }
+    updateOutputsWithCommands();
+}
+
+document.addEventListener("keydown",handlerKeyPress);
+
+updateOutputsWithCommands();
diff --git a/apps/terminal/main.html b/apps/terminal/main.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../../css/Font.css">
+    <link rel="stylesheet" href="../css/app-styles.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <textarea id="out" disabled></textarea>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/css/Font.css b/css/Font.css
@@ -3,19 +3,15 @@
   src: url(./UbuntuRegular.ttf);
 }
 
-html {
-  font-family: UbuntuRegular;
-}
-
-input {
-  font-family: UbuntuRegular;
-  color:white;
+@font-face {
+  font-family: UbuntuMonoRegular;
+  src: url(./UbuntuMonoRegular.ttf);
 }
 
-button{
+html,input,textarea,button {
   font-family: UbuntuRegular;
 }
 
-textarea{
-  font-family: UbuntuRegular;
+input {
+  color:white;
 }
diff --git a/css/UbuntuMonoRegular.ttf b/css/UbuntuMonoRegular.ttf
diff --git a/index.html b/index.html
@@ -55,6 +55,7 @@
                 <div class="app-menu-app"><img class="app-menu-app-image" onclick="window_create_special(createRandomWindowID(),'apps/maps/index.html','Maps','icons/Suru/Suru/48x48/apps/maps-app.png');" draggable="false" src="icons/Suru/Suru/256x256/apps/maps-app.png"/></div>
                 <div class="app-menu-app"><img class="app-menu-app-image" onclick="window_create_special(createRandomWindowID(),'apps/help/index.html','Help','icons/Suru/Suru/48x48/apps/help-app.png');" draggable="false" src="icons/Suru/Suru/256x256/apps/help-app.png"/></div>
                 <div class="app-menu-app"><img class="app-menu-app-image" onclick="window_create_special(createRandomWindowID(),'apps/settings/index.html','Settings','icons/Suru/Suru/48x48/apps/system-settings.png');" draggable="false" src="icons/Suru/Suru/256x256/apps/system-settings.png"/></div>
+                <div class="app-menu-app"><img class="app-menu-app-image" onclick="window_create_special(createRandomWindowID(),'apps/terminal/index.html','Terminal','icons/Suru/Suru/48x48/apps/terminal-app.png');" draggable="false" src="icons/Suru/Suru/256x256/apps/terminal-app.png"/></div>
                 <div class="app-menu-app"><img class="app-menu-app-image" onclick="window_create(createRandomWindowID(),'https://paint.js.org','Paint - WineHQ','https://paint.js.org/assets/icon.png');" draggable="false" src="https://paint.js.org/assets/icon.png"/></div>
             </div>
         </div>