feat: About page

controller/src/app/pages/about/about.component.html

@@ -1 +1,22 @@
-<p>about works!</p>
+<div class="item">
+  <div>Versions</div>
+  <div>
+    <div>Singland: 1.0.0</div>
+    <div>sing-box: 1.0.0</div>
+  </div>
+</div>
+<div class="item">
+  <div>Thinks</div>
+  <div>
+    <div>
+      Singland is made possible by the following open source project:
+    </div>
+    <ul>
+      <li (click)="openExternalLink('https://github.com/SagerNet/sing-box/')">sing-box </li>
+      <li (click)="openExternalLink('https://github.com/electron/electron/')">electron</li>
+      <li (click)="openExternalLink('https://github.com/angular/angular/')">angular</li>
+      <li (click)="openExternalLink('https://github.com/microsoft/monaco-editor/')">monaco-editor</li>
+      <li (click)="openExternalLink('https://github.com/google/wireit/')">wireit</li>
+    </ul>
+  </div>
+</div>

controller/src/app/pages/about/about.component.scss

@@ -0,0 +1,22 @@
+.item {
+  margin-bottom: 20px;
+
+  > div:first-child {
+    font-weight: bold;
+  }
+
+  ul {
+    display: inline-block;
+    margin-top: 2px;
+    padding-left: 15px;
+
+    li {
+      color: #00a1ff;
+      cursor: pointer;
+    }
+
+    li::marker {
+      color: black;
+    }
+  }
+}

controller/src/app/pages/about/about.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from "@angular/core";
+import { shell } from "electron";
 
 @Component({
   selector: "app-about",
@@ -9,4 +10,8 @@ export class AboutComponent implements OnInit {
   constructor() {}
 
   ngOnInit(): void {}
+
+  openExternalLink(url: string) {
+    shell.openExternal(url);
+  }
 }