]>
Commit | Line | Data |
---|---|---|
1 | <!DOCTYPE html> | |
2 | <html> | |
3 | ||
4 | <head> | |
5 | <meta charset="utf-8"> | |
6 | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
7 | <meta name="robots" content="noindex"> | |
8 | <link rel="icon" type="image/png" href="assets/favicon.png"> | |
9 | <title>Homer</title> | |
10 | <link defer rel="stylesheet" href="vendors/font-awesone.min.css"> | |
11 | <link defer rel="stylesheet" href="vendors/bulma.min.css"> | |
12 | <link rel="stylesheet" href="app.css"> | |
13 | </head> | |
14 | ||
15 | <body> | |
16 | <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light', !config.footer ? 'no-footer': '']"> | |
17 | <div id="bighead"> | |
18 | <section class="first-line"> | |
19 | <div v-cloak class="container"> | |
20 | <div class="logo"> | |
21 | <img v-if="config.logo" :src="config.logo" /> | |
22 | <i v-if="config.icon" :class="config.icon"></i> | |
23 | </div> | |
24 | <div class="dashboard-title"> | |
25 | <span class="headline">{{ config.subtitle }}</span> | |
26 | <h1>{{ config.title }}</h1> | |
27 | </div> | |
28 | </div> | |
29 | </section> | |
30 | <div v-cloak v-if="config.links" class="container-fluid"> | |
31 | <nav class="navbar" role="navigation" aria-label="main navigation"> | |
32 | <div class="container"> | |
33 | <div class="navbar-brand"> | |
34 | <a role="button" | |
35 | class="navbar-burger" :class="{ 'is-active': showMenu }" | |
36 | aria-label="menu" aria-expanded="false" | |
37 | v-on:click="toggleMenu()"> | |
38 | <span aria-hidden="true"></span> | |
39 | <span aria-hidden="true"></span> | |
40 | <span aria-hidden="true"></span> | |
41 | </a> | |
42 | </div> | |
43 | <div class="navbar-menu" :class="{ 'is-active': showMenu }"> | |
44 | <div class="navbar-start"> | |
45 | <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target"> | |
46 | <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i> | |
47 | {{ link.name }} | |
48 | </a> | |
49 | </div> | |
50 | <div class="navbar-end"> | |
51 | <div class="navbar-item"> | |
52 | <a | |
53 | v-on:click="toggleTheme()" | |
54 | aria-label="Toggle dark mode" | |
55 | class="icon-button" | |
56 | ><i class="fas fa-adjust"></i> | |
57 | </a> | |
58 | <a v-on:click="toggleLayout()" class="icon-button"><i | |
59 | :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> | |
60 | <div class="search-bar"> | |
61 | <label for="search" class="search-label"></label> | |
62 | <input type="text" id="search" ref="search" v-model="filter" | |
63 | v-on:keyup.enter.exact="navigateToFirstService()" | |
64 | v-on:keyup.alt.enter="navigateToFirstService('_blank')" /> | |
65 | </div> | |
66 | </div> | |
67 | </div> | |
68 | </div> | |
69 | </div> | |
70 | </nav> | |
71 | </div> | |
72 | </div> | |
73 | ||
74 | <section id="main-section" class="section"> | |
75 | <div v-cloak class="container"> | |
76 | <div v-if="offline" class="offline-message"> | |
77 | <i class="far fa-dizzy"></i> | |
78 | <h1>You're offline bro. <i class="fas fa-redo-alt" v-on:click="checkOffline()"></i></h1> | |
79 | </div> | |
80 | <div v-else> | |
81 | <!-- Optional messages --> | |
82 | <article v-if="config && config.message" class="message" :class="config.message.style"> | |
83 | <div v-if="config.message.title" class="message-header"> | |
84 | <p>{{ config.message.title }}</p> | |
85 | </div> | |
86 | <div v-if="config.message.content" class="message-body"> | |
87 | {{ config.message.content }} | |
88 | </div> | |
89 | </article> | |
90 | ||
91 | <h2 v-if="filter"><i class="fas fa-search"></i> Search</h2> | |
92 | ||
93 | <!-- Horizontal layout --> | |
94 | <div v-if="!vlayout || filter" class="columns is-multiline"> | |
95 | <template v-for="(group, index) in config.services"> | |
96 | <h2 v-if="!filter && group.name" class="column is-full"><i v-if="group.icon" :class="group.icon"></i><span | |
97 | v-else>#</span> | |
98 | {{ group.name }}</h2> | |
99 | <service v-for="item in group.items" v-bind:item="item" class="column is-one-third-widescreen" | |
100 | v-if="!filter || (item && matchesFilter(item))"> | |
101 | </service> | |
102 | </template> | |
103 | </div> | |
104 | ||
105 | <!-- Vertical layout --> | |
106 | <div v-if="!filter && vlayout" class="columns is-multiline layout-vertical"> | |
107 | <div class="column is-one-third-widescreen" v-for="(group, index) in config.services"> | |
108 | <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span> | |
109 | {{ group.name }}</h2> | |
110 | <service v-for="item in group.items" v-bind:item="item" | |
111 | v-if="!filter || (item && matchesFilter(item))"> | |
112 | </service> | |
113 | </div> | |
114 | </div> | |
115 | ||
116 | ||
117 | </div> | |
118 | </div> | |
119 | </section> | |
120 | <footer class="footer"> | |
121 | <div class="container"> | |
122 | <div class="content has-text-centered" v-if="config.footer" v-html="config.footer"> | |
123 | ||
124 | </div> | |
125 | </div> | |
126 | </footer> | |
127 | </div> | |
128 | ||
129 | <script src="vendors/vue.min.js"></script> | |
130 | <script src="vendors/js-yaml.min.js"></script> | |
131 | <script src="app.js"></script> | |
132 | </body> | |
133 | ||
134 | </html> |