-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (167 loc) · 10.3 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
<html lang="en" class="styleDarkTheme">
<!-- Project by QuentinPerou (twitch.tv/quentinperou) -->
<!-- Find code on GitHub : https://github.com/quentinperou/Twitch-HighlightedChat -->
<!-- This project was inspired by Ponce (twitch.tv/ponce)🌸 -->
<head>
<meta charset="UTF-8" />
<title translate="no">Twitch Highlighted Chat</title>
<meta name="description" content="See only the highlighted messages of your Twitch chat." />
<meta name="subject" content="Highlighted Chat for Twitch">
<meta name="language" content="EN">
<meta name="author" content="QuentinPerou">
<meta name="designer" content="QuentinPerou">
<meta name="keywords" content="twitch, chat, highlighted, highlightedchat, quentinperou" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="twitter:card" content="summary" />
<!-- <meta name="twitter:site" content="@quentinperou"/> -->
<meta name="twitter:creator" content="@quentinperou" />
<meta property="og:url" content="https://highlightedchat-lite.netlify.app" />
<meta property="og:title" content="Twitch Highlighted Chat" />
<meta property="og:description" content="A tool for Twitch streamers. This web page allows you to display only the highlighted messages of your Twitch chat." />
<meta property="og:image" content="https://highlightedchat-lite.netlify.app/preview.png">
<!-- <meta name="apple-mobile-web-app-title" content="Twitch Highlighted Chat" /> -->
<meta name="apple-mobile-web-app-status-bar-style" content="#39c0d2" />
<meta name="msapplication-TileColor" content="#39c0d2">
<meta name="theme-color" content="#39c0d2">
<!-- ICON DU SITE -->
<link rel="shortcut icon" href="favicon.jpg" type="image/x-icon" />
<link rel="icon" href="favicon.jpg" type="image/x-icon">
<!-- CSS -->
<link rel="stylesheet" href="style.min.css" type="text/css" />
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/comfy.js@latest/dist/comfy.min.js"></script>
<script src="script.min.js"></script>
</head>
<body>
<header class="flexRowBetween">
<div>
<!-- <p class="backToHome" style="cursor: pointer;" title="Back Home">Twitch Highlighted Chat</p> -->
<p>Dev by <a href="https://twitch.tv/quentinperou" target="_blank" rel="noreferrer">QuentinPerou</a> (FR)</p>
</div>
<div id="headerNav">
<div id="optionsDiv">
<div class="flexRow">
<div class="divSliderButton" hidden>
<label for="onlyHighlightedCheck">Only Highlighted</label>
<label class="switchButton">
<input id="onlyHighlightedCheck" type="checkbox" checked>
<span class="slider round onlyHighlightedCheck"></span>
<!-- <span class="switchLabel">Show only highlighted messages</span> -->
</label>
</div>
<div class="divSliderButton" hidden>
<label for="highlightedNotifSound">Sound notification</label>
<label class="switchButton">
<input id="highlightedNotifSound" type="checkbox">
<span class="slider round highlightedNotifSound"></span>
<span class="switchLabel">Sound notification for highlighted messages</span>
</label>
</div>
<div class="divSliderButton" hidden>
<label for="enableModCommand">Moderator command</label>
<label class="switchButton">
<input id="enableModCommand" type="checkbox" checked>
<span class="slider round enableModCommand"></span>
<span class="switchLabel">Enable moderator command "!hlt"</span>
</label>
</div>
<div class="divSliderButton" hidden>
<label for="mentionIsColorised">Colorize @mention</label>
<label class="switchButton">
<input id="mentionIsColorised" type="checkbox">
<span class="slider round mentionIsColorised"></span>
</label>
</div>
<div class="divSliderButton" hidden>
<label for="nameIsColorized">Colorize nickname</label>
<label class="switchButton">
<input id="nameIsColorized" type="checkbox">
<span class="slider round nameIsColorized"></span>
</label>
</div>
<div id="choiceTheme">
<span class="theme-title" for="theme">Theme : </span>
<label for="theme-dark" class="container">Dark
<input id="theme-dark" type="radio" name="theme" value="dark" checked>
<span class="checkmark"></span>
</label>
<label for="theme-original" class="container">Blue
<input id="theme-original" type="radio" name="theme" value="blue">
<span class="checkmark"></span>
</label>
</div>
<button id="clearCacheButton" class="buttonStyle warningButton" title="WARNING, this will delete all recorded messages" hidden>⚠ Clear cache</button>
<button id="backToHomeButton" class="buttonStyle" hidden>Back Home</button>
</div>
</div>
<div class="divConnect" hidden>
<!-- <p>Download your chat history <a id="download-history" href="" target="_blank" rel="noreferrer">here</a> and upload it below.</p> -->
<p>Download chat history as text <span style="text-decoration: underline; cursor: pointer;" id="download-history-txt">here</span> (.txt)</p>
<p>Download chat history as data <span style="text-decoration: underline; cursor: pointer;" id="download-history-json">here</span> (.json)</p>
<p>UPLOAD chat history (.json) <span style="text-decoration: underline; cursor: pointer;" id="upload-json">here</span></p>
<script src="download-history.js"></script>
<script src="upload-history.js"></script>
</div>
<div>
<p>Dev with ❤ by <a href="https://twitch.tv/quentinperou" target="_blank" rel="noreferrer" title="I'm not a graphic designer ^^ 
but... "Abonnez-vous" ❤">QuentinPerou</a> (FR) </p>
<p>Version: <a href="https://github.com/quentinperou/Twitch-HighlightedChat" target="_blank" rel="noreferrer">v2.5</a></p>
</div>
</div>
<div id="headerBurger" title="Toggle menu" class="displayOn">
<div></div>
<div></div>
<div></div>
</div>
</header>
<main>
<div class="mainContainer">
<div class="mainDiv divNotConnect">
<div class="homeNotCoContainer">
<div class="pageTitle">
<h1>Twitch Highlighted Chat</h1>
<!-- <span style="background-color: var(--main-bg-color1); color: var(--main-text-color2); font-weight: bold; padding: 2px 5px; border-radius: 5px; margin-left: 5px;">-lite</span> -->
</div>
<p>This web page allows you to display only the <span style="background-color: var(--main-highlight-color); padding: 2px 5px; border-radius: 5px;">highlighted messages</span> of your Twitch chat.</p>
<p style="margin-top: 0;">Build for streamers who are afraid of missing these kinds of messages.</p>
<p>Enter below the name of the channel from which you want to isolate the highlighted messages.</p>
<p style="margin-top: 0;">Press "GO" and keep this window open. </p>
<p style="line-height: 1.5;"><span style="background-color: var(--main-bg-color1); padding: 2px 5px; border-radius: 5px;">Moderators</span> can use command "<span style="background-color: var(--main-bg-color1); padding: 4px 7px; border-radius: 5px; white-space: nowrap;" translate="no">!hlt <MESSAGE></span>" to push their message on website.</p>
<div style="margin: 30px 0 20px 0;">
<input type="text" placeholder="EnterChannelName" title="Enter channel name here" id="notCoChannelInput" class="inputStyle" onkeyup="this.value = this.value.replace(/[^a-zA-Z0-9_]/, '')">
<input type="submit" value="GO" class="buttonStyle" id="notCoChannelInputSubmit" translate="no">
</div>
</div>
</div>
<div class="mainDiv divConnect" hidden>
<div id="hightlitedMessageChat">
<div class="titleChat">
<!-- <img id="channelProfilePicture" src="" alt="profile picture"> -->
<p></p>
</div>
<div class="chatMainContainer">
<div id="hightlitedMessageChatContainer" class="chatContainer">
<!-- suspense ;P -->
</div>
<div id="chatGoToBottom" hidden>
<p>Chat paused due to scroll.</p>
</div>
</div>
</div>
</div>
</div>
<div id="notifContainer"> </div>
<div id="popupDivContainer" hidden>
<div id="popupContainer">
<!-- -->
<div class="onePopup" id="clearCachePopup">
<p>Are you sure you want to clear the cache?</p>
<p>This will delete all saved messages, data and settings.</p>
<div><button class="warningButton" id="clearCachePopupDelete">Yes, delete</button><button id="clearCachePopupCancel">Cancel</button></div>
</div>
<!-- -->
</div>
</div>
</div>
</main>
</body>
</html>