luau-tools/index.html at main · CronaDeveloper/luau-tools · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Luau Tools</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="background-glow"></div>
  <header class="header">
    <h1>Crona Dev Tools</h1>
    <p>Professional Luau utilities for Roblox developers</p>
  </header>

  <main class="container">
    <nav class="tabs" aria-label="Tool navigation">
      <button class="tab-button active" data-tab="rarities">Rarities</button>
      <button class="tab-button" data-tab="gamepasses">Gamepasses</button>
      <button class="tab-button" data-tab="chances">Chances</button>
      <button class="tab-button" data-tab="time">Time</button>
      <button class="tab-button" data-tab="webhook">Webhook</button>
    </nav>

    <section class="tab-content active" id="rarities">
      <div class="card">
        <h2>Rarity Generator</h2>
        <p>Add rarity names and percentages, then generate Luau code.</p>
        <div id="rarity-list" class="dynamic-list"></div>
        <button class="secondary" id="add-rarity">Add Rarity</button>
        <button class="primary" id="generate-rarity">Generate Luau</button>
        <textarea id="rarity-output" readonly placeholder="Generated Luau code will appear here"></textarea>
        <div class="actions">
          <button class="copy" data-copy-target="rarity-output">Copy</button>
          <span class="copy-state" id="rarity-copy-state"></span>
        </div>
      </div>
    </section>

    <section class="tab-content" id="gamepasses">
      <div class="card">
        <h2>Gamepass Generator</h2>
        <p>Add gamepass names and IDs to build a Luau table.</p>
        <div id="gamepass-list" class="dynamic-list"></div>
        <button class="secondary" id="add-gamepass">Add Gamepass</button>
        <button class="primary" id="generate-gamepass">Generate Luau</button>
        <textarea id="gamepass-output" readonly placeholder="Generated Luau code will appear here"></textarea>
        <div class="actions">
          <button class="copy" data-copy-target="gamepass-output">Copy</button>
          <span class="copy-state" id="gamepass-copy-state"></span>
        </div>
      </div>
    </section>

    <section class="tab-content" id="chances">
      <div class="card">
        <h2>Chance Calculator</h2>
        <p>Calculate the probability of obtaining an item at least once.</p>
        <div class="field-grid">
          <label>
            Chance Percentage
            <input id="chance-input" type="number" min="0" max="100" step="0.01" placeholder="e.g. 2" />
          </label>
          <label>
            Number of Attempts
            <input id="attempts-input" type="number" min="1" step="1" placeholder="e.g. 50" />
          </label>
        </div>
        <button class="primary" id="calculate-chance">Calculate</button>
        <textarea id="chance-output" readonly placeholder="Result will appear here"></textarea>
        <div class="actions">
          <button class="copy" data-copy-target="chance-output">Copy</button>
          <span class="copy-state" id="chance-copy-state"></span>
        </div>
      </div>
    </section>

    <section class="tab-content" id="time">
      <div class="card">
        <h2>Time Converter</h2>
        <p>Convert values like 5min, 1h, 7d, and 30s to seconds.</p>
        <label>
          Time Value
          <input id="time-input" type="text" placeholder="e.g. 5min" />
        </label>
        <button class="primary" id="convert-time">Convert</button>
        <textarea id="time-output" readonly placeholder="Conversion result will appear here"></textarea>
        <div class="actions">
          <button class="copy" data-copy-target="time-output">Copy</button>
          <span class="copy-state" id="time-copy-state"></span>
        </div>
      </div>
    </section>

    <section class="tab-content" id="webhook">
      <div class="card">
        <h2>Discord Webhook Generator</h2>
        <p>Generate a Discord embed JSON payload for your Roblox game updates.</p>
        <div class="field-grid">
          <label>
            Game Name
            <input id="webhook-game" type="text" placeholder="Game name" />
          </label>
          <label>
            Message Title
            <input id="webhook-title" type="text" placeholder="Embed title" />
          </label>
          <label class="full-width">
            Description
            <textarea id="webhook-description" placeholder="Embed description"></textarea>
          </label>
          <label>
            Hex Color
            <input id="webhook-color" type="text" placeholder="#7a5cff" />
          </label>
        </div>
        <button class="primary" id="generate-webhook">Generate JSON</button>
        <textarea id="webhook-output" readonly placeholder="Generated webhook payload will appear here"></textarea>
        <div class="actions">
          <button class="copy" data-copy-target="webhook-output">Copy</button>
          <span class="copy-state" id="webhook-copy-state"></span>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">Developed by CronaDeveloper</footer>

  <script src="script.js"></script>
</body>
</html>