Added basic webinterface design

tubio-frontend-nuxt-app/.stylelintignore

@@ -0,0 +1,2 @@
+components/Logo.vue
+assets/scss/fonts/*

tubio-frontend-nuxt-app/assets/css/fonts/zilla-slab.css

@@ -0,0 +1,49 @@
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Regular.ttf") format('truetype');
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Italic.ttf") format('truetype');
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Bold.ttf") format('truetype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-BoldItalic.ttf") format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Light.ttf") format('truetype');
+    font-weight: lighter;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "ZillaSlab";
+    src: url("/assets/fonts/zilla-slab/ZillaSlab-Medium.ttf") format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}

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

@@ -0,0 +1,28 @@
+a,
+p,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+* {
+  font-family: "ZillaSlab", serif;
+}
+
+.button {
+  background-color: #fff;
+  border-radius: 5px;
+  min-width: 80px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+* {
+  -webkit-tap-highlight-color: #0000;
+}

tubio-frontend-nuxt-app/assets/css/reset.css

@@ -0,0 +1,366 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+
+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;
+}
+
+/* make sure to set some focus styles for accessibility */
+:focus {
+    outline: 0;
+}
+
+/* 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;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+input[type=search] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+    resize: vertical;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    max-width: 100%;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+img {
+    vertical-align: middle;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+.chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}

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

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

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

@@ -0,0 +1,20 @@
+<template>
+    <div class="download-box">
+        <h2 class="no-dls-yet mt-2">No downloads yet...</h2>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.download-box {
+  width: 100%;
+  min-height: 600px;
+  border-radius: 5px;
+  background-color: #fff5;
+}
+
+.no-dls-yet {
+  color: theme("colors.text-gray-1");
+  font-size: 34pt;
+  text-align: center;
+}
+</style>

tubio-frontend-nuxt-app/components/Icons/arrow-right-square.vue

@@ -0,0 +1,6 @@
+<template>
+<svg viewBox="0 0 16 16" class="bi bi-arrow-right-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/>
+</svg>
+</template>

tubio-frontend-nuxt-app/components/Icons/gear.vue

@@ -0,0 +1,6 @@
+<template>
+<svg viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
+  <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
+</svg>
+</template>

tubio-frontend-nuxt-app/components/Icons/terminal.vue

@@ -0,0 +1,6 @@
+<template>
+<svg viewBox="0 0 16 16" class="bi bi-terminal" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M14 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"/>
+  <path fill-rule="evenodd" d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.146 4.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 1 1-.708-.708L4.793 6.5 3.146 4.854a.5.5 0 0 1 0-.708z"/>
+</svg>
+</template>

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

@@ -48,7 +48,7 @@ export default {
   height: 1000000px;
   position: absolute;
   z-index: -9;
-  mask-image: url("/images/tiles/grid.png");
+  mask-image: url("/assets/images/tiles/grid.png");
   background-color: theme("colors.purple-1");
 
   &__wrapper {

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="header flex flex-row justify-between w-full p-5">
+
+    <div class="left-icons flex flex-flex-row justify-start">
+        <div class="headerbutton block md:hidden">
+            <Logo class="headerlogo" />
+        </div>
+    </div>
+
+    <div class="right-icons flex flex-row justify-end flex-grow">
+        <div class="headerbutton button-settings">
+            <IconGear class="headericon icon-gear" />
+        </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import IconGear from "~/components/Icons/gear";
+import Logo from "~/components/Logo";
+
+export default {
+  components: {
+    IconGear,
+    Logo,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.headericon {
+  cursor: pointer;
+  height: 50px;
+  width: 50px;
+  stroke: theme("colors.purple-3");
+  fill: theme("colors.purple-3");
+  -webkit-tap-highlight-color: #0000;
+  transition:
+    stroke 0.2s,
+    fill 0.2s,
+    color 0.2s,
+    transform 0.2s ease-in-out;
+
+  &:hover {
+    transform: rotate(90deg);
+    stroke: theme("colors.purple-3-1");
+    fill: theme("colors.purple-3-1");
+  }
+}
+
+.headerlogo {
+  cursor: pointer;
+  height: 60px;
+  width: 60px;
+  fill: theme("colors.purple-3");
+  stroke: theme("colors.purple-3");
+  -webkit-tap-highlight-color: #0000;
+  transition:
+    stroke 0.2s,
+    fill 0.2s,
+    color 0.2s;
+
+  &:hover {
+    stroke: theme("colors.purple-3-1");
+  }
+
+  & svg {
+    fill: var(theme("colors.purple-3"));
+    stroke: var(theme("colors.purple-3"));
+    height: 100%;
+  }
+}
+
+.icon {
+  &-gear {
+    & svg {
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -1,9 +1,14 @@
 <template>
-  <div></div>
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504 456.28"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:20px;}.cls-2{}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M341,10h-196a33,33,0,0,0-28.55,16.49l-98,169.69a63.94,63.94,0,0,0,0,63.91l89.05,154.23a63.88,63.88,0,0,0,55.34,32H341a63.9,63.9,0,0,0,55.35-32l89-154.23a63.89,63.89,0,0,0,0-63.91L396.39,42A63.91,63.91,0,0,0,341,10Z"/><path class="cls-2" d="M207.21,311.16H136.14v-7.9l8.67-.66a32,32,0,0,0,8-1.34,11,11,0,0,0,5.34-3.95,12.44,12.44,0,0,0,1.67-6.95V176a15.44,15.44,0,0,0-1.22-6.51q-1.23-2.61-5.79-4.39a58.26,58.26,0,0,0-8.4-2.5,55.35,55.35,0,0,0-8.28-1.39v-7.9h71.07v7.9a71.14,71.14,0,0,0-8.23.83,56.31,56.31,0,0,0-8.34,1.84q-4.23,1.33-5.67,4.33a15.14,15.14,0,0,0-1.45,6.68V289.14a13,13,0,0,0,1.61,6.5,11,11,0,0,0,5.51,4.51,54,54,0,0,0,7.62,2,55.31,55.31,0,0,0,9,1.16Z"/><path class="cls-2" d="M354.48,172a77.69,77.69,0,0,1,16.35,26.3,94.67,94.67,0,0,1,5.89,34.09,92.89,92.89,0,0,1-6,34.15A75.91,75.91,0,0,1,354,292.7a72.4,72.4,0,0,1-24,16.46,77.24,77.24,0,0,1-59.57-.39,70.63,70.63,0,0,1-24-17.19,77.75,77.75,0,0,1-15.73-26.19,93.83,93.83,0,0,1-5.73-33q0-19.24,6-34.31A79.94,79.94,0,0,1,247.59,172a71.59,71.59,0,0,1,24.3-16.69,76.38,76.38,0,0,1,58.56.11A70.79,70.79,0,0,1,354.48,172ZM337.9,283.91A73.74,73.74,0,0,0,347,261a132.51,132.51,0,0,0,2.83-28.59,130.75,130.75,0,0,0-3.17-29.81,74,74,0,0,0-9.28-23.13A44.53,44.53,0,0,0,322,164.73a41.83,41.83,0,0,0-21.14-5.28q-13.33,0-22.69,6.11a47.62,47.62,0,0,0-15.23,16.35,78.52,78.52,0,0,0-8.29,22.92,135.15,135.15,0,0,0-2.73,27.58,132.42,132.42,0,0,0,2.9,28.92,73,73,0,0,0,9.12,22.91,44.83,44.83,0,0,0,15.12,15.3q9.12,5.5,21.8,5.5a41.9,41.9,0,0,0,21.47-5.56A43.5,43.5,0,0,0,337.9,283.91Z"/><path class="cls-2" d="M220,86.76c-1.67.69-3.26,1.28-4.75,1.75a18,18,0,0,1-5.47.72c-3.19,0-5.44-.81-6.74-2.41A10.64,10.64,0,0,1,201.05,80V54.24h-6.87v-3.7h7V38.7h7V50.54h10.92v3.7H208.3V75.5a39.91,39.91,0,0,0,.17,4,7.36,7.36,0,0,0,.83,2.79,3.93,3.93,0,0,0,1.85,1.7,7.88,7.88,0,0,0,3.32.58c.64,0,1.59-.06,2.84-.17a12.8,12.8,0,0,0,2.64-.45Z"/><path class="cls-2" d="M268.45,87.72,256,88.57l-.58-.54V83.21h-.23c-.62.64-1.31,1.33-2.08,2.06a14,14,0,0,1-2.66,2,17,17,0,0,1-3.35,1.58,15.07,15.07,0,0,1-4.58.54q-5,0-7.68-3.29t-2.64-9.58V58.32a4.36,4.36,0,0,0-2.06-4,4.83,4.83,0,0,0-1.74-.68,16.78,16.78,0,0,0-2.22-.29V50.85l12.69-.93.58.54V76.88q0,4.14,1.85,6.21a5.76,5.76,0,0,0,4.44,2.09,10.19,10.19,0,0,0,3.78-.66A10.73,10.73,0,0,0,252.33,83a13.68,13.68,0,0,0,1.83-1.71,10.13,10.13,0,0,0,1.22-1.68V58.05a4.74,4.74,0,0,0-.54-2.25,5.36,5.36,0,0,0-1.51-1.68,4.35,4.35,0,0,0-2.06-.55c-.92-.07-1.94-.13-3.07-.18V50.85l13.85-.93.58.54V80.63a4.4,4.4,0,0,0,.54,2.24,4.87,4.87,0,0,0,1.5,1.57,4.18,4.18,0,0,0,1.66.56c.64.09,1.35.15,2.12.18Z"/><path class="cls-2" d="M315.68,69.36a20.36,20.36,0,0,1-5.4,14.39q-5.4,5.82-12.54,5.82a20.25,20.25,0,0,1-6.15-1A26.12,26.12,0,0,1,285.9,86l-2.85,4.43-2.39-.54q.18-2.85.27-6.87c.05-2.68.07-5.26.07-7.76V37.62a6.43,6.43,0,0,0-.59-2.63,4.23,4.23,0,0,0-1.53-1.89,6.21,6.21,0,0,0-2.45-.75q-1.71-.26-2.76-.33V29.55l14-.85.54.58V54.36l.27.07a16.38,16.38,0,0,1,5.23-3.82,13.64,13.64,0,0,1,5.57-1.27A14.75,14.75,0,0,1,311,54.9Q315.68,60.45,315.68,69.36Zm-8.06.27a28.67,28.67,0,0,0-.62-5.82,16.4,16.4,0,0,0-1.93-5.17A10.84,10.84,0,0,0,301.64,55a9.12,9.12,0,0,0-5.09-1.39,10.15,10.15,0,0,0-4.73,1.06,12.93,12.93,0,0,0-3.64,2.88V79.7a9.08,9.08,0,0,0,.9,2.16,9.9,9.9,0,0,0,1.84,2.35A9.8,9.8,0,0,0,293.54,86a8.55,8.55,0,0,0,3.59.67q4.69,0,7.6-4.55T307.62,69.63Z"/></g></g></svg>
+  </div>
 </template>
 
-<style>
+<style lang="scss" scoped>
-.testclas {
+.cls-1 {
-  color: theme("colors.black");
+  fill: none !important;
+}
+.cls-2 {
+  stroke: none !important;
 }
 </style>

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

@@ -0,0 +1,33 @@
+<template>
+    <div class="spacer"
+        :style="'--height: ' + height + '; --m_height: ' + mobile_height + ';'" />
+</template>
+
+<script>
+export default {
+    props: {
+        height: {type: String, default: "0"},
+        m_height: {type: String, default: "0"},
+    },
+
+    computed: {
+        mobile_height() {
+            return (this.m_height === "0") ? this.height : this.m_height;
+        },
+    },
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+.spacer {
+  width: 1px;
+  height: var(--height);
+
+  @media (max-width: theme('screens.sm')) {
+    height: var(--m_height);
+  }
+}
+
+</style>

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

@@ -1,22 +1,39 @@
 <template>
   <div>
     <Background />
-    <Nuxt />
+    <Header />
+
+    <div class="main-column mx-auto">
+      <Nuxt class="w-full flex flex-col justify-start items-center"/>
+    </div>
+
   </div>
 </template>
 
 <script>
 import Background from "~/components/Layout/Background";
+import Header from "~/components/Layout/Header";
 
 export default {
   components: {
     Background,
+    Header,
   }
 };
 </script>
 
 <style lang="css" scoped>
-  .dontcry {
+.main-column {
-    color: #fff;
+  width: 80%;
+  padding: 0 20% 50px 20%;
+  background-color: #0005;
+  box-shadow: 0 0 50px 50px #0005;
+  min-height: 100vh;
+
+  @media (max-width: theme('screens.md')) {
+    width: 100%;
+    padding: 0 20px;
+    padding: 0 20px 50px 20px;
   }
+}
 </style>

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

@@ -6,7 +6,9 @@ export default {
     dir: "web"
   },
 
-
+  server: {
+    host: "0.0.0.0"
+  },
 
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
@@ -22,8 +24,10 @@ export default {
   },
 
   // Global CSS (https://go.nuxtjs.dev/config-css)
-  scss: [
+  css: [
-    "~/assets/scss/main.scss"
+    "~/assets/css/reset.css",
+    "~/assets/css/main.css",
+    "~/assets/css/fonts/zilla-slab.css"
   ],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)

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

@@ -1,17 +1,123 @@
 <template>
   <div>
 
+    <div class="hidden md:block">
+      <Spacer height="5em" m_height="1em" />
+      <Logo class="logo mt-4" />
+      <Spacer height="2em" m_height="2em" />
+    </div>
+
+    <div class="flex flex-row input-flex justify-center">
+      <input class="flex-grow mr-4" type="url" name="" id="" placeholder="video-url">
+
+      <div class="button flex-shrink button-submit flex-grow-0">
+        <IconArrowRightSquare class="icon-button" />
+      </div>
+    </div>
+
+    <Spacer height="2em" m_height="2em" />
+    <DownloadBox />
+
   </div>
 </template>
 
 <script>
-export default {
+import Logo from "~/components/Logo";
+import Spacer from "~/components/Spacer";
+import DownloadBox from "~/components/DownloadBox";
+import IconArrowRightSquare from "~/components/Icons/arrow-right-square";
 
-}
+export default {
+  components: {
+    Logo,
+    Spacer,
+    DownloadBox,
+    IconArrowRightSquare,
+  }
+};
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.dontcry {
+.logo {
-  // lol
+  --logo-color: theme("colors.purple-3");
+
+  width: 300px;
+  fill: var(--logo-color);
+  stroke: var(--logo-color);
+  filter: drop-shadow(0 0 3px theme("colors.purple-3"));
+  transition:
+    fill 0.2s,
+    stroke 0.2s,
+    filter 0.2s;
+
+  @media (max-width: theme('screens.md')) {
+    width: 80px;
+    align-self: flex-start;
+  }
+
+  @media (min-width: theme('screens.md')) {
+    &:hover {
+      --logo-color: theme("colors.purple-3-1");
+
+      filter: drop-shadow(0 0 5px theme("colors.purple-3-1"));
+    }
+  }
 }
+
+.input-flex {
+  width: 100%;
+}
+
+input {
+  height: 50px;
+  font-family: ZillaSlab, serif;
+  font-weight: bold;
+  font-size: 18pt;
+  border-radius: 5px;
+  padding: 0.1em 0.5em;
+  box-shadow: 0 0 20px 5px #fff3;
+  border: none;
+  color: theme("colors.purple-0");
+  transition: transform 0.2s;
+  min-width: 0;
+
+  &:focus {
+    transform: scale(1.015);
+  }
+}
+
+.icon {
+  &-button {
+    height: 2em;
+    stroke: theme("colors.purple-0");
+    overflow: hidden;
+    transition:
+      stroke 0.2s,
+      fill 0.2s,
+      color 0.2s;
+
+    & svg {
+      height: 100%;
+    }
+  }
+}
+
+.button {
+  transition:
+    transform 0.2s,
+    background-color 0.2s,
+    border 0.2s;
+
+  &:hover {
+    transform: scale(1.05);
+    background-color: theme("colors.purple-1");
+    color: #fff;
+
+    & svg {
+      fill: #fff;
+      stroke: #fff;
+    }
+  }
+}
+
 </style>

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

@@ -14,6 +14,9 @@ module.exports = {
       'purple-1': '#5954a4',
       'purple-2': '#8a54a2',
       'purple-3': '#8ad5eb',
+      'purple-3-1': '#bee7f4',
+
+      'text-gray-1': '#bbb'
     },
 
     screens: {