]>
Commit | Line | Data |
---|---|---|
09763dbf BW |
1 | <!DOCTYPE html> |
2 | <html> | |
e41196e7 | 3 | |
09763dbf BW |
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> | |
9baec9ae BW |
10 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" |
11 | integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> | |
e41196e7 | 12 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"> |
09763dbf BW |
13 | <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet"> |
14 | <link rel="stylesheet" href="app.css"> | |
15 | </head> | |
e41196e7 | 16 | |
09763dbf | 17 | <body> |
e41196e7 BW |
18 | <div id="app" v-if="config"> |
19 | <div id="bighead"> | |
20 | <section class="first-line"> | |
9baec9ae | 21 | <div v-cloak class="container"> |
e41196e7 BW |
22 | <div class="logo"> |
23 | <img v-if="config.logo" :src="config.logo" /> | |
24 | <i v-if="config.icon" :class="config.icon"></i> | |
25 | </div> | |
26 | <div class="dashboard-title"> | |
9baec9ae BW |
27 | <span class="headline">{{ config.subtitle }}</span> |
28 | <h1>{{ config.title }}</h1> | |
e41196e7 BW |
29 | </div> |
30 | </div> | |
31 | </section> | |
9baec9ae | 32 | <div v-cloak v-if="config.links" class="container-fluid"> |
e41196e7 BW |
33 | <nav class="navbar" role="navigation" aria-label="main navigation"> |
34 | <div class="container"> | |
35 | <div class="navbar-menu"> | |
36 | <div class="navbar-start"> | |
37 | <a v-for="link in config.links" class="navbar-item" :href="link.url"> | |
38 | <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i> | |
39 | {{ link.name }} | |
40 | </a> | |
41 | </div> | |
42 | <div class="end"> | |
43 | <div class="search-bar"> | |
44 | <label for="search" class="search-label"></label> | |
45 | <input type="text" id="search" v-model="filter" /> | |
46 | </div> | |
09763dbf BW |
47 | </div> |
48 | </div> | |
49 | </div> | |
e41196e7 BW |
50 | </nav> |
51 | </div> | |
09763dbf | 52 | </div> |
09763dbf | 53 | |
e41196e7 | 54 | <section id="main-section" class="section"> |
9baec9ae BW |
55 | <div v-cloak class="container"> |
56 | <div v-if="offline" class="offline-message"> | |
57 | <i class="far fa-dizzy"></i> | |
58 | <h1>You're offline bro. <i class="fas fa-redo-alt" v-on:click="checkOffline()"></i></h1> | |
59 | </div> | |
60 | <div v-else> | |
61 | <!-- Optional messages --> | |
62 | <article v-if="config && config.message" class="message" :class="config.message.style"> | |
63 | <div v-if="config.message.title" class="message-header"> | |
64 | <p>{{ config.message.title }}</p> | |
65 | </div> | |
66 | <div v-if="config.message.content" class="message-body"> | |
67 | {{ config.message.content }} | |
68 | </div> | |
69 | </article> | |
09763dbf | 70 | |
9baec9ae | 71 | <h2 v-if="filter"><i class="fas fa-search"></i> Search</h2> |
09763dbf | 72 | |
9baec9ae BW |
73 | <div v-for="(group, index) in config.services"> |
74 | <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span> | |
75 | {{ group.name }}</h2> | |
76 | <div class="columns is-multiline"> | |
77 | <div v-for="item in group.items" | |
78 | v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))" | |
79 | class="column is-one-third-widescreen"> | |
80 | <div v-if='item' class="card"> | |
81 | <a :href="item.url"> | |
82 | <div class="card-content"> | |
83 | <div class="media"> | |
84 | <div v-if="item.logo" class="media-left"> | |
85 | <figure class="image is-48x48"> | |
86 | <img :src="item.logo" /> | |
87 | </figure> | |
88 | </div> | |
89 | <div v-if="item.icon" class="media-left"> | |
90 | <figure class="image is-48x48"> | |
91 | <i style="font-size: 35px" :class="item.icon"></i> | |
92 | </figure> | |
93 | </div> | |
94 | <div class="media-content"> | |
95 | <p class="title is-4">{{ item.name }}</p> | |
96 | <p class="subtitle is-6">{{ item.subtitle }}</p> | |
09763dbf BW |
97 | </div> |
98 | </div> | |
9baec9ae BW |
99 | <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong> |
100 | </div> | |
101 | </a> | |
09763dbf BW |
102 | </div> |
103 | </div> | |
104 | </div> | |
105 | </div> | |
106 | </div> | |
107 | </div> | |
e41196e7 BW |
108 | </section> |
109 | </div> | |
09763dbf | 110 | |
e41196e7 BW |
111 | <footer class="footer"> |
112 | <div class="container"> | |
113 | <div class="content has-text-centered"> | |
9baec9ae BW |
114 | <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a |
115 | href="https://vuejs.org/">vuejs</a> | |
116 | & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i | |
117 | class="fab fa-github-alt"></i></a></p> | |
e41196e7 | 118 | </div> |
09763dbf | 119 | </div> |
e41196e7 | 120 | </footer> |
09763dbf | 121 | |
9baec9ae | 122 | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.min.js"></script> |
e41196e7 BW |
123 | <script src="vendors/js-yaml.min.js"></script> |
124 | <script src="app.js"></script> | |
09763dbf | 125 | </body> |
e41196e7 BW |
126 | |
127 | </html> |