Add files via upload

src/web/app/js/script.js

@@ -0,0 +1,43 @@
+let json = {
+    roles: []
+}
+
+$('input').change((e) => {
+    json[e.currentTarget.id] = e.currentTarget.value;
+
+    document.getElementById('json').innerText = JSON.stringify(json);
+})
+
+$('button[id=addRole]').click((e) => {
+    Swal.fire({
+        title: 'Add Role',
+        html:
+            '<input id="swal-input1" class="swal2-input" placeholder="Button Label*" required>' +
+            '<input id="swal-input2" class="swal2-input" placeholder="Role Id*" required>' +
+            '<input id="swal-input3" class="swal2-input" placeholder="Emoji">',
+        preConfirm: function () {
+            return new Promise(function (resolve) {
+                resolve([
+                    $('#swal-input1').val(),
+                    $('#swal-input2').val(),
+                    $('#swal-input3').val()
+                ])
+            })
+        },
+    }).then(function (result) {
+        if (result.value?.[0] && result.value?.[1]) {
+            json.roles.push({
+                id: result.value[1],
+                label: result.value[0],
+                emoji: result.value[2] || null
+            })
+
+            document.getElementById('json').innerText = JSON.stringify(json);
+        } else Swal.fire('Missing parameters')
+    }).catch(swal.noop)
+})
+
+$(window).on('load', () => {
+    $('input').toArray().forEach((i) => i.value = '');
+    document.getElementById('json').innerText = JSON.stringify(json);
+})

src/web/app/scss/_containers.scss

@@ -0,0 +1,37 @@
+.flex-container{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    //border-style: dashed;
+    //border-color: white;
+}
+
+.container {
+    background-color: #0e0e0e;
+    filter: drop-shadow(0 0 0.75rem #0e0e0e);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 4rem 8rem;
+    border-radius: 1.2rem;
+    //border-style: dashed;
+    //border-color: white;
+}
+
+form{
+    flex-direction: column;
+    //border-style: dashed;
+    //border-color: white;
+}
+
+@media screen and (max-width:600px) {
+    .container {
+        padding: 1rem 1.2rem;
+        border-radius: 1.2rem;
+        //border-style: dashed;
+        //border-color: white;
+    }
+}

src/web/app/scss/_forumstyle.scss

@@ -0,0 +1,41 @@
+button {
+    background-color: var(--yellow);
+    border-radius: .2rem;
+    border-style: none;
+    margin-top: .8rem;
+    font-size: 1.2rem;
+    padding: .2rem .8rem;
+    filter: drop-shadow(0 0 0.75rem #363636);
+    transition: .2s;
+    cursor: pointer;
+
+    &:hover{
+        background-color: var(--yellow-dark); 
+    }
+}
+
+input {
+    color: white;
+    padding: .2rem .5rem;
+    background-color: var(--codeblock);
+    margin-top: .3rem;
+    font-size: 1.2rem;
+    border-style: none;
+    border-radius: .2rem;
+}
+
+.code{
+    background-color: var(--codeblock);
+    border-radius: .2rem;
+    padding: .2rem .5rem;
+}
+
+@media screen and (max-width:600px) {
+    input {
+        font-size: 1rem;
+    }
+    button {
+        font-size: 1rem;
+        padding: .1rem .5rem;
+    }
+}

src/web/app/scss/_globals.scss

@@ -0,0 +1,17 @@
+html {
+  font-size: 100%;
+  box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  background-color: var(--darkmode);
+  color: white;
+}

src/web/app/scss/_textstyle.scss

@@ -0,0 +1,26 @@
+p {
+    font-family: 'Open Sans', sans-serif;
+    //color: white;
+    font-size: 1rem;
+    font-weight: 200;
+}
+h1{
+    font-family: 'Open Sans', sans-serif;
+    color: white;
+    font-size: 2rem;
+    font-weight: 800;
+}
+a{
+    font-family: 'Open Sans', sans-serif;
+    color: white;
+    font-size: 1rem;
+    text-decoration: none;
+    font-weight: 400;
+}
+button {
+    font-family: 'Open Sans', sans-serif;
+    color: white;
+    font-size: 1rem;
+    text-decoration: none; 
+    font-weight: 400;
+}

src/web/app/scss/_vars.scss

@@ -0,0 +1,7 @@
+:root {
+    --hyro: #eeee32;
+    --yellow: #ead800;
+    --yellow-dark: #d8a603;
+    --darkmode: #151515;
+    --codeblock: #242424;
+}

src/web/app/scss/style.scss

@@ -0,0 +1,6 @@
+@import "globals";
+@import "vars";
+@import "containers";
+@import "textstyle";
+@import "forumstyle";
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,500;0,600;0,800;1,300;1,600;1,700&display=swap'); //font-family: 'Open Sans', sans-serif;

src/web/dist/style.css

@@ -0,0 +1,156 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,500;0,600;0,800;1,300;1,600;1,700&display=swap");
+html {
+  font-size: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  background-color: var(--darkmode);
+  color: white;
+}
+
+:root {
+  --hyro: #eeee32;
+  --yellow: #ead800;
+  --yellow-dark: #d8a603;
+  --darkmode: #151515;
+  --codeblock: #242424;
+}
+
+.flex-container {
+  height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.container {
+  background-color: #0e0e0e;
+  -webkit-filter: drop-shadow(0 0 0.75rem #0e0e0e);
+          filter: drop-shadow(0 0 0.75rem #0e0e0e);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 4rem 8rem;
+  border-radius: 1.2rem;
+}
+
+form {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    padding: 1rem 1.2rem;
+    border-radius: 1.2rem;
+  }
+}
+
+p {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1rem;
+  font-weight: 200;
+}
+
+h1 {
+  font-family: 'Open Sans', sans-serif;
+  color: white;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+a {
+  font-family: 'Open Sans', sans-serif;
+  color: white;
+  font-size: 1rem;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+button {
+  font-family: 'Open Sans', sans-serif;
+  color: white;
+  font-size: 1rem;
+  text-decoration: none;
+  font-weight: 400;
+}
+
+button {
+  background-color: var(--yellow);
+  border-radius: .2rem;
+  border-style: none;
+  margin-top: .8rem;
+  font-size: 1.2rem;
+  padding: .2rem .8rem;
+  -webkit-filter: drop-shadow(0 0 0.75rem #363636);
+          filter: drop-shadow(0 0 0.75rem #363636);
+  -webkit-transition: .2s;
+  transition: .2s;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: var(--yellow-dark);
+}
+
+input {
+  color: white;
+  padding: .2rem .5rem;
+  background-color: var(--codeblock);
+  margin-top: .3rem;
+  font-size: 1.2rem;
+  border-style: none;
+  border-radius: .2rem;
+}
+
+.code {
+  background-color: var(--codeblock);
+  border-radius: .2rem;
+  padding: .2rem .5rem;
+}
+
+@media screen and (max-width: 600px) {
+  input {
+    font-size: 1rem;
+  }
+  button {
+    font-size: 1rem;
+    padding: .1rem .5rem;
+  }
+}
+/*# sourceMappingURL=style.css.map */

src/web/dist/style.css.map

@@ -0,0 +1,14 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../app/scss/style.scss",
+        "../app/scss/_globals.scss",
+        "../app/scss/_vars.scss",
+        "../app/scss/_containers.scss",
+        "../app/scss/_textstyle.scss",
+        "../app/scss/_forumstyle.scss"
+    ],
+    "names": [],
+    "file": "style.css"
+}

src/web/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en"> 
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roles Bot</title> 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <meta name="keywords" content="ReactionRoles, discord, discordbot, discordroles, roles-bot"> 
+    <meta property="og:site_name" content="Roles Bot">
+    <meta property="og:title" content="Roles Bot"> 
+    <meta property="og:description" content=""> 
+    <meta property="og:image" content="https://i.imgur.com/MSdTu2M.png">
+    <meta name="author" content="xHyroM">
+    <meta name="theme-color" content=#ead800> 
+    <link rel="stylesheet" href="dist/style.css"> 
+    <link rel="icon" href="assets/logo.ico"> 
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
+    <script src="https://kit.fontawesome.com/5acf4d9e80.js" crossorigin="anonymous"></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
+</head>
+<body>
+    <section class="flex-container">
+        <div class="container">
+            <h1>Generate</h1>
+            <form>
+                <input placeholder="Message" name="message" id="message"/><br> <!--Message-->
+                <input placeholder="Channel Id" name="channel" id="channel"/> <!--Channel Id-->
+            </form>
+            <button id='addRole'>Add Role</button>
+            <pre><code class="language-json"><p class="code" id='json'></p></code></pre>
+        </div>
+    </section>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="app/js/script.js"></script>
+</body>
+</html>