apps/sipp/server/templates/snippet.html 2.8 K raw
1
{{define "snippet.html"}}<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <link rel="stylesheet" href="/assets/darkmatter.css" />
7
    <link rel="stylesheet" href="/static/styles.css" />
8
    <meta name="theme-color" content="#121113" />
9
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
10
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
11
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
12
    <link rel="manifest" href="/static/site.webmanifest">
13
    <title>{{.Name}} | Sipp</title>
14
    <meta property="og:url" content="{{.BaseURL}}">
15
    <meta property="og:type" content="website">
16
    <meta property="og:title" content="Sipp | {{.Name}}">
17
    <meta property="og:image" content="{{.BaseURL}}/static/og.png">
18
  </head>
19
  <body>
20
    <div class="header">
21
      <a href="/" class="logo"><h1>SIPP</h1></a>
22
    </div>
23
    <div id="snippetForm">
24
      <label id="snippetName">{{.Name}}</label>
25
      <div class="code-container">{{.HighlightedContent}}</div>
26
      <textarea id="content" style="display:none;">{{.Content}}</textarea>
27
      <div class="button-group">
28
        <button type="button" id="copyLinkBtn" data-original-text="Copy Link">Copy Link</button>
29
        <button type="button" id="copyContentBtn" data-original-text="Copy Content">Copy Content</button>
30
        <button type="button" id="createNewBtn">Create New Snippet</button>
31
      </div>
32
    </div>
33
    <script>
34
      async function copyToClipboard(text, button) {
35
        try {
36
          await navigator.clipboard.writeText(text);
37
          showButtonFeedback(button, '✔ Copied', 'success');
38
        } catch (error) {
39
          showButtonFeedback(button, '✘ Failed', 'error');
40
        }
41
      }
42
      function showButtonFeedback(button, message, type) {
43
        const originalText = button.dataset.originalText || button.textContent;
44
        button.textContent = message;
45
        button.disabled = true;
46
        button.classList.add('copy-' + type);
47
        setTimeout(() => {
48
          button.textContent = originalText;
49
          button.disabled = false;
50
          button.classList.remove('copy-' + type);
51
        }, 1000);
52
      }
53
      document.getElementById('copyContentBtn').addEventListener('click', async () => {
54
        await copyToClipboard(document.getElementById('content').value, document.getElementById('copyContentBtn'));
55
      });
56
      document.getElementById('copyLinkBtn').addEventListener('click', async () => {
57
        await copyToClipboard(window.location.href, document.getElementById('copyLinkBtn'));
58
      });
59
      document.getElementById('createNewBtn').addEventListener('click', () => {
60
        window.location.href = '/';
61
      });
62
    </script>
63
  </body>
64
</html>{{end}}