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