Hugging Face's logo

Spaces:
vit-fx
/
telegram-bot-wizardry
Running

App Files Community
vit-fx commited on
Commit
c95a72d
·
verified ·
1 Parent(s): e54d2f2

умеешь писать ботов для Телеграм?

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +274 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Telegram Bot Wizardry
3
- emoji: 😻
4
- colorFrom: indigo
5
  colorTo: green
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Telegram Bot Wizardry 🧙‍♂️
3
+ colorFrom: pink
 
4
  colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,275 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Telegram Bot Wizardry</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ .undefined-theme {
14
+ --primary: #6b46c1;
15
+ --secondary: #f6ad55;
16
+ }
17
+ .dark .undefined-theme {
18
+ --primary: #9f7aea;
19
+ --secondary: #f6ad55;
20
+ }
21
+ .bg-undefined-500 {
22
+ background-color: var(--primary);
23
+ }
24
+ .text-undefined-500 {
25
+ color: var(--primary);
26
+ }
27
+ .border-undefined-500 {
28
+ border-color: var(--primary);
29
+ }
30
+ .bg-undefined-secondary {
31
+ background-color: var(--secondary);
32
+ }
33
+ .text-undefined-secondary {
34
+ color: var(--secondary);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="undefined-theme min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
39
+ <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>
40
+
41
+ <header class="bg-white dark:bg-gray-800 shadow-sm">
42
+ <div class="container mx-auto px-4 py-6 flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <i data-feather="zap" class="text-undefined-500 w-8 h-8"></i>
45
+ <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Telegram Bot Wizardry</h1>
46
+ </div>
47
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
48
+ <i data-feather="moon" class="hidden dark:block w-5 h-5"></i>
49
+ <i data-feather="sun" class="dark:hidden w-5 h-5"></i>
50
+ </button>
51
+ </div>
52
+ </header>
53
+
54
+ <main class="container mx-auto px-4 py-12">
55
+ <section class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
56
+ <div class="p-8">
57
+ <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Create Your Magical Telegram Bot</h2>
58
+
59
+ <div class="grid md:grid-cols-2 gap-8">
60
+ <div class="space-y-6">
61
+ <div>
62
+ <h3 class="text-xl font-semibold text-undefined-500 mb-3">1. Bot Configuration</h3>
63
+ <div class="space-y-4">
64
+ <div>
65
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Bot Name</label>
66
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-undefined-500 focus:border-undefined-500 bg-white dark:bg-gray-700">
67
+ </div>
68
+ <div>
69
+ <label class="block text-gray-700 dark:text-gray-300 mb-1">Bot Token</label>
70
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-undefined-500 focus:border-undefined-500 bg-white dark:bg-gray-700">
71
+ </div>
72
+ <div class="flex items-center">
73
+ <input type="checkbox" id="webhook" class="rounded text-undefined-500 focus:ring-undefined-500">
74
+ <label for="webhook" class="ml-2 text-gray-700 dark:text-gray-300">Enable Webhooks</label>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <div>
80
+ <h3 class="text-xl font-semibold text-undefined-500 mb-3">2. Color Scheme</h3>
81
+ <div class="grid grid-cols-5 gap-3">
82
+ <div class="h-10 rounded-lg bg-undefined-500 cursor-pointer border-2 border-transparent hover:border-undefined-secondary"></div>
83
+ <div class="h-10 rounded-lg bg-undefined-secondary cursor-pointer"></div>
84
+ <div class="h-10 rounded-lg bg-gray-500 cursor-pointer"></div>
85
+ <div class="h-10 rounded-lg bg-red-500 cursor-pointer"></div>
86
+ <div class="h-10 rounded-lg bg-blue-500 cursor-pointer"></div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <div>
92
+ <h3 class="text-xl font-semibold text-undefined-500 mb-3">3. Features</h3>
93
+ <div class="space-y-3">
94
+ <div class="flex items-start">
95
+ <div class="flex items-center h-5">
96
+ <input id="commands" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500">
97
+ </div>
98
+ <label for="commands" class="ml-3 text-gray-700 dark:text-gray-300">
99
+ <span class="font-medium">Custom Commands</span>
100
+ <p class="text-sm text-gray-500 dark:text-gray-400">Create /commands for your bot</p>
101
+ </label>
102
+ </div>
103
+ <div class="flex items-start">
104
+ <div class="flex items-center h-5">
105
+ <input id="ai" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500" checked>
106
+ </div>
107
+ <label for="ai" class="ml-3 text-gray-700 dark:text-gray-300">
108
+ <span class="font-medium">AI Integration</span>
109
+ <p class="text-sm text-gray-500 dark:text-gray-400">Add smart responses with GPT</p>
110
+ </label>
111
+ </div>
112
+ <div class="flex items-start">
113
+ <div class="flex items-center h-5">
114
+ <input id="payments" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500">
115
+ </div>
116
+ <label for="payments" class="ml-3 text-gray-700 dark:text-gray-300">
117
+ <span class="font-medium">Payment System</span>
118
+ <p class="text-sm text-gray-500 dark:text-gray-400">Accept crypto/fiat payments</p>
119
+ </label>
120
+ </div>
121
+ <div class="flex items-start">
122
+ <div class="flex items-center h-5">
123
+ <input id="analytics" type="checkbox" class="rounded text-undefined-500 focus:ring-undefined-500" checked>
124
+ </div>
125
+ <label for="analytics" class="ml-3 text-gray-700 dark:text-gray-300">
126
+ <span class="font-medium">Analytics Dashboard</span>
127
+ <p class="text-sm text-gray-500 dark:text-gray-400">Track user interactions</p>
128
+ </label>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="mt-8">
133
+ <h3 class="text-xl font-semibold text-undefined-500 mb-3">4. Preview</h3>
134
+ <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
135
+ <div class="bg-white dark:bg-gray-600 rounded-lg shadow-inner p-3 max-w-xs mx-auto">
136
+ <div class="flex items-center space-x-2 mb-3">
137
+ <div class="w-8 h-8 rounded-full bg-undefined-500 flex items-center justify-center">
138
+ <i data-feather="zap" class="w-4 h-4 text-white"></i>
139
+ </div>
140
+ <span class="font-medium">YourBot</span>
141
+ </div>
142
+ <div class="space-y-2">
143
+ <div class="bg-gray-200 dark:bg-gray-500 rounded-lg p-2 text-sm">Hello! I'm your new magical bot ✨</div>
144
+ <div class="bg-undefined-500 text-white rounded-lg p-2 text-sm ml-auto max-w-[80%]">How can I help you today?</div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="mt-10 flex justify-end">
153
+ <button class="px-6 py-3 bg-undefined-500 hover:bg-undefined-600 text-white font-medium rounded-lg shadow-md transition-colors flex items-center space-x-2">
154
+ <i data-feather="wand" class="w-5 h-5"></i>
155
+ <span>Conjure My Bot</span>
156
+ </button>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <section class="mt-16 max-w-4xl mx-auto">
162
+ <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Bot Creation Process</h2>
163
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
164
+ <div class="p-6 space-y-6">
165
+ <div class="flex items-start space-x-4">
166
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center">
167
+ <span>1</span>
168
+ </div>
169
+ <div>
170
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Register with BotFather</h3>
171
+ <p class="text-gray-600 dark:text-gray-300 mt-1">Start by creating a new bot with Telegram's BotFather to get your API token.</p>
172
+ </div>
173
+ </div>
174
+ <div class="flex items-start space-x-4">
175
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center">
176
+ <span>2</span>
177
+ </div>
178
+ <div>
179
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Configure Your Bot</h3>
180
+ <p class="text-gray-600 dark:text-gray-300 mt-1">Set up commands, description, and profile picture for your bot.</p>
181
+ </div>
182
+ </div>
183
+ <div class="flex items-start space-x-4">
184
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center">
185
+ <span>3</span>
186
+ </div>
187
+ <div>
188
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Choose Hosting</h3>
189
+ <p class="text-gray-600 dark:text-gray-300 mt-1">Decide between webhooks or long polling for your bot's communication method.</p>
190
+ </div>
191
+ </div>
192
+ <div class="flex items-start space-x-4">
193
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center">
194
+ <span>4</span>
195
+ </div>
196
+ <div>
197
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Implement Features</h3>
198
+ <p class="text-gray-600 dark:text-gray-300 mt-1">Add your desired functionality like commands, AI responses, or payment systems.</p>
199
+ </div>
200
+ </div>
201
+ <div class="flex items-start space-x-4">
202
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-undefined-500 text-white flex items-center justify-center">
203
+ <span>5</span>
204
+ </div>
205
+ <div>
206
+ <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Deploy & Monitor</h3>
207
+ <p class="text-gray-600 dark:text-gray-300 mt-1">Launch your bot and monitor its performance with our analytics dashboard.</p>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+ </main>
214
+
215
+ <footer class="bg-gray-100 dark:bg-gray-800 mt-16">
216
+ <div class="container mx-auto px-4 py-8">
217
+ <div class="flex flex-col md:flex-row justify-between items-center">
218
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
219
+ <i data-feather="zap" class="text-undefined-500 w-6 h-6"></i>
220
+ <span class="text-lg font-medium text-gray-700 dark:text-gray-300">Telegram Bot Wizardry</span>
221
+ </div>
222
+ <div class="flex space-x-6">
223
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors">
224
+ <i data-feather="github" class="w-5 h-5"></i>
225
+ </a>
226
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors">
227
+ <i data-feather="twitter" class="w-5 h-5"></i>
228
+ </a>
229
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-undefined-500 transition-colors">
230
+ <i data-feather="mail" class="w-5 h-5"></i>
231
+ </a>
232
+ </div>
233
+ </div>
234
+ <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
235
+ <p>© 2023 Telegram Bot Wizardry. All spells reserved.</p>
236
+ </div>
237
+ </div>
238
+ </footer>
239
+
240
+ <script>
241
+ // Theme toggle
242
+ const themeToggle = document.getElementById('theme-toggle');
243
+ const html = document.documentElement;
244
+
245
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
246
+ html.classList.add('dark');
247
+ } else {
248
+ html.classList.remove('dark');
249
+ }
250
+
251
+ themeToggle.addEventListener('click', () => {
252
+ html.classList.toggle('dark');
253
+ localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
254
+ });
255
+
256
+ // Vanta.js background
257
+ VANTA.GLOBE({
258
+ el: "#vanta-bg",
259
+ mouseControls: true,
260
+ touchControls: true,
261
+ gyroControls: false,
262
+ minHeight: 200.00,
263
+ minWidth: 200.00,
264
+ scale: 1.00,
265
+ scaleMobile: 1.00,
266
+ color: getComputedStyle(document.documentElement).getPropertyValue('--primary').trim(),
267
+ backgroundColor: "transparent",
268
+ size: 0.8
269
+ });
270
+
271
+ // Feather icons
272
+ feather.replace();
273
+ </script>
274
+ </body>
275
  </html>