about added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cheetah-os",
-  "version": "2.10.05",
+  "version": "2.10.27",
   "description": "Desktop environment in the browser",
   "author": "CM",
   "license": "MIT",

src/app/app.component.ts

@@ -16,6 +16,7 @@ import { AppDirectory } from './system-files/app.directory';
 import { Constants } from 'src/app/system-files/constants';
 
 import { BaseComponent } from './system-base/base/base.component';
+import { CheetahComponent } from './system-apps/cheetah/cheetah.component';
 import { TitleComponent } from './user-apps/title/title.component';
 import { GreetingComponent } from './user-apps/greeting/greeting.component';
 import { FileExplorerComponent } from './system-apps/fileexplorer/fileexplorer.component';
@@ -88,6 +89,7 @@ export class AppComponent implements OnDestroy, AfterViewInit {
   //appname
   private apps: {type: Type<BaseComponent>}[] =[
     {type: AudioPlayerComponent},
+    {type: CheetahComponent},
     {type: FileExplorerComponent},
     {type: TaskmanagerComponent},
     {type: TerminalComponent},

src/app/app.module.ts

@@ -35,7 +35,7 @@ import { CodeEditorComponent } from './user-apps/codeeditor/codeeditor.component
 import { PropertiesComponent } from './shared/system-component/properties/properties.component'; 
 import { MarkDownViewerComponent } from './user-apps/markdownviewer/markdownviewer.component';
 import { FileTreeViewComponent } from './shared/system-component/filetreeview/filetreeview.component';
-import { AboutComponent } from './system-apps/about/about.component';
+import { CheetahComponent } from './system-apps/cheetah/cheetah.component';
 
 import { SafeUrlPipe } from './shared/system-pipes/safe.resource.url.pipe';
 import { TruncatePipe } from './shared/system-pipes/string.shorten.pipe';
@@ -78,7 +78,7 @@ import { KeyPressCaptureDirective } from './system-apps/terminal/key.press.captu
     CodeEditorComponent,
     MarkDownViewerComponent,
     FileTreeViewComponent,
-    AboutComponent,
+    CheetahComponent,
 
 
     HighlightDirective,

src/app/system-apps/cheetah/cheetah.component.css

@@ -0,0 +1,123 @@
+.cheetah-main-container{
+    font-size: 1rem;
+    text-align: center;
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 50%);
+    position: absolute;
+    top: 25%;
+    left: 25%;
+   /*  transform: translate(-50%, -50%); Move the element back by 50% of its own width and height */
+    transform: translate(431px, -914px); /* Move the element back by 50% of its own width and height */
+    outline: 1px hsl(0deg 0% 20%/70%);
+    z-index: 2;
+    height: fit-content;
+    width: fit-content;
+}
+
+/*Head Section*/
+.cheetah-header-container{
+    background-color: #ffffff;
+    width: 100%;
+    position: relative;
+    display: flex;
+}
+
+.cheetah-left-header-section{
+    width:calc(100% - 45px);
+    height: 30px;
+    left: 0;
+}
+
+.cheetah-right-header-section{
+    height: 30px;
+    right: 0;
+}
+
+.cheetah-h1{
+    color: #fff;
+    font-size: 13px;
+    font-weight: normal;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    height: 29px;
+    border-bottom: 1px transparent blue;  
+    width: fit-content;
+    flex-grow: 1;
+    display: flex;
+    left: 0;
+}
+
+.cheetah-img{
+    height: 18px;
+    width: 18px;
+    position: relative;
+    left: -5px;
+    margin: 0 6px 0 8px;   
+}
+
+.cheetah-figure{
+    padding-left: 6px;
+    display: flex;
+    align-items: center;
+    height: 30px;
+}
+
+.cheetah-figcaption{
+    color: #000;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.cheetah-button{
+    border-left: 1px transparent blue;
+    box-sizing: content-box;
+    color: #fff;
+    display: flex;
+    font-size: 20px;
+    width: 45px;
+    place-content: center;
+    place-items: center;
+}
+
+.cheetah-svg{
+    fill: #ababab;
+    margin-bottom: 2px;
+    /* width: 10px; */
+}
+
+.cheetah-nav{
+    display: flex;
+    position: absolute;
+    width: fit-content;
+    right: 0;
+    height: 30px;
+}
+
+
+.cheetah-body-container{
+    height: 100%;
+    width: 100%;
+    background-color: #f0f0f0;
+}
+
+.os-info{
+    height: 100%;
+    width: 100%;
+    padding:8px 8px 4px 8px;
+}
+
+.os-image{
+    width: 626px;
+    height: 235px;
+    margin-inline: auto;
+}
+
+.os-name{
+    font-size: 30px;
+    text-align: center;
+    color: #000;
+}
+.os-version{
+    font-size: 15px;
+    text-align: center;
+    color: #000;
+}

src/app/system-apps/cheetah/cheetah.component.html

@@ -0,0 +1,31 @@
+<div ngDraggable [handle]="leftHS1"  class="cheetah-main-container">
+    <div class="cheetah-header-container" tabindex="0">
+        <div #leftHS1 class="cheetah-left-header-section">
+            <h1 class="cheetah-h1">
+                <figure class="cheetah-figure">
+                    <img class="cheetah-img" [src]="icon" />
+                    <figcaption class="cheetah-figcaption"> {{name}} </figcaption>
+                </figure>
+            </h1>
+        </div>
+        <div class="cheetah-right-header-section">
+            <nav class="cheetah-nav">
+                <button class="cheetah-button" id="closeBtn" appHighlight (click)="onClosePropertyView()"  title="Close" >
+                    <svg class="cheetah-svg" width="10" viewBox="0 0 10 10">
+                        <path d="M10.2.7L9.5 0 5.1 4.4.7 0 0 .7l4.4 4.4L0 9.5l.7.7 4.4-4.4 4.4 4.4.7-.7-4.4-4.4z" fill = "#FFFFF"/>
+                    </svg>
+                </button>
+            </nav>
+        </div>
+    </div>
+    <div class="cheetah-body-container">
+        <div class="os-info"> 
+            <div class="os-image">
+                <img [src]="cheetahIcon" />
+            </div>
+            <div> <p class="os-name">CheetahOS</p> </div>
+            <div> <p class="os-version">Version: 2.10.27 </p></div>
+            <div> <p class="os-version">{{year}}</p></div>
+        </div>
+    </div>
+</div>