First version for the captcha verification

.gitignore

@@ -0,0 +1,2 @@
+config.json
+node_modules

README.md

@@ -0,0 +1,42 @@
+# Discord-Verification
+
+This is a simple discord verification bot that uses a captcha (CloudFlare Turnstile).
+The bot creates an embed in a specified discord channel with a button. If the button is clicked, the user receives a personal link.
+After clicking the link, the user is redirected to the captcha page. If the captcha is solved, the user is verified and receives a role.
+The bot also logs the user's IP address and the time of verification.
+
+## Installation
+
+You need to have [Node.js](https://nodejs.org/en/) and [pnpm](https://pnpm.io/) installed.
+
+1. Clone the repository
+2. Install the required packages with `pnpm install`
+3. Copy the `config.example.json` file and rename it to `.config.json`
+4. Fill in the required fields in the `.config.json` file (see [Settings](#settings))
+5. Start the bot with `pnpm start`
+
+## Settings
+
+These are the settings that need to be filled in the `config.json` file:
+
+- `protocol`: The protocol of the website (http or https)
+- `host`: The hostname of the hosted website
+- `port`: The available port of the website
+- `channelId`: The ID of the discord channel where the verification embed will be sent
+- `channelLogsId`: The ID of the discord channel where the logs will be sent
+- `verifiedRoleId`: The ID of the role that will be given to the verified users
+- `discordToken`: The token of the discord bot
+- `turnstileSitekey`: The sitekey of the CloudFlare Turnstile captcha
+- `turnstileSecret`: The secret of the CloudFlare Turnstile captcha
+
+## Development
+
+If you want to contribute to the project, you can use the following commands:
+
+- `pnpm tailwind`: Start the tailwindcss compiler in watch mode
+
+The project structure is as follows:
+
+- `modules/discord`: Client for Discord
+- `modules/website`: Webserver and static files
+- `modules/events`: EventEmitter for communication between discord client and website

config.example.json

@@ -0,0 +1,11 @@
+{
+    "protocol": "http",
+    "host": "localhost",
+    "port": 8080,
+    "channelId": "",
+    "channelLogsId": "",
+    "verifiedRoleId": "",
+    "discordToken": "",
+    "turnstileSitekey": "",
+    "turnstileSecret": ""
+}

index.js

@@ -0,0 +1,5 @@
+// Discord Client
+require("./modules/discord/index.js")
+
+// Webserver for Captcha
+require("./modules/website/index.js")

modules/discord/index.js

@@ -0,0 +1,66 @@
+const { Client, Events, GatewayIntentBits, EmbedBuilder, ActionRowBuilder, ButtonStyle, ButtonBuilder } = require('discord.js');
+const { discordToken, channelId, channelLogsId, host, port, protocol, verifiedRoleId } = require('../../config.json');
+const event = require('../events/index').eventBus;
+const client = new Client({ intents: [GatewayIntentBits.Guilds] });
+
+client.on('interactionCreate', async interaction => {
+    if(interaction.isButton()) {
+        console.log(interaction)
+        let verificationObject = {
+            guildId: interaction.guildId,
+            userId: interaction.user.id,
+            timestamp: Date.now()
+        }
+
+        let base64 = Buffer.from(JSON.stringify(verificationObject)).toString('base64');
+        interaction.reply({ content: `Bitte öffne folgenden Link: <${protocol}://${host}${port!=80?':'+port:''}?data=${base64}>`, ephemeral: true });
+    }
+})
+
+client.once(Events.ClientReady, readyClient => {
+	let targetChannel = readyClient.channels.cache.find(channel => channel.id === channelId);
+    targetChannel.messages.fetch().then(messages => {
+        messages.forEach(message => {
+            if (message.author.id === readyClient.user.id) {
+                message.delete();
+            }
+        });
+    }).then(() => {
+        if (targetChannel) {
+            let confirm = new ButtonBuilder()
+                .setCustomId('verify')
+                .setLabel('Verifizieren')
+                .setStyle(ButtonStyle.Success);
+    
+            let actionRow = new ActionRowBuilder()
+                .addComponents(confirm)
+    
+            let embedBuilder = new EmbedBuilder()
+                .setTitle('Verifizierung erforderlich')
+                .setDescription('Um diesen Server nutzen zu können, musst du dich verifizieren. Dies kannst du tun, indem du auf den Button klickst.')
+                .setColor('#FF0000');
+    
+            targetChannel.send({ embeds: [embedBuilder], components: [actionRow] });
+        }
+    });
+});
+
+event.on('verification:success', (authenticationObject, internetProtocolAddress) => {
+    let guild = client.guilds.cache.get(authenticationObject.guildId);
+    let member = guild.members.cache.get(authenticationObject.userId);
+    member.roles.add(verifiedRoleId);
+
+    let embedBuilder = new EmbedBuilder();
+    embedBuilder.setTitle('Verifizierung abgeschlossen');
+    embedBuilder.setFields([
+        { name: 'Benutzername', value: `<@${member.id}>`, inline: false },
+        { name: 'Zeitpunkt', value: `${new Date().toISOString()}`, inline: false },
+        { name: 'IP-Adresse', value: internetProtocolAddress, inline: false },
+        { name: 'IP-Informationen', value: `[Informationen anzeigen](https://ipinfo.io/${internetProtocolAddress})`, inline: false },
+        { name: 'User-ID', value: `${member.id}`, inline: false },
+    ]);
+
+    client.channels.cache.get(channelLogsId).send({embeds: [embedBuilder]});
+});
+
+client.login(discordToken);

modules/events/index.js

@@ -0,0 +1,11 @@
+const util = require('util');
+const eventEmitter = require('events').EventEmitter;
+function Event () {
+    eventEmitter.call(this);
+}
+util.inherits(Event, eventEmitter);
+const eventBus = new Event();
+module.exports = {
+    emitter : Event,
+    eventBus : eventBus
+};

modules/website/index.js

@@ -0,0 +1,43 @@
+const express = require('express');
+const { turnstileSitekey, turnstileSecret, port } = require('./../../config.json');
+const app = express();
+const event = require('../events/index').eventBus;
+
+app.use('/', express.static(__dirname + '/public'));
+app.use(express.json())
+
+// This endpoint will return the turnstile sitekey
+app.get('/turnstile/id', (req, res) => {
+    res.json({ id: turnstileSitekey });
+});
+
+// This endpoint will verify the token from turnstile and adds the user to the database
+app.post('/verify', (req, res) => {
+    let turnstileToken = req.body.token;
+    let authenticationObject = req.body.data;
+    let internetProtocolAddress = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
+
+	let formData = new FormData();
+	formData.append('secret', turnstileSecret);
+	formData.append('response', turnstileToken);
+
+	fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
+		body: formData,
+		method: 'POST',
+	}).then(response => response.json()).then(data => {
+        if (data.success) {
+            event.emit('verification:success', authenticationObject, internetProtocolAddress);
+            res.json({ success: true });
+        } else {
+            console.log('Verification failed');
+            res.json({ success: false });
+        }
+    }).catch(error => {
+        console.error(error);
+        res.json({ success: false });
+    });
+});
+
+app.listen(port, () => {
+    console.log(`Webserver is available on http://localhost:${port}`)
+})

modules/website/public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Verifizierung abschließen</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔒</text></svg>">
+    <link rel="stylesheet" href="./stylesheet/output.css">
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" defer></script>
+    <script src="./script.js"></script>
+</head>
+<body class="bg-slate-900 text-white">
+    <div class="container mx-auto">
+        <div class="bg-gray-800 mt-[2em] p-[1em] rounded">
+
+            <h1 class="text-3xl">Verifizierung</h1>
+            <hr class="my-3">
+
+            <p data-verification-step="waiting">
+                Es wird auf die Bestätigung der Verifizierung gewartet.
+                <div id="turnstile-container" class="mt-2"></div>
+            </p>
+
+            <p class="hidden" data-verification-step="success">
+                <span class="text-green-400 text-xl">Die Verifizierung war erfolgreich.</span><br>
+                Sie können diese Seite nun schließen und zurückkehren.
+            </p>
+
+            <p class="hidden" data-verification-step="failed">
+                <span class="text-red-400 text-xl">Die Verifizierung war nicht erfolgreich. Bitte versuchen Sie es erneut.</span>
+                <br>
+                <br>
+                <b>Details zur Fehlermeldung</b><br>
+                <code id="errorMessage" class="bg-gray-600 p-1 mt-1 block rounded"></code>
+            </p>
+        </div>
+
+    </div>
+</body>
+</html>

modules/website/public/script.js

@@ -0,0 +1,81 @@
+function inititalize() {
+    fetch('/turnstile/id')
+    .then(response => response.json())
+    .then(data => {
+        if(getUserData() === false) {
+            failed('Kein Benutzer gefunden. Bitte versuchen Sie es erneut.');
+            return;
+        }
+        window.onloadTurnstileCallback = function () {
+            turnstile.render('#turnstile-container', {
+                sitekey: data.id,
+                callback: function(token) {
+                    sendVerification(token, getUserData());
+                },
+            });
+        };
+    }).catch((error) => {
+        failed(error);
+    });
+}
+
+function getUserData() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const userData = urlParams.get('data');
+    if (userData) {
+        return JSON.parse(atob(userData));
+    } else {
+        return false;
+    }
+}
+
+// This function will remove the turnstile from the DOM
+function removeTurnstile() {
+    document.querySelector('#turnstile-container')?.remove();
+}
+
+// This function will be called when the verification is successful
+function success() {
+    removeTurnstile();
+    document.querySelector('[data-verification-step="waiting"]').classList.add('hidden');
+    document.querySelector('[data-verification-step="failed"]').classList.add('hidden');
+    document.querySelector('[data-verification-step="success"]').classList.remove('hidden');
+}
+
+// This function is called when the verification fails
+function failed(errorMessage) {
+    removeTurnstile();
+    document.querySelector('[data-verification-step="waiting"]').classList.add('hidden');
+    document.querySelector('[data-verification-step="failed"]').classList.remove('hidden');
+    document.querySelector('[data-verification-step="success"]').classList.add('hidden');
+    document.querySelector('#errorMessage').textContent = errorMessage;
+}
+
+function sendVerification(turnstileToken, userData) {
+    // This function will send the verification request to the server for validation
+    fetch('/verify', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            token: turnstileToken,
+            data: userData,
+        }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        // Assume the response were successful
+        success();
+        // Check if the response was really successful (turnstile verification on the server side)
+        if(!data.success) {
+            failed();
+        }
+    })
+    .catch((error) => {
+        failed(error);
+    });
+}
+
+// Initialize the script
+document.addEventListener('DOMContentLoaded', inititalize);

modules/website/public/stylesheet/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

modules/website/public/stylesheet/output.css

@@ -0,0 +1,681 @@
+/*
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.mt-\[2em\] {
+  margin-top: 2em;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.block {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.bg-slate-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.p-\[1em\] {
+  padding: 1em;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "discord-verification",
+  "version": "1.0.0",
+  "description": "This is a bot that verifies users on a discord server.",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "tailwind": "npx tailwindcss -i ./source/website/public/stylesheet/input.css -o ./source/website/public/stylesheet/output.css --watch"
+  },
+  "keywords": [
+    "discord",
+    "verification",
+    "bot"
+  ],
+  "author": "Dennis Heinrich <https://dennis-heinri.ch>",
+  "license": "GPL-3.0-only",
+  "dependencies": {
+    "body-parser": "^1.20.2",
+    "discord.js": "^14.14.1",
+    "express": "^4.19.2"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
+  }
+}

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./source/website/public/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+