Add dedicated about page

.gitlab-ci.yml

@@ -12,8 +12,8 @@ remove-old-services:
 container-build:
   stage: build 
   script:
-    - sed -i "s/DATE/$(date -I)/g" ${CI_PROJECT_DIR}/src/views/Setting.vue
-    - sed -i "s/VERSION/$(git log -1 --oneline | awk '{print $1}')/g" ${CI_PROJECT_DIR}/src/views/Setting.vue
+    - sed -i "s/DATE/$(date -I)/g" ${CI_PROJECT_DIR}/src/views/About.vue
+    - sed -i "s/VERSION/$(git log -1 --oneline | awk '{print $1}')/g" ${CI_PROJECT_DIR}/src/views/About.vue
     - podman build -t little-lines .
 
 container-deploy:

src/views/About.vue

@@ -1,10 +1,50 @@
 <template>
 
-    <h1>About!</h1>
-    <p>Esse velit cupidatat proident minim nostrud fugiat proident est sunt ex cillum nisi duis labore.</p>
+    <v-sheet class="d-flex justify-center">
+
+        <v-sheet class="ma-2 pa-4 mb-auto">
+
+            <v-row class="ma-2" justify="centered">
+
+            <v-img cover src="../../icons/LittleLines.svg"></v-img>
+            </v-row>
+
+            <v-list-item
+            center
+                class="text-black"
+                title="Little Lines"
+                subtitle="openKMITL Community"
+            
+            >
+            
+            </v-list-item>
+            <a class="versionbutton">DATE-VERSION</a>
+
+        </v-sheet>
+    </v-sheet>
 
 </template>
 
 <script setup>
 
-</script>
+</script>
+
+<style>
+.versionbutton {
+  background-color: rgba(255, 190, 111, 0.25);;
+  color: #C64600;
+  border-radius:50px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  font-size: 16px;
+  font-weight: bold;
+  padding-top: 10px;
+  padding-right: 15px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+</style>

src/views/Setting.vue

@@ -90,10 +90,7 @@
             </v-btn>
         </v-sheet>
         
-    </v-sheet>
-
-    <div style="color: #8f8f8f;">Little Lines เวอร์ชัน DATE-VERSION</div>
-    
+    </v-sheet>    
 
 </template>