Merge pull request #22 from Nauxscript/feature/mainpage-style

feat: adjust homepage and mainpage style

Author: Nauxscript

apps/client/components/Navbar/index.vue

@@ -9,14 +9,29 @@ const toggleDarkMode = () => {
   document.documentElement.classList.toggle('dark')
 }
 
+const setDarkMode = (state = false) => {
+  if (state) {
+    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");       
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+onMounted(() => {
+  const state = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  setDarkMode(state)
+})
+
 </script>
 
 <template>
   <nav class="h-20 flex items-center justify-between">
     <NuxtLink to="/">
-      <div class="logo flex">
-        <img width="48" height="48" class="rounded-md overflow-hidden mr-2" src="/logo.png" alt="earth-worm-logo">
-        <h1 class="w-14 text-md font-black leading-normal text-wrap text-fuchsia-400">Earth Worm</h1>
+      <div class="logo flex items-center">
+        <img width="48" height="48" class="rounded-md overflow-hidden mr-6" src="/logo.png" alt="earth-worm-logo">
+        <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
       </div>
     </NuxtLink>
     <div>

apps/client/components/main/CourseProgress.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>进度：{{ currentSchedule }}/{{ max }}</div>
+  <progress class="progress w-56 m-2" value="8" max="100"></progress>
 </template>
 
 <script setup lang="ts">
@@ -8,7 +8,7 @@ import { useCoursesStore } from "~/store/courses";
 const coursesStore = useCoursesStore();
 
 const currentSchedule = computed(() => {
-  return coursesStore.statementIndex + 1;
+  return coursesStore.statementIndex.value + 1;
 });
 
 const max = computed(() => {

apps/client/components/main/Game.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="h-full flex justify-center items-center relative">
-    <div>
+  <div class="h-full w-full flex flex-col justify-center items-center">
+    <div class="flex-1 mb-8">
       <template v-if="mode === 'question'">
         <Question @bingo="handleBingo"></Question>
       </template>
       <template v-else-if="mode === 'answer'">
         <Answer @next-question="handleNextQuestion"></Answer>
       </template>
     </div>
-    <div class="absolute bottom-10 mb-10 w-full flex flex-col items-center">
+    <div class="">
       <CourseProgress></CourseProgress>
       <Tips onShowAnswer="{handleShowAnswer}"></Tips>
     </div>

apps/client/components/main/Question.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-5xl text-center mb-20 mt-10">
     <div class="text-fuchsia-500 dark:text-gray-50">
-      {{ coursesStore.currentStatement?.chinese }}
+      {{ coursesStore.currentStatement?.chinese || '生存还是毁灭，这是一个问题' }}
     </div>
     <div class="code-box">
       <template v-for="i in lineNum" :key="i">

apps/client/components/main/TipItem.vue

@@ -1,22 +1,15 @@
 <template>
-  <div>
-    <TipItem
-      text="tab"
-      description="show answer"
-      keyboardKey="Tab"
-      handler="{handleToAnswer}"
-    ></TipItem>
-    <TipItem
-      text="control"
-      description="play soundmark"
-      keyboardKey="Control"
-      handler="{playSound}"
-    ></TipItem>
+  <div class="flex flex-col">
+    <div class="flex mb-2">
+      <button className="btn btn-xs">⇥ Tab</button>
+      <p class="ml-2">show answer</p>
+    </div>
+    <div class="flex">
+      <button className="btn btn-xs">⌃ Control</button>
+      <p class="ml-2">play soundmark</p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import TipItem from "./TipItem.vue";
 </script>
-
-<style scoped></style>

apps/client/components/main/Tips.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="flex flex-col h-full">
-    <!-- <Header></Header> -->
-    <main>
-      <Game></Game>
-    </main>
-  </div>
+  <Game></Game>
 </template>
 
 <script setup lang="ts">

apps/client/pages/Main/[id].vue

@@ -6,13 +6,9 @@
   <div class="container w-full">
     <section class="flex md:flex-row md:justify-between justify-center flex-col py-8">
       <div class="w-1/2">
-        <div class="flex mb-12">
-          <img width="160" height="160" class="rounded-xl overflow-hidden mr-2" src="/logo.png" alt="earth-worm-logo">
-          <h1 class="w-48 text-6xl font-black leading-snug text-wrap text-fuchsia-400">Earth Worm</h1>
-        </div>
         <div class="mb-12 leading-loose text-3xl opacity-80 items-center">
           <div class="">Why aren’t you good at English?</div>
-          <div class="align-middle">It’s because you haven’t used Earthworm yet! 🤪 <i class="animate-wink inline w-1 h-8 dark:bg-white bg-slate-900 mx-2 text-2xl p-[2px]"></i></div>
+          <div class="align-middle">It’s because you haven’t used <span class="text-fuchsia-400 font-bold">Earthworm</span> yet! 🤪 <i class="animate-wink inline w-1 h-8 dark:bg-white bg-slate-900 mx-2 text-2xl p-[2px]"></i></div>
         </div>
         <a target="_blank" href="https://github.com/cuixueshe/earthworm">
           <button class="indicator btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300 mr-4">
@@ -51,6 +47,8 @@
 </template>
 
 <style>
+
+
 .bg-dot {
   aspect-ratio: 1;
   position: relative;
@@ -62,6 +60,10 @@
   overflow: hidden;
 }
 
+.dark .bg-dot {
+  opacity: 1;
+}
+
 .bg-dot::after {
   content: '';
   position: absolute;