- add contacts

- change contents
- fix broken page

app/src/config.js

@@ -1,7 +1,11 @@
 export const surveyUrl = '/api/v1/survey'
 export const bugReportUrl = '/api/v1/bug-report'
+export const facebookUrl = 'https://www.facebook.com/LinuxOdyssey'
+export const GitHubUrl = 'https://github.com/linux-odyssey/linux-odyssey'
 
 export default {
   surveyUrl,
   bugReportUrl,
+  facebookUrl,
+  GitHubUrl,
 }

app/src/library.js

@@ -18,13 +18,18 @@ import {
   faMap,
   faTrophy,
   faFileInvoice,
+  faEnvelope,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faLightbulb,
   faCircleQuestion,
   faCircleRight,
 } from '@fortawesome/free-regular-svg-icons'
-import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
+import {
+  faFacebook,
+  faGithub,
+  faGoogle,
+} from '@fortawesome/free-brands-svg-icons'
 
 /* add icons to the library */
 library.add(
@@ -47,5 +52,7 @@ library.add(
   faCircleRight,
   faGithub,
   faGoogle,
-  faFileInvoice
+  faFileInvoice,
+  faFacebook,
+  faEnvelope
 )

app/src/views/LandingPage.vue

@@ -3,6 +3,7 @@
 import { useToast } from 'vue-toastification'
 import { useRouter } from 'vue-router'
 import DynamicBackground from '../components/DynamicBackground.vue'
+import { bugReportUrl, facebookUrl, GitHubUrl } from '../config'
 
 const router = useRouter()
 const toast = useToast()
@@ -30,7 +31,7 @@ const scrollToSection = (sectionId) => {
   <div class="w-screen h-screen bg-scroll bg-bg">
     <DynamicBackground class="overflow-auto w-full h-full" />
     <div
-      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+      class="overflow-auto h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <!-- game header -->
       <div class="h-[6vh] w-full">
@@ -51,6 +52,13 @@ const scrollToSection = (sectionId) => {
             </div>
             <div class="h-full w-full flex gap-3 items-center justify-end">
               <button
+                id="Feature"
+                class="text-text inline-block font-bold whitespace-nowrap"
+                @click="scrollToSection('feature')"
+                style="font-size: 2vh"
+              >
+                Feature</button
+              ><button
                 id="Info"
                 class="text-text inline-block font-bold whitespace-nowrap"
                 @click="scrollToSection('info')"
@@ -58,21 +66,14 @@ const scrollToSection = (sectionId) => {
               >
                 Info
               </button>
-              <button
+
-                id="Feature"
-                class="text-text inline-block font-bold whitespace-nowrap"
-                @click="scrollToSection('feature')"
-                style="font-size: 2vh"
-              >
-                Feature
-              </button>
               <button
                 id="Contact"
                 class="text-text inline-block font-bold whitespace-nowrap"
                 @click="scrollToSection('contact')"
                 style="font-size: 2vh"
               >
-                Contact
+                Contact Us
               </button>
 
               <button
@@ -99,66 +100,89 @@ const scrollToSection = (sectionId) => {
         </div>
       </div>
 
-      <div class="w-fit h-[94vh] m-3 justify-center px-10">
+      <div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-auto">
-        <h1
+        <div class="w-full">
-          class="text-text-primary mb-5 font-extrabold font-mono"
+          <h1
-          style="font-size: 16vh"
+            class="text-text-primary mb-2 font-extrabold font-mono w-fit"
-        >
+            style="font-size: 16vh"
-          Linux Odyssey
+          >
-        </h1>
+            Linux
+          </h1>
+          <img src="../img/icon_totem.svg" class="h-[30vh]" />
+          <h1
+            class="text-text-primary mb-2 font-extrabold font-mono w-fit"
+            style="font-size: 16vh"
+          >
+            Odyssey
+          </h1>
+        </div>
         <div class="overflow-y-auto w-70% flex flex-col">
-          <section id="info" class="text-text mb-5">
+          <section id="intro" class="text-text p-5">
-            Contrary to popular belief, Lorem Ipsum is not simply random text.
+            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-            It has roots in a piece of classical Latin literature from 45 BC,
+              程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
-            making it over 2000 years old. Richard McClintock, a Latin professor
+            </h1>
-            at Hampden-Sydney College in Virginia, looked up one of the more
+            <br />
-            obscure Latin words, consectetur, from a Lorem Ipsum passage, and
+            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-            going through the cites of the word in classical literature,
+              程式教育卻往往忽略背後「開發環境」的重要性，
-            discovered the undoubtable source. Lorem Ipsum comes from sections
+              使得許多學生在過程中充滿挫折。
-            1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
+            </h1>
-            of Good and Evil) by Cicero, written in 45 BC. This book is a
+            <br />
-            treatise on the theory of ethics, very popular during the
+            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-            Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
+              「開發環境」是寫程式、執行程式過程所需要的一切工具。
-            amet..", comes from a line in section 1.10.32. //Contrary to popular
+              而這些工具需要在終端機輸入指令來使用。
-            belief, Lorem Ipsum is not simply random text. It has roots in a
+            </h1>
-            piece of classical Latin literature from 45 BC, making it over 2000
+            <br />
-            years old. Richard McClintock, a Latin professor at Hampden-Sydney
+            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-            College in Virginia, looked up one of the more obscure Latin words,
+              大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
-            consectetur, from a Lorem Ipsum passage, and going through the cites
+              作業系統。
-            of the word in classical literature, discovered the undoubtable
+            </h1>
-            source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
+            <br />
-            Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-            Cicero, written in 45 BC. This book is a treatise on the theory of
+              Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
-            ethics, very popular during the Renaissance. The first line of Lorem
+            </h1>
-            Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
-            1.10.32.
           </section>
-          <section id="feature" class="text-text mb-5">
+          <section id="feature" class="text-text p-5">
-            There are many variations of passages of Lorem Ipsum available, but
+            <h1
-            the majority have suffered alteration in some form, by injected
+              class="text-text-primary px-5 font-extrabold font-mono"
-            humour, or randomised words which don't look even slightly
+              style="font-size: 3vh"
-            believable. If you are going to use a passage of Lorem Ipsum, you
+            >
-            need to be sure there isn't anything embarrassing hidden in the
+              初學者也能立即上手
-            middle of text. All the Lorem Ipsum generators on the Internet tend
+            </h1>
-            to repeat predefined chunks as necessary, making this the first true
+            <h1 class="text-text p-2" style="font-size: 2vh">
-            generator on the Internet. It uses a dictionary of over 200 Latin
+              我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
-            words, combined with a handful of model sentence structures, to
+            </h1>
-            generate Lorem Ipsum which looks reasonable. The generated Lorem
+            <h1 class="text-text p-2" style="font-size: 2vh">
-            Ipsum is therefore always free from repetition, injected humour, or
+              學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
-            non-characteristic words etc.//There are many variations of passages
+              環境。
-            of Lorem Ipsum available, but the majority have suffered alteration
+            </h1>
-            in some form, by injected humour, or randomised words which don't
+            <h1
-            look even slightly believable. If you are going to use a passage of
+              class="text-text-primary p-5 font-extrabold font-mono"
-            Lorem Ipsum, you need to be sure there isn't anything embarrassing
+              style="font-size: 3vh"
-            hidden in the middle of text. All the Lorem Ipsum generators on the
+            >
-            Internet tend to repeat predefined chunks as necessary, making this
+              遊戲般的學習體驗
-            the first true generator on the Internet. It uses a dictionary of
+            </h1>
-            over 200 Latin words, combined with a handful of model sentence
+            <h1 class="text-text p-2" style="font-size: 2vh">
-            structures, to generate Lorem Ipsum which looks reasonable. The
+              Linux Odyssey 融合了遊戲的樂趣與學習的實用性。
-            generated Lorem Ipsum is therefore always free from repetition,
+            </h1>
-            injected humour, or non-characteristic words etc.
+            <h1 class="text-text p-2" style="font-size: 2vh">
+              透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，
+              一邊掌握 Linux 指令的運用。
+            </h1>
+            <h1
+              class="text-text-primary p-5 font-extrabold font-mono"
+              style="font-size: 3vh"
+            >
+              真實的 Linux 操作之旅
+            </h1>
+            <h1 class="text-text p-2" style="font-size: 2vh">
+              Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
+            </h1>
+            <h1 class="text-text p-2" style="font-size: 2vh">
+              每一個指令都是在真實的 Linux 環境中執行，
+              讓學習者能夠真正深入軟體開發的世界。
+            </h1>
           </section>
-          <div class="justify-self-center w-fit">
+          <div class="justify-self-center w-fit p-4">
             <iframe
               width="560"
               height="315"
@@ -170,26 +194,39 @@ const scrollToSection = (sectionId) => {
             ></iframe>
           </div>
         </div>
-
+        <section id="feature" class="text-text px-5"></section>
-        <section id="contact" class="text-text mb-5">
+        <button
-          It is a long established fact that a reader will be distracted by the
+          id="StartGame"
-          readable content of a page when looking at its layout. The point of
+          @click="handleSignIn"
-          using Lorem Ipsum is that it has a more-or-less normal distribution of
+          class="w-1/14 h-1/10 bg-text-primary p-1"
-          letters, as opposed to using 'Content here, content here', making it
+        >
-          look like readable English. Many desktop publishing packages and web
+          <div class="bg-black">
-          page editors now use Lorem Ipsum as their default model text, and a
+            <div class="text-text p-2 justify-center">
-          search for 'lorem ipsum' will uncover many web sites still in their
+              準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
-          infancy. Various versions have evolved over the years, sometimes by
+            </div>
-          accident, sometimes on purpose (injected humour and the like).//It is
+          </div>
-          a long established fact that a reader will be distracted by the
+        </button>
-          readable content of a page when looking at its layout. The point of
+        <section id="contact" class="text-text px-5">
-          using Lorem Ipsum is that it has a more-or-less normal distribution of
+          <button title="facebookUrl" :href="facebookUrl" class="h-10 w-10">
-          letters, as opposed to using 'Content here, content here', making it
+            <font-awesome-icon
-          look like readable English. Many desktop publishing packages and web
+              :icon="['fab', 'facebook']"
-          page editors now use Lorem Ipsum as their default model text, and a
+              class="text-text-primary h-full w-full"
-          search for 'lorem ipsum' will uncover many web sites still in their
+            />
-          infancy. Various versions have evolved over the years, sometimes by
+          </button>
-          accident, sometimes on purpose (injected humour and the like).
+          facebook粉絲專頁: Linux Odyssey
+          <button title="GitHubUrl" :href="GitHubUrl" class="h-10 w-10">
+            <font-awesome-icon
+              :icon="['fab', 'github']"
+              class="text-text-primary h-full w-full"
+            /></button
+          >Github: linux-odyssey/linux-odyssey
+          <div title="EmailAddress" class="h-10 w-10">
+            <font-awesome-icon
+              :icon="['fas', 'envelope']"
+              class="text-text-primary h-full w-full"
+            />
+          </div>
+          email: team@linuxodyssey.xyz
         </section>
       </div>
     </div>