SEChatToSlime/index.html at main · SocksTheWolf/SEChatToSlime · GitHub

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
<!DOCTYPE html>
<html>

<head>
  <title>StreamElements Chat Widget Converter</title>
  <meta name="author" content="SocksTheWolf" />
  <meta name="description" content="A StreamElements chat widget converter script for streamers!" />
  <meta name="keywords" content="streamelements, slime2, chat widget, widget, chat, twitch, twitch chat, obs overlay" />
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <!-- Application Requirements and code -->
  <script src="jszip.min.js"></script>
  <script src="FileSaver.js"></script>
  <script src="sebridge.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <link href="style.css" rel="stylesheet" />
</head>

<body>
  <header>
    <h2>StreamElements Chat Widget Converter</h2>
    <span class="whisper credit">By <a href="https://socksthewolf.com">SocksTheWolf</a> - <a
        href="https://twitch.tv/socksthewolf">Twitch</a> -
      <a href="https://github.com/SocksTheWolf/SEChatToSlime">GitHub Project</a> - <a
        href="https://bsky.app/profile/socksthewolf.com">Found a bug? Send me a message!</a></a></span>
    <br />
    <a href='https://ko-fi.com/R6R7U22JM' target='_blank'>
      <img height='36' style='padding-left:40px;border:0px;height:36px;'
        src='https://storage.ko-fi.com/cdn/kofi5.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
  </header>
  <main>
    <article>
      <section>
        <!-- Introduction -->
        <div id="intro">
          <p>Use the steps below and you'll be able to have your custom StreamElements Chat Widget work with a
            <a href="https://slime2.stream/" target="_blank" class="secondary">slime2 instance</a> instead! No more
            StreamElements requirements!!<br />
            Everything on this site is processed locally on your computer, for safety!
          </p>
          <p>If you need help, <a href="https://youtu.be/FTSqXM53kjM" target="_blank">a video tutorial is provided
            here</a>!</p>
          <small class="whisper"><b class="bigtag">note</b>Usage of this tool may potentially conflict with widgets purchased under <code>no modification</code> licenses.
            The output this tool provides updates the files with your settings and wraps them in an emulation layer to act like StreamElements.<br />
            If you are unsure if this affects you, please consult your licenses/creator.</small>
        </div>
        <hr />
        <!-- Steps -->
        <ol>
          <li>Go into StreamElements dashboard and download the "Data", "CSS", "JS" and "HTML" sections via the widget
            editor for your chat widget.
            Save each file with their appropriate file extension!<br />
            <sub><b class="bigtag">note</b>The Data section can be saved as anything, everything else is their section
              names in lowercase
              (ex: code in the CSS section would be saved as <code>.css</code>).</sub>
          </li><br />
          <li>Take the file you made from the DATA section and
            <button for="settings" id="settingsBtn" class="btn outline"
              onclick="document.getElementById('settings').click();">Upload the settings here</button>
          </li><br />
          <li>Upload the files from the HTML, CSS, and JS sections
            <button for="files" disabled="true" id="filesBtn" class="btn outline"
              onclick="document.getElementById('files').click();">Input Widget Files here</button>
          </li><br />
          <li>Wait until this download button becomes clickable, and then click it! <br /><button id="blob"
              disabled="true">Download converted widget files</button></li><br />
          <li>You can now unzip the output file and use it as an <a
              href="https://forums.slime2.stream/resources/widget-setup.3/">OBS browser source</a>!!<br />
            <sub><b class="bigtag">note</b>You will need a <a href="https://slime2.stream/account"
                target="_blank">slime2 account key from here</a>!</sub>
          </li>
        </ol>

        <!-- Runtime logging section -->
        <div id="output">
          <hr />
          <h4>Processing Log</h4>
          <div id="log"></div>
        </div>

        <!-- Input and scripts -->
        <input type="file" id="settings" accept="text/*" autocomplete="off" />
        <input type="file" id="files" multiple accept=".css,.js,.html,.htm" autocomplete="off" />
        <script type="application/javascript" src="convert.js"></script>
      </section>
    </article>
  </main>
</body>

</html>