Hugging Face's logo

Spaces:
Reality123b
/
hehe
Sleeping

App Files Community
Reality123b commited on
Commit
a03bdea
·
verified ·
1 Parent(s): 9af1912

Update application/templates/index.html

Browse files
Files changed (1) hide show
  1. application/templates/index.html +90 -37
application/templates/index.html CHANGED
@@ -3,17 +3,16 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Xylaria AI Chat</title>
7
 
8
  <!-- Fonts -->
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
 
12
  <!-- Icons -->
13
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
 
15
  <!-- Syntax Highlighting -->
16
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/atom-one-dark.min.css">
17
 
18
  <!-- MathJax -->
19
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
@@ -25,32 +24,42 @@
25
  <body>
26
  <!-- Navigation -->
27
  <nav class="nav-container">
 
28
  <div class="nav-content">
29
  <div class="nav-left">
30
  <div class="hamburger" id="hamburger">
31
  <div class="line1"></div>
32
  <div class="line2"></div>
 
33
  </div>
34
  <div class="brand">
 
 
 
35
  <span class="brand-text">Xylaria</span>
36
- <span class="brand-version">v2.0</span>
37
  </div>
38
  </div>
39
 
40
  <div class="nav-center">
41
- <select name="models" id="models" class="models">
42
- <option value="gpt-4">GPT-4</option>
43
- <option value="gpt-3.5">GPT-3.5</option>
44
- <option value="claude">Claude</option>
45
- </select>
 
 
 
46
  </div>
47
 
48
  <div class="nav-right">
49
  <button class="theme-toggle" id="themeToggle">
50
  <i class="fas fa-moon"></i>
 
51
  </button>
52
  <button class="settings-btn" id="settingsBtn">
53
  <i class="fas fa-cog"></i>
 
54
  </button>
55
  </div>
56
  </div>
@@ -58,54 +67,98 @@
58
 
59
  <!-- Sidebar Menu -->
60
  <div class="menu" id="menu">
61
- <div class="menu-header">
62
- <div class="new-chat" id="newChat">
63
- <i class="fas fa-plus"></i>
64
- <span>New Chat</span>
65
- </div>
66
- </div>
67
-
68
  <div class="menu-content">
69
- <div class="chats-header">
70
- <span class="chats-title">Recent Chats</span>
71
- <button class="clear-chats" id="clearChats">
72
- <i class="fas fa-trash-alt"></i>
73
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  </div>
75
- <div class="prev-chats-cont" id="prevChatsCont"></div>
76
- </div>
77
-
78
- <div class="menu-footer">
79
- <button class="discord-btn">
80
- <i class="fab fa-discord"></i>
81
- <span>Join Discord</span>
82
- </button>
83
  </div>
84
  </div>
85
 
86
  <!-- Main Container -->
87
  <div class="container" id="container">
88
  <div class="messages" id="messages">
89
- <!-- Messages will be dynamically inserted here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
 
92
  <div class="input-container">
 
93
  <div class="inputs">
94
  <button id="webSearch" class="web-search">
95
  <i class="fa-solid fa-globe"></i>
 
96
  </button>
97
- <textarea
98
- id="textBox"
99
- class="text-box"
100
- placeholder="Send a message..."
101
- rows="1"
102
- ></textarea>
 
 
 
 
 
 
 
 
 
 
103
  <button id="sendBtn" class="send-btn">
104
  <i class="fa-solid fa-paper-plane"></i>
 
105
  </button>
106
  </div>
107
  <div class="input-footer">
108
  <span class="input-info">AI may produce inaccurate information</span>
 
 
 
 
 
109
  </div>
110
  </div>
111
  </div>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Enhanced AI Chat</title>
7
 
8
  <!-- Fonts -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
10
 
11
  <!-- Icons -->
12
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
 
14
  <!-- Syntax Highlighting -->
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/tokyo-night-dark.min.css">
16
 
17
  <!-- MathJax -->
18
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 
24
  <body>
25
  <!-- Navigation -->
26
  <nav class="nav-container">
27
+ <div class="nav-blur"></div>
28
  <div class="nav-content">
29
  <div class="nav-left">
30
  <div class="hamburger" id="hamburger">
31
  <div class="line1"></div>
32
  <div class="line2"></div>
33
+ <div class="line3"></div>
34
  </div>
35
  <div class="brand">
36
+ <div class="brand-icon">
37
+ <div class="brand-animate"></div>
38
+ </div>
39
  <span class="brand-text">Xylaria</span>
40
+ <span class="brand-version">3.0</span>
41
  </div>
42
  </div>
43
 
44
  <div class="nav-center">
45
+ <div class="model-selector">
46
+ <select name="models" id="models" class="models">
47
+ <option value="gpt-4">GPT-4 Turbo</option>
48
+ <option value="gpt-3.5">GPT-3.5</option>
49
+ <option value="claude">Claude 3</option>
50
+ </select>
51
+ <div class="model-indicator"></div>
52
+ </div>
53
  </div>
54
 
55
  <div class="nav-right">
56
  <button class="theme-toggle" id="themeToggle">
57
  <i class="fas fa-moon"></i>
58
+ <div class="toggle-ripple"></div>
59
  </button>
60
  <button class="settings-btn" id="settingsBtn">
61
  <i class="fas fa-cog"></i>
62
+ <div class="settings-ripple"></div>
63
  </button>
64
  </div>
65
  </div>
 
67
 
68
  <!-- Sidebar Menu -->
69
  <div class="menu" id="menu">
70
+ <div class="menu-blur"></div>
 
 
 
 
 
 
71
  <div class="menu-content">
72
+ <div class="menu-header">
73
+ <div class="new-chat" id="newChat">
74
+ <div class="new-chat-icon">
75
+ <i class="fas fa-plus"></i>
76
+ </div>
77
+ <span>New Chat</span>
78
+ <div class="new-chat-shine"></div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="menu-body">
83
+ <div class="chats-header">
84
+ <span class="chats-title">Recent Chats</span>
85
+ <button class="clear-chats" id="clearChats">
86
+ <i class="fas fa-trash-alt"></i>
87
+ <div class="clear-ripple"></div>
88
+ </button>
89
+ </div>
90
+ <div class="prev-chats-cont" id="prevChatsCont">
91
+ <!-- Chat items will be dynamically added here -->
92
+ </div>
93
+ </div>
94
+
95
+ <div class="menu-footer">
96
  </div>
 
 
 
 
 
 
 
 
97
  </div>
98
  </div>
99
 
100
  <!-- Main Container -->
101
  <div class="container" id="container">
102
  <div class="messages" id="messages">
103
+ <div class="messages-container">
104
+ <!-- Welcome Message -->
105
+ <div class="message-group ai-group">
106
+ <div class="avatar">
107
+ <div class="avatar-img">AI</div>
108
+ <div class="avatar-status"></div>
109
+ </div>
110
+ <div class="message ai-message">
111
+ <div class="message-content">
112
+ <p>Hello! I'm your AI assistant. How can I help you today?</p>
113
+ </div>
114
+ <div class="message-actions">
115
+ <button class="action-btn copy-btn">
116
+ <i class="fas fa-copy"></i>
117
+ </button>
118
+ <button class="action-btn like-btn">
119
+ <i class="fas fa-thumbs-up"></i>
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
  </div>
126
 
127
  <div class="input-container">
128
+ <div class="input-blur"></div>
129
  <div class="inputs">
130
  <button id="webSearch" class="web-search">
131
  <i class="fa-solid fa-globe"></i>
132
+ <div class="button-ripple"></div>
133
  </button>
134
+ <div class="text-box-container">
135
+ <textarea
136
+ id="textBox"
137
+ class="text-box"
138
+ placeholder="Send a message..."
139
+ rows="1"
140
+ ></textarea>
141
+ <div class="text-box-actions">
142
+ <button class="action-btn attach-btn">
143
+ <i class="fas fa-paperclip"></i>
144
+ </button>
145
+ <button class="action-btn mic-btn">
146
+ <i class="fas fa-microphone"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
  <button id="sendBtn" class="send-btn">
151
  <i class="fa-solid fa-paper-plane"></i>
152
+ <div class="button-ripple"></div>
153
  </button>
154
  </div>
155
  <div class="input-footer">
156
  <span class="input-info">AI may produce inaccurate information</span>
157
+ <div class="typing-indicator">
158
+ <span></span>
159
+ <span></span>
160
+ <span></span>
161
+ </div>
162
  </div>
163
  </div>
164
  </div>