website/catpack.html at master · meowdding/website · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Meowdding</title>
  <link rel="stylesheet" href="./styles/catpack.css">
  <link rel="stylesheet" href="./styles/file-input.css">
  <link rel="stylesheet" href="./styles/input-field.css">
  <script src="./scripts/meow.js"></script>
</head>

<body>
<div class="header">
  <a href="./..">Meowdding</a>
  <div id="bg-toggle" style="cursor: pointer" title="Toggle Background Animation">🥺</div>
</div>
<div class="content">
  <h1 class="heading">Catharsis Pack Converter</h1>
  <div id="container" class="container">
    <div class="file-input-line">
      <label class="file-input icon-input" for="file">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="17 8 12 3 7 8"></polyline>
          <line x1="12" x2="12" y1="3" y2="15"></line>
        </svg>
        Upload a file
        <input type="file" id="file" name="file" accept="application/zip,.cats"/>
      </label>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M12 16v-4"></path>
        <path d="M12 8h.01"></path>
      </svg>
      <p>Click to convert pack.</p>
    </div>
    <div id="form" style="display: none" class="input-form">
      <p>Current file: <span id="pack-name" class="stats"></span></p>
      <p>Type: <span id="pack-type" class="stats"></span></p>
      <div class="input-buttons">
        <div class="input-button" id="submit">Download</div>
        <span id="converted-type" class="stats"></span>
        Convert to
      </div>
    </div>
    <div id="processing" style="display: none">
      <p>Processing...</p>
    </div>
  </div>
  <div class="footer">
    <a href="https://github.com/meowdding/website" class="secondary">
      Made with 🐈
    </a>
    <p id="toggle" class="secondary">
      Toggle Dark Mode
    </p>
  </div>
</div>
</body>
<script type="module" src="scripts/catpack.js"></script>
<script>
  const bgToggle = document.getElementById('bg-toggle');
  const content = document.querySelector('.content');

  bgToggle.addEventListener('click', () => {
    if (content.style.animationPlayState === 'running') {
      content.style.animationPlayState = 'paused';
    } else {
      content.style.animationPlayState = 'running';
    }
  });
</script>
</html>