Hugging Face's logo

Spaces:
smodusermc
/
InfinityChat
Running

App Files Community
1
smodusermc commited on
Commit
93a1022
·
verified ·
1 Parent(s): eb5a39b

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +167 -84
static/index.html CHANGED
@@ -2,110 +2,193 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
6
- <title>InfinityChat</title>
7
  <link rel="stylesheet" href="/static/style.css">
8
  </head>
9
- <body class="theme-light">
10
- <div id="app">
11
- <!-- AUTH SCREEN -->
12
- <div id="auth-screen" class="screen">
13
- <div class="auth-container">
14
- <h1>∞ InfinityChat</h1>
15
- <div class="auth-tabs">
16
- <button id="login-tab" class="tab active">Login</button>
17
- <button id="signup-tab" class="tab">Sign Up</button>
18
- </div>
19
- <form id="auth-form">
20
- <input type="text" id="auth-username" placeholder="Username" required autocomplete="username">
21
- <input type="password" id="auth-password" placeholder="Password" required autocomplete="current-password">
22
- <div id="display-name-group" style="display:none">
23
- <input type="text" id="auth-display-name" placeholder="Display Name (optional)">
24
- </div>
25
- <button type="submit" id="auth-submit">Login</button>
26
- </form>
27
- <div id="auth-error" class="error-msg"></div>
28
  </div>
29
- </div>
30
-
31
- <!-- CHAT SCREEN -->
32
- <div id="chat-screen" class="screen hidden">
33
- <header class="chat-header">
34
- <div class="header-left">
35
- <button id="settings-btn" class="icon-btn">⚙️</button>
 
 
 
36
  </div>
37
- <div class="header-title">InfinityChat <span id="online-count">0</span></div>
38
- <div class="header-right">
39
- <button id="logout-btn" class="icon-btn">🚪</button>
40
  </div>
41
- </header>
42
- <div id="typing-indicator"></div>
43
- <div id="messages-container">
44
- <div id="messages-list"></div>
45
- <div id="load-more">
46
- <button id="load-older-btn" class="hidden">Load older messages</button>
 
 
 
 
 
47
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </div>
 
 
 
 
 
 
 
 
 
 
 
49
 
50
- <!-- Reply preview -->
51
- <div id="reply-preview" class="hidden">
52
- <span id="reply-preview-text"></span>
53
- <button id="cancel-reply">✕</button>
 
54
  </div>
 
55
 
56
- <!-- Compose area -->
57
- <form id="compose-form">
58
- <div class="compose-area">
59
- <button type="button" id="attach-btn">📎</button>
60
- <input type="file" id="file-input" multiple style="display:none">
61
- <textarea id="message-input" placeholder="Type a message…" rows="1"></textarea>
62
- <button type="submit" id="send-btn">➤</button>
63
- </div>
64
- <div id="upload-progress" class="hidden">
65
- <progress id="upload-bar" value="0" max="100"></progress>
66
- <span id="upload-filename"></span>
67
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  </form>
 
 
 
 
 
 
69
  </div>
 
70
 
71
- <!-- SETTINGS MODAL -->
72
- <div id="settings-modal" class="modal hidden">
73
- <div class="modal-content">
 
 
74
  <h2>Settings</h2>
75
- <div class="setting-group">
76
- <label>Display Name</label>
77
- <input type="text" id="setting-display-name">
78
- </div>
79
- <div class="setting-group">
80
- <label>Avatar</label>
81
- <input type="file" id="setting-avatar">
82
- <img id="avatar-preview" class="avatar-preview" src="" style="display:none">
83
- </div>
84
- <div class="setting-group">
85
- <label>Theme</label>
86
- <select id="theme-select">
87
- <option value="theme-light">Light</option>
88
- <option value="theme-dark">Dark</option>
89
- <option value="theme-custom">Custom</option>
90
- </select>
91
- </div>
92
- <div id="custom-theme-settings" class="hidden">
93
- <label>Self Bubble</label>
94
- <input type="color" id="custom-self-color" value="#25D366">
95
- <label>Other Bubble</label>
96
- <input type="color" id="custom-other-color" value="#E5E5EA">
97
- <label>Text Color</label>
98
- <input type="color" id="custom-text-color" value="#000000">
99
  </div>
100
- <div class="modal-actions">
101
- <button id="save-settings">Save</button>
102
- <button id="close-settings">Cancel</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </div>
104
  </div>
 
 
 
105
  </div>
106
  </div>
107
 
108
- <!-- Vanilla JS – loaded at end of body -->
109
  <script src="/static/script.js"></script>
110
  </body>
111
  </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>InfinityChat - Secure Messaging</title>
7
  <link rel="stylesheet" href="/static/style.css">
8
  </head>
9
+ <body>
10
+ <!-- Auth Screen -->
11
+ <div id="auth-screen" class="screen active">
12
+ <div class="auth-background"></div>
13
+ <div class="auth-container">
14
+ <div class="auth-logo">
15
+ <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
16
+ <circle cx="24" cy="24" r="22" stroke="currentColor" stroke-width="2"/>
17
+ <path d="M16 28L24 20L32 28" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
18
+ </svg>
19
+ <h1>InfinityChat</h1>
20
+ <p class="auth-subtitle">Secure. Private. Real-time.</p>
 
 
 
 
 
 
 
21
  </div>
22
+
23
+ <div class="auth-tabs">
24
+ <button class="auth-tab active" data-tab="login">Sign In</button>
25
+ <button class="auth-tab" data-tab="signup">Create Account</button>
26
+ </div>
27
+
28
+ <form id="login-form" class="auth-form active">
29
+ <div class="input-group">
30
+ <label for="login-username">Username</label>
31
+ <input type="text" id="login-username" placeholder="Enter your username" required autocomplete="username">
32
  </div>
33
+ <div class="input-group">
34
+ <label for="login-password">Password</label>
35
+ <input type="password" id="login-password" placeholder="Enter your password" required autocomplete="current-password">
36
  </div>
37
+ <button type="submit" class="btn btn-primary">Sign In</button>
38
+ </form>
39
+
40
+ <form id="signup-form" class="auth-form">
41
+ <div class="input-group">
42
+ <label for="signup-username">Username</label>
43
+ <input type="text" id="signup-username" placeholder="Choose a username" required autocomplete="username">
44
+ </div>
45
+ <div class="input-group">
46
+ <label for="signup-display">Display Name</label>
47
+ <input type="text" id="signup-display" placeholder="Your display name" required>
48
  </div>
49
+ <div class="input-group">
50
+ <label for="signup-password">Password</label>
51
+ <input type="password" id="signup-password" placeholder="Create a password" required autocomplete="new-password">
52
+ </div>
53
+ <button type="submit" class="btn btn-primary">Create Account</button>
54
+ </form>
55
+
56
+ <div id="auth-error" class="error-message"></div>
57
+ </div>
58
+ </div>
59
+
60
+ <!-- Chat Screen -->
61
+ <div id="chat-screen" class="screen">
62
+ <header class="chat-header">
63
+ <div class="header-left">
64
+ <button id="settings-btn" class="icon-btn" aria-label="Settings">
65
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
66
+ <circle cx="12" cy="12" r="3"/>
67
+ <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
68
+ </svg>
69
+ </button>
70
+ </div>
71
+ <div class="header-center">
72
+ <h2 class="chat-title">InfinityChat</h2>
73
+ <span id="online-count" class="online-count">0 online</span>
74
  </div>
75
+ <div class="header-right">
76
+ <button id="logout-btn" class="icon-btn" aria-label="Logout">
77
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
78
+ <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
79
+ </svg>
80
+ </button>
81
+ </div>
82
+ </header>
83
+
84
+ <!-- Typing Indicator -->
85
+ <div id="typing-indicator" class="typing-indicator"></div>
86
 
87
+ <!-- Messages Container -->
88
+ <div id="messages-container" class="messages-container">
89
+ <div id="messages-list" class="messages-list"></div>
90
+ <div id="load-more" class="load-more">
91
+ <button id="load-older-btn" class="btn btn-secondary hidden">Load older messages</button>
92
  </div>
93
+ </div>
94
 
95
+ <!-- Reply Preview -->
96
+ <div id="reply-preview" class="reply-preview hidden">
97
+ <div class="reply-content">
98
+ <span class="reply-label">Replying to</span>
99
+ <span id="reply-preview-text" class="reply-text"></span>
100
+ </div>
101
+ <button id="cancel-reply" class="cancel-reply" aria-label="Cancel reply">
102
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
103
+ <path d="M12 4l-8 8M4 4l8 8"/>
104
+ </svg>
105
+ </button>
106
+ </div>
107
+
108
+ <!-- Compose Area -->
109
+ <div class="compose-container">
110
+ <form id="compose-form" class="compose-form">
111
+ <button type="button" id="attach-btn" class="attach-btn" aria-label="Attach file">
112
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
113
+ <path d="M14 7l-5 5a2 2 0 01-2.83-2.83l6-6a3.5 3.5 0 014.95 4.95l-7 7a5 5 0 01-7.07-7.07l5-5"/>
114
+ </svg>
115
+ </button>
116
+ <input type="file" id="file-input" multiple style="display:none">
117
+ <textarea id="message-input" class="message-input" placeholder="Type a message..." rows="1"></textarea>
118
+ <button type="submit" id="send-btn" class="send-btn" aria-label="Send message">
119
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
120
+ <path d="M1 10l17-9-9 17-4-8-4-4z"/>
121
+ </svg>
122
+ </button>
123
  </form>
124
+ <div id="upload-progress" class="upload-progress hidden">
125
+ <div class="progress-bar">
126
+ <div id="upload-bar" class="progress-fill" style="width: 0%"></div>
127
+ </div>
128
+ <span id="upload-filename" class="upload-filename"></span>
129
+ </div>
130
  </div>
131
+ </div>
132
 
133
+ <!-- Settings Modal -->
134
+ <div id="settings-modal" class="modal hidden">
135
+ <div class="modal-overlay"></div>
136
+ <div class="modal-content">
137
+ <div class="modal-header">
138
  <h2>Settings</h2>
139
+ <button id="close-settings" class="icon-btn" aria-label="Close">
140
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
141
+ <path d="M15 5l-10 10M5 5l10 10"/>
142
+ </svg>
143
+ </button>
144
+ </div>
145
+ <div class="modal-body">
146
+ <div class="setting-section">
147
+ <h3>Profile</h3>
148
+ <div class="setting-item">
149
+ <label for="setting-display-name">Display Name</label>
150
+ <input type="text" id="setting-display-name" class="input">
151
+ </div>
152
+ <div class="setting-item">
153
+ <label>Avatar</label>
154
+ <div class="avatar-upload">
155
+ <img id="avatar-preview" class="avatar-preview" src="" alt="Avatar" style="display:none">
156
+ <input type="file" id="setting-avatar" accept="image/*">
157
+ </div>
158
+ </div>
 
 
 
 
159
  </div>
160
+ <div class="setting-section">
161
+ <h3>Appearance</h3>
162
+ <div class="setting-item">
163
+ <label for="theme-select">Theme</label>
164
+ <select id="theme-select" class="input">
165
+ <option value="light">Light</option>
166
+ <option value="dark">Dark</option>
167
+ <option value="custom">Custom</option>
168
+ </select>
169
+ </div>
170
+ <div id="custom-theme-settings" class="custom-theme hidden">
171
+ <div class="setting-item">
172
+ <label>Your Messages</label>
173
+ <input type="color" id="custom-self-color" value="#2563EB">
174
+ </div>
175
+ <div class="setting-item">
176
+ <label>Their Messages</label>
177
+ <input type="color" id="custom-other-color" value="#F3F4F6">
178
+ </div>
179
+ <div class="setting-item">
180
+ <label>Text Color</label>
181
+ <input type="color" id="custom-text-color" value="#111827">
182
+ </div>
183
+ </div>
184
  </div>
185
  </div>
186
+ <div class="modal-footer">
187
+ <button id="save-settings" class="btn btn-primary">Save Changes</button>
188
+ </div>
189
  </div>
190
  </div>
191
 
 
192
  <script src="/static/script.js"></script>
193
  </body>
194
  </html>