Hugging Face's logo

Spaces:
Violenterouse
/
tasktron-futuristic-task-manager
Running

App Files Community
Violenterouse commited on
Commit
b406761
·
verified ·
1 Parent(s): 0f6bb09

Создай сайт с задачами и уведомлениями сотрудникам в telegram, функциональный и простой интерфейс легко ставить задачи переставлять их и удалять, Задачи можно настраивать еженедельно, ежедневно, ежемесячно на конкретные дату и время. Уведомления можно настроить на любое время и дату, каждый понедельник приходит уведомления со списком задач на неделю, дизайн футуристичный, сочетание черного, красного и голубого цветов

Browse files
Files changed (6) hide show
  1. README.md +7 -4
  2. components/footer.js +70 -0
  3. components/navbar.js +61 -0
  4. index.html +196 -19
  5. script.js +81 -0
  6. style.css +32 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Tasktron Futuristic Task Manager
3
- emoji: 🏢
4
- colorFrom: gray
5
  colorTo: pink
 
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: TaskTron - Futuristic Task Manager 🤖
3
+ colorFrom: blue
 
4
  colorTo: pink
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://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer-link:hover {
7
+ color: #3182CE;
8
+ transform: translateX(2px);
9
+ }
10
+ </style>
11
+ <footer class="bg-dark border-t border-gray-800 py-8 mt-12">
12
+ <div class="container mx-auto px-4">
13
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
14
+ <div>
15
+ <h3 class="text-lg font-bold mb-4 flex items-center">
16
+ <div class="bg-gradient-to-r from-primary to-secondary p-1.5 rounded-lg mr-2">
17
+ <i data-feather="check-square" class="text-white w-4 h-4"></i>
18
+ </div>
19
+ TaskTron
20
+ </h3>
21
+ <p class="text-gray-400 text-sm">Futuristic task management with Telegram integration.</p>
22
+ </div>
23
+
24
+ <div>
25
+ <h4 class="font-medium mb-4">Product</h4>
26
+ <ul class="space-y-2">
27
+ <li><a href="#" class="footer-link text-gray-400 hover:text-secondary text-sm transition duration-200 flex items-center"><i data-feather="chevron-right" class="w-3 h-3 mr-1"></i> Features</a></li>
28
+ <li><a href="#" class="footer-link text-gray-400 hover:text-secondary text-sm transition duration-200 flex items-center"><i data-feather="chevron-right" class="w-3 h-3 mr-1"></i> Pricing</a></li>
29
+ <li><a href="#" class="footer-link text-gray-400 hover:text-secondary text-sm transition duration-200 flex items-center"><i data-feather="chevron-right" class="w-3 h-3 mr-1"></i> API</a></li>
30
+ </ul>
31
+ </div>
32
+
33
+ <div>
34
+ <h4 class="font-medium mb-4">Resources</h4>
35
+ <ul class="space-y-2">
36
+ <li><a href="#" class="footer-link text-gray-400 hover:text-secondary text-sm transition duration-200 flex items-center"><i data-feather="chevron-right" class="w-3 h-3 mr-1"></i> Documentation</a></li>
37
+ <li><a href="#" class="footer-link text-gray-400 hover:text-secondary text-sm transition duration-200 flex items-center"><i data-feather="chevron-right" class="w-3 h-3 mr-1"></i> Guides</a></li>
38
+ <li><a href="#" class="footer-link text-gray-400 hover:text-secondary text-sm transition duration-200 flex items-center"><i data-feather="chevron-right" class="w-3 h-3 mr-1"></i> Blog</a></li>
39
+ </ul>
40
+ </div>
41
+
42
+ <div>
43
+ <h4 class="font-medium mb-4">Connect</h4>
44
+ <div class="flex space-x-4">
45
+ <a href="#" class="text-gray-400 hover:text-secondary transition duration-200">
46
+ <i data-feather="github"></i>
47
+ </a>
48
+ <a href="#" class="text-gray-400 hover:text-secondary transition duration-200">
49
+ <i data-feather="twitter"></i>
50
+ </a>
51
+ <a href="#" class="text-gray-400 hover:text-secondary transition duration-200">
52
+ <i data-feather="linkedin"></i>
53
+ </a>
54
+ <a href="#" class="text-gray-400 hover:text-secondary transition duration-200">
55
+ <i data-feather="telegram"></i>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-gray-500 text-center">
62
+ <p>© 2023 TaskTron. All rights reserved.</p>
63
+ </div>
64
+ </div>
65
+ </footer>
66
+ `;
67
+ }
68
+ }
69
+
70
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .nav-link {
7
+ position: relative;
8
+ }
9
+
10
+ .nav-link::after {
11
+ content: '';
12
+ position: absolute;
13
+ width: 0;
14
+ height: 2px;
15
+ bottom: -2px;
16
+ left: 0;
17
+ background-color: #E53E3E;
18
+ transition: width 0.3s ease;
19
+ }
20
+
21
+ .nav-link:hover::after {
22
+ width: 100%;
23
+ }
24
+
25
+ .active::after {
26
+ width: 100%;
27
+ }
28
+ </style>
29
+ <nav class="bg-dark border-b border-gray-800">
30
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
31
+ <div class="flex items-center">
32
+ <a href="#" class="flex items-center">
33
+ <div class="bg-gradient-to-r from-primary to-secondary p-2 rounded-lg mr-3">
34
+ <i data-feather="check-square" class="text-white"></i>
35
+ </div>
36
+ <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">TaskTron</span>
37
+ </a>
38
+ </div>
39
+
40
+ <div class="hidden md:flex space-x-6 items-center">
41
+ <a href="#" class="nav-link active text-white">Dashboard</a>
42
+ <a href="#" class="nav-link text-gray-400 hover:text-white">Calendar</a>
43
+ <a href="#" class="nav-link text-gray-400 hover:text-white">Team</a>
44
+ <a href="#" class="nav-link text-gray-400 hover:text-white">Settings</a>
45
+ <div class="h-6 w-px bg-gray-700 mx-2"></div>
46
+ <button class="flex items-center space-x-2 bg-gray-800 hover:bg-gray-700 px-3 py-1.5 rounded-lg transition duration-200">
47
+ <i data-feather="user" class="w-4 h-4"></i>
48
+ <span>Profile</span>
49
+ </button>
50
+ </div>
51
+
52
+ <button class="md:hidden text-gray-400 hover:text-white">
53
+ <i data-feather="menu"></i>
54
+ </button>
55
+ </div>
56
+ </nav>
57
+ `;
58
+ }
59
+ }
60
+
61
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,196 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TaskTron - Futuristic Task Manager</title>
7
+ <link rel="stylesheet" href="style.css">
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>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#E53E3E', // red-600
18
+ secondary: '#3182CE', // blue-600
19
+ dark: '#1A202C',
20
+ darker: '#171923'
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ </head>
27
+ <body class="bg-darker text-gray-200 min-h-screen">
28
+ <custom-navbar></custom-navbar>
29
+
30
+ <main class="container mx-auto px-4 py-8">
31
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
32
+ <!-- Task Creation Panel -->
33
+ <div class="bg-dark rounded-xl p-6 shadow-lg border-l-4 border-primary">
34
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
35
+ <i data-feather="plus-circle" class="mr-2 text-primary"></i>
36
+ New Task
37
+ </h2>
38
+
39
+ <form id="taskForm" class="space-y-4">
40
+ <div>
41
+ <label class="block text-sm font-medium mb-1">Task Name</label>
42
+ <input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
43
+ </div>
44
+
45
+ <div>
46
+ <label class="block text-sm font-medium mb-1">Description</label>
47
+ <textarea class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" rows="3"></textarea>
48
+ </div>
49
+
50
+ <div class="grid grid-cols-2 gap-4">
51
+ <div>
52
+ <label class="block text-sm font-medium mb-1">Due Date</label>
53
+ <input type="datetime-local" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
54
+ </div>
55
+
56
+ <div>
57
+ <label class="block text-sm font-medium mb-1">Recurrence</label>
58
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
59
+ <option value="once">Once</option>
60
+ <option value="daily">Daily</option>
61
+ <option value="weekly">Weekly</option>
62
+ <option value="monthly">Monthly</option>
63
+ </select>
64
+ </div>
65
+ </div>
66
+
67
+ <div>
68
+ <label class="block text-sm font-medium mb-1">Telegram Notification</label>
69
+ <div class="flex items-center">
70
+ <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded">
71
+ <span class="ml-2">Send to Telegram</span>
72
+ </div>
73
+ </div>
74
+
75
+ <button type="submit" class="w-full bg-primary hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
76
+ <i data-feather="save" class="mr-2"></i>
77
+ Create Task
78
+ </button>
79
+ </form>
80
+ </div>
81
+
82
+ <!-- Task List -->
83
+ <div class="lg:col-span-2">
84
+ <div class="bg-dark rounded-xl p-6 shadow-lg border-l-4 border-secondary">
85
+ <div class="flex justify-between items-center mb-6">
86
+ <h2 class="text-2xl font-bold flex items-center">
87
+ <i data-feather="list" class="mr-2 text-secondary"></i>
88
+ My Tasks
89
+ </h2>
90
+
91
+ <div class="flex space-x-2">
92
+ <button class="bg-gray-800 hover:bg-gray-700 text-sm px-3 py-1 rounded-lg transition duration-200">
93
+ All
94
+ </button>
95
+ <button class="bg-gray-800 hover:bg-gray-700 text-sm px-3 py-1 rounded-lg transition duration-200">
96
+ Active
97
+ </button>
98
+ <button class="bg-gray-800 hover:bg-gray-700 text-sm px-3 py-1 rounded-lg transition duration-200">
99
+ Completed
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <div id="taskList" class="space-y-3">
105
+ <!-- Task items will be added here dynamically -->
106
+ <div class="task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200">
107
+ <div class="flex justify-between items-start">
108
+ <div class="flex items-start">
109
+ <input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded">
110
+ <div class="ml-3">
111
+ <h3 class="font-medium">Complete project documentation</h3>
112
+ <p class="text-sm text-gray-400 mt-1">Due: Tomorrow, 10:00 AM</p>
113
+ <div class="flex items-center mt-2 text-xs">
114
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">Weekly</span>
115
+ <span class="flex items-center text-secondary">
116
+ <i data-feather="send" class="w-3 h-3 mr-1"></i>
117
+ Telegram
118
+ </span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <button class="text-gray-400 hover:text-red-500">
123
+ <i data-feather="trash-2" class="w-4 h-4"></i>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200">
129
+ <div class="flex justify-between items-start">
130
+ <div class="flex items-start">
131
+ <input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded" checked>
132
+ <div class="ml-3">
133
+ <h3 class="font-medium text-gray-500 line-through">Team meeting</h3>
134
+ <p class="text-sm text-gray-500 mt-1">Due: Today, 3:00 PM</p>
135
+ <div class="flex items-center mt-2 text-xs">
136
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">Daily</span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <button class="text-gray-400 hover:text-red-500">
141
+ <i data-feather="trash-2" class="w-4 h-4"></i>
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Notifications Panel -->
149
+ <div class="bg-dark rounded-xl p-6 shadow-lg border-l-4 border-secondary mt-6">
150
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
151
+ <i data-feather="bell" class="mr-2 text-secondary"></i>
152
+ Notifications
153
+ </h2>
154
+
155
+ <div class="space-y-4">
156
+ <div class="flex items-start">
157
+ <div class="bg-primary bg-opacity-20 p-2 rounded-lg mr-3">
158
+ <i data-feather="calendar" class="w-5 h-5 text-primary"></i>
159
+ </div>
160
+ <div>
161
+ <h3 class="font-medium">Weekly Digest</h3>
162
+ <p class="text-sm text-gray-400">Every Monday at 9:00 AM</p>
163
+ <p class="text-sm mt-1">Sends a summary of all tasks for the week</p>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="flex items-start">
168
+ <div class="bg-secondary bg-opacity-20 p-2 rounded-lg mr-3">
169
+ <i data-feather="clock" class="w-5 h-5 text-secondary"></i>
170
+ </div>
171
+ <div>
172
+ <h3 class="font-medium">Daily Reminder</h3>
173
+ <p class="text-sm text-gray-400">Every day at 8:00 AM</p>
174
+ <p class="text-sm mt-1">Reminds about tasks due today</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <button class="mt-6 bg-secondary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
180
+ <i data-feather="plus" class="mr-2"></i>
181
+ Add Notification
182
+ </button>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </main>
187
+
188
+ <custom-footer></custom-footer>
189
+
190
+ <script src="components/navbar.js"></script>
191
+ <script src="components/footer.js"></script>
192
+ <script src="script.js"></script>
193
+ <script>feather.replace();</script>
194
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
195
+ </body>
196
+ </html>
script.js ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Task form submission
3
+ const taskForm = document.getElementById('taskForm');
4
+ const taskList = document.getElementById('taskList');
5
+
6
+ taskForm.addEventListener('submit', function(e) {
7
+ e.preventDefault();
8
+
9
+ // Get form values
10
+ const taskName = this.elements[0].value;
11
+ const description = this.elements[1].value;
12
+ const dueDate = this.elements[2].value;
13
+ const recurrence = this.elements[3].value;
14
+ const telegramNotify = this.elements[4].checked;
15
+
16
+ // Create new task element
17
+ const taskItem = document.createElement('div');
18
+ taskItem.className = 'task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200';
19
+
20
+ const formattedDate = new Date(dueDate).toLocaleString('en-US', {
21
+ weekday: 'short',
22
+ month: 'short',
23
+ day: 'numeric',
24
+ hour: '2-digit',
25
+ minute: '2-digit'
26
+ });
27
+
28
+ taskItem.innerHTML = `
29
+ <div class="flex justify-between items-start">
30
+ <div class="flex items-start">
31
+ <input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded">
32
+ <div class="ml-3">
33
+ <h3 class="font-medium">${taskName}</h3>
34
+ <p class="text-sm text-gray-400 mt-1">Due: ${formattedDate}</p>
35
+ <div class="flex items-center mt-2 text-xs">
36
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">${recurrence.charAt(0).toUpperCase() + recurrence.slice(1)}</span>
37
+ ${telegramNotify ? `<span class="flex items-center text-secondary">
38
+ <i data-feather="send" class="w-3 h-3 mr-1"></i>
39
+ Telegram
40
+ </span>` : ''}
41
+ </div>
42
+ </div>
43
+ </div>
44
+ <button class="text-gray-400 hover:text-red-500 delete-task">
45
+ <i data-feather="trash-2" class="w-4 h-4"></i>
46
+ </button>
47
+ </div>
48
+ `;
49
+
50
+ // Add to task list
51
+ taskList.prepend(taskItem);
52
+ feather.replace();
53
+
54
+ // Add event listeners to new task
55
+ taskItem.querySelector('input[type="checkbox"]').addEventListener('change', function() {
56
+ const taskText = this.closest('.flex').querySelector('h3');
57
+ if (this.checked) {
58
+ taskText.classList.add('text-gray-500', 'line-through');
59
+ } else {
60
+ taskText.classList.remove('text-gray-500', 'line-through');
61
+ }
62
+ });
63
+
64
+ taskItem.querySelector('.delete-task').addEventListener('click', function() {
65
+ taskItem.classList.add('opacity-0');
66
+ setTimeout(() => {
67
+ taskItem.remove();
68
+ }, 300);
69
+ });
70
+
71
+ // Reset form
72
+ this.reset();
73
+ });
74
+
75
+ // Add animation to task items on load
76
+ document.querySelectorAll('.task-item').forEach((item, index) => {
77
+ setTimeout(() => {
78
+ item.classList.add('opacity-100');
79
+ }, index * 100);
80
+ });
81
+ });
style.css CHANGED
@@ -1,28 +1,41 @@
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
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
2
+
3
+ html {
4
+ font-family: 'Roboto', sans-serif;
5
+ }
6
+
7
+ .task-item {
8
+ transition: all 0.3s ease;
9
+ }
10
+
11
+ .task-item:hover {
12
+ transform: translateY(-2px);
13
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ /* Custom scrollbar */
17
+ ::-webkit-scrollbar {
18
+ width: 8px;
19
  }
20
 
21
+ ::-webkit-scrollbar-track {
22
+ background: #2D3748;
 
23
  }
24
 
25
+ ::-webkit-scrollbar-thumb {
26
+ background: #4A5568;
27
+ border-radius: 4px;
 
 
28
  }
29
 
30
+ ::-webkit-scrollbar-thumb:hover {
31
+ background: #718096;
 
 
 
 
32
  }
33
 
34
+ /* Glow effect for futuristic feel */
35
+ .glow-primary {
36
+ box-shadow: 0 0 10px rgba(229, 62, 62, 0.5);
37
  }
38
+
39
+ .glow-secondary {
40
+ box-shadow: 0 0 10px rgba(49, 130, 206, 0.5);
41
+ }