leonetienne/Tubio
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added basic webinterface design

Browse Source
This commit is contained in:
Leon Etienne (ubuntu wsl) committed 2020-09-28 01:53:26 +02:00
1 parent 1f13487fca
commit 01d52d1dce
29 files changed
+749 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Art/Blender/logo.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 721.01 378"><defs><style>.cls-1{fill:#010101;stroke:#1b344e;stroke-linecap:round;stroke-width:1.5px;}.cls-2{fill:#1e1e1c;}</style></defs><title>Element 2</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><g id="Curve"><path id="curva_3D.Curve" data-name="curva 3D.Curve" class="cls-1" d="M.75,97.49H20.6V62.88H40.76V97.49H74.23l-2.16,17.68H40.76L38.6,206.63l0,1.63,0,1.63.06,1.63.11,1.62.15,1.62.18,1.62.23,1.61.27,1.61.3,1.6.35,1.59.39,1.58.42,1.58.13.61.16.6.18.59.22.59.24.57.27.56.29.54.32.53.35.52.37.49.4.49.42.46.44.44.46.42.48.39.5.38.51.34.53.32.55.3.55.27.58.24.58.21.59.19.61.16.91.23.92.22.92.2.92.19.93.17.93.16.93.14.93.13.94.12.93.1.94.08.94.07,1.08.1,1,.08,1,.08.91.07.86.06.8,0,.74,0,.67,0,.61,0,.55,0h1.66l.58,0,.76,0,.91,0,1.07,0,1.23,0,1.37.05,1.53.05,1.67.06,1.82.06,2.09.13,2.29.16,2.47.19,2.67.23,2.86.27,3.06.31,3.25.35,3.44.4,3.63.43,3.83.49,4,.54,4.22.58.79.15.8.14.8.15.81.15.82.15.82.16.83.15.84.16.84.16.85.16.85.16.86.17.87.17.88.17.88.17.88.17.9.18.9.17.9.18.92.18.91.19.93.18.93.19.94.18.94.19.95.2,1,.19,1,.2,1,.2,1,.2,1,.21,1,.21,1,.21,1,.22,1,.22,1,.23,1.05.26,1.06.27,1.07.27,1.08.29,1.09.29,1.1.29,1.11.31,1.11.31,1.13.31,1.14.33,1.14.33,1.16.34,1.18.37,1.2.39,1.21.38,1.21.4,1.23.4,1.23.41,1.25.42,1.26.42,1.27.43,1.27.44,1.29.45,1.3.45,1.33.48,1.34.5,1.36.49,1.36.51,1.38.51,1.39.52,1.39.52,1.41.54,1.42.53,1.43.55,1.45.55,1.45.56,1.59.61,1.61.62,1.61.62,1.63.63,1.64.63,1.66.63,1.66.64,1.68.65,1.69.65,1.7.65,1.72.66,1.72.66,1.78.68,1.79.69,1.8.69,1.81.69,1.82.7,1.84.7,1.85.7,1.87.7,1.88.71,1.89.71,1.9.71,1.92.72,2,.72,2,.73,2,.72,2,.73,2,.73,2,.73,2,.73,2.06.74,2.08.73,2.08.73,2.1.74,2.12.73,2.16.73,2.18.74,2.2.73,2.21.74,2.22.74,2.24.75,2.26.75,2.26.76,2.29.77,2.3.79,2.31.79,2.34.81,2.42.95,2.44,1,2.47,1,2.48,1,2.51,1,2.53,1.05,2.54,1.08,2.57,1.09,2.59,1.12,2.61,1.13,2.63,1.15,2.65,1.17,2.76,1.28,2.79,1.29,2.81,1.31,2.84,1.31,2.86,1.33,2.88,1.35,2.9,1.35,2.93,1.37,3,1.38,3,1.39,3,1.4,3,1.42,3.18,1.38,3.19,1.38,3.21,1.39,3.24,1.38,3.25,1.39,3.28,1.38,3.3,1.38,3.32,1.38L386,339.6l3.37,1.38,3.38,1.37,3.41,1.36,3.54,1.32,3.56,1.3,3.58,1.28,3.6,1.27,3.62,1.26,3.65,1.24,3.66,1.22,3.68,1.21,3.7,1.18,3.72,1.17,3.74,1.16,3.76,1.13,3.88,1,3.89.95,3.91.91,3.92.88,3.94.85,3.95.82,4,.78,4,.76,4,.72,4,.69,4,.65,4,.62,4.1.35,4.11.31,4.12.27,4.11.22,4.13.17,4.12.13,4.13.09,4.14,0h4.13l4.14-.06,4.14-.1,4.14-.15,4.13-.49,4.12-.55,4.11-.59,4.1-.66,4.09-.7,4.08-.76,4.07-.81,4.05-.87,4-.92,4-1,4-1,4-1.08,3.88-1.46,3.84-1.52,3.82-1.58,3.79-1.62,3.77-1.69,3.74-1.73,3.7-1.79,3.68-1.85,3.65-1.9,3.62-2,3.59-2,3.56-2.06,3-2.28,3-2.32,2.95-2.36,2.92-2.39,2.87-2.42,2.83-2.46,2.8-2.49,2.75-2.53,2.7-2.56,2.67-2.59,2.63-2.62,2.58-2.65,2.33-2.89,2.27-2.9,2.24-2.92,2.18-2.95,2.14-3,2.1-3,2.05-3,2-3,1.95-3,1.92-3.07,1.87-3.08,1.82-3.1,1.54-3.24,1.49-3.25,1.45-3.25,1.41-3.26,1.35-3.26,1.32-3.27,1.27-3.28,1.22-3.28,1.18-3.29,1.14-3.29,1.09-3.29,1-3.3.78-3.35.73-3.34.7-3.33.65-3.33.61-3.32.58-3.32.53-3.31.5-3.3.45-3.29.42-3.28.38-3.28.33-3.26.11-3.24.07-3.23,0-3.21v-3.19l0-3.18-.06-3.16-.09-3.14-.13-3.13-.15-3.11-.18-3.09-.22-3.07-.24-3.06-.43-3-.46-3-.48-2.94-.5-2.91-.53-2.89-.55-2.87L706.8,136l-.59-2.83-.62-2.79-.64-2.78-.66-2.75-.68-2.73-.75-2.27-.76-2.25-.76-2.23-.78-2.21-.79-2.18-.8-2.17-.8-2.14-.82-2.12-.82-2.11-.83-2.08-.84-2.06-.85-2-.92-1.95-.92-1.93-.92-1.91-.93-1.89-.94-1.87-.93-1.85-1-1.83-.94-1.81-.95-1.79-1-1.77-1-1.75-1-1.73-1-1.64-1-1.63-1-1.61-1-1.59-1-1.58-1-1.55-1-1.54-1-1.52-1-1.5-1-1.48-1-1.46-1-1.45-1-1.37-1-1.35-1-1.34-1-1.32-1-1.3-1-1.29-1-1.27-1-1.25-1-1.24-1-1.22-1-1.2-1-1.19-1-1.14-1-1.13-1-1.12-1-1.12-1-1.11-1-1.1-1-1.1-1-1.08-1-1.08-1-1.06-1-1.06-1-1-1.13-1-1.14-1-1.15-.95-1.16-.92-1.16-.91-1.18-.89-1.18-.87-1.19-.86-1.2-.83-1.2-.81-1.22-.8L632,16.54l-1.1-.55-1.1-.55-1.11-.53-1.1-.51-1.11-.5-1.11-.49-1.11-.47-1.12-.46L622.06,12l-1.12-.43-1.12-.42-1.12-.4-1.15-.33-1.16-.31-1.15-.3-1.15-.29-1.15-.27L611.8,9l-1.14-.25-1.14-.24-1.14-.22-1.13-.22-1.13-.2L605,7.71l-1.13-.12-1.13-.12-1.12-.1-1.11-.1-1.11-.08-1.1-.08L597.21,7,596.13,7l-1.08-.05-1.07,0-1.07,0-1,0-1.05,0-1,0-1,0-1,0-1,0-1,.06-1,.07-1,.07-1,.07-1,.09-1,.08-.94.1L579,7.7l-.91.13-.9.14-.89.14-.88.14-.87.14-.85.14-.85.15-.84.15-.83.16-.82.16-.81.16-.78.18-.78.18-.76.18-.75.18-.74.18-.74.19-.72.18-.72.19-.7.18-.7.19-.68.19-.68.18-.54.17-.54.16-.53.16-.52.17-.52.16-.51.16-.51.16-.5.17-.5.16-.49.16-.49.16-.48.16-.46.16-.46.16-.45.16-.45.16-.44.16-.44.16-.43.16-.43.16-.42.15-.42.16-.41.15-.41.16-.39.15-.39.15-.38.15-.38.15-.38.15-.37.15-.37.15-.36.14-.36.15-.35.14-.35.14-.34.14-.34.14-.33.14-.32.14-.32.13-.32.14-.31.13-.31.13-.31.13-.3.13-.3.13-.29.13-.29.12-.28.13-.28.12-.27.12-.27.12-.27.12-.26.11-.26.12-.26.11-.25.12-.25.11-.25.11-.24.11-.24.1-.23.11-.23.1-.23.1-.22.11-.22.1-.22.1-.21.09-.21.1-.21.09-.21.1-.2.09-.79.46-1.73,1-2.48,1.52-3,1.88-3.42,2.12-3.62,2.23-3.62,2.24-3.44,2.12-3.06,1.88-2.51,1.53L506,39.38l-.83.47-.25.41.12.76.42,1,.66,1.27.83,1.43.92,1.49,1Line truncated
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

tubio-frontend-nuxt-app/.stylelintignore
+2
View File
@@ -0,0 +1,2 @@
components/Logo.vue
assets/scss/fonts/*
tubio-frontend-nuxt-app/assets/css/fonts/zilla-slab.css
+49
View File
@@ -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
+28
View File
@@ -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
+366
View File
@@ -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
-3
View File
@@ -1,3 +0,0 @@
.dontcry {
color: #ffff;
}
tubio-frontend-nuxt-app/components/DownloadBox.vue
+20
View File
@@ -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
+6
View File
@@ -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
+6
View File
@@ -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
+6
View File
@@ -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
+1 -1
View File
@@ -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
+82
View File
@@ -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
+9 -4
View File
@@ -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>
.testclas {
color: theme("colors.black");
<style lang="scss" scoped>
.cls-1 {
fill: none !important;
}
.cls-2 {
stroke: none !important;
}
</style>
tubio-frontend-nuxt-app/components/Spacer.vue
+33
View File
@@ -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
+20 -3
View File
@@ -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 {
color: #fff;
.main-column {
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
+7 -3
View File
@@ -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: [
"~/assets/scss/main.scss"
css: [
"~/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
+110 -4
View File
@@ -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">
.dontcry {
// lol
<style lang="scss" scoped>
.logo {
--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/static/assets/fonts/zilla-slab/ZillaSlab-Bold.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-BoldItalic.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-Italic.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-Light.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-LightItalic.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-Medium.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-MediumItalic.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-Regular.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-SemiBold.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/assets/fonts/zilla-slab/ZillaSlab-SemiBoldItalic.ttf
BIN
View File
Binary file not shown.
tubio-frontend-nuxt-app/static/images/tiles/grid.png → tubio-frontend-nuxt-app/static/assets/images/tiles/grid.png
View File
File renamed without changes.
tubio-frontend-nuxt-app/tailwind.config.js
+3
View File
@@ -14,6 +14,9 @@ module.exports = {
'purple-1': '#5954a4',
'purple-2': '#8a54a2',
'purple-3': '#8ad5eb',
'purple-3-1': '#bee7f4',
'text-gray-1': '#bbb'
},
screens: {