<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="overlay.js"></script> </html>