JesseClark commited on
Commit
5fc4f6d
1 Parent(s): 6c65b19

Add 4 files

Browse files
Files changed (4) hide show
  1. app.js +79 -0
  2. index.html +28 -19
  3. package.json +18 -0
  4. style.css +61 -27
app.js ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // x-intersect
2
+ use('https://cdn.jsdelivr.net/npm/x-intersect@1.x.x/dist/intersect');
3
+
4
+ // Alpine.js
5
+ use('https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js');
6
+
7
+ // DaisyUI
8
+ use('https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css');
9
+
10
+ // TailwindCSS
11
+ use('https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio');
12
+
13
+ // Three.js
14
+ use('https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js');
15
+
16
+ // reusable functions
17
+ function sendForm(msg) {
18
+ x-intersect.fetch('https://your-discord-bot-url/connect', {
19
+ method: 'POST',
20
+ headers: {
21
+ 'Content-Type': 'application/json',
22
+ },
23
+ body: JSON.stringify(msg),
24
+ }).then((response) => {
25
+ if (response.ok) {
26
+ return response.json();
27
+ } else {
28
+ throw new Error('Server error');
29
+ }
30
+ }).then((data) => {
31
+ if (data.success) {
32
+ console.log(`Server connected successfully`);
33
+ } else {
34
+ console.log(`Server connection failed: ${data.message}`);
35
+ }
36
+ }).catch((error) => {
37
+ console.log(`Error: ${error.message}`);
38
+ });
39
+ }
40
+
41
+ // main app logic
42
+ const app = new Vue({
43
+ data() {
44
+ return {
45
+ form: {
46
+ name: null,
47
+ token: null,
48
+ },
49
+ server: null,
50
+ channel: null,
51
+ };
52
+ },
53
+ methods: {
54
+ sendForm(msg) {
55
+ sendForm(msg);
56
+ },
57
+ },
58
+ async mounted() {
59
+ this.server = await this.getServer();
60
+ this.channel = await this.getChannel();
61
+ },
62
+ templates: {
63
+ msg: async () => {
64
+ const msg = new Dataview();
65
+ const server = await this.getServer();
66
+ const channel = await this.getChannel();
67
+ msg.setText(`Connected to server ${server ? server.name : 'undefined'} and channel ${channel ? channel.name : 'undefined'}.`);
68
+ return msg;
69
+ },
70
+ getServer: async () => {
71
+ const server = await this.app.models.get('server');
72
+ return server;
73
+ },
74
+ getChannel: async () => {
75
+ const channel = await this.app.models.get('channel');
76
+ return channel;
77
+ },
78
+ },
79
+ });
index.html CHANGED
@@ -1,19 +1,28 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>C# Discord Bot</title></head><body>
2
+
3
+ <main class="prose fade-in">
4
+ <h1>C# Discord Bot</h1>
5
+ <div class="container" x-cloak>
6
+ <form x-data="form" class="my-3">
7
+ <input class="form-control border bd-gray-400 hover:bd-gray-600 focus:border-gray-400 focus:border-4" placeholder="Name" required><input class="form-control border bd-gray-400 hover:bd-gray-600 focus:border-gray-400 focus:border-4" placeholder="Token" required><button class="btn btn-outline btn-sm border bd-gray-400 hover:bd-gray-600 focus:border-gray-400 focus:border-4" x-on:click="sendForm">Connect</button>
8
+ </form>
9
+ <div class="container" x-cloak>
10
+ <div class="table overflow-y scrollbar-hidden">
11
+ <div class="thead">
12
+ <div class="tr">
13
+ <div class="th">Server</div>
14
+ <div class="th">Channel</div>
15
+ </div>
16
+ </div>
17
+ <div class="tbody">
18
+ <div class="tr">
19
+ <div class="td"></div>
20
+ <div class="td"></div>
21
+ </div>
22
+ </div>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ </main>
27
+
28
+ </body></html>
package.json ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "CSharpDiscordBot",
3
+ "version": "1.0.0",
4
+ "description": "A Discord bot built using C# and Alpine.js for the UI",
5
+ "main": "index.js",
6
+ "scripts": {
7
+ "build": "webpack --mode production",
8
+ "start": "webpack-dev-server --content-base src/ --port 8080 --open"
9
+ },
10
+ "author": "Your Name",
11
+ "license": "ISC",
12
+ "dependencies": {
13
+ "alpinejs": "^3.2.2",
14
+ "daisyui": "^3.1.6",
15
+ "tailwindcss": "^3.0.4",
16
+ "vue": "^3.2.24"
17
+ }
18
+ }
style.css CHANGED
@@ -1,28 +1,62 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
+ font-family: Arial, sans-serif;
3
+ font-size: 14px;
4
+ line-height: 1.6;
5
+ color: #333;
6
+ margin: 0;
7
+ padding: 20px;
8
+ }
9
+ h1 {
10
+ font-size: 24px;
11
+ text-align: center;
12
+ margin-bottom: 10px;
13
+ }
14
+ .container {
15
+ max-width: 100%;
16
+ background-color: #ddd;
17
+ padding: 10px 20px;
18
+ border-radius: 5px;
19
+ }
20
+ form {
21
+ display: flex;
22
+ flex-direction: column;
23
+ }
24
+ input {
25
+ padding: 10px 15px;
26
+ border: 1px solid #ccc;
27
+ border-radius: 5px;
28
+ margin-bottom: 10px;
29
+ }
30
+ button {
31
+ padding: 10px 30px;
32
+ border: none;
33
+ border-radius: 5px;
34
+ background-color: #008cba;
35
+ color: #fff;
36
+ font-weight: 600;
37
+ }
38
+ table {
39
+ width: 100%;
40
+ position: relative;
41
+ }
42
+ thead {
43
+ background-color: #333;
44
+ color: #fff;
45
+ }
46
+ .thead {
47
+ display: flex;
48
+ }
49
+ .tr {
50
+ display: flex;
51
+ }
52
+ th {
53
+ flex: 1 1 200px;
54
+ padding: 10px;
55
+ }
56
+ .tb {
57
+ flex: 2 2 200px;
58
+ padding: 10px;
59
+ }
60
+ .td {
61
+ padding: 10px;
62
+ }