Init

src/App.vue

@@ -0,0 +1,8 @@
+<template>
+  <div id="app">
+    <Navbar />
+    <main>
+      <RouterView />
+    </main>
+  </div>
+</template>

src/assets/vite-logo.svg

@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>

src/assets/vue-logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>

src/components/Feature.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="flex flex-col h-full p-8 bg-gray-100 rounded-lg items dark:bg-gray-700"
+  >
+    <Heading2>
+      {{ title }}
+    </Heading2>
+
+    <div class="flex flex-col flex-grow">
+      <p class="flex-grow text-base leading-relaxed dark:text-gray-300">
+        {{ text }}
+      </p>
+      <a
+        :href="url"
+        target="_blank"
+        class="inline-flex items-center mt-3 text-green-500"
+      >
+        Learn More
+        <MdiArrowRight class="ml-1" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue-demi";
+
+export default defineComponent({
+  name: "Feature",
+  props: {
+    title: { type: String, required: true },
+    text: { type: String, required: true },
+    url: { type: String, required: true },
+  },
+});
+</script>

src/components/Features.vue

@@ -0,0 +1,47 @@
+<template>
+  <section class="container px-5 py-12 mx-auto text-gray-600 body-font">
+    <div class="flex flex-col w-full mb-8 text-center">
+      <Heading1> Installed Vite plugins 📦 </Heading1>
+      <p class="dark:text-gray-300">
+        You can even find more awesome Vite plugins
+        <a
+          href="https://github.com/vitejs/awesome-vite"
+          target="_blank"
+          class="text-green-500"
+        >
+          here
+        </a>
+      </p>
+    </div>
+    <div class="flex flex-wrap -m-2">
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="vite-plugin-vue2"
+          text="Vue 2 support for Vite"
+          url="https://github.com/underfin/vite-plugin-vue2"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="vite-plugin-windicss"
+          text="Windi CSS for Vite"
+          url="https://github.com/windicss/vite-plugin-windicss"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="unplugin-components"
+          text="On demand components auto importing for Vite"
+          url="https://github.com/antfu/unplugin-vue-components"
+        />
+      </div>
+      <div class="w-full p-2 md:w-1/2 lg:w-1/4">
+        <Feature
+          title="unplugin-icons"
+          text="Access thousands of icons as Vue components in Vite"
+          url="https://github.com/antfu/unplugin-icons"
+        />
+      </div>
+    </div>
+  </section>
+</template>

src/components/Footer.vue

@@ -0,0 +1,15 @@
+<template>
+<!-- Footer -->
+<footer class="footer bg-white relative pt-1 border-b-2 border-blue-700">
+
+        <div class="mt-16 bg-gray-700 border-t-2 border-gray-300 flex flex-col items-center">
+            <div class="sm:w-2/3 text-center py-6">
+                <p class="text-sm text-blue-700 font-bold mb-2">
+                    © 2021 by Jaro
+                </p>
+            </div>
+        </div>
+</footer>
+
+<!-- ./Footer -->
+</template>

src/components/Hero.vue

@@ -0,0 +1,58 @@
+<template>
+  <section
+    class="container flex flex-col items-center px-5 py-12 mx-auto text-gray-600 body-font md:flex-row"
+  >
+    <div class=" mb-10">
+      <img
+        class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
+        alt="Main camera" 
+        src="@/assets/mvsr-logo.png"
+      />
+    </div>
+    <div
+      class="flex flex-col items-center text-center lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 md:items-start md:text-left"
+    >
+      <Heading1>Preview</Heading1>
+      <p class="mb-8 leading-relaxed dark:text-gray-300">
+        Zobrazuje snimku kazdych x sekund z {{ previewUrl }}
+      </p>
+      <img
+        class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
+        alt="Main camera" 
+        src="@/assets/mvsr-logo.png"
+      />
+      <p class="mb-8">
+	 Ovládanie dverí
+      </p>
+      <div class="flex justify-center">
+        <a href="https://vuejs.org/v2/guide/" target="_blank">
+          <ButtonPrimary> Otvor </ButtonPrimary>
+        </a>
+
+        <RouterLink :to="{ name: 'About' }">
+          <ButtonSecondary> Zatvor </ButtonSecondary>
+        </RouterLink>
+          <ButtonTerciary> Podrž </ButtonTerciary>
+
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue-demi";
+import { routes } from "@/router";
+import { useDark, useToggle } from "@vueuse/core";
+
+export default defineComponent({
+  setup: (_, ctx) => {
+    // Import config from .evn
+    const appName = import.meta.env.VITE_APP_NAME;
+    const urlMjpeg = import.meta.env.VITE_APP_ESP32_MJPEG;
+    const previewUrl = import.meta.env.VITE_APP_ESP32_PREVIEW;
+
+
+    return { appName, urlMjpeg, previewUrl };
+  },
+});
+</script>

src/components/Navbar.vue

@@ -0,0 +1,77 @@
+<template>
+  <header class="text-gray-600 sticky top-0 z-50 bg-green-600 body-font">
+    <div
+      class="container flex flex-col flex-wrap items-center p-3 mx-auto md:flex-row"
+    >
+      <RouterLink
+        :to="{ name: 'Home' }"
+        class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
+      >
+        <img alt="MVSR logo" src="@/assets/mvsr-logo.png" width="60px" />
+        <span class="ml-3 text-xl dark:text-white">
+          {{ appName }} {{ ipAddr }}
+        </span>
+      </RouterLink>
+      <nav
+        class="flex flex-wrap items-center justify-center text-base md:ml-auto"
+      >
+        <RouterLink
+          v-for="(route, index) in routes"
+          :key="index"
+          class="mr-5 font-semibold cursor-pointer"
+          :class="{
+            'text-green-500 hover:green-500 dark:text-green-500 dark:hover:text-green-500 underline':
+              route.name === currentRoute,
+            'hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200':
+              route.name != currentRoute,
+          }"
+          :to="{ name: route.name }"
+        >
+          {{ route.name }}
+        </RouterLink>
+        <RouterLink
+          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
+          to="/aliens"
+        >
+          <MdiAlien />
+        </RouterLink>
+        <a
+          href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
+          target="_blank"
+          class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
+        >
+          <MdiGithub />
+        </a>
+        <button
+          @click="toggle"
+          class="flex items-center justify-center w-9 h-9 focus:outline-none"
+        >
+          <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
+          <MdiMoonWaningCrescent class="text-gray-800" v-else />
+        </button>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue-demi";
+import { routes } from "@/router";
+import { useDark, useToggle } from "@vueuse/core";
+
+export default defineComponent({
+  setup: (_, ctx) => {
+    // Import config from .evn
+    const appName = import.meta.env.VITE_APP_NAME;
+    const ipAddr = import.meta.env.ESP32_IP;
+
+    const availableRoutes = routes.filter((route) => route.name != "NotFound");
+    const currentRoute = computed(() => ctx.root.$route.name);
+
+    const isDark = useDark();
+    const toggle = useToggle(isDark);
+
+    return { appName, ipAddr, routes: availableRoutes, currentRoute, toggle, isDark };
+  },
+});
+</script>

src/components/shared/ButtonPrimary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex px-6 py-2 text-lg text-white bg-green-500 border-0 rounded focus:outline-none hover:bg-green-400"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/ButtonSecondary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/ButtonTerciary.vue

@@ -0,0 +1,7 @@
+<template>
+  <button
+    class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100"
+  >
+    <slot />
+  </button>
+</template>

src/components/shared/Heading1.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1
+    class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white"
+  >
+    <slot />
+  </h1>
+</template>

src/components/shared/Heading2.vue

@@ -0,0 +1,7 @@
+<template>
+  <h2
+    class="text-lg font-medium text-gray-900 sm:text-xl title-font dark:text-white"
+  >
+    <slot />
+  </h2>
+</template>

src/main.ts

@@ -0,0 +1,16 @@
+import Vue from "vue";
+import App from "@/App.vue";
+import { createApp, h } from "vue-demi";
+
+import "windi.css";
+import router from "@/router";
+
+Vue.config.productionTip = false;
+Vue.config.devtools = true;
+
+const app = createApp({
+  router,
+  render: () => h(App),
+});
+
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,37 @@
+import Vue from "vue";
+import VueRouter, { RouteConfig } from "vue-router";
+import Home from "@/views/Home.vue";
+import About from "@/views/About.vue";
+import NotFound from "@/views/NotFound.vue";
+
+Vue.use(VueRouter);
+
+export const routes: RouteConfig[] = [
+  {
+    path: "/",
+    name: "Domov",
+    component: Home,
+  },
+  {
+    path: "/about",
+    name: "O projekte",
+    // NOTE: you can also apply meta information
+    // meta: {authRequired: false }
+    component: About,
+    // NOTE: you can also lazy-load the component
+    // component: () => import("@/views/About.vue")
+  },
+  {
+    path: "/:path(.*)",
+    name: "NotFound",
+    component: NotFound,
+  },
+];
+
+const router = new VueRouter({
+  base: "/",
+  mode: "history",
+  routes,
+});
+
+export default router;

src/shims-tsx.d.ts

@@ -0,0 +1,17 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+
+  interface ImportMeta {
+    env: Record<any, string>;
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

src/views/About.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="text-gray-600 body-font">
+    <div
+      class="container flex flex-col items-center justify-center px-5 py-24 mx-auto"
+    >
+      <div class="w-full text-center lg:w-2/3">
+        <Heading1> O projekte: Vite ⚡ - Vue 2 Oku Kamera na otvaranie dveri </Heading1>
+        <p class="mb-8 leading-relaxed dark:text-gray-300">
+       		Projekt je zalozeny na ESP32-CAM a VUE JS 
+        </p>
+        <div class="flex justify-center">
+          <a
+            href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
+            target="_blank"
+          >
+            <button
+              class="inline-flex items-center px-6 py-2 text-lg text-white bg-black border-0 rounded focus:outline-none hover:bg-gray-900"
+            >
+              <MdiGithub /> &nbsp;GitHub
+            </button>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/views/Home.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <Hero />
+    <Footer />
+  </div>
+</template>

src/views/NotFound.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="text-gray-600 body-font">
+    <div
+      class="container flex flex-col items-center justify-center px-5 py-24 mx-auto"
+    >
+      <img
+        class="object-cover object-center w-5/6 mb-10 rounded lg:w-2/6 md:w-3/6"
+        alt="hero"
+        src="@/assets/not-found.svg"
+      />
+      <div class="w-full text-center lg:w-2/3">
+        <Heading1 class="text-red-500 dark:text-red-500"
+          >404 NOT FOUND</Heading1
+        >
+        <p class="mb-8 leading-relaxed dark:text-gray-300">
+          Oops, looks like you got kidnapped by aliens.
+        </p>
+        <div class="flex justify-center">
+          <RouterLink :to="{ name: 'Home' }">
+            <ButtonPrimary> Bring me back Home </ButtonPrimary>
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>