mirror of
https://github.com/Luzifer/twitch-manager.git
synced 2024-09-19 19:02:57 +00:00
74 lines
2.7 KiB
HTML
74 lines
2.7 KiB
HTML
<html>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch&family=Neucha&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap@4/dist/css/bootstrap.min.css,npm/bootstrap-vue@2/dist/bootstrap-vue.min.css,npm/bootswatch@4/dist/sketchy/bootstrap.min.css">
|
|
|
|
<style>
|
|
body, html, #app {
|
|
background: transparent;
|
|
}
|
|
.bg-primary {
|
|
background-color: rgba(51, 51, 51, .8) !important;
|
|
}
|
|
.clock {
|
|
width: 50px;
|
|
}
|
|
</style>
|
|
|
|
<div id="app">
|
|
<b-container fluid>
|
|
|
|
<b-navbar
|
|
fixed="bottom"
|
|
type="dark"
|
|
variant="primary"
|
|
>
|
|
<!-- Channel Brand -->
|
|
<b-navbar-brand href="#"><i class="fab fa-twitch"></i> Luziferus</b-navbar-brand>
|
|
|
|
<!-- Left aligned nav items -->
|
|
<b-navbar-nav>
|
|
<!-- Followers -->
|
|
<b-nav-text class="mx-2" v-if="store.followers && store.followers.count">
|
|
<i class="fas fa-users"></i> {{ store.followers.count }} / {{ nextFollowers }}
|
|
</b-nav-text>
|
|
<b-nav-text class="mx-2" v-if="store.followers && store.followers.last">
|
|
<i class="fad fa-user"></i> {{ store.followers.last }}
|
|
</b-nav-text>
|
|
|
|
<!-- Subs -->
|
|
<b-nav-text class="mx-2" v-if="store.subs && store.subs.count">
|
|
<i class="fas fa-users-crown"></i> {{ store.subs.count }} / {{ nextSubs }}
|
|
</b-nav-text>
|
|
<b-nav-text class="mx-2" v-if="store.subs && store.subs.last">
|
|
<i class="fad fa-user-crown"></i> {{ store.subs.last }} <span v-if="store.subs.lastDuration > 1">(x{{ store.subs.lastDuration }})<span>
|
|
</b-nav-text>
|
|
|
|
<!-- Donations -->
|
|
<b-nav-text class="mx-2" v-if="store.donation && store.donation.last_donator">
|
|
<i class="fas fa-donate"></i> {{ store.donation.last_donator }}: {{ store.donation.last_amount.toFixed(2) }} €
|
|
</b-nav-text>
|
|
</b-navbar-nav>
|
|
|
|
<!-- Right aligned nav items -->
|
|
<b-navbar-nav class="ml-auto">
|
|
<!-- Icons -->
|
|
<b-nav-text>
|
|
<i :class="[ icon.class, 'ml-2' ].join(' ')" v-for="icon in icons" :key="icon.class"></i>​
|
|
</b-nav-text>
|
|
|
|
<!-- Clock -->
|
|
<b-nav-text class="ml-2 clock text-center">{{ clock }}</b-nav-text>
|
|
</b-navbar-nav>
|
|
</b-navbar>
|
|
|
|
</b-container>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/combine/npm/vue@2,npm/bootstrap-vue@2/dist/bootstrap-vue.min.js,npm/moment@2"></script>
|
|
<script src="https://kit.fontawesome.com/0caf4eb225.js" crossorigin="anonymous"></script>
|
|
|
|
<script src="app.js"></script>
|
|
|
|
</html>
|