mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-05 19:20:12 +08:00
- add contacts
- change contents - fix broken page
This commit is contained in:
Annie Huang committed
1 parent
9146c433b3
commit
46e27c7456
3 files changed
+137
-89
No files matched your search
@@ -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,
|
||||
}
|
||||
+9
-2
@@ -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
|
||||
)
|
||||
+124
-87
@@ -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">
|
||||
<h1
|
||||
class="text-text-primary mb-5 font-extrabold font-mono"
|
||||
style="font-size: 16vh"
|
||||
>
|
||||
Linux Odyssey
|
||||
</h1>
|
||||
<div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-auto">
|
||||
<div class="w-full">
|
||||
<h1
|
||||
class="text-text-primary mb-2 font-extrabold font-mono w-fit"
|
||||
style="font-size: 16vh"
|
||||
>
|
||||
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">
|
||||
Contrary to popular belief, Lorem Ipsum is not simply random text.
|
||||
It has roots in a piece of classical Latin literature from 45 BC,
|
||||
making it over 2000 years old. Richard McClintock, a Latin professor
|
||||
at Hampden-Sydney College in Virginia, looked up one of the more
|
||||
obscure Latin words, consectetur, from a Lorem Ipsum passage, and
|
||||
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
|
||||
of Good and Evil) by Cicero, written in 45 BC. This book is a
|
||||
treatise on the theory of ethics, very popular during the
|
||||
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
|
||||
piece of classical Latin literature from 45 BC, making it over 2000
|
||||
years old. Richard McClintock, a Latin professor at Hampden-Sydney
|
||||
College in Virginia, looked up one of the more obscure Latin words,
|
||||
consectetur, from a Lorem Ipsum passage, and 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 of Good and Evil) by
|
||||
Cicero, written in 45 BC. This book is a treatise on the theory of
|
||||
ethics, very popular during the Renaissance. The first line of Lorem
|
||||
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
|
||||
1.10.32.
|
||||
<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 mb-5">
|
||||
There are many variations of passages of Lorem Ipsum available, but
|
||||
the majority have suffered alteration in some form, by injected
|
||||
humour, or randomised words which don't look even slightly
|
||||
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
|
||||
to repeat predefined chunks as necessary, making this the first true
|
||||
generator on the Internet. It uses a dictionary of over 200 Latin
|
||||
words, combined with a handful of model sentence structures, to
|
||||
generate Lorem Ipsum which looks reasonable. The generated Lorem
|
||||
Ipsum is therefore always free from repetition, injected humour, or
|
||||
non-characteristic words etc.//There are many variations of passages
|
||||
of Lorem Ipsum available, but the majority have suffered alteration
|
||||
in some form, by injected humour, or randomised words which don't
|
||||
look even slightly 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 to repeat predefined chunks as necessary, making this
|
||||
the first true generator on the Internet. It uses a dictionary of
|
||||
over 200 Latin words, combined with a handful of model sentence
|
||||
structures, to generate Lorem Ipsum which looks reasonable. The
|
||||
generated Lorem Ipsum is therefore always free from repetition,
|
||||
injected humour, or non-characteristic words etc.
|
||||
<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">
|
||||
<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="contact" class="text-text mb-5">
|
||||
It is a long established fact that a reader will be distracted by the
|
||||
readable content of a page when looking at its layout. The point of
|
||||
using Lorem Ipsum is that it has a more-or-less normal distribution of
|
||||
letters, as opposed to using 'Content here, content here', making it
|
||||
look like readable English. Many desktop publishing packages and web
|
||||
page editors now use Lorem Ipsum as their default model text, and a
|
||||
search for 'lorem ipsum' will uncover many web sites still in their
|
||||
infancy. Various versions have evolved over the years, sometimes by
|
||||
accident, sometimes on purpose (injected humour and the like).//It is
|
||||
a long established fact that a reader will be distracted by the
|
||||
readable content of a page when looking at its layout. The point of
|
||||
using Lorem Ipsum is that it has a more-or-less normal distribution of
|
||||
letters, as opposed to using 'Content here, content here', making it
|
||||
look like readable English. Many desktop publishing packages and web
|
||||
page editors now use Lorem Ipsum as their default model text, and a
|
||||
search for 'lorem ipsum' will uncover many web sites still in their
|
||||
infancy. Various versions have evolved over the years, sometimes by
|
||||
accident, sometimes on purpose (injected humour and the like).
|
||||
<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"
|
||||
>
|
||||
<div class="bg-black">
|
||||
<div class="text-text p-2 justify-center">
|
||||
準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<section id="contact" class="text-text px-5">
|
||||
<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
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user