- add icons

- change first page to landing-page
- add text background
- modify text arrangement

app/src/views/LandingPage.vue

@@ -1,22 +1,7 @@
 <script setup>
-// import { computed, onMounted } from 'vue'
-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()
-
-const handleSignIn = async () => {
-  try {
-    router.push({ name: 'login' })
-  } catch (err) {
-    toast.error('無法讀取登入頁面')
-    console.log(err)
-  }
-}
-
 const scrollToSection = (sectionId) => {
   const section = document.getElementById(sectionId)
   if (section) {
@@ -47,7 +32,7 @@ const scrollToSection = (sectionId) => {
               <img src="../img/icon_totem.svg" class="h-5" />
               <button
                 id="GameTitle"
-                class="text-text-primary inline-block font-bold whitespace-nowrap"
+                class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
                 style="font-size: 2vh"
               >
                 Welcome to Linux Odyssey !
@@ -56,7 +41,7 @@ const scrollToSection = (sectionId) => {
             <div class="h-full w-full flex gap-3 items-center justify-end">
               <button
                 id="Intro"
-                class="text-text inline-block font-bold whitespace-nowrap"
+                class="text-text inline-block font-bold whitespace-nowrap pt-1"
                 @click="scrollToSection('intro')"
                 style="font-size: 2vh"
               >
@@ -64,14 +49,14 @@ const scrollToSection = (sectionId) => {
               </button>
               <button
                 id="Feature"
-                class="text-text inline-block font-bold whitespace-nowrap"
+                class="text-text inline-block font-bold whitespace-nowrap pt-1"
                 @click="scrollToSection('feature')"
                 style="font-size: 2vh"
               >
                 Feature</button
               ><button
                 id="Info"
-                class="text-text inline-block font-bold whitespace-nowrap"
+                class="text-text inline-block font-bold whitespace-nowrap pt-1"
                 @click="scrollToSection('info')"
                 style="font-size: 2vh"
               >
@@ -80,21 +65,21 @@ const scrollToSection = (sectionId) => {
 
               <button
                 id="Contact"
-                class="text-text inline-block font-bold whitespace-nowrap"
+                class="text-text inline-block font-bold whitespace-nowrap pt-1"
                 @click="scrollToSection('contact')"
                 style="font-size: 2vh"
               >
                 Contact Us
               </button>
-
-              <button
+              <RouterLink
                 title="Sign In"
-                @click="handleSignIn"
-                class="text-text inline-block font-bold whitespace-nowrap"
+                id="SignIn"
+                to="/register"
+                class="text-text inline-block font-bold whitespace-nowrap pt-1"
                 style="font-size: 2vh"
               >
                 Sign In
-              </button>
+              </RouterLink>
               <a
                 title="Bug Report"
                 :href="bugReportUrl"
@@ -131,70 +116,73 @@ const scrollToSection = (sectionId) => {
         </div>
         <section
           id="intro"
-          class="text-text p-5 grid grid-cols-1 gap-3 justify-items-center"
+          class="text-text p-20 grid grid-cols-1 gap-3 justify-items-center"
         >
-          <h1 class="text-text inline-block">
+          <h1
+            class="text-text inline-block bg-purple-900 p-5 rounded-xl opacity-90"
+            style="font-size: 2.5vh"
+          >
             程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
-          </h1>
-          <h1 class="text-text inline-block">
             程式教育卻往往忽略背後「開發環境」的重要性，
             使得許多學生在過程中充滿挫折。
-          </h1>
-          <h1 class="text-text inline-block">
             「開發環境」是寫程式、執行程式過程所需要的一切工具。
             而這些工具需要在終端機輸入指令來使用。
-          </h1>
-          <h1 class="text-text inline-block">
             大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
-            作業系統。
-          </h1>
-          <h1 class="text-text inline-block">
-            Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
+            作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
           </h1>
         </section>
         <section
           id="feature"
-          class="text-text p-5 grid grid-cols-1 justify-items-center"
+          class="text-text p-15 grid grid-cols-3 grid-rows-6 gap-2 justify-items-center items-center pt-10"
         >
+          <img src="../img/icon_shuttle.svg" class="h-[18vh] row-span-2" />
           <h1
-            class="text-text-primary p-5 font-extrabold font-mono"
-            style="font-size: 3vh"
+            class="text-text-primary px-5 font-extrabold font-mono col-span-2"
+            style="font-size: 3.5vh"
           >
             初學者也能立即上手
           </h1>
-          <h1 class="text-text p-2" style="font-size: 2vh">
-            我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
-          </h1>
-          <h1 class="text-text p-2" style="font-size: 2vh">
-            學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
-            環境。
-          </h1>
+          <div class="col-span-2 bg-purple-900 p-5 rounded-xl opacity-90">
+            <h1 class="text-text p-2" style="font-size: 2.5vh">
+              我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
+            </h1>
+            <h1 class="text-text p-2" style="font-size: 2.5vh">
+              學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
+              環境。
+            </h1>
+          </div>
           <h1
-            class="text-text-primary p-5 font-extrabold font-mono"
-            style="font-size: 3vh"
+            class="text-text-primary px-5 font-extrabold font-mono col-span-2"
+            style="font-size: 3.5vh"
           >
             遊戲般的學習體驗
           </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>
+          <img src="../img/icon_sword.svg" class="h-[18vh] row-span-2" />
+          <div class="col-span-2 bg-purple-900 p-5 rounded-xl opacity-90">
+            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+              Linux Odyssey 融合了遊戲的樂趣與學習的實用性。
+            </h1>
+            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+              透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，
+              一邊掌握 Linux 指令的運用。
+            </h1>
+          </div>
+          <img src="../img/icon_settings.svg" class="h-[18vh] row-span-3" />
           <h1
-            class="text-text-primary p-5 font-extrabold font-mono"
-            style="font-size: 3vh"
+            class="text-text-primary px-5 font-extrabold font-mono col-span-2 pt-8"
+            style="font-size: 3.5vh"
           >
             真實的 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>
+          <div class="col-span-2 bg-purple-900 p-5 rounded-xl opacity-90">
+            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+              Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
+            </h1>
+            <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+              每一個指令都是在真實的 Linux 環境中執行，
+              讓學習者能夠真正深入軟體開發的世界。
+            </h1>
+          </div>
         </section>
         <section
           id="start"
@@ -208,114 +196,137 @@ const scrollToSection = (sectionId) => {
             frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowfullscreen
-            class="col-span-3 pb-2 mb-3"
+            class="col-span-3 pb-10 mb-3"
           ></iframe>
-
-          <button
+          <RouterLink
+            title="StartGame"
             id="StartGame"
-            @click="handleSignIn"
+            to="/register"
             class="w-1/2 h-[10vh] bg-text-primary p-2 transition ease-in-out delay-130 hover:-translate-y-1 hover:scale-150 hover:bg-indigo-500 duration-300 col-span-3"
           >
             <div class="bg-black p-2 w-full">
-              <div class="text-text p-2 w-full" style="font-size: 2.5vh">
+              <div
+                class="text-text p-2 w-full text-center"
+                style="font-size: 2.5vh"
+              >
                 準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
               </div>
             </div>
-          </button>
+          </RouterLink>
         </section>
         <section
           id="info"
-          class="text-text px-5 grid grid-cols-3 gap-2 justify-items-center"
+          class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
         >
           <h1
             class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-            style="font-size: 3vh"
+            style="font-size: 3.5vh"
           >
             團隊介紹
           </h1>
-          <h1 class="text-text p-2 col-span-3">
+          <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
             國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
             互動式終端機教學網站
           </h1>
-          <h1 class="text-text p-2 col-span-3">Indieveloper</h1>
-          <div class="p-2 col-span-3">
-            <div class="grid grid-cols-4 gap-2 justify-items-center">
-              <h1 class="font-bold">wancat 林貓</h1>
-              <h1 class="font-bold">Neil</h1>
-              <h1 class="font-bold">A.H.</h1>
-              <h1 class="font-bold">Ray Gur</h1>
+          <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
+            Indieveloper
+          </h1>
+          <div class="p-3 col-span-3">
+            <div class="grid grid-cols-4 gap-3 justify-items-center">
+              <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
+              <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
+              <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
+              <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
             </div>
           </div>
           <h1
             class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-            style="font-size: 3vh"
+            style="font-size: 3.5vh"
           >
             得獎肯定
           </h1>
-          <h1 class="text-text p-2 col-span-3">
+          <h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
             大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
           </h1>
 
           <h1
-            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-            style="font-size: 3vh"
+            class="text-text-primary p-5 font-extrabold font-mono col-span-3 gap-3"
+            style="font-size: 3.5vh"
           >
             玩家感想
           </h1>
-          <h1 class="text-text p-2">"很好玩很像益智遊戲"</h1>
-          <h1 class="text-text p-2">
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            "很好玩很像益智遊戲"
+          </h1>
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
             "我從來不知道自由軟體的存在，謝謝你們。"
           </h1>
-          <h1 class="text-text p-2">"還蠻好玩的，讓程式變好玩"</h1>
-          <h1 class="text-text p-2">"以前不喜歡電腦課現在覺得喜歡一點點"</h1>
-          <h1 class="text-text p-2">
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            "還蠻好玩的，讓程式變好玩"
+          </h1>
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            "以前不喜歡電腦課現在覺得喜歡一點點"
+          </h1>
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
             "程式真的對新手很友善，讓我學到了很多東西"
           </h1>
-          <h1 class="text-text p-2">"感覺做得很好很簡明易懂關卡設計很用心"</h1>
-          <h1 class="text-text p-2">
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
+            "感覺做得很好很簡明易懂關卡設計很用心"
+          </h1>
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
             "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
           </h1>
-          <h1 class="text-text p-2">
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
             "以前我覺得寫程式很難不過現在覺得很有趣"
           </h1>
-          <h1 class="text-text p-2">
+          <h1 class="text-text p-3" style="font-size: 2.5vh">
             "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
           </h1>
         </section>
         <section
           id="contact"
-          class="text-text p-5 grid grid-cols-3 gap-4 justify-items-center"
+          class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
         >
           <h1
             class="text-text-primary p-5 font-extrabold font-mono col-span-3"
-            style="font-size: 3vh"
+            style="font-size: 3.5vh"
           >
             聯絡我們
           </h1>
-          <button title="facebookUrl" :href="facebookUrl" class="h-10 w-10">
+          <a
+            title="facebookUrl"
+            :href="facebookUrl"
+            target="_blank"
+            class="h-10 w-10"
+          >
             <font-awesome-icon
               :icon="['fab', 'facebook']"
               class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
             />
-          </button>
-          <button title="GitHubUrl" :href="GitHubUrl" class="h-10 w-10">
+          </a>
+          <a
+            title="GitHubUrl"
+            :href="GitHubUrl"
+            target="_blank"
+            class="h-10 w-10"
+          >
             <font-awesome-icon
               :icon="['fab', 'github']"
               class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
             />
-          </button>
+          </a>
           <div title="EmailAddress" class="h-10 w-10">
             <font-awesome-icon
               :icon="['fas', 'envelope']"
               class="text-text-primary h-full w-full delay-130 hover:-translate-y-1 hover:scale-150"
             />
           </div>
-          <h1 class="font-semibold">Facebook</h1>
-          <h1 class="font-semibold">GitHub</h1>
-          <h1 class="font-semibold">Email</h1>
-          <h1>Linux Odyssey</h1>
-          <h1>linux-odyssey/linux-odyssey</h1>
-          <h1>team@linuxodyssey.xyz</h1>
+          <h1 class="font-semibold" style="font-size: 2.5vh">Facebook</h1>
+          <h1 class="font-semibold" style="font-size: 2.5vh">GitHub</h1>
+          <h1 class="font-semibold" style="font-size: 2.5vh">Email</h1>
+          <h1 style="font-size: 2.5vh">Linux Odyssey</h1>
+          <h1 style="font-size: 2.5vh">linux-odyssey/linux-odyssey</h1>
+          <h1 style="font-size: 2.5vh">team@linuxodyssey.xyz</h1>
         </section>
       </div>
     </div>