aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/App.vue85
-rw-r--r--frontend/src/assets/base.css74
-rw-r--r--frontend/src/assets/logo.svg1
-rw-r--r--frontend/src/assets/main.css35
-rw-r--r--frontend/src/components/HelloWorld.vue40
-rw-r--r--frontend/src/components/TheWelcome.vue86
-rw-r--r--frontend/src/components/WelcomeItem.vue86
-rw-r--r--frontend/src/components/icons/IconCommunity.vue7
-rw-r--r--frontend/src/components/icons/IconDocumentation.vue7
-rw-r--r--frontend/src/components/icons/IconEcosystem.vue7
-rw-r--r--frontend/src/components/icons/IconSupport.vue7
-rw-r--r--frontend/src/components/icons/IconTooling.vue19
-rw-r--r--frontend/src/main.ts14
-rw-r--r--frontend/src/router/index.ts23
-rw-r--r--frontend/src/stores/counter.ts12
-rw-r--r--frontend/src/views/AboutView.vue15
-rw-r--r--frontend/src/views/HomeView.vue9
17 files changed, 527 insertions, 0 deletions
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 0000000..7905b05
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,85 @@
1<script setup lang="ts">
2import { RouterLink, RouterView } from 'vue-router'
3import HelloWorld from './components/HelloWorld.vue'
4</script>
5
6<template>
7 <header>
8 <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
9
10 <div class="wrapper">
11 <HelloWorld msg="You did it!" />
12
13 <nav>
14 <RouterLink to="/">Home</RouterLink>
15 <RouterLink to="/about">About</RouterLink>
16 </nav>
17 </div>
18 </header>
19
20 <RouterView />
21</template>
22
23<style scoped>
24header {
25 line-height: 1.5;
26 max-height: 100vh;
27}
28
29.logo {
30 display: block;
31 margin: 0 auto 2rem;
32}
33
34nav {
35 width: 100%;
36 font-size: 12px;
37 text-align: center;
38 margin-top: 2rem;
39}
40
41nav a.router-link-exact-active {
42 color: var(--color-text);
43}
44
45nav a.router-link-exact-active:hover {
46 background-color: transparent;
47}
48
49nav a {
50 display: inline-block;
51 padding: 0 1rem;
52 border-left: 1px solid var(--color-border);
53}
54
55nav a:first-of-type {
56 border: 0;
57}
58
59@media (min-width: 1024px) {
60 header {
61 display: flex;
62 place-items: center;
63 padding-right: calc(var(--section-gap) / 2);
64 }
65
66 .logo {
67 margin: 0 2rem 0 0;
68 }
69
70 header .wrapper {
71 display: flex;
72 place-items: flex-start;
73 flex-wrap: wrap;
74 }
75
76 nav {
77 text-align: left;
78 margin-left: -1rem;
79 font-size: 1rem;
80
81 padding: 1rem 0;
82 margin-top: 1rem;
83 }
84}
85</style>
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
new file mode 100644
index 0000000..71dc55a
--- /dev/null
+++ b/frontend/src/assets/base.css
@@ -0,0 +1,74 @@
1/* color palette from <https://github.com/vuejs/theme> */
2:root {
3 --vt-c-white: #ffffff;
4 --vt-c-white-soft: #f8f8f8;
5 --vt-c-white-mute: #f2f2f2;
6
7 --vt-c-black: #181818;
8 --vt-c-black-soft: #222222;
9 --vt-c-black-mute: #282828;
10
11 --vt-c-indigo: #2c3e50;
12
13 --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17
18 --vt-c-text-light-1: var(--vt-c-indigo);
19 --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 --vt-c-text-dark-1: var(--vt-c-white);
21 --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22}
23
24/* semantic color variables for this project */
25:root {
26 --color-background: var(--vt-c-white);
27 --color-background-soft: var(--vt-c-white-soft);
28 --color-background-mute: var(--vt-c-white-mute);
29
30 --color-border: var(--vt-c-divider-light-2);
31 --color-border-hover: var(--vt-c-divider-light-1);
32
33 --color-heading: var(--vt-c-text-light-1);
34 --color-text: var(--vt-c-text-light-1);
35
36 --section-gap: 160px;
37}
38
39@media (prefers-color-scheme: dark) {
40 :root {
41 --color-background: var(--vt-c-black);
42 --color-background-soft: var(--vt-c-black-soft);
43 --color-background-mute: var(--vt-c-black-mute);
44
45 --color-border: var(--vt-c-divider-dark-2);
46 --color-border-hover: var(--vt-c-divider-dark-1);
47
48 --color-heading: var(--vt-c-text-dark-1);
49 --color-text: var(--vt-c-text-dark-2);
50 }
51}
52
53*,
54*::before,
55*::after {
56 box-sizing: border-box;
57 margin: 0;
58 position: relative;
59 font-weight: normal;
60}
61
62body {
63 min-height: 100vh;
64 color: var(--color-text);
65 background: var(--color-background);
66 transition: color 0.5s, background-color 0.5s;
67 line-height: 1.6;
68 font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
69 Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
70 font-size: 15px;
71 text-rendering: optimizeLegibility;
72 -webkit-font-smoothing: antialiased;
73 -moz-osx-font-smoothing: grayscale;
74}
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
new file mode 100644
index 0000000..bc826fe
--- /dev/null
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg> \ No newline at end of file
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
new file mode 100644
index 0000000..e8667cd
--- /dev/null
+++ b/frontend/src/assets/main.css
@@ -0,0 +1,35 @@
1@import './base.css';
2
3#app {
4 max-width: 1280px;
5 margin: 0 auto;
6 padding: 2rem;
7
8 font-weight: normal;
9}
10
11a,
12.green {
13 text-decoration: none;
14 color: hsla(160, 100%, 37%, 1);
15 transition: 0.4s;
16}
17
18@media (hover: hover) {
19 a:hover {
20 background-color: hsla(160, 100%, 37%, 0.2);
21 }
22}
23
24@media (min-width: 1024px) {
25 body {
26 display: flex;
27 place-items: center;
28 }
29
30 #app {
31 display: grid;
32 grid-template-columns: 1fr 1fr;
33 padding: 0 2rem;
34 }
35}
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
new file mode 100644
index 0000000..23afedd
--- /dev/null
+++ b/frontend/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
1<script setup lang="ts">
2defineProps<{
3 msg: string
4}>()
5</script>
6
7<template>
8 <div class="greetings">
9 <h1 class="green">{{ msg }}</h1>
10 <h3>
11 You’ve successfully created a project with
12 <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
13 <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
14 </h3>
15 </div>
16</template>
17
18<style scoped>
19h1 {
20 font-weight: 500;
21 font-size: 2.6rem;
22 top: -10px;
23}
24
25h3 {
26 font-size: 1.2rem;
27}
28
29.greetings h1,
30.greetings h3 {
31 text-align: center;
32}
33
34@media (min-width: 1024px) {
35 .greetings h1,
36 .greetings h3 {
37 text-align: left;
38 }
39}
40</style>
diff --git a/frontend/src/components/TheWelcome.vue b/frontend/src/components/TheWelcome.vue
new file mode 100644
index 0000000..a70765c
--- /dev/null
+++ b/frontend/src/components/TheWelcome.vue
@@ -0,0 +1,86 @@
1<script setup lang="ts">
2import WelcomeItem from './WelcomeItem.vue'
3import DocumentationIcon from './icons/IconDocumentation.vue'
4import ToolingIcon from './icons/IconTooling.vue'
5import EcosystemIcon from './icons/IconEcosystem.vue'
6import CommunityIcon from './icons/IconCommunity.vue'
7import SupportIcon from './icons/IconSupport.vue'
8</script>
9
10<template>
11 <WelcomeItem>
12 <template #icon>
13 <DocumentationIcon />
14 </template>
15 <template #heading>Documentation</template>
16
17 Vue’s
18 <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
19 provides you with all information you need to get started.
20 </WelcomeItem>
21
22 <WelcomeItem>
23 <template #icon>
24 <ToolingIcon />
25 </template>
26 <template #heading>Tooling</template>
27
28 This project is served and bundled with
29 <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
30 recommended IDE setup is
31 <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
32 <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
33 you need to test your components and web pages, check out
34 <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
35 <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
36
37 <br />
38
39 More instructions are available in <code>README.md</code>.
40 </WelcomeItem>
41
42 <WelcomeItem>
43 <template #icon>
44 <EcosystemIcon />
45 </template>
46 <template #heading>Ecosystem</template>
47
48 Get official tools and libraries for your project:
49 <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
50 <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
51 <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
52 <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
53 you need more resources, we suggest paying
54 <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
55 a visit.
56 </WelcomeItem>
57
58 <WelcomeItem>
59 <template #icon>
60 <CommunityIcon />
61 </template>
62 <template #heading>Community</template>
63
64 Got stuck? Ask your question on
65 <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
66 Discord server, or
67 <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
68 >StackOverflow</a
69 >. You should also subscribe to
70 <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
71 the official
72 <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
73 twitter account for latest news in the Vue world.
74 </WelcomeItem>
75
76 <WelcomeItem>
77 <template #icon>
78 <SupportIcon />
79 </template>
80 <template #heading>Support Vue</template>
81
82 As an independent project, Vue relies on community backing for its sustainability. You can help
83 us by
84 <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
85 </WelcomeItem>
86</template>
diff --git a/frontend/src/components/WelcomeItem.vue b/frontend/src/components/WelcomeItem.vue
new file mode 100644
index 0000000..ba0def3
--- /dev/null
+++ b/frontend/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
1<template>
2 <div class="item">
3 <i>
4 <slot name="icon"></slot>
5 </i>
6 <div class="details">
7 <h3>
8 <slot name="heading"></slot>
9 </h3>
10 <slot></slot>
11 </div>
12 </div>
13</template>
14
15<style scoped>
16.item {
17 margin-top: 2rem;
18 display: flex;
19}
20
21.details {
22 flex: 1;
23 margin-left: 1rem;
24}
25
26i {
27 display: flex;
28 place-items: center;
29 place-content: center;
30 width: 32px;
31 height: 32px;
32
33 color: var(--color-text);
34}
35
36h3 {
37 font-size: 1.2rem;
38 font-weight: 500;
39 margin-bottom: 0.4rem;
40 color: var(--color-heading);
41}
42
43@media (min-width: 1024px) {
44 .item {
45 margin-top: 0;
46 padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
47 }
48
49 i {
50 top: calc(50% - 25px);
51 left: -26px;
52 position: absolute;
53 border: 1px solid var(--color-border);
54 background: var(--color-background);
55 border-radius: 8px;
56 width: 50px;
57 height: 50px;
58 }
59
60 .item:before {
61 content: ' ';
62 border-left: 1px solid var(--color-border);
63 position: absolute;
64 left: 0;
65 bottom: calc(50% + 25px);
66 height: calc(50% - 25px);
67 }
68
69 .item:after {
70 content: ' ';
71 border-left: 1px solid var(--color-border);
72 position: absolute;
73 left: 0;
74 top: calc(50% + 25px);
75 height: calc(50% - 25px);
76 }
77
78 .item:first-of-type:before {
79 display: none;
80 }
81
82 .item:last-of-type:after {
83 display: none;
84 }
85}
86</style>
diff --git a/frontend/src/components/icons/IconCommunity.vue b/frontend/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/frontend/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
1<template>
2 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 <path
4 d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
5 />
6 </svg>
7</template>
diff --git a/frontend/src/components/icons/IconDocumentation.vue b/frontend/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/frontend/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
1<template>
2 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
3 <path
4 d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
5 />
6 </svg>
7</template>
diff --git a/frontend/src/components/icons/IconEcosystem.vue b/frontend/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/frontend/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
1<template>
2 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
3 <path
4 d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
5 />
6 </svg>
7</template>
diff --git a/frontend/src/components/icons/IconSupport.vue b/frontend/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/frontend/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
1<template>
2 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
3 <path
4 d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
5 />
6 </svg>
7</template>
diff --git a/frontend/src/components/icons/IconTooling.vue b/frontend/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/frontend/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
1<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
2<template>
3 <svg
4 xmlns="http://www.w3.org/2000/svg"
5 xmlns:xlink="http://www.w3.org/1999/xlink"
6 aria-hidden="true"
7 role="img"
8 class="iconify iconify--mdi"
9 width="24"
10 height="24"
11 preserveAspectRatio="xMidYMid meet"
12 viewBox="0 0 24 24"
13 >
14 <path
15 d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
16 fill="currentColor"
17 ></path>
18 </svg>
19</template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
new file mode 100644
index 0000000..4fb24b7
--- /dev/null
+++ b/frontend/src/main.ts
@@ -0,0 +1,14 @@
1import { createApp } from 'vue'
2import { createPinia } from 'pinia'
3
4import App from './App.vue'
5import router from './router'
6
7import './assets/main.css'
8
9const app = createApp(App)
10
11app.use(createPinia())
12app.use(router)
13
14app.mount('#app')
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
new file mode 100644
index 0000000..a49ae50
--- /dev/null
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,23 @@
1import { createRouter, createWebHistory } from 'vue-router'
2import HomeView from '../views/HomeView.vue'
3
4const router = createRouter({
5 history: createWebHistory(import.meta.env.BASE_URL),
6 routes: [
7 {
8 path: '/',
9 name: 'home',
10 component: HomeView
11 },
12 {
13 path: '/about',
14 name: 'about',
15 // route level code-splitting
16 // this generates a separate chunk (About.[hash].js) for this route
17 // which is lazy-loaded when the route is visited.
18 component: () => import('../views/AboutView.vue')
19 }
20 ]
21})
22
23export default router
diff --git a/frontend/src/stores/counter.ts b/frontend/src/stores/counter.ts
new file mode 100644
index 0000000..b6757ba
--- /dev/null
+++ b/frontend/src/stores/counter.ts
@@ -0,0 +1,12 @@
1import { ref, computed } from 'vue'
2import { defineStore } from 'pinia'
3
4export const useCounterStore = defineStore('counter', () => {
5 const count = ref(0)
6 const doubleCount = computed(() => count.value * 2)
7 function increment() {
8 count.value++
9 }
10
11 return { count, doubleCount, increment }
12})
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
new file mode 100644
index 0000000..756ad2a
--- /dev/null
+++ b/frontend/src/views/AboutView.vue
@@ -0,0 +1,15 @@
1<template>
2 <div class="about">
3 <h1>This is an about page</h1>
4 </div>
5</template>
6
7<style>
8@media (min-width: 1024px) {
9 .about {
10 min-height: 100vh;
11 display: flex;
12 align-items: center;
13 }
14}
15</style>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 0000000..d5c0217
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,9 @@
1<script setup lang="ts">
2import TheWelcome from '../components/TheWelcome.vue'
3</script>
4
5<template>
6 <main>
7 <TheWelcome />
8 </main>
9</template>
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-09 07:02:22 +0000