58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div id="app">
|
||
|
|
<h2 class="subtitle">
|
||
|
|
Second attempt at building a web interface for ESP8266
|
||
|
|
</h2>
|
||
|
|
<sequencer></sequencer>
|
||
|
|
<sequencer></sequencer>
|
||
|
|
<sequencer></sequencer>
|
||
|
|
<sequencer></sequencer>
|
||
|
|
<div class="icon-wrapper">
|
||
|
|
<div class="icon-button">
|
||
|
|
<img style="margin:auto;" src="~/assets/img/barrier.png">
|
||
|
|
</div>
|
||
|
|
<div class="icon-button">
|
||
|
|
<img style="margin:auto;" src="~/assets/img/pixel.png">
|
||
|
|
</div>
|
||
|
|
<div class="icon-button">
|
||
|
|
<img style="margin:auto;" src="~/assets/img/squares.png">
|
||
|
|
</div>
|
||
|
|
<div class="icon-button">
|
||
|
|
<img style="margin:auto;" src="~/assets/img/bell.png">
|
||
|
|
</div>
|
||
|
|
<div class="icon-button">
|
||
|
|
<img style="margin:auto;" src="~/assets/img/add.png">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import sequencer from '~/components/sequencer.vue'
|
||
|
|
import sequencerDivided from '~/components/sequencerDivided.vue'
|
||
|
|
import beatMenu from '~/components/beatMenu.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
sequencer,
|
||
|
|
sequencerDivided,
|
||
|
|
beatMenu
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.icon-button{
|
||
|
|
display:flex;
|
||
|
|
background-color:red;
|
||
|
|
width:3em;
|
||
|
|
height:3em;
|
||
|
|
border-radius:3em;
|
||
|
|
margin:0.2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-wrapper{
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
</style>
|