mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-05 19:20:12 +08:00
- edit position
- add group info - add opinions - add start button
This commit is contained in:
Annie Huang committed
1 parent
46e27c7456
commit
bef134871d
1 file changed
+186
-103
+186
-103
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user