120 lines
4.7 KiB
HTML
120 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex">
|
|
<link rel="icon" type="image/png" href="assets/favicon.ico">
|
|
<title>Homer</title>
|
|
<link defer rel="stylesheet" href="vendors/font-awesone.min.css">
|
|
<link defer rel="stylesheet" href="vendors/bulma.min.css">
|
|
<link rel="stylesheet" href="app.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light', !config.footer ? 'no-footer': '']">
|
|
<div id="bighead">
|
|
<section class="first-line">
|
|
<div v-cloak class="container">
|
|
<div class="logo">
|
|
<img v-if="config.logo" :src="config.logo" />
|
|
<i v-if="config.icon" :class="config.icon"></i>
|
|
</div>
|
|
<div class="dashboard-title">
|
|
<span class="headline">{{ config.subtitle }}</span>
|
|
<h1>{{ config.title }}</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div v-cloak v-if="config.links" class="container-fluid">
|
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
|
<div class="container">
|
|
<div class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target">
|
|
<i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
|
|
{{ link.name }}
|
|
</a>
|
|
</div>
|
|
<div class="end">
|
|
<a
|
|
v-on:click="toggleTheme()"
|
|
aria-label="Toggle dark mode"
|
|
><i class="fas fa-adjust"></i>
|
|
</a>
|
|
<a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
|
|
:class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
|
|
<div class="search-bar">
|
|
<label for="search" class="search-label"></label>
|
|
<input type="text" id="search" v-model="filter" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="main-section" class="section">
|
|
<div v-cloak class="container">
|
|
<div v-if="offline" class="offline-message">
|
|
<i class="far fa-dizzy"></i>
|
|
<h1>You're offline bro. <i class="fas fa-redo-alt" v-on:click="checkOffline()"></i></h1>
|
|
</div>
|
|
<div v-else>
|
|
<!-- Optional messages -->
|
|
<article v-if="config && config.message" class="message" :class="config.message.style">
|
|
<div v-if="config.message.title" class="message-header">
|
|
<p>{{ config.message.title }}</p>
|
|
</div>
|
|
<div v-if="config.message.content" class="message-body">
|
|
{{ config.message.content }}
|
|
</div>
|
|
</article>
|
|
|
|
<h2 v-if="filter"><i class="fas fa-search"></i> Search</h2>
|
|
|
|
<!-- Horizontal layout -->
|
|
<div v-if="!vlayout || filter" class="columns is-multiline">
|
|
<template v-for="(group, index) in config.services">
|
|
<h2 v-if="!filter && group.name" class="column is-full"><i v-if="group.icon" :class="group.icon"></i><span
|
|
v-else>#</span>
|
|
{{ group.name }}</h2>
|
|
<service v-for="item in group.items" v-bind:item="item" class="column is-one-third-widescreen"
|
|
v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))">
|
|
</service>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Vertical layout -->
|
|
<div v-if="!filter && vlayout" class="columns is-multiline layout-vertical">
|
|
<div class="column is-one-third-widescreen" v-for="(group, index) in config.services">
|
|
<h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
|
|
{{ group.name }}</h2>
|
|
<service v-for="item in group.items" v-bind:item="item"
|
|
v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))">
|
|
</service>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="content has-text-centered" v-if="config.footer" v-html="config.footer">
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="vendors/vue.min.js"></script>
|
|
<script src="vendors/js-yaml.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html>
|