Hugging Face's logo

Spaces:
Toyshot
/
claude-s-shadowy-sanctuary
Running

App Files Community
Toyshot commited on
Commit
beead17
·
verified ·
1 Parent(s): e6c117d

Make the sidebar a bit smaller and add the button that closes it on the chat side abr and a real icon maybe like 3 lines and the icons in the prompt input bar the funnel the + and the clock should be below the text that says How can I help you today?

Browse files
Files changed (1) hide show
  1. index.html +35 -34
index.html CHANGED
@@ -55,28 +55,27 @@
55
  </head>
56
  <body class="h-full bg-dark-900 text-gray-100 flex">
57
  <!-- Left Sidebar -->
58
- <div id="sidebar" class="w-[280px] h-full bg-[#171617] flex flex-col border-r border-dark-700 transition-all duration-300 ease-in-out">
59
  <button id="sidebar-toggle" class="absolute top-4 -right-3 z-10 w-6 h-6 bg-dark-700 rounded-full flex items-center justify-center border border-dark-600 shadow-lg hover:bg-dark-600 transition-colors">
60
- <i data-feather="chevron-left" class="w-4 h-4 stroke-gray-400"></i>
61
- </button>
62
  <!-- Logo -->
63
  <div class="p-6 pt-5">
64
  <h1 class="text-xl serif text-[#EAE7E3]">Syntra</h1>
65
  </div>
66
-
67
  <!-- New Chat Button -->
68
- <div class="mx-6 mb-6 mt-[70px]">
69
- <button class="flex items-center gap-3">
70
- <div class="w-[34px] h-[34px] rounded-full bg-[#FF6B3A] flex items-center justify-center">
71
- <i data-feather="plus" class="w-4 h-4 stroke-white stroke-[2.5px]"></i>
72
  </div>
73
- <span class="text-[14px] font-medium text-[#F5F5F5]">New chat</span>
74
- </button>
75
  </div>
76
 
77
  <!-- Navigation -->
78
- <nav class="px-6 space-y-5">
79
- <a href="#" class="nav-item flex items-center gap-3">
80
  <i data-feather="message-square" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i>
81
  <span class="text-[14px] text-[#EDEDED]">Chats</span>
82
  </a>
@@ -89,10 +88,9 @@
89
  <span class="text-[14px] text-[#EDEDED]">Artifacts</span>
90
  </a>
91
  </nav>
92
-
93
  <!-- Recents -->
94
- <div class="mt-8 px-6">
95
- <p class="text-[11px] uppercase text-[#8F8F8F] tracking-wider">Recents</p>
96
  <div class="mt-3 space-y-3">
97
  <a href="#" class="chat-item block">
98
  <span class="text-[14px] text-[#DCDCDC]">Understanding electrolysis process</span>
@@ -106,8 +104,8 @@
106
  </div>
107
  </div>
108
  <!-- User Info -->
109
- <div class="mt-auto p-6 flex items-center">
110
- <div class="w-10 h-10 rounded-full bg-[#3A3A3A] flex items-center justify-center">
111
  <span class="text-white font-bold">T</span>
112
  </div>
113
  <div class="ml-3">
@@ -141,24 +139,27 @@
141
  <div class="w-full max-w-2xl">
142
  <div class="bg-dark-700 rounded-xl p-1.5 shadow-lg">
143
  <div class="relative">
144
- <input
145
- type="text"
146
- placeholder="How can I help you today?"
147
- class="w-full bg-dark-700 py-4 pl-14 pr-36 rounded-xl focus:outline-none"
148
- >
149
- <div class="absolute left-4 top-1/2 transform -translate-y-1/2 flex space-x-3">
150
- <button class="w-6 h-6 flex items-center justify-center rounded hover:bg-dark-600">
151
- <i data-feather="plus" class="w-4 h-4 stroke-gray-400"></i>
152
  </button>
153
- <button class="w-6 h-6 flex items-center justify-center rounded hover:bg-dark-600">
154
- <i data-feather="filter" class="w-4 h-4 stroke-gray-400"></i>
 
155
  </button>
156
- <button class="w-6 h-6 flex items-center justify-center rounded hover:bg-dark-600">
157
- <i data-feather="clock" class="w-4 h-4 stroke-gray-400"></i>
 
158
  </button>
159
  </div>
160
-
161
- <div class="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center space-x-1.5">
 
 
 
 
162
  <div class="flex items-center px-2.5 py-1 rounded-lg hover:bg-dark-600">
163
  <span class="text-sm text-gray-400">Sonnet 4.5</span>
164
  <i data-feather="chevron-down" class="w-4 h-4 stroke-gray-400 ml-1"></i>
@@ -188,10 +189,10 @@
188
 
189
  // Rotate chevron icon
190
  if (sidebar.classList.contains('w-0')) {
191
- chevron.setAttribute('data-feather', 'chevron-right');
192
  } else {
193
- chevron.setAttribute('data-feather', 'chevron-left');
194
- }
195
  feather.replace();
196
  });
197
 
 
55
  </head>
56
  <body class="h-full bg-dark-900 text-gray-100 flex">
57
  <!-- Left Sidebar -->
58
+ <div id="sidebar" class="w-[240px] h-full bg-[#171617] flex flex-col border-r border-dark-700 transition-all duration-300 ease-in-out">
59
  <button id="sidebar-toggle" class="absolute top-4 -right-3 z-10 w-6 h-6 bg-dark-700 rounded-full flex items-center justify-center border border-dark-600 shadow-lg hover:bg-dark-600 transition-colors">
60
+ <i data-feather="menu" class="w-4 h-4 stroke-gray-400"></i>
61
+ </button>
62
  <!-- Logo -->
63
  <div class="p-6 pt-5">
64
  <h1 class="text-xl serif text-[#EAE7E3]">Syntra</h1>
65
  </div>
 
66
  <!-- New Chat Button -->
67
+ <div class="mx-4 mb-6 mt-[70px]">
68
+ <button class="flex items-center gap-2">
69
+ <div class="w-[30px] h-[30px] rounded-full bg-[#FF6B3A] flex items-center justify-center">
70
+ <i data-feather="plus" class="w-3.5 h-3.5 stroke-white stroke-[2.5px]"></i>
71
  </div>
72
+ <span class="text-[13px] font-medium text-[#F5F5F5]">New chat</span>
73
+ </button>
74
  </div>
75
 
76
  <!-- Navigation -->
77
+ <nav class="px-4 space-y-4">
78
+ <a href="#" class="nav-item flex items-center gap-3">
79
  <i data-feather="message-square" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i>
80
  <span class="text-[14px] text-[#EDEDED]">Chats</span>
81
  </a>
 
88
  <span class="text-[14px] text-[#EDEDED]">Artifacts</span>
89
  </a>
90
  </nav>
 
91
  <!-- Recents -->
92
+ <div class="mt-8 px-4">
93
+ <p class="text-[11px] uppercase text-[#8F8F8F] tracking-wider">Recents</p>
94
  <div class="mt-3 space-y-3">
95
  <a href="#" class="chat-item block">
96
  <span class="text-[14px] text-[#DCDCDC]">Understanding electrolysis process</span>
 
104
  </div>
105
  </div>
106
  <!-- User Info -->
107
+ <div class="mt-auto p-4 flex items-center">
108
+ <div class="w-10 h-10 rounded-full bg-[#3A3A3A] flex items-center justify-center">
109
  <span class="text-white font-bold">T</span>
110
  </div>
111
  <div class="ml-3">
 
139
  <div class="w-full max-w-2xl">
140
  <div class="bg-dark-700 rounded-xl p-1.5 shadow-lg">
141
  <div class="relative">
142
+ <p class="text-sm text-gray-400 px-4 pt-3 pb-1">How can I help you today?</p>
143
+ <div class="flex px-4 pb-3 space-x-3">
144
+ <button class="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-300">
145
+ <i data-feather="plus" class="w-3 h-3 stroke-current"></i>
146
+ <span>Attach</span>
 
 
 
147
  </button>
148
+ <button class="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-300">
149
+ <i data-feather="filter" class="w-3 h-3 stroke-current"></i>
150
+ <span>Filter</span>
151
  </button>
152
+ <button class="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-300">
153
+ <i data-feather="clock" class="w-3 h-3 stroke-current"></i>
154
+ <span>History</span>
155
  </button>
156
  </div>
157
+ <input
158
+ type="text"
159
+ placeholder=""
160
+ class="w-full bg-dark-700 px-4 pb-3 rounded-xl focus:outline-none"
161
+ >
162
+ <div class="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center space-x-1.5">
163
  <div class="flex items-center px-2.5 py-1 rounded-lg hover:bg-dark-600">
164
  <span class="text-sm text-gray-400">Sonnet 4.5</span>
165
  <i data-feather="chevron-down" class="w-4 h-4 stroke-gray-400 ml-1"></i>
 
189
 
190
  // Rotate chevron icon
191
  if (sidebar.classList.contains('w-0')) {
192
+ chevron.setAttribute('data-feather', 'menu');
193
  } else {
194
+ chevron.setAttribute('data-feather', 'menu');
195
+ }
196
  feather.replace();
197
  });
198