initial commit
3
.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
yarn-error.log
|
22
.vscode/launch.json
vendored
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"version": "0.0.1",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "node-terminal",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "debug",
|
||||||
|
"command": "yarn serve"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "vuejs: chrome",
|
||||||
|
"url": "http://ws-dso:8080",
|
||||||
|
"webRoot": "${workspaceFolder}/src",
|
||||||
|
"breakOnLoad": true,
|
||||||
|
"sourceMapPathOverrides": {
|
||||||
|
"webpack:///src/*": "${webRoot}/*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
20
README.md
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
# autoscroll
|
||||||
|
|
||||||
|
tablature viewer with autoscroll and playback features
|
||||||
|
|
||||||
|
## yarn
|
||||||
|
|
||||||
|
### setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### compile and serve with hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### compile, minify and build for production
|
||||||
|
```
|
||||||
|
yarn run build
|
||||||
|
```
|
25
package.json
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"name": "autoscroll",
|
||||||
|
"author": "Daniel Sommer <daniel.sommer@velvettear.de>",
|
||||||
|
"license": "MIT",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.velvettear.de/velvettear/autoscroll.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"howler": "^2.2.3",
|
||||||
|
"remixicon": "^2.5.0",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.5.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-service": "^4.5.0",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
}
|
||||||
|
}
|
BIN
public/favicon.ico
Normal file
After Width: | Height: | Size: 4.2 KiB |
27
public/index.html
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@master/css/iconoir.css">
|
||||||
|
<title>
|
||||||
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
60
src/App.vue
Normal file
|
@ -0,0 +1,60 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<router-view></router-view>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Footer from "@/components/Footer.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "App",
|
||||||
|
components: {
|
||||||
|
Footer,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: "Fira Code", monospace;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
color: #f1f1f1;
|
||||||
|
margin: 0;
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ff8800;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #3e3e3e99;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #ff880099;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #ffffff99;
|
||||||
|
}
|
||||||
|
</style>
|
BIN
src/assets/img/Billy Idon - Rebel Yell.png
Normal file
After Width: | Height: | Size: 249 KiB |
BIN
src/assets/img/Billy Idon - Rebel Yell_scaledwidth560.png
Normal file
After Width: | Height: | Size: 345 KiB |
BIN
src/assets/img/Electric Wizard - Funeralopolis.png
Normal file
After Width: | Height: | Size: 470 KiB |
BIN
src/assets/img/Electric Wizard - Funeralopolis_inverted.png
Normal file
After Width: | Height: | Size: 444 KiB |
BIN
src/assets/img/Fu Manchu - Hell On Wheels.png
Normal file
After Width: | Height: | Size: 298 KiB |
BIN
src/assets/img/Led Zeppelin - Kashmir.png
Normal file
After Width: | Height: | Size: 456 KiB |
After Width: | Height: | Size: 207 KiB |
BIN
src/assets/img/The Cranberries - Zombie.png
Normal file
After Width: | Height: | Size: 220 KiB |
BIN
src/assets/img/The White Stripes - Seven Nation Army.png
Normal file
After Width: | Height: | Size: 167 KiB |
7
src/assets/json/Electric Wizard - Funeralopolis.json
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"artist": "Electric Wizard",
|
||||||
|
"title": "Funeralopolis",
|
||||||
|
"bass": "Electric Wizard - Funeralopolis_inverted.png",
|
||||||
|
"media": "Electric Wizard - Funeralopolis.mp3",
|
||||||
|
"duration": 140
|
||||||
|
}
|
BIN
src/assets/media/Electric Wizard - Funeralopolis.mp3
Normal file
48
src/components/Footer.vue
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<footer>
|
||||||
|
<span>
|
||||||
|
<a :href="app.url">{{ app.name }}</a>
|
||||||
|
{{ app.version }} | made with <i class="ri-heart-fill"></i> by
|
||||||
|
<a :href="author.url">{{ author.name }}</a>
|
||||||
|
</span>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PackageJSON from "../../package.json";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Heading",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
app: {
|
||||||
|
name: PackageJSON.name,
|
||||||
|
version: PackageJSON.version,
|
||||||
|
url: PackageJSON.repository.url,
|
||||||
|
},
|
||||||
|
author: {
|
||||||
|
name: "velvettear",
|
||||||
|
url: "https://velvettear.de",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.5em;
|
||||||
|
font-weight: 500;
|
||||||
|
background: #3e3e3e99;
|
||||||
|
border-top-width: 1px;
|
||||||
|
border-top-color: #ff880099;
|
||||||
|
border-top-style: solid;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
61
src/components/Heading.vue
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div id="heading">
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
|
<h2>{{ message }}</h2>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Heading",
|
||||||
|
props: {
|
||||||
|
title: String,
|
||||||
|
message: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#heading {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.5em;
|
||||||
|
font-weight: 500;
|
||||||
|
background: #3e3e3e99;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-bottom-color: #ff880099;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
#heading-center {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
#instrument {
|
||||||
|
display: relative;
|
||||||
|
float: left;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
109
src/components/List.vue
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<Heading title="welcome!" message="choose your song below" />
|
||||||
|
<div id="table">
|
||||||
|
<table>
|
||||||
|
<th>artist</th>
|
||||||
|
<th>title</th>
|
||||||
|
<tr
|
||||||
|
v-for="entry in getEntries()"
|
||||||
|
:key="entry.id"
|
||||||
|
v-on:click="link(entry)"
|
||||||
|
>
|
||||||
|
<td class="artist">
|
||||||
|
{{ entry.artist }}
|
||||||
|
</td>
|
||||||
|
<td class="title">{{ entry.title }}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Config from "../config.json";
|
||||||
|
import Heading from "@/components/Heading.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "List",
|
||||||
|
components: {
|
||||||
|
Heading,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getEntries: function () {
|
||||||
|
var entries = [];
|
||||||
|
var tabs = Config.tabfiles;
|
||||||
|
for (var counter = 0; counter < tabs.length; counter++) {
|
||||||
|
var tab = require("@/assets/json/" + tabs[counter]);
|
||||||
|
tab.id = String(counter);
|
||||||
|
entries.push(tab);
|
||||||
|
}
|
||||||
|
var entries = entries.sort(function (a, b) {
|
||||||
|
if (a.artist < b.artist) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (a.artist > b.artist) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
return entries;
|
||||||
|
},
|
||||||
|
link: function (entry) {
|
||||||
|
if (!entry) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$router.push({ path: entry.id, query: entry });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#table {
|
||||||
|
margin-top: 2.5%;
|
||||||
|
}
|
||||||
|
.artist {
|
||||||
|
text-align: left;
|
||||||
|
padding-right: 12px;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-bottom-left-radius: 8px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: right;
|
||||||
|
padding-left: 12px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
border-bottom-right-radius: 8px;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
margin: auto;
|
||||||
|
border-collapse: collapse;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
table,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
background-color: #1e1e1e99;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #3e3e3e99;
|
||||||
|
}
|
||||||
|
tr:hover {
|
||||||
|
background: #ffffff99;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
</style>
|
264
src/components/Tab.vue
Normal file
|
@ -0,0 +1,264 @@
|
||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<Heading :title="entry.artist" :message="entry.title" />
|
||||||
|
<img id="tab" v-if="entry[instrument]" :src="loadImage()" ref="tab" />
|
||||||
|
<div id="notabs" v-if="!entry[instrument]">
|
||||||
|
<span>sorry, no tabs available</span>
|
||||||
|
</div>
|
||||||
|
<div id="controls" ref="controls">
|
||||||
|
<button class="controls-button" v-on:click="toggleScroll()">
|
||||||
|
<i
|
||||||
|
v-bind:class="{
|
||||||
|
'ri-play-fill': !scrolling,
|
||||||
|
'ri-stop-fill': scrolling,
|
||||||
|
}"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Heading from "@/components/Heading.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Tab",
|
||||||
|
components: {
|
||||||
|
Heading,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrolling: false,
|
||||||
|
entry: this.$route.query,
|
||||||
|
instrument: "bass",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadImage() {
|
||||||
|
if (!this.entry[this.instrument]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return require("@/assets/img/" + this.entry[this.instrument]);
|
||||||
|
},
|
||||||
|
sleep(ms) {
|
||||||
|
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||||
|
},
|
||||||
|
async toggleScroll() {
|
||||||
|
this.scrolling = !this.scrolling;
|
||||||
|
var pageEnd = document.documentElement.scrollHeight;
|
||||||
|
var pageLeft = pageEnd - this.getViewPortMax();
|
||||||
|
|
||||||
|
var percentagePageLeft = pageLeft / (pageEnd / 100);
|
||||||
|
var percentageDurationLeft = ((this.entry.duration * 1000) / 100) * percentagePageLeft;
|
||||||
|
|
||||||
|
console.log("DURATION LEFT " + this.entry.duration * (percentagePageLeft / 100))
|
||||||
|
|
||||||
|
var sleep = 10;
|
||||||
|
var sleeps = percentageDurationLeft / sleep;
|
||||||
|
|
||||||
|
var scrollHeight = pageLeft / sleeps;
|
||||||
|
var heightDiff = 1 - scrollHeight;
|
||||||
|
if (heightDiff >= 0) {
|
||||||
|
scrollHeight = 1;
|
||||||
|
console.log("FIX HEIGHT BY: " + heightDiff)
|
||||||
|
sleep = sleep * (1 + heightDiff);
|
||||||
|
console.log("NEW SLEEP: " + sleep)
|
||||||
|
}
|
||||||
|
|
||||||
|
var scrolls = 0;
|
||||||
|
var start = new Date();
|
||||||
|
while (this.scrolling) {
|
||||||
|
var scrollTarget = this.getViewPortMax() + scrollHeight;
|
||||||
|
if (scrollTarget >= pageEnd) {
|
||||||
|
window.scrollTo(0, pageEnd);
|
||||||
|
this.scrolling = false;
|
||||||
|
var time = new Date().getTime() - start.getTime();
|
||||||
|
console.log(
|
||||||
|
"end of page reached after " +
|
||||||
|
time +
|
||||||
|
"ms - scrolls: " +
|
||||||
|
scrolls +
|
||||||
|
" times"
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
scrolls++;
|
||||||
|
window.scrollBy(0, scrollHeight);
|
||||||
|
await this.sleep(sleep);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrolling = false;
|
||||||
|
return;
|
||||||
|
|
||||||
|
var viewPortPercent = window.innerHeight / 100;
|
||||||
|
console.log("SCROLL PERCENT: " + viewPortPercent);
|
||||||
|
|
||||||
|
var percentagePageLeft = pageLeft / (pageEnd / 100);
|
||||||
|
console.log("percentage to scroll: " + percentagePageLeft + "%");
|
||||||
|
|
||||||
|
var scrollsNeeded = pageLeft / viewPortPercent;
|
||||||
|
console.log("SCROLLS NEEDED: " + scrollsNeeded);
|
||||||
|
|
||||||
|
var sleep = (this.entry.duration * 1000) / scrollsNeeded;
|
||||||
|
console.log("SLEEP PER SCROLL: " + sleep + "ms");
|
||||||
|
|
||||||
|
// var durationLeft =
|
||||||
|
// ((this.entry.duration * 1000) / 1000) * percentagePageLeft;
|
||||||
|
// console.log("duration left: " + durationLeft + "ms");
|
||||||
|
|
||||||
|
// var scrollPercentage = this.getViewPortMax() / 1000;
|
||||||
|
// console.log("SCROLL BY: " + scrollPercentage);
|
||||||
|
|
||||||
|
// var scrollsNeeded = pageLeft / scrollPercentage;
|
||||||
|
// console.log("1% scrolls: " + scrollsNeeded);
|
||||||
|
|
||||||
|
// var sleep = durationLeft / scrollsNeeded;
|
||||||
|
// console.log("SLEEP:" + sleep);
|
||||||
|
|
||||||
|
// console.log("TOTAL TIME: " + sleep * scrollsNeeded);
|
||||||
|
|
||||||
|
var scrolls = 0;
|
||||||
|
var start = new Date();
|
||||||
|
while (this.scrolling) {
|
||||||
|
var innerstart = new Date();
|
||||||
|
var scrollTarget = this.getViewPortMax() + viewPortPercent;
|
||||||
|
if (scrollTarget >= pageEnd) {
|
||||||
|
window.scrollTo(0, pageEnd);
|
||||||
|
this.scrolling = false;
|
||||||
|
var time = new Date().getTime() - start.getTime();
|
||||||
|
console.log(
|
||||||
|
"end of page reached after " +
|
||||||
|
time +
|
||||||
|
"ms - scrolls: " +
|
||||||
|
scrolls +
|
||||||
|
" times" +
|
||||||
|
" - DIFFERENCE: "
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
scrolls++;
|
||||||
|
window.scrollBy(0, viewPortPercent);
|
||||||
|
await this.sleep(sleep);
|
||||||
|
}
|
||||||
|
// window.scrollBy(0, scrollPercentage);
|
||||||
|
// await this.sleep(sleep);
|
||||||
|
// if (scrolls >= scrollsNeeded) {
|
||||||
|
// var time = new Date().getTime() - start.getTime();
|
||||||
|
// console.log(
|
||||||
|
// "end of page reached after " +
|
||||||
|
// time +
|
||||||
|
// "ms - scrolls: " +
|
||||||
|
// scrolls +
|
||||||
|
// " times" +
|
||||||
|
// " - DIFFERENCE: " +
|
||||||
|
// (time - durationLeft)
|
||||||
|
// );
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
getViewPortMax() {
|
||||||
|
return window.innerHeight + window.scrollY;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#tab {
|
||||||
|
height: auto;
|
||||||
|
width: 85%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 5%;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
#notabs {
|
||||||
|
margin: 5%;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
#controls {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
background: #3e3e3e99;
|
||||||
|
color: #ff8800;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: #ff880099;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: transform 2s;
|
||||||
|
}
|
||||||
|
.fade-enter,
|
||||||
|
.fade-leave-to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
.controls-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 6px;
|
||||||
|
background: #00000000;
|
||||||
|
color: #ff8800;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 900;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-button:hover {
|
||||||
|
border: none;
|
||||||
|
background: #3e3e3e99;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background: #008800;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blink {
|
||||||
|
animation-name: blink;
|
||||||
|
animation-duration: 5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-active {
|
||||||
|
-webkit-transform: scale(2);
|
||||||
|
-moz-transform: scale(2);
|
||||||
|
-o-transform: scale(2);
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-inactive {
|
||||||
|
-webkit-transition: -webkit-transform 0.2s ease-out;
|
||||||
|
-moz-transition: -moz-transform 0.2s ease-out;
|
||||||
|
-o-transition: -o-transform 0.2s ease-out;
|
||||||
|
-ms-transition: -ms-transform 0.2s ease-out;
|
||||||
|
transition: transform 0.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-button {
|
||||||
|
background-color: #4caf50; /* Green */
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
19
src/config.json
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"tabfiles": [
|
||||||
|
"Electric Wizard - Funeralopolis.json"
|
||||||
|
],
|
||||||
|
"tabs": [
|
||||||
|
{
|
||||||
|
"artist": "Electric Wizard",
|
||||||
|
"title": "Funeralopolis",
|
||||||
|
"instrument": "bass",
|
||||||
|
"tabs": "Electric Wizard - Funeralopolis_inverted.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"artist": "Fu Manchu",
|
||||||
|
"title": "Hell On Wheels",
|
||||||
|
"instrument": "bass",
|
||||||
|
"tabs": "Fu Manchu - Hell On Wheels.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
11
src/main.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router/router.js'
|
||||||
|
import '../node_modules/remixicon/fonts/remixicon.css'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
router,
|
||||||
|
render: h => h(App),
|
||||||
|
}).$mount('#app')
|
19
src/router/router.js
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import VueRouter from 'vue-router';
|
||||||
|
import List from '@/components/List.vue'
|
||||||
|
import Tab from '@/components/Tab.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ path: '/', name: 'List', component: List },
|
||||||
|
{ path: '/:id', name: 'Tab', component: Tab }
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router;
|
3
vue.config.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
runtimeCompiler: true
|
||||||
|
}
|