Hugging Face's logo

Spaces:
nixaut-codelabs
/
neural-nexus-ai
Running

App Files Community
nixaut-codelabs commited on
Commit
31f4b4c
·
verified ·
1 Parent(s): 13f0280

make "Nixaut AI Assistant" in the sidebar more cool & modern.

Browse files
Files changed (1) hide show
  1. components/sidebar.js +170 -10
components/sidebar.js CHANGED
@@ -25,23 +25,169 @@ class CustomSidebar extends HTMLElement {
25
  display: flex;
26
  flex-direction: column;
27
  }
28
- .sidebar-header {
29
  margin-bottom: 24px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
 
32
  .sidebar-title {
33
- font-size: 18px;
34
- font-weight: 700;
35
- color: #ffffff;
36
- margin-bottom: 8px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  }
38
 
39
  .sidebar-subtitle {
40
  font-size: 12px;
41
  color: #71717a;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
 
44
- .new-chat-btn {
 
 
 
 
 
 
 
 
 
 
45
  display: flex;
46
  align-items: center;
47
  justify-content: center;
@@ -323,11 +469,25 @@ class CustomSidebar extends HTMLElement {
323
 
324
  <nav class="sidebar">
325
  <div class="sidebar-header">
326
- <h1 class="sidebar-title">Nixaut</h1>
327
- <p class="sidebar-subtitle">AI Assistant</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
  </div>
329
-
330
- <div class="sidebar-buttons">
331
  <button onclick="startNewChat()" class="new-chat-btn">
332
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
333
  <path d="M12 5v14m-7-7h14"/>
 
25
  display: flex;
26
  flex-direction: column;
27
  }
28
+ .sidebar-header {
29
  margin-bottom: 24px;
30
+ text-align: center;
31
+ position: relative;
32
+ }
33
+
34
+ .logo-container {
35
+ display: flex;
36
+ justify-content: center;
37
+ margin-bottom: 12px;
38
+ }
39
+
40
+ .logo-wrapper {
41
+ position: relative;
42
+ width: 60px;
43
+ height: 60px;
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+ }
48
+
49
+ .logo-inner {
50
+ position: relative;
51
+ width: 40px;
52
+ height: 40px;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ }
57
+
58
+ .logo-core {
59
+ width: 20px;
60
+ height: 20px;
61
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
62
+ border-radius: 50%;
63
+ position: absolute;
64
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
65
+ animation: corePulse 2s ease-in-out infinite;
66
+ }
67
+
68
+ .logo-ring {
69
+ position: absolute;
70
+ border: 2px solid transparent;
71
+ border-radius: 50%;
72
+ animation: ringRotate 4s linear infinite;
73
+ }
74
+
75
+ .logo-ring-1 {
76
+ width: 40px;
77
+ height: 40px;
78
+ border-top-color: #3b82f6;
79
+ border-right-color: #3b82f6;
80
+ animation-duration: 3s;
81
+ }
82
+
83
+ .logo-ring-2 {
84
+ width: 50px;
85
+ height: 50px;
86
+ border-bottom-color: #8b5cf6;
87
+ border-left-color: #8b5cf6;
88
+ animation-duration: 4s;
89
+ animation-direction: reverse;
90
+ }
91
+
92
+ .logo-ring-3 {
93
+ width: 60px;
94
+ height: 60px;
95
+ border-top-color: #ec4899;
96
+ border-bottom-color: #ec4899;
97
+ animation-duration: 5s;
98
  }
99
 
100
  .sidebar-title {
101
+ font-size: 24px;
102
+ font-weight: 800;
103
+ margin-bottom: 6px;
104
+ letter-spacing: -0.5px;
105
+ }
106
+
107
+ .title-gradient {
108
+ background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 50%, #71717a 100%);
109
+ -webkit-background-clip: text;
110
+ -webkit-text-fill-color: transparent;
111
+ background-clip: text;
112
+ text-fill-color: transparent;
113
+ position: relative;
114
+ }
115
+
116
+ .title-gradient::after {
117
+ content: '';
118
+ position: absolute;
119
+ bottom: -2px;
120
+ left: 50%;
121
+ transform: translateX(-50%);
122
+ width: 30px;
123
+ height: 2px;
124
+ background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
125
+ animation: titleGlow 3s ease-in-out infinite;
126
  }
127
 
128
  .sidebar-subtitle {
129
  font-size: 12px;
130
  color: #71717a;
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ gap: 8px;
135
+ flex-wrap: wrap;
136
+ }
137
+
138
+ .subtitle-glow {
139
+ color: #a1a1aa;
140
+ font-weight: 500;
141
+ text-transform: uppercase;
142
+ letter-spacing: 1px;
143
+ position: relative;
144
+ }
145
+
146
+ .status-pill {
147
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
148
+ color: white;
149
+ font-size: 9px;
150
+ font-weight: 600;
151
+ padding: 2px 8px;
152
+ border-radius: 12px;
153
+ text-transform: uppercase;
154
+ letter-spacing: 0.5px;
155
+ box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
156
+ animation: statusPulse 2s ease-in-out infinite;
157
+ }
158
+
159
+ @keyframes corePulse {
160
+ 0%, 100% {
161
+ transform: scale(1);
162
+ box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
163
+ }
164
+ 50% {
165
+ transform: scale(1.1);
166
+ box-shadow: 0 0 30px rgba(139, 92, 246, 0.8);
167
+ }
168
+ }
169
+
170
+ @keyframes ringRotate {
171
+ 0% { transform: rotate(0deg); }
172
+ 100% { transform: rotate(360deg); }
173
+ }
174
+
175
+ @keyframes titleGlow {
176
+ 0%, 100% { opacity: 0.3; width: 30px; }
177
+ 50% { opacity: 1; width: 50px; }
178
  }
179
 
180
+ @keyframes statusPulse {
181
+ 0%, 100% {
182
+ box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
183
+ transform: scale(1);
184
+ }
185
+ 50% {
186
+ box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
187
+ transform: scale(1.05);
188
+ }
189
+ }
190
+ .new-chat-btn {
191
  display: flex;
192
  align-items: center;
193
  justify-content: center;
 
469
 
470
  <nav class="sidebar">
471
  <div class="sidebar-header">
472
+ <div class="logo-container mb-3">
473
+ <div class="logo-wrapper">
474
+ <div class="logo-inner">
475
+ <div class="logo-core"></div>
476
+ <div class="logo-ring logo-ring-1"></div>
477
+ <div class="logo-ring logo-ring-2"></div>
478
+ <div class="logo-ring logo-ring-3"></div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ <h1 class="sidebar-title">
483
+ <span class="title-gradient">Nixaut</span>
484
+ </h1>
485
+ <p class="sidebar-subtitle">
486
+ <span class="subtitle-glow">AI Assistant</span>
487
+ <span class="status-pill">Online</span>
488
+ </p>
489
  </div>
490
+ <div class="sidebar-buttons">
 
491
  <button onclick="startNewChat()" class="new-chat-btn">
492
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
493
  <path d="M12 5v14m-7-7h14"/>