mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-06 03:20:13 +08:00
setup main block
This commit is contained in:
wancat committed
1 parent
5dbdadbb27
commit
2bfd2cc06d
1 file changed
+215
-220
+215
-220
@@ -21,7 +21,7 @@ const scrollToSection = (sectionId) => {
|
||||
<div class="h-screen w-screen absolute top-0 left-0">
|
||||
<!-- game header -->
|
||||
<div
|
||||
class="w-full h-20 px-5 flex flex-row items-center justify-between bg-bg-secondary"
|
||||
class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
|
||||
>
|
||||
<div class="flex flex-row items-center gap-3">
|
||||
<img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
|
||||
@@ -89,239 +89,234 @@ const scrollToSection = (sectionId) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 ml-20"
|
||||
style="font-size: 14vh"
|
||||
>
|
||||
Linux
|
||||
</h1>
|
||||
<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 mr-20"
|
||||
style="font-size: 14vh"
|
||||
>
|
||||
Odyssey
|
||||
</h1>
|
||||
</div>
|
||||
<section
|
||||
id="intro"
|
||||
class="text-text p-20 grid grid-cols-1 gap-3 justify-items-center"
|
||||
>
|
||||
<h1
|
||||
class="text-text inline-block bg-bg-primary p-5 rounded-xl opacity-90"
|
||||
style="font-size: 2.5vh"
|
||||
>
|
||||
程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
|
||||
程式教育卻往往忽略背後「開發環境」的重要性，
|
||||
使得許多學生在過程中充滿挫折。
|
||||
「開發環境」是寫程式、執行程式過程所需要的一切工具。
|
||||
而這些工具需要在終端機輸入指令來使用。
|
||||
大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
|
||||
作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
|
||||
</h1>
|
||||
</section>
|
||||
<section
|
||||
id="feature"
|
||||
class="text-text p-15 grid grid-rows-3 gap-10 items-center pt-10"
|
||||
>
|
||||
<div
|
||||
class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
|
||||
>
|
||||
<img src="../img/icon_shuttle.svg" class="h-[18vh] row-span-2" />
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-2"
|
||||
style="font-size: 3.5vh"
|
||||
>
|
||||
初學者也能立即上手
|
||||
<!-- main content -->
|
||||
<main class="w-full h-[94vh] overflow-y-auto">
|
||||
<div class="h-1/2 m-3 px-10">
|
||||
<div class="w-full h-full flex flex-col justify-around items-center">
|
||||
<h1 class="text-text-primary text-7xl font-extrabold font-mono">
|
||||
Linux
|
||||
</h1>
|
||||
<h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
|
||||
我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
|
||||
學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
|
||||
環境。
|
||||
<img src="../img/icon_totem.svg" class="h-[30vh]" />
|
||||
<h1 class="text-text-primary text-7xl font-extrabold font-mono">
|
||||
Odyssey
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
|
||||
<section
|
||||
id="intro"
|
||||
class="text-text p-20 grid grid-cols-1 gap-3 justify-items-center"
|
||||
>
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-2"
|
||||
style="font-size: 3.5vh"
|
||||
class="text-text inline-block bg-bg-primary p-5 rounded-xl opacity-90"
|
||||
style="font-size: 2.5vh"
|
||||
>
|
||||
遊戲般的學習體驗
|
||||
程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。
|
||||
程式教育卻往往忽略背後「開發環境」的重要性，
|
||||
使得許多學生在過程中充滿挫折。
|
||||
「開發環境」是寫程式、執行程式過程所需要的一切工具。
|
||||
而這些工具需要在終端機輸入指令來使用。
|
||||
大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux
|
||||
作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。
|
||||
</h1>
|
||||
<img src="../img/icon_sword.svg" class="h-[18vh] row-span-2" />
|
||||
<h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
|
||||
Linux Odyssey 融合了遊戲的樂趣與學習的實用性。
|
||||
透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，
|
||||
一邊掌握 Linux 指令的運用。
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
|
||||
</section>
|
||||
<section
|
||||
id="feature"
|
||||
class="text-text p-15 grid grid-rows-3 gap-10 items-center pt-10"
|
||||
>
|
||||
<img src="../img/icon_settings.svg" class="h-[18vh] row-span-2" />
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-2 pt-8"
|
||||
style="font-size: 3.5vh"
|
||||
<div
|
||||
class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
|
||||
>
|
||||
真實的 Linux 操作之旅
|
||||
</h1>
|
||||
<h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
|
||||
Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
|
||||
每一個指令都是在真實的 Linux 環境中執行，
|
||||
讓學習者能夠真正深入軟體開發的世界。
|
||||
</h1>
|
||||
</div>
|
||||
</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-10 mb-3"
|
||||
></iframe>
|
||||
<RouterLink
|
||||
title="StartGame"
|
||||
id="StartGame"
|
||||
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 text-center"
|
||||
style="font-size: 2.5vh"
|
||||
<img src="../img/icon_shuttle.svg" class="h-[18vh] row-span-2" />
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-2"
|
||||
style="font-size: 3.5vh"
|
||||
>
|
||||
準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
|
||||
初學者也能立即上手
|
||||
</h1>
|
||||
<h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
|
||||
我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。
|
||||
學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux
|
||||
環境。
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
|
||||
>
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-2"
|
||||
style="font-size: 3.5vh"
|
||||
>
|
||||
遊戲般的學習體驗
|
||||
</h1>
|
||||
<img src="../img/icon_sword.svg" class="h-[18vh] row-span-2" />
|
||||
<h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
|
||||
Linux Odyssey 融合了遊戲的樂趣與學習的實用性。
|
||||
透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，
|
||||
一邊掌握 Linux 指令的運用。
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
|
||||
>
|
||||
<img src="../img/icon_settings.svg" class="h-[18vh] row-span-2" />
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-2 pt-8"
|
||||
style="font-size: 3.5vh"
|
||||
>
|
||||
真實的 Linux 操作之旅
|
||||
</h1>
|
||||
<h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
|
||||
Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。
|
||||
每一個指令都是在真實的 Linux 環境中執行，
|
||||
讓學習者能夠真正深入軟體開發的世界。
|
||||
</h1>
|
||||
</div>
|
||||
</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-10 mb-3"
|
||||
></iframe>
|
||||
<RouterLink
|
||||
title="StartGame"
|
||||
id="StartGame"
|
||||
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 text-center"
|
||||
style="font-size: 2.5vh"
|
||||
>
|
||||
準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</section>
|
||||
<section
|
||||
id="info"
|
||||
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: 3.5vh"
|
||||
>
|
||||
團隊介紹
|
||||
</h1>
|
||||
<h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
|
||||
國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
|
||||
互動式終端機教學網站
|
||||
</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>
|
||||
</RouterLink>
|
||||
</section>
|
||||
<section
|
||||
id="info"
|
||||
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: 3.5vh"
|
||||
>
|
||||
團隊介紹
|
||||
</h1>
|
||||
<h1 class="text-text p-3 col-span-3" style="font-size: 2.5vh">
|
||||
國立臺北科技大學 智慧自動化工程科 第二屆 Linux Odyssey
|
||||
互動式終端機教學網站
|
||||
</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: 3.5vh"
|
||||
>
|
||||
得獎肯定
|
||||
</h1>
|
||||
<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: 3.5vh"
|
||||
>
|
||||
得獎肯定
|
||||
</h1>
|
||||
<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 gap-3"
|
||||
style="font-size: 3.5vh"
|
||||
<h1
|
||||
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-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-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-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>
|
||||
</section>
|
||||
<section
|
||||
id="contact"
|
||||
class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"
|
||||
>
|
||||
玩家感想
|
||||
</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-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-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-3" style="font-size: 2.5vh">
|
||||
"以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
|
||||
</h1>
|
||||
</section>
|
||||
<section
|
||||
id="contact"
|
||||
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: 3.5vh"
|
||||
>
|
||||
聯絡我們
|
||||
</h1>
|
||||
<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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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" 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>
|
||||
<h1
|
||||
class="text-text-primary p-5 font-extrabold font-mono col-span-3"
|
||||
style="font-size: 3.5vh"
|
||||
>
|
||||
聯絡我們
|
||||
</h1>
|
||||
<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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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" 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>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in new issue
Block a user