1
0
Fork 0
mirror of https://github.com/haselkern/Minecraft-ArmorStand.git synced 2025-05-18 05:55:35 +00:00

Design beginnings

This commit is contained in:
Lars Martens 2020-12-12 21:17:42 +01:00
parent 5c5f34dc36
commit f2bf164431
10 changed files with 71 additions and 4 deletions

View file

@ -1,9 +1,50 @@
<template>
<h1>Hello Vue!</h1>
<div class="grid grid-cols-5 min-h-screen bg-gray-200">
<div class="col-span-3"></div>
<div class="col-span-2">
<card class="text-center">
<h1 class="text-2xl font-bold">Minecraft Armorstand</h1>
<a
title="Source Code"
href="https://github.com/haselkern/Minecraft-ArmorStand"
class="inline-flex items-center justify-center w-8 h-8 m-2 text-white bg-gray-700 rounded-lg">
<i class="fas fa-code"></i>
</a>
<a
title="Help"
href="https://haselkern.com/armorstand/"
class="inline-flex items-center justify-center w-8 h-8 m-2 text-white bg-gray-700 rounded-lg">
<i class="fas fa-question"></i>
</a>
</card>
<card>
<h1 class="text-xl">Pose</h1>
<table class="w-full">
<tr>
<td>Rotation</td>
<td colspan="3"><input v-model="rotation" class="w-full" type="range" min="0" max="360"></td>
</tr>
<tr>
<td>Head</td>
<td><input class="w-full" type="range" min="0" max="360"></td>
<td><input class="w-full" type="range" min="0" max="360"></td>
<td><input class="w-full" type="range" min="0" max="360"></td>
</tr>
</table>
</card>
</div>
</div>
</template>
<script>
export default {
import Card from "./components/Card";
export default {
components: {Card},
data() {
return {
rotation: 0,
};
},
}
</script>

5
src/components/Card.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="bg-white rounded-lg m-2 p-2 shadow">
<slot/>
</div>
</template>

View file

@ -1,5 +1,6 @@
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
createApp(App).mount("#app");