Hugging Face's logo

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

App Files Community
Toyshot commited on
Commit
78f4a8d
·
verified ·
1 Parent(s): 20651ad

Fix the buttons to be correct at the buottom the attack the filter and history but no text just their icons in the prompt input bar at the bottom left please nicely the sonnet 4.5 should be bottom right corner and the send button inline with the what can i help with text please and enhance the chat side bar please and move the 3 lines that closes or opens the sidebar to be on the chat side bar on the left of the text saying Syntra please and enhance the sidebar

Browse files
Files changed (1) hide show
  1. index.html +49 -53
index.html CHANGED
@@ -56,13 +56,13 @@
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
  <!-- Logo -->
60
- <div class="p-6 pt-5 flex items-center">
61
- <button id="sidebar-toggle" class="mr-4 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">
62
- <i data-feather="menu" class="w-4 h-4 stroke-gray-400"></i>
63
- </button>
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">
@@ -72,50 +72,48 @@
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 mt-4">
78
- <a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg bg-dark-800">
79
- <i data-feather="message-square" class="w-5 h-5 stroke-accent-500 stroke-[1.5px]"></i>
80
- <span class="text-[14px] font-medium text-white">Chats</span>
81
  </a>
82
- <a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-dark-700 transition-colors">
83
  <i data-feather="folder" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i>
84
- <span class="text-[14px] text-[#DCDCDC]">Projects</span>
85
  </a>
86
- <a href="#" class="nav-item flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-dark-700 transition-colors">
87
  <i data-feather="hexagon" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i>
88
- <span class="text-[14px] text-[#DCDCDC]">Artifacts</span>
89
  </a>
90
- </nav>
91
- <!-- Recents -->
92
- <div class="mt-8 px-4 border-t border-dark-700 pt-4">
93
- <p class="text-[11px] uppercase text-[#8F8F8F] tracking-wider font-medium">Recents</p>
94
- <div class="mt-3 space-y-2">
95
- <a href="#" class="chat-item block px-3 py-2 rounded-lg hover:bg-dark-700 transition-colors">
96
- <span class="text-[14px] text-[#DCDCDC] font-medium">Understanding electrolysis process</span>
 
97
  </a>
98
- <a href="#" class="chat-item block px-3 py-2 rounded-lg hover:bg-dark-700 transition-colors">
99
  <span class="text-[14px] text-[#DCDCDC]">Greeting</span>
100
  </a>
101
- <a href="#" class="chat-item block px-3 py-2 rounded-lg hover:bg-dark-700 transition-colors">
102
  <span class="text-[14px] text-[#DCDCDC]">Untitled</span>
103
  </a>
104
- </div>
105
  </div>
106
- <!-- User Info -->
107
- <div class="mt-auto p-4 border-t border-dark-700 flex items-center">
108
- <div class="w-10 h-10 rounded-full bg-dark-700 flex items-center justify-center border border-dark-600">
109
- <span class="text-white font-medium">T</span>
110
  </div>
111
  <div class="ml-3">
112
- <p class="text-[14px] text-white font-medium">Toy</p>
113
- <p class="text-[12px] text-gray-400">Free plan</p>
114
  </div>
115
- <button class="ml-auto text-gray-400 hover:text-white">
116
- <i data-feather="settings" class="w-4 h-4"></i>
117
- </button>
118
- </div>
119
  </div>
120
 
121
  <!-- Main Content -->
@@ -143,31 +141,29 @@
143
  <div class="bg-dark-700 rounded-xl p-1.5 shadow-lg">
144
  <div class="relative">
145
  <p class="text-sm text-gray-400 px-4 pt-3 pb-1">How can I help you today?</p>
146
- <div class="flex px-4 pb-3 items-center">
147
- <button class="p-1 text-gray-400 hover:text-gray-300">
148
  <i data-feather="plus" class="w-4 h-4 stroke-current"></i>
149
  </button>
150
- <button class="p-1 text-gray-400 hover:text-gray-300">
151
  <i data-feather="filter" class="w-4 h-4 stroke-current"></i>
152
  </button>
153
  <button class="p-1 text-gray-400 hover:text-gray-300">
154
  <i data-feather="clock" class="w-4 h-4 stroke-current"></i>
155
  </button>
156
  </div>
157
- <div class="flex items-center px-4 pb-3">
158
- <input
159
- type="text"
160
- placeholder=""
161
- class="w-full bg-dark-700 focus:outline-none"
162
- >
163
- <div class="flex items-center space-x-1.5 ml-2">
164
- <div class="flex items-center px-2.5 py-1 rounded-lg hover:bg-dark-600">
165
- <span class="text-sm text-gray-400">Sonnet 4.5</span>
166
- <i data-feather="chevron-down" class="w-4 h-4 stroke-gray-400 ml-1"></i>
167
- </div>
168
- <button class="w-10 h-10 rounded-lg bg-accent-500 flex items-center justify-center hover:bg-accent-600">
169
- <i data-feather="arrow-up" class="w-4 h-4 stroke-white"></i>
170
- </button>
171
  </div>
172
  </div>
173
  </div>
 
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="ml-2 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="flex items-center p-4">
64
+ <h1 class="text-xl serif text-[#EAE7E3] ml-2">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">
 
72
  <span class="text-[13px] font-medium text-[#F5F5F5]">New chat</span>
73
  </button>
74
  </div>
75
+ <!-- Enhanced Navigation -->
76
+ <nav class="px-4 space-y-3">
77
+ <div class="border-t border-dark-700 my-2"></div>
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>
82
+ <a href="#" class="nav-item flex items-center gap-3">
83
  <i data-feather="folder" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i>
84
+ <span class="text-[14px] text-[#EDEDED]">Projects</span>
85
  </a>
86
+ <a href="#" class="nav-item flex items-center gap-3">
87
  <i data-feather="hexagon" class="w-5 h-5 stroke-[#A8A8A8] stroke-[1.5px]"></i>
88
+ <span class="text-[14px] text-[#EDEDED]">Artifacts</span>
89
  </a>
90
+ </nav>
91
+ <!-- Enhanced Recents -->
92
+ <div class="mt-6 px-4">
93
+ <div class="border-t border-dark-700 my-3"></div>
94
+ <p class="text-[11px] uppercase text-[#8F8F8F] tracking-wider">Recents</p>
95
+ <div class="mt-3 space-y-3">
96
+ <a href="#" class="chat-item block">
97
+ <span class="text-[14px] text-[#DCDCDC]">Understanding electrolysis process</span>
98
  </a>
99
+ <a href="#" class="chat-item block">
100
  <span class="text-[14px] text-[#DCDCDC]">Greeting</span>
101
  </a>
102
+ <a href="#" class="chat-item block">
103
  <span class="text-[14px] text-[#DCDCDC]">Untitled</span>
104
  </a>
105
+ </div>
106
  </div>
107
+ <!-- Enhanced User Info -->
108
+ <div class="mt-auto p-4 flex items-center border-t border-dark-700">
109
+ <div class="w-10 h-10 rounded-full bg-[#3A3A3A] flex items-center justify-center">
110
+ <span class="text-white font-bold">T</span>
111
  </div>
112
  <div class="ml-3">
113
+ <p class="text-[14px] text-white">Toy</p>
114
+ <p class="text-[12px] text-[#9A9A9A]">Free plan</p>
115
  </div>
116
+ </div>
 
 
 
117
  </div>
118
 
119
  <!-- Main Content -->
 
141
  <div class="bg-dark-700 rounded-xl p-1.5 shadow-lg">
142
  <div class="relative">
143
  <p class="text-sm text-gray-400 px-4 pt-3 pb-1">How can I help you today?</p>
144
+ <div class="flex px-4 pb-3">
145
+ <button class="p-1 text-gray-400 hover:text-gray-300 mr-2">
146
  <i data-feather="plus" class="w-4 h-4 stroke-current"></i>
147
  </button>
148
+ <button class="p-1 text-gray-400 hover:text-gray-300 mr-2">
149
  <i data-feather="filter" class="w-4 h-4 stroke-current"></i>
150
  </button>
151
  <button class="p-1 text-gray-400 hover:text-gray-300">
152
  <i data-feather="clock" class="w-4 h-4 stroke-current"></i>
153
  </button>
154
  </div>
155
+ <input
156
+ type="text"
157
+ placeholder=""
158
+ class="w-full bg-dark-700 px-4 pb-3 rounded-xl focus:outline-none"
159
+ >
160
+ <div class="absolute right-2 bottom-3 flex items-center space-x-2">
161
+ <button class="w-8 h-8 rounded-lg bg-accent-500 flex items-center justify-center hover:bg-accent-600">
162
+ <i data-feather="arrow-up" class="w-4 h-4 stroke-white"></i>
163
+ </button>
164
+ <div class="flex items-center px-2.5 py-1 rounded-lg hover:bg-dark-600">
165
+ <span class="text-sm text-gray-400">Sonnet 4.5</span>
166
+ <i data-feather="chevron-down" class="w-4 h-4 stroke-gray-400 ml-1"></i>
 
 
167
  </div>
168
  </div>
169
  </div>