Spaces:

JesseClark
/

sf-815

Running

App Files Files Community

JesseClark commited on Mar 29

Commit

5fc4f6d

•

1 Parent(s): 6c65b19

Add 4 files

Browse files

Files changed (4) hide show

app.js +79 -0
index.html +28 -19
package.json +18 -0
style.css +61 -27

app.js ADDED Viewed

	@@ -0,0 +1,79 @@

+// x-intersect
+use('https://cdn.jsdelivr.net/npm/x-intersect@1.x.x/dist/intersect');
+// Alpine.js
+use('https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js');
+// DaisyUI
+use('https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css');
+// TailwindCSS
+use('https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio');
+// Three.js
+use('https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js');
+// reusable functions
+function sendForm(msg) {
+ x-intersect.fetch('https://your-discord-bot-url/connect', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(msg),
+ }).then((response) => {
+    if (response.ok) {
+      return response.json();
+    } else {
+      throw new Error('Server error');
+    }
+ }).then((data) => {
+    if (data.success) {
+      console.log(`Server connected successfully`);
+    } else {
+      console.log(`Server connection failed: ${data.message}`);
+    }
+ }).catch((error) => {
+    console.log(`Error: ${error.message}`);
+ });
+}
+// main app logic
+const app = new Vue({
+ data() {
+    return {
+      form: {
+        name: null,
+        token: null,
+      },
+      server: null,
+      channel: null,
+    };
+ },
+ methods: {
+    sendForm(msg) {
+      sendForm(msg);
+    },
+ },
+ async mounted() {
+    this.server = await this.getServer();
+    this.channel = await this.getChannel();
+ },
+ templates: {
+    msg: async () => {
+      const msg = new Dataview();
+      const server = await this.getServer();
+      const channel = await this.getChannel();
+      msg.setText(`Connected to server ${server ? server.name : 'undefined'} and channel ${channel ? channel.name : 'undefined'}.`);
+      return msg;
+    },
+    getServer: async () => {
+      const server = await this.app.models.get('server');
+      return server;
+    },
+    getChannel: async () => {
+      const channel = await this.app.models.get('channel');
+      return channel;
+    },
+ },
+});

index.html CHANGED Viewed

@@ -1,19 +1,28 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<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>
+<main class="prose fade-in">
+ <h1>C# Discord Bot</h1>
+ <div class="container" x-cloak>
+    <form x-data="form" class="my-3">
+      <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>
+    </form>
+    <div class="container" x-cloak>
+      <div class="table overflow-y scrollbar-hidden">
+        <div class="thead">
+          <div class="tr">
+            <div class="th">Server</div>
+            <div class="th">Channel</div>
+          </div>
+        </div>
+        <div class="tbody">
+          <div class="tr">
+            <div class="td"></div>
+            <div class="td"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+ </div>
+</main>
+</body></html>

package.json ADDED Viewed

	@@ -0,0 +1,18 @@

+{
+ "name": "CSharpDiscordBot",
+ "version": "1.0.0",
+ "description": "A Discord bot built using C# and Alpine.js for the UI",
+ "main": "index.js",
+ "scripts": {
+    "build": "webpack --mode production",
+    "start": "webpack-dev-server --content-base src/ --port 8080 --open"
+ },
+ "author": "Your Name",
+ "license": "ISC",
+ "dependencies": {
+    "alpinejs": "^3.2.2",
+    "daisyui": "^3.1.6",
+    "tailwindcss": "^3.0.4",
+    "vue": "^3.2.24"
+ }
+}

style.css CHANGED Viewed

@@ -1,28 +1,62 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

 body {
+   font-family: Arial, sans-serif;
+   font-size: 14px;
+   line-height: 1.6;
+   color: #333;
+   margin: 0;
+   padding: 20px;
+ }
+ h1 {
+   font-size: 24px;
+   text-align: center;
+   margin-bottom: 10px;
+ }
+ .container {
+   max-width: 100%;
+   background-color: #ddd;
+   padding: 10px 20px;
+   border-radius: 5px;
+ }
+ form {
+   display: flex;
+   flex-direction: column;
+ }
+ input {
+   padding: 10px 15px;
+   border: 1px solid #ccc;
+   border-radius: 5px;
+   margin-bottom: 10px;
+ }
+ button {
+   padding: 10px 30px;
+   border: none;
+   border-radius: 5px;
+   background-color: #008cba;
+   color: #fff;
+   font-weight: 600;
+ }
+ table {
+   width: 100%;
+   position: relative;
+ }
+ thead {
+   background-color: #333;
+   color: #fff;
+ }
+ .thead {
+   display: flex;
+ }
+ .tr {
+   display: flex;
+ }
+ th {
+   flex: 1 1 200px;
+   padding: 10px;
+ }
+ .tb {
+   flex: 2 2 200px;
+   padding: 10px;
+ }
+ .td {
+   padding: 10px;
+ }