-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (142 loc) · 7.11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<link href="./styles.css" rel="stylesheet">
<title>Emote Viewer</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app" class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header style="-webkit-app-region: drag" class="mdl-button--indigo demo-header mdl-layout__header mdl-color-text--white">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><img class="logo"
src="https://cdn.betterttv.net/emote/566c9fde65dbbdab32ec053e/3x" alt="" srcset=""> Emote Viewer</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" v-on:keyup.enter="onSearch" v-model="search" type="text" id="search">
<label class="mdl-textfield__label" for="search">XQC...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">About</li>
<li class="mdl-menu__item">Contact</li>
<li class="mdl-menu__item">Legal information</li>
</ul>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a @click="tab = 'emotes'" class="mdl-layout__tab" v-bind:class="{ 'is-active': tab == 'emotes' }">Emotes</a>
<a @click="tab = 'badges'" class="mdl-layout__tab" v-bind:class="{ 'is-active': tab == 'badges' }">Badges</a>
</div>
</header>
<main v-if="!errored" class="mdl-layout__content mdl-color--grey-100">
<template v-if="tab=='emotes'">
<h1>{{channel}}</h1>
<template v-if="subTiers.length">
<h2>Emotes de suscriptor</h2>
<template v-if="subTiers[0].emotes.length">
<h4>Tier 1 - "{{subTiers[0].name}}"</h4>
<div class="mdl-grid">
<a target="__blank" :href="'https://emotes.raccatta.cc/twitch/emote/'+emote.id"
v-for="emote in subTiers[0].emotes" class=" mdl-shadow--2dp emote-container">
<img :src="'https://static-cdn.jtvnw.net/emoticons/v2/'+ emote.id +'/default/dark/3.0'" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!subTiers[0].emotes.length">Este canal no tiene emotes de tier 1</div>
</div>
</template>
<template v-if="subTiers[1].emotes.length">
<h4>Tier 2 - "{{subTiers[1].name}}"</h4>
<div class="mdl-grid">
<a target="__blank" :href="'https://emotes.raccatta.cc/twitch/emote/'+emote.id"
v-for="emote in subTiers[1].emotes" class=" mdl-shadow--2dp emote-container">
<img :src="'https://static-cdn.jtvnw.net/emoticons/v2/'+ emote.id +'/default/dark/3.0'" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!subTiers[1].emotes.length">Este canal no tiene emotes de tier 2</div>
</div>
</template>
<template v-if="subTiers[2].emotes.length">
<h4>Tier 3 - "{{subTiers[2].name}}"</h4>
<div class="mdl-grid">
<a target="__blank" :href="'https://emotes.raccatta.cc/twitch/emote/'+emote.id"
v-for="emote in subTiers[2].emotes" class=" mdl-shadow--2dp emote-container">
<img :src="'https://static-cdn.jtvnw.net/emoticons/v2/'+ emote.id +'/default/dark/3.0'" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!subTiers[2].emotes.length">Este canal no tiene emotes de tier 3</div>
</div>
</template>
</template>
<h2>Better TTV</h2>
<div class="mdl-grid">
<a target="__blank" :href="'https://betterttv.com/emotes/'+emote.id" v-for="emote in bttv"
class=" mdl-shadow--2dp emote-container">
<img :src="emote.img" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!bttv.length">Este canal no tiene emotes de BetterTTV o no cargaron correctamente</div>
</div>
<h2>Franker Face Z</h2>
<div class="mdl-grid">
<a target="__blank" :href="'https://www.frankerfacez.com/emoticon/'+emote.id+'-'" v-for="emote in ffz"
class=" mdl-shadow--2dp emote-container">
<img :src="emote.img" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!ffz.length">Este canal no tiene emotes de Franker Face Z o no cargaron correctamente</div>
</div>
<h2>Better TTV</h2>
<div class="mdl-grid">
<a target="__blank" :href="'https://betterttv.com/emotes/'+emote.id" v-for="emote in bttv"
class=" mdl-shadow--2dp emote-container">
<img :src="emote.img" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!bttv.length">Este canal no tiene emotes de BetterTTV o no cargaron correctamente</div>
</div>
<h2>7tv</h2>
<div class="mdl-grid">
<a target="__blank" :href="'https://7tv.app/emotes/'+emote.id" v-for="emote in seventv"
class=" mdl-shadow--2dp emote-container">
<img :src="emote.img" alt="" srcset="">
<span class="emote-name">{{emote.name}}</span>
</a>
<div v-if="!seventv.length">Este canal no tiene emotes de 7 TV o no cargaron correctamente</div>
</div>
</template>
<template v-if="tab=='badges'">
<h1>{{channel}}</h1>
<h2>Emblemas</h2>
<div class="mdl-grid">
<a target="__blank" :href="'https://twitchemotes.com/channels/'+channelID" v-for="badge in badges"
class=" mdl-shadow--2dp emote-container">
<img :src="badge.image_url_4x" alt="" srcset="">
<span class="emote-name">{{badge.description}}</span>
</a>
<div v-if="!badges.length">Este canal no tiene emblemas de suscriptor</div>
</div>
</template>
</template>
</main>
<main v-if="errored" class="mdl-layout__content mdl-color--grey-100">
<h1>No se a encontrado el canal "{{channel}}", comprueba si está bien escrito</h1>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>