Frontend: Basic framework

tubio-frontend-nuxt-app/assets/scss/main.scss

@@ -0,0 +1,3 @@
+.dontcry {
+  color: #ffff;
+}

tubio-frontend-nuxt-app/components/Layout/Background.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="bgdrop"></div>
+    <div class="bggatter__wrapper">
+      <div class="bggatter" ref="bggatter" :style="cssVars"></div>
+    </div>
+    <div class="bgmask"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      offsetX: { type: Number, default: 0 },
+    };
+  },
+  computed: {
+    cssVars() {
+      return "transform: translateY(-" + this.offsetX / 2 + "px);";
+    }
+  },
+  methods: {
+    handleScroll: function(e) {
+      this.offsetX = window.scrollY;
+    }
+  },
+  beforeMount() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  destroyed() {
+      window.removeEventListener("scroll", this.handleScroll);
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.bgdrop {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -10;
+  background-color: theme("colors.purple-0");
+}
+
+.bggatter {
+  width: 100%;
+  height: 1000000px;
+  position: absolute;
+  z-index: -9;
+  mask-image: url("/images/tiles/grid.png");
+  background-color: theme("colors.purple-1");
+
+  &__wrapper {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    overflow: hidden;
+    z-index: -9;
+  }
+}
+
+.bgmask {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -8;
+  background-image: linear-gradient(#0000 50%, theme("colors.purple-0"));
+}
+</style>

tubio-frontend-nuxt-app/components/Logo.vue

@@ -1,29 +1,9 @@
 <template>
-  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
+  <div></div>
-    <path
-      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
-      fill="#00C58E"
-    />
-    <path
-      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
-      fill="#108775"
-    />
-    <path
-      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
-      fill="#2F495E"
-    />
-  </svg>
 </template>
 
 <style>
-.NuxtLogo {
+.testclas {
-  animation: 1s appear;
+  color: theme("colors.black");
-  margin: auto;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
 }
 </style>

tubio-frontend-nuxt-app/layouts/default.vue

@@ -1,62 +1,22 @@
 <template>
   <div>
+    <Background />
     <Nuxt />
   </div>
 </template>
 
-<style>
+<script>
-html {
+import Background from "~/components/Layout/Background";
-  font-family:
-    'Source Sans Pro',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
 
-*,
+export default {
-*::before,
+  components: {
-*::after {
+    Background,
-  box-sizing: border-box;
+  }
-  margin: 0;
+};
-}
+</script>
 
-.button--green {
+<style lang="css" scoped>
-  display: inline-block;
+  .dontcry {
-  border-radius: 4px;
+    color: #fff;
-  border: 1px solid #3b8070;
+  }
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
 </style>

tubio-frontend-nuxt-app/nuxt.config.js

@@ -2,9 +2,15 @@ export default {
   // Target (https://go.nuxtjs.dev/config-target)
   target: 'static',
 
+  generate: {
+    dir: "web"
+  },
+
+
+
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
-    title: 'tubio-frontend-nuxt-app',
+    title: 'Tubio - Video downloader',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -16,7 +22,8 @@ export default {
   },
 
   // Global CSS (https://go.nuxtjs.dev/config-css)
-  css: [
+  scss: [
+    "~/assets/scss/main.scss"
   ],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)

tubio-frontend-nuxt-app/package.json

@@ -13,7 +13,11 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.12.2",
     "core-js": "^3.6.5",
-    "nuxt": "^2.14.5"
+    "node-sass": "^4.14.1",
+    "nuxt": "^2.14.5",
+    "sass": "^1.26.11",
+    "sass-loader": "^10.0.2",
+    "tailwind": "^4.0.0"
   },
   "devDependencies": {
     "@nuxtjs/stylelint-module": "^4.0.0",

tubio-frontend-nuxt-app/pages/index.vue

@@ -1,78 +1,17 @@
 <template>
-  <div class="container">
+  <div>
-    <div>
+    
-      <Logo />
-      <h1 class="title">
-        tubio-frontend-nuxt-app
-      </h1>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-export default {}
+export default {
+
+}
 </script>
 
-<style>
+<style lang="scss">
-/* Sample `apply` at-rules with Tailwind CSS
+.dontcry {
-.container {
+  // lol
-@apply min-h-screen flex justify-center items-center text-center mx-auto;
-}
-*/
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family:
-    'Quicksand',
-    'Source Sans Pro',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
 }
 </style>

tubio-frontend-nuxt-app/stylelint.config.js

@@ -4,5 +4,7 @@ module.exports = {
   ],
   // add your custom config here
   // https://stylelint.io/user-guide/configuration
-  rules: {}
+  rules: {
+    "indentation": 2
+  }
 }

tubio-frontend-nuxt-app/tailwind.config.js

@@ -0,0 +1,33 @@
+/*
+** TailwindCSS Configuration File
+**
+** Docs: https://tailwindcss.com/docs/configuration
+** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
+*/
+module.exports = {
+  theme: {
+    colors: {
+      'black': '#000',
+      'white': '#fff',
+
+      'purple-0': '#04254e',
+      'purple-1': '#5954a4',
+      'purple-2': '#8a54a2',
+      'purple-3': '#8ad5eb',
+    },
+
+    screens: {
+      'sm': '660px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      'fhd': '1670px',
+      'wqhd': '2480px',
+
+      'break-header': '950px',
+    }
+  },
+  variants: {},
+  plugins: [],
+
+}