CatWebTools/bookmarks-gen.html at main · TRC-Loop/CatWebTools · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Bookmark Generator - CatWeb Tools</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="./static/images/favicon.ico" />
    <link rel="stylesheet" href="stylesheet.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <h1>Bookmark Generator</h1>
      <div class="description">
        Generate a custom bookmark URL for <code>bookmarks.rbx</code> integration.
      </div>
    </header>

    <main>
      <form id="bookmark-form" onsubmit="return false;">
        <div class="form-group">
          <label>
            Ref
            <span
              class="tooltip"
              data-tooltip="The internal name under which the bookmark is saved. Used for editing."
            ><i class="fas fa-question-circle"></i></span>
          </label>
          <input type="text" id="ref" required autocomplete="off" />
        </div>

        <div class="form-group">
          <label>
            Link
            <span
              class="tooltip"
              data-tooltip="The URL where the bookmark will point to."
            ><i class="fas fa-question-circle"></i></span>
          </label>
          <input type="text" id="link" required autocomplete="off" />
        </div>

        <div class="form-group">
          <label>
            Icon
            <span
              class="tooltip"
              data-tooltip="A Roblox Decal (Object) ID. Recommendation: Use your favicon."
            ><i class="fas fa-question-circle"></i></span>
            <a
              href="https://create.roblox.com/store/decals"
              target="_blank"
              rel="noopener noreferrer"
              class="icon-info-link"
            >Roblox Decals</a>
          </label>
          <input type="text" id="icon" required autocomplete="off" />
        </div>

        <div class="form-group">
          <label>
            Return
            <span
              class="tooltip"
              data-tooltip="Where to return the user after the bookmark is added."
            ><i class="fas fa-question-circle"></i></span>
          </label>
          <input type="text" id="return" required autocomplete="off" />
        </div>
      </form>
      <button id="add-demo-btn" type="button" style="margin-top: 10px;">
        Add Demo Data
      </button>

      <div class="output" id="output" style="display: none;">
        <code id="generated-code"></code>
      </div>

      <button class="copy-btn" id="copy-btn" title="Copy to clipboard">
        <i class="fas fa-copy"></i> Copy
      </button>
    </main>

    <footer>
      This site is open source. <a href="https://github.com/TRC-Loop/CatWebTools" target="_blank">Improve this page</a>. This page is not affiliated with Catweb. | Version: <script src="./static/version.js"></script> <a href="changelog" target="_blank"> View Changelog</a>.
    </footer>

    <script>
      const refInput = document.getElementById('ref');
      const linkInput = document.getElementById('link');
      const iconInput = document.getElementById('icon');
      const returnInput = document.getElementById('return');

      const output = document.getElementById('output');
      const generatedCode = document.getElementById('generated-code');
      const copyBtn = document.getElementById('copy-btn');

      function generateUrl() {
        const ref = encodeURIComponent(refInput.value.trim());
        const link = encodeURIComponent(linkInput.value.trim());
        const icon = encodeURIComponent(iconInput.value.trim());
        const ret = encodeURIComponent(returnInput.value.trim());

        if (!ref || !link || !icon || !ret) {
          output.style.display = 'none';
          return;
        }

        const baseUrl = 'bookmarks.rbx';

        // Construct only the URL string
        const url = `${baseUrl}?ref=${ref}&link=${link}&icon=${icon}&return=${ret}`;

        // Display the URL as plain code
        generatedCode.textContent = url;

        // Store the URL for copying
        generatedCode.setAttribute('data-url', url);
        output.style.display = 'block';
      }

      [refInput, linkInput, iconInput, returnInput].forEach((input) =>
        input.addEventListener('input', generateUrl)
      );

      copyBtn.addEventListener('click', () => {
        const urlToCopy = generatedCode.getAttribute('data-url');
        if (urlToCopy) {
          navigator.clipboard
            .writeText(urlToCopy)
            .then(() => {
              copyBtn.textContent = 'Copied!';
              setTimeout(() => {
                copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy';
              }, 1500);
            })
            .catch(() => {
              copyBtn.textContent = 'Failed to copy';
              setTimeout(() => {
                copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy';
              }, 1500);
            });
        }
      });

      const addDemoBtn = document.getElementById('add-demo-btn');

      addDemoBtn.addEventListener('click', () => {
        refInput.value = 'Shorten';
        linkInput.value = 'shorten.rbx';
        iconInput.value = '137622359687923';
        returnInput.value = 'shorten.rbx/bm';

        generateUrl();
      });
      window.addEventListener('load', generateUrl);
    </script>
  </body>
</html>