fist commit

2024-01-12 08:05:35 +08:00
commit 24c7ae981f
72 changed files with 10270 additions and 0 deletions
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -0,0 +1 @@
+{}
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,46 @@
+# frontend
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
--- a/frontend/env.d.ts
+++ b/frontend/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gtools</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "gtools",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "pinia": "^2.0.21",
+    "vue": "^3.2.38",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^16.11.56",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.17",
+    "prettier": "^2.7.1",
+    "sass": "^1.55.0",
+    "tailwindcss": "^3.1.8",
+    "typescript": "~4.7.4",
+    "vite": "^3.0.9",
+    "vue-tsc": "^0.40.7"
+  }
+}
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -0,0 +1 @@
+abe7279dcbd2ea2c217468c0a6580042
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t, availableLocales: languages, locale } = useI18n();
+
+const onclickLanguageHandle = (item: string) => {
+  item !== locale.value ? (locale.value = item) : false;
+};
+
+const onclickMinimise = () => {};
+
+const onclickQuit = () => {};
+
+document.body.addEventListener("click", function (event) {
+  event.preventDefault();
+});
+</script>
+
+<template>
+  <!-- Header -->
+  <div class="header">
+    <!-- navigation -->
+    <div class="nav">
+      <router-link to="/">{{ t("nav.home") }}</router-link>
+      <router-link to="/about">{{ t("nav.about") }}</router-link>
+    </div>
+    <!-- Menu -->
+    <div class="menu">
+      <div class="language">
+        <div
+          v-for="item in languages"
+          :key="item"
+          :class="{ active: item === locale }"
+          @click="onclickLanguageHandle(item)"
+          class="lang-item"
+        >
+          {{ t("languages." + item) }}
+        </div>
+      </div>
+      <div class="bar">
+        <div class="bar-btn" @click="onclickMinimise">
+          {{ t("topbar.minimise") }}
+        </div>
+        <div class="bar-btn" @click="onclickQuit">{{ t("topbar.quit") }}</div>
+      </div>
+    </div>
+  </div>
+  <!-- Page -->
+  <div class="view">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+@import url("./assets/css/reset.css");
+@import url("./assets/css/font.css");
+
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: "JetBrainsMono";
+  background-color: transparent;
+}
+
+#app {
+  position: relative;
+  // width: 900px;
+  // height: 520px;
+  height: 100%;
+  background-color: rgba(219, 188, 239, 0.9);
+  overflow: hidden;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  padding: 0 10px;
+  background-color: rgba(171, 126, 220, 0.9);
+  .nav {
+    a {
+      display: inline-block;
+      min-width: 50px;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 5px;
+      margin-right: 8px;
+      background-color: #ab7edc;
+      border-radius: 2px;
+      text-align: center;
+      text-decoration: none;
+      color: #000000;
+      font-size: 14px;
+      white-space: nowrap;
+      &:hover,
+      &.router-link-exact-active {
+        background-color: #d7a8d8;
+        color: #ffffff;
+      }
+    }
+  }
+  .menu {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+    .language {
+      margin-right: 20px;
+      border-radius: 2px;
+      background-color: #c3c3c3;
+      overflow: hidden;
+      .lang-item {
+        display: inline-block;
+        min-width: 50px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px;
+        background-color: transparent;
+        text-align: center;
+        text-decoration: none;
+        color: #000000;
+        font-size: 14px;
+        &:hover {
+          background-color: #ff050542;
+          cursor: pointer;
+        }
+        &.active {
+          background-color: #ff050542;
+          color: #ffffff;
+          cursor: not-allowed;
+        }
+      }
+    }
+    .bar {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      min-width: 150px;
+      .bar-btn {
+        display: inline-block;
+        min-width: 80px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px;
+        margin-left: 8px;
+        background-color: #ab7edc;
+        border-radius: 2px;
+        text-align: center;
+        text-decoration: none;
+        color: #000000;
+        font-size: 14px;
+        &:hover {
+          background-color: #d7a8d8;
+          color: #ffffff;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
+.view {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+</style>
--- a/frontend/src/assets/css/font.css
+++ b/frontend/src/assets/css/font.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("../fonts/JetBrainsMono-Medium.woff2");
+}
--- a/frontend/src/assets/css/reset.css
+++ b/frontend/src/assets/css/reset.css
@@ -0,0 +1,124 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
--- a/frontend/src/assets/fonts/JetBrainsMono-Bold.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-Bold.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-BoldItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-BoldItalic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-ExtraBold.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-ExtraBold.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-ExtraBoldItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-ExtraBoldItalic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-ExtraLight.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-ExtraLight.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-ExtraLightItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-ExtraLightItalic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-Italic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-Italic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-Light.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-Light.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-LightItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-LightItalic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-Medium.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-Medium.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-MediumItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-MediumItalic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-Regular.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-Regular.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-SemiBold.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-SemiBold.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-SemiBoldItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-SemiBoldItalic.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-Thin.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-Thin.woff2
--- a/frontend/src/assets/fonts/JetBrainsMono-ThinItalic.woff2
+++ b/frontend/src/assets/fonts/JetBrainsMono-ThinItalic.woff2
--- a/frontend/src/assets/images/comeon.gif
+++ b/frontend/src/assets/images/comeon.gif
--- a/frontend/src/assets/logo.png
+++ b/frontend/src/assets/logo.png
--- a/frontend/src/components/HelloWorld.vue
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string;
+}>();
+</script>
+
+<template>
+  <div class="hello-world" v-text="msg"></div>
+</template>
+
+<style scoped>
+.hello-world {
+  height: 76px;
+  line-height: 38px;
+  margin: 16px 150px;
+  text-align: center;
+  font-size: 26px;
+}
+</style>
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -0,0 +1,16 @@
+import { createI18n } from "vue-i18n";
+
+import zhHans from "./locales/zh-Hans.json";
+import en from "./locales/en.json";
+
+const i18n = createI18n({
+  locale: "en",
+  fallbackLocale: "en",
+  legacy: false,
+  messages: {
+    "zh-Hans": zhHans,
+    en: en,
+  },
+});
+
+export default i18n;
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -0,0 +1,32 @@
+{
+  "nav": {
+    "home": "Home",
+    "about": "About"
+  },
+  "languages": {
+    "en": "English",
+    "zh-Hans": "简体中文",
+    "fr": "Français"
+  },
+  "topbar": {
+    "minimise": "Minimise",
+    "quit": "Quit"
+  },
+  "homepage": {
+    "welcome": "Welcome to use Wails program developed based on Vue",
+    "getting-started": "Getting Started",
+    "star-me": "Github"
+  },
+  "aboutpage": {
+    "title": "Wails Template Vue",
+    "project-repository": "Project Repository",
+    "author": "Author",
+    "misitebao": "Misitebao",
+    "wails-repository": "Wails Repository",
+    "thanks": "Thank you all for your support🙏!"
+  },
+  "global": {
+    "not-supported": "Because it is a beta version, it can't be done for the time being, it will be completed later.",
+    "click-link": "The currently clicked link is: "
+  }
+}
--- a/frontend/src/i18n/locales/zh-Hans.json
+++ b/frontend/src/i18n/locales/zh-Hans.json
@@ -0,0 +1,32 @@
+{
+  "nav": {
+    "home": "主页",
+    "about": "关于"
+  },
+  "languages": {
+    "en": "English",
+    "zh-Hans": "简体中文",
+    "fr": "Français"
+  },
+  "topbar": {
+    "minimise": "最小化",
+    "quit": "退出"
+  },
+  "homepage": {
+    "welcome": "欢迎使用基于Vue开发的Wails程序",
+    "getting-started": "快速入门",
+    "star-me": "Github"
+  },
+  "aboutpage": {
+    "title": "Wails Template Vue",
+    "project-repository": "项目仓库",
+    "author": "作者",
+    "misitebao": "米司特包",
+    "wails-repository": "Wails 仓库",
+    "thanks": "感谢各位大佬的支持🙏！"
+  },
+  "global": {
+    "not-supported": "由于是测试版，所以暂时做不了，后续会完成它。",
+    "click-link": "当前点击的链接是: "
+  }
+}
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -0,0 +1,18 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+
+import App from "./App.vue";
+import router from "./router";
+import i18n from "./i18n";
+
+import "./style.scss";
+
+// import "./assets/main.css";
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(i18n);
+
+app.mount("#app");
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,23 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: HomeView,
+    },
+    {
+      path: "/about",
+      name: "about",
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import("../views/AboutView.vue"),
+    },
+  ],
+});
+
+export default router;
--- a/frontend/src/stores/counter.ts
+++ b/frontend/src/stores/counter.ts
@@ -0,0 +1,12 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useCounterStore = defineStore("counter", () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return { count, doubleCount, increment };
+});
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import comeonGif from "@/assets/images/comeon.gif";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="about">
+    <!-- Title -->
+    <div class="title">{{ t("aboutpage.title") }}</div>
+    <!-- Information -->
+    <div class="content">
+      <div class="comeon">
+        <img :src="comeonGif" alt="Gif" />
+      </div>
+      <ul class="info">
+        <li class="info-item">
+          <div class="name">{{ t("aboutpage.project-repository") }}</div>
+          <a class="link" href="https://github.com/misitebao/wails-template-vue"
+            >https://github.com/misitebao/wails-template-vue</a
+          >
+        </li>
+        <li class="info-item">
+          <div class="name">{{ t("aboutpage.wails-repository") }}</div>
+          <a class="link" href="https://github.com/wailsapp/wails"
+            >https://github.com/wailsapp/wails</a
+          >
+        </li>
+        <li class="info-item">
+          <div class="name">{{ t("aboutpage.author") }}</div>
+          <a class="link" href="https://github.com/misitebao">{{
+            t("aboutpage.misitebao")
+          }}</a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Thanks -->
+    <div class="thank">{{ t("aboutpage.thanks") }}</div>
+  </div>
+</template>
+
+<style lang="scss">
+.about {
+  .title {
+    margin: 30px auto 10px;
+    font-size: 38px;
+    color: #a150b5;
+    text-align: center;
+  }
+  .content {
+    position: relative;
+    margin: 36px 20px;
+    .comeon {
+      position: absolute;
+      left: 26px;
+      top: 38px;
+      max-width: 66%;
+      img {
+        width: 220px;
+        height: 180px;
+      }
+    }
+    .info {
+      margin: 0 0 0 33%;
+      font-size: 24px;
+      text-align: left;
+      .info-item {
+        margin-bottom: 10px;
+        .name {
+          line-height: 40px;
+          font-size: 28px;
+          color: #6d6363;
+        }
+        .link {
+          line-height: 30px;
+          font-size: 20px;
+          color: #5f6c86;
+        }
+      }
+    }
+  }
+
+  .thank {
+    height: 68px;
+    line-height: 68px;
+    margin: 36px auto;
+    text-align: center;
+    font-size: 40px;
+  }
+}
+</style>
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+import HelloWorld from "@/components/HelloWorld.vue";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="home">
+    <!-- Logo -->
+    <img class="logo" alt="Vue logo" src="../assets/logo.png" />
+    <HelloWorld :msg="t('homepage.welcome')" />
+    <!-- Bottom button -->
+    <div class="link">
+      <a
+        href="https://wails.io/docs/gettingstarted/installation"
+        class="btn start"
+        >{{ t("homepage.getting-started") }}</a
+      >
+      <a
+        href="https://github.com/misitebao/wails-template-vue"
+        class="btn star"
+        >{{ t("homepage.star-me") }}</a
+      >
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.home {
+  .logo {
+    display: block;
+    width: 620px;
+    height: 280px;
+    margin: 10px auto 10px;
+  }
+  .link {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    margin: 18px auto;
+    .btn {
+      display: block;
+      width: 150px;
+      height: 50px;
+      line-height: 50px;
+      padding: 0 5px;
+      margin: 0 30px;
+      border-radius: 8px;
+      text-align: center;
+      font-weight: 700;
+      font-size: 16px;
+      white-space: nowrap;
+      text-decoration: none;
+      cursor: pointer;
+      &.start {
+        background-color: #fd0404;
+        color: #ffffff;
+        &:hover {
+          background-color: #ec2e2e;
+        }
+      }
+      &.star {
+        background-color: #ffffff;
+        color: #fd0404;
+        &:hover {
+          background-color: #f3f3f3;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: ["class", '[data-theme="dark"]'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/frontend/tsconfig.config.json
+++ b/frontend/tsconfig.config.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,24 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`,
+      },
+    },
+  },
+});
--- a/frontend/wailsjs/runtime/package.json
+++ b/frontend/wailsjs/runtime/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@wailsapp/runtime",
+  "version": "2.0.0",
+  "description": "Wails Javascript runtime library",
+  "main": "runtime.js",
+  "types": "runtime.d.ts",
+  "scripts": {
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wailsapp/wails.git"
+  },
+  "keywords": [
+    "Wails",
+    "Javascript",
+    "Go"
+  ],
+  "author": "Lea Anthony <lea.anthony@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wailsapp/wails/issues"
+  },
+  "homepage": "https://github.com/wailsapp/wails#readme"
+}
--- a/frontend/wailsjs/runtime/runtime.d.ts
+++ b/frontend/wailsjs/runtime/runtime.d.ts
@@ -0,0 +1,235 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export interface Position {
+    x: number;
+    y: number;
+}
+
+export interface Size {
+    w: number;
+    h: number;
+}
+
+export interface Screen {
+    isCurrent: boolean;
+    isPrimary: boolean;
+    width : number
+    height : number
+}
+
+// Environment information such as platform, buildtype, ...
+export interface EnvironmentInfo {
+    buildType: string;
+    platform: string;
+    arch: string;
+}
+
+// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
+// emits the given event. Optional data may be passed with the event.
+// This will trigger any event listeners.
+export function EventsEmit(eventName: string, ...data: any): void;
+
+// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
+export function EventsOn(eventName: string, callback: (...data: any) => void): () => void;
+
+// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
+// sets up a listener for the given event name, but will only trigger a given number times.
+export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): () => void;
+
+// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
+// sets up a listener for the given event name, but will only trigger once.
+export function EventsOnce(eventName: string, callback: (...data: any) => void): () => void;
+
+// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsoff)
+// unregisters the listener for the given event name.
+export function EventsOff(eventName: string, ...additionalEventNames: string[]): void;
+
+// [EventsOffAll](https://wails.io/docs/reference/runtime/events#eventsoffall)
+// unregisters all listeners.
+export function EventsOffAll(): void;
+
+// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
+// logs the given message as a raw message
+export function LogPrint(message: string): void;
+
+// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
+// logs the given message at the `trace` log level.
+export function LogTrace(message: string): void;
+
+// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
+// logs the given message at the `debug` log level.
+export function LogDebug(message: string): void;
+
+// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
+// logs the given message at the `error` log level.
+export function LogError(message: string): void;
+
+// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
+// logs the given message at the `fatal` log level.
+// The application will quit after calling this method.
+export function LogFatal(message: string): void;
+
+// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
+// logs the given message at the `info` log level.
+export function LogInfo(message: string): void;
+
+// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
+// logs the given message at the `warning` log level.
+export function LogWarning(message: string): void;
+
+// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
+// Forces a reload by the main application as well as connected browsers.
+export function WindowReload(): void;
+
+// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
+// Reloads the application frontend.
+export function WindowReloadApp(): void;
+
+// [WindowSetAlwaysOnTop](https://wails.io/docs/reference/runtime/window#windowsetalwaysontop)
+// Sets the window AlwaysOnTop or not on top.
+export function WindowSetAlwaysOnTop(b: boolean): void;
+
+// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
+// *Windows only*
+// Sets window theme to system default (dark/light).
+export function WindowSetSystemDefaultTheme(): void;
+
+// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
+// *Windows only*
+// Sets window to light theme.
+export function WindowSetLightTheme(): void;
+
+// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
+// *Windows only*
+// Sets window to dark theme.
+export function WindowSetDarkTheme(): void;
+
+// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
+// Centers the window on the monitor the window is currently on.
+export function WindowCenter(): void;
+
+// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
+// Sets the text in the window title bar.
+export function WindowSetTitle(title: string): void;
+
+// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
+// Makes the window full screen.
+export function WindowFullscreen(): void;
+
+// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
+// Restores the previous window dimensions and position prior to full screen.
+export function WindowUnfullscreen(): void;
+
+// [WindowIsFullscreen](https://wails.io/docs/reference/runtime/window#windowisfullscreen)
+// Returns the state of the window, i.e. whether the window is in full screen mode or not.
+export function WindowIsFullscreen(): Promise<boolean>;
+
+// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
+// Sets the width and height of the window.
+export function WindowSetSize(width: number, height: number): Promise<Size>;
+
+// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
+// Gets the width and height of the window.
+export function WindowGetSize(): Promise<Size>;
+
+// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
+// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMaxSize(width: number, height: number): void;
+
+// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
+// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
+// Setting a size of 0,0 will disable this constraint.
+export function WindowSetMinSize(width: number, height: number): void;
+
+// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
+// Sets the window position relative to the monitor the window is currently on.
+export function WindowSetPosition(x: number, y: number): void;
+
+// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
+// Gets the window position relative to the monitor the window is currently on.
+export function WindowGetPosition(): Promise<Position>;
+
+// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
+// Hides the window.
+export function WindowHide(): void;
+
+// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
+// Shows the window, if it is currently hidden.
+export function WindowShow(): void;
+
+// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
+// Maximises the window to fill the screen.
+export function WindowMaximise(): void;
+
+// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
+// Toggles between Maximised and UnMaximised.
+export function WindowToggleMaximise(): void;
+
+// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
+// Restores the window to the dimensions and position prior to maximising.
+export function WindowUnmaximise(): void;
+
+// [WindowIsMaximised](https://wails.io/docs/reference/runtime/window#windowismaximised)
+// Returns the state of the window, i.e. whether the window is maximised or not.
+export function WindowIsMaximised(): Promise<boolean>;
+
+// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
+// Minimises the window.
+export function WindowMinimise(): void;
+
+// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
+// Restores the window to the dimensions and position prior to minimising.
+export function WindowUnminimise(): void;
+
+// [WindowIsMinimised](https://wails.io/docs/reference/runtime/window#windowisminimised)
+// Returns the state of the window, i.e. whether the window is minimised or not.
+export function WindowIsMinimised(): Promise<boolean>;
+
+// [WindowIsNormal](https://wails.io/docs/reference/runtime/window#windowisnormal)
+// Returns the state of the window, i.e. whether the window is normal or not.
+export function WindowIsNormal(): Promise<boolean>;
+
+// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
+// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
+export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
+
+// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
+// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
+export function ScreenGetAll(): Promise<Screen[]>;
+
+// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
+// Opens the given URL in the system browser.
+export function BrowserOpenURL(url: string): void;
+
+// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
+// Returns information about the environment
+export function Environment(): Promise<EnvironmentInfo>;
+
+// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
+// Quits the application.
+export function Quit(): void;
+
+// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
+// Hides the application.
+export function Hide(): void;
+
+// [Show](https://wails.io/docs/reference/runtime/intro#show)
+// Shows the application.
+export function Show(): void;
+
+// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
+// Returns the current text stored on clipboard
+export function ClipboardGetText(): Promise<string>;
+
+// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
+// Sets a text on the clipboard
+export function ClipboardSetText(text: string): Promise<boolean>;
--- a/frontend/wailsjs/runtime/runtime.js
+++ b/frontend/wailsjs/runtime/runtime.js
@@ -0,0 +1,202 @@
+/*
+ _       __      _ __
+| |     / /___ _(_) /____
+| | /| / / __ `/ / / ___/
+| |/ |/ / /_/ / / (__  )
+|__/|__/\__,_/_/_/____/
+The electron alternative for Go
+(c) Lea Anthony 2019-present
+*/
+
+export function LogPrint(message) {
+    window.runtime.LogPrint(message);
+}
+
+export function LogTrace(message) {
+    window.runtime.LogTrace(message);
+}
+
+export function LogDebug(message) {
+    window.runtime.LogDebug(message);
+}
+
+export function LogInfo(message) {
+    window.runtime.LogInfo(message);
+}
+
+export function LogWarning(message) {
+    window.runtime.LogWarning(message);
+}
+
+export function LogError(message) {
+    window.runtime.LogError(message);
+}
+
+export function LogFatal(message) {
+    window.runtime.LogFatal(message);
+}
+
+export function EventsOnMultiple(eventName, callback, maxCallbacks) {
+    return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
+}
+
+export function EventsOn(eventName, callback) {
+    return EventsOnMultiple(eventName, callback, -1);
+}
+
+export function EventsOff(eventName, ...additionalEventNames) {
+    return window.runtime.EventsOff(eventName, ...additionalEventNames);
+}
+
+export function EventsOnce(eventName, callback) {
+    return EventsOnMultiple(eventName, callback, 1);
+}
+
+export function EventsEmit(eventName) {
+    let args = [eventName].slice.call(arguments);
+    return window.runtime.EventsEmit.apply(null, args);
+}
+
+export function WindowReload() {
+    window.runtime.WindowReload();
+}
+
+export function WindowReloadApp() {
+    window.runtime.WindowReloadApp();
+}
+
+export function WindowSetAlwaysOnTop(b) {
+    window.runtime.WindowSetAlwaysOnTop(b);
+}
+
+export function WindowSetSystemDefaultTheme() {
+    window.runtime.WindowSetSystemDefaultTheme();
+}
+
+export function WindowSetLightTheme() {
+    window.runtime.WindowSetLightTheme();
+}
+
+export function WindowSetDarkTheme() {
+    window.runtime.WindowSetDarkTheme();
+}
+
+export function WindowCenter() {
+    window.runtime.WindowCenter();
+}
+
+export function WindowSetTitle(title) {
+    window.runtime.WindowSetTitle(title);
+}
+
+export function WindowFullscreen() {
+    window.runtime.WindowFullscreen();
+}
+
+export function WindowUnfullscreen() {
+    window.runtime.WindowUnfullscreen();
+}
+
+export function WindowIsFullscreen() {
+    return window.runtime.WindowIsFullscreen();
+}
+
+export function WindowGetSize() {
+    return window.runtime.WindowGetSize();
+}
+
+export function WindowSetSize(width, height) {
+    window.runtime.WindowSetSize(width, height);
+}
+
+export function WindowSetMaxSize(width, height) {
+    window.runtime.WindowSetMaxSize(width, height);
+}
+
+export function WindowSetMinSize(width, height) {
+    window.runtime.WindowSetMinSize(width, height);
+}
+
+export function WindowSetPosition(x, y) {
+    window.runtime.WindowSetPosition(x, y);
+}
+
+export function WindowGetPosition() {
+    return window.runtime.WindowGetPosition();
+}
+
+export function WindowHide() {
+    window.runtime.WindowHide();
+}
+
+export function WindowShow() {
+    window.runtime.WindowShow();
+}
+
+export function WindowMaximise() {
+    window.runtime.WindowMaximise();
+}
+
+export function WindowToggleMaximise() {
+    window.runtime.WindowToggleMaximise();
+}
+
+export function WindowUnmaximise() {
+    window.runtime.WindowUnmaximise();
+}
+
+export function WindowIsMaximised() {
+    return window.runtime.WindowIsMaximised();
+}
+
+export function WindowMinimise() {
+    window.runtime.WindowMinimise();
+}
+
+export function WindowUnminimise() {
+    window.runtime.WindowUnminimise();
+}
+
+export function WindowSetBackgroundColour(R, G, B, A) {
+    window.runtime.WindowSetBackgroundColour(R, G, B, A);
+}
+
+export function ScreenGetAll() {
+    return window.runtime.ScreenGetAll();
+}
+
+export function WindowIsMinimised() {
+    return window.runtime.WindowIsMinimised();
+}
+
+export function WindowIsNormal() {
+    return window.runtime.WindowIsNormal();
+}
+
+export function BrowserOpenURL(url) {
+    window.runtime.BrowserOpenURL(url);
+}
+
+export function Environment() {
+    return window.runtime.Environment();
+}
+
+export function Quit() {
+    window.runtime.Quit();
+}
+
+export function Hide() {
+    window.runtime.Hide();
+}
+
+export function Show() {
+    window.runtime.Show();
+}
+
+export function ClipboardGetText() {
+    return window.runtime.ClipboardGetText();
+}
+
+export function ClipboardSetText(text) {
+    return window.runtime.ClipboardSetText(text);
+}