From bef134871d3ec5cf1757bfe88decde36eb2cf8ea Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 29 Feb 2024 23:06:47 +0800
Subject: [PATCH] - edit position - add group info - add opinions - add start
 button

---
 app/src/views/LandingPage.vue | 289 ++++++++++++++++++++++------------
 1 file changed, 186 insertions(+), 103 deletions(-)

diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
index 7655b01..d14c1f2 100644
--- a/app/src/views/LandingPage.vue
+++ b/app/src/views/LandingPage.vue
@@ -20,18 +20,18 @@ const handleSignIn = async () => {
 const scrollToSection = (sectionId) => {
   const section = document.getElementById(sectionId)
   if (section) {
+    console.log(sectionId)
     window.scrollTo({
       top: section.offsetTop,
-      behavior: 'smooth',
     })
   }
 }
 </script>
 <template>
   <div class="w-screen h-screen bg-scroll bg-bg">
-    <DynamicBackground class="overflow-auto w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
-      class="overflow-auto h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+      class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <!-- game header -->
       <div class="h-[6vh] w-full">
@@ -47,10 +47,18 @@ const scrollToSection = (sectionId) => {
                 class="text-text-primary inline-block font-bold whitespace-nowrap"
                 style="font-size: 2vh"
               >
-                Welcome to Linux Odyssey!
+                Welcome to Linux Odyssey !
               </button>
             </div>
             <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"
+                @click="scrollToSection('intro')"
+                style="font-size: 2vh"
+              >
+                Intro
+              </button>
               <button
                 id="Feature"
                 class="text-text inline-block font-bold whitespace-nowrap"
@@ -100,133 +108,208 @@ const scrollToSection = (sectionId) => {
         </div>
       </div>
 
-      <div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-auto">
-        <div class="w-full">
+      <div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-y-auto">
+        <div
+          class="w-full h-full grid grid-cols-3 justify-items-center items-center"
+        >
           <h1
-            class="text-text-primary mb-2 font-extrabold font-mono w-fit"
-            style="font-size: 16vh"
+            class="text-text-primary mb-2 font-extrabold font-mono w-fit ml-20"
+            style="font-size: 14vh"
           >
             Linux
           </h1>
-          <img src="../img/icon_totem.svg" class="h-[30vh]" />
+          <img src="../img/icon_totem.svg" class="h-[30vh] inline-flex mr-12" />
           <h1
-            class="text-text-primary mb-2 font-extrabold font-mono w-fit"
-            style="font-size: 16vh"
+            class="text-text-primary mb-2 font-extrabold font-mono w-fit mr-20"
+            style="font-size: 14vh"
           >
             Odyssey
           </h1>
         </div>
-        <div class="overflow-y-auto w-70% flex flex-col">
-          <section id="intro" class="text-text p-5">
-            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-              程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
-            </h1>
-            <br />
-            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-              程式教育卻往往忽略背後「開發環境」的重要性，
-              使得許多學生在過程中充滿挫折。
-            </h1>
-            <br />
-            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-              「開發環境」是寫程式、執行程式過程所需要的一切工具。
-              而這些工具需要在終端機輸入指令來使用。
-            </h1>
-            <br />
-            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-              大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
-              作業系統。
-            </h1>
-            <br />
-            <h1 class="text-text inline-block font-bold whitespace-nowrap p-2">
-              Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
-            </h1>
-          </section>
-          <section id="feature" class="text-text p-5">
-            <h1
-              class="text-text-primary px-5 font-extrabold font-mono"
-              style="font-size: 3vh"
-            >
-              初學者也能立即上手
-            </h1>
-            <h1 class="text-text p-2" style="font-size: 2vh">
-              我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
-            </h1>
-            <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"
-            >
-              遊戲般的學習體驗
-            </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>
-            <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 p-4">
-            <iframe
-              width="560"
-              height="315"
-              src="https://www.youtube.com/embed/XzvfmUf1QP8?si=QxnKJMNjsm27fGGF"
-              title="YouTube video player"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              allowfullscreen
-            ></iframe>
-          </div>
-        </div>
-        <section id="feature" class="text-text px-5"></section>
-        <button
-          id="StartGame"
-          @click="handleSignIn"
-          class="w-1/14 h-1/10 bg-text-primary p-1"
+        <section
+          id="intro"
+          class="text-text p-5 grid grid-cols-1 gap-3 justify-items-center"
         >
-          <div class="bg-black">
-            <div class="text-text p-2 justify-center">
-              準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
+          <h1 class="text-text inline-block">
+            程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
+          </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 互動教學網站。
+          </h1>
+        </section>
+        <section
+          id="feature"
+          class="text-text p-5 grid grid-cols-1 justify-items-center"
+        >
+          <h1
+            class="text-text-primary p-5 font-extrabold font-mono"
+            style="font-size: 3vh"
+          >
+            初學者也能立即上手
+          </h1>
+          <h1 class="text-text p-2" style="font-size: 2vh">
+            我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
+          </h1>
+          <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"
+          >
+            遊戲般的學習體驗
+          </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>
+          <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>
+        <section
+          id="start"
+          class="text-text p-20 grid grid-cols-3 gap-10 justify-items-center"
+        >
+          <iframe
+            width="1000"
+            height="562"
+            src="https://www.youtube.com/embed/XzvfmUf1QP8?si=QxnKJMNjsm27fGGF"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+            class="col-span-3 pb-2 mb-3"
+          ></iframe>
+
+          <button
+            id="StartGame"
+            @click="handleSignIn"
+            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">
+                準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
+              </div>
+            </div>
+          </button>
+        </section>
+        <section
+          id="info"
+          class="text-text px-5 grid grid-cols-3 gap-2 justify-items-center"
+        >
+          <h1
+            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+            style="font-size: 3vh"
+          >
+            團隊介紹
+          </h1>
+          <h1 class="text-text p-2 col-span-3">
+            國立臺北科技大學 智慧自動化工程科 第二屆 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>
             </div>
           </div>
-        </button>
-        <section id="contact" class="text-text px-5">
+          <h1
+            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+            style="font-size: 3vh"
+          >
+            得獎肯定
+          </h1>
+          <h1 class="text-text p-2 col-span-3">
+            大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名
+          </h1>
+
+          <h1
+            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+            style="font-size: 3vh"
+          >
+            玩家感想
+          </h1>
+          <h1 class="text-text p-2">"很好玩很像益智遊戲"</h1>
+          <h1 class="text-text p-2">
+            "我從來不知道自由軟體的存在，謝謝你們。"
+          </h1>
+          <h1 class="text-text p-2">"還蠻好玩的，讓程式變好玩"</h1>
+          <h1 class="text-text p-2">"以前不喜歡電腦課現在覺得喜歡一點點"</h1>
+          <h1 class="text-text p-2">
+            "程式真的對新手很友善，讓我學到了很多東西"
+          </h1>
+          <h1 class="text-text p-2">"感覺做得很好很簡明易懂關卡設計很用心"</h1>
+          <h1 class="text-text p-2">
+            "這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動"
+          </h1>
+          <h1 class="text-text p-2">
+            "以前我覺得寫程式很難不過現在覺得很有趣"
+          </h1>
+          <h1 class="text-text p-2">
+            "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
+          </h1>
+        </section>
+        <section
+          id="contact"
+          class="text-text p-5 grid grid-cols-3 gap-4 justify-items-center"
+        >
+          <h1
+            class="text-text-primary p-5 font-extrabold font-mono col-span-3"
+            style="font-size: 3vh"
+          >
+            聯絡我們
+          </h1>
           <button title="facebookUrl" :href="facebookUrl" class="h-10 w-10">
             <font-awesome-icon
               :icon="['fab', 'facebook']"
               class="text-text-primary h-full w-full"
             />
           </button>
-          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
+            />
+          </button>
           <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
+          <h1>facebook 粉絲專頁: Linux Odyssey</h1>
+          <h1>Github: linux-odyssey/linux-odyssey</h1>
+          <h1>email: team@linuxodyssey.xyz</h1>
         </section>
       </div>
     </div>