Hugging Face's logo

Spaces:
Opera8
/
Chat
Sleeping

App Files Community
Chat
File size: 29,761 Bytes 
72e21e3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>چت بات آلفا</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        darkMode: 'class', 
        theme: {
          extend: {}
        }
      }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    
</head>
<body class="bg-slate-100 dark:bg-slate-900">
    
    <div id="global-audio-player" class="fixed top-0 left-0 right-0 z-[100] bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg shadow-lg p-3 transform -translate-y-full transition-transform duration-300 ease-in-out">
        <div class="w-full max-w-3xl mx-auto flex items-center gap-3 sm:gap-4">
            <button id="global-player-play-pause" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex-shrink-0">
                <svg id="global-player-play-icon" class="w-7 h-7 text-slate-700 dark:text-slate-200" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"></path></svg>
                <svg id="global-player-pause-icon" class="w-7 h-7 text-slate-700 dark:text-slate-200 hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M5.75 4.5a.75.75 0 00-.75.75v10.5a.75.75 0 001.5 0V5.25a.75.75 0 00-.75-.75zM14.25 4.5a.75.75 0 00-.75.75v10.5a.75.75 0 001.5 0V5.25a.75.75 0 00-.75-.75z"></path></svg>
            </button>
            <div class="flex-grow flex flex-col justify-center overflow-hidden">
                <p id="global-player-text" class="text-sm font-medium text-slate-800 dark:text-slate-200 truncate pr-1">درحال پخش صدا...</p>
                <div class="flex items-center gap-2">
                    <span id="global-player-current-time" class="text-xs text-slate-500 dark:text-slate-400 font-mono">0:00</span>
                    <div id="waveform-container" class="relative flex-grow h-10">
                        <canvas id="waveform-canvas" class="w-full h-full"></canvas>
                    </div>
                    <span id="global-player-total-time" class="text-xs text-slate-500 dark:text-slate-400 font-mono">0:00</span>
                </div>
            </div>
            <div id="global-player-loading" class="w-6 h-6 border-2 border-slate-300 border-t-blue-500 rounded-full animate-spin hidden mx-2 flex-shrink-0"></div>
            <button id="global-player-close" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex-shrink-0">
                <svg class="w-5 h-5 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
        <audio id="global-audio-element" class="hidden"></audio>
    </div>

    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-40 dark:bg-opacity-60 z-40 hidden opacity-0"></div>
    <aside id="history-sidebar" class="fixed top-0 right-0 h-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg border-l border-slate-200/50 dark:border-slate-700/50 w-72 p-4 flex flex-col z-50 transform translate-x-full">
        <div class="flex items-center justify-between mb-4 px-2">
            <h2 class="text-lg font-bold text-slate-800 dark:text-slate-200">تاریخچه چت‌ها</h2>
            <button id="delete-all-chats" title="حذف تمام چت‌ها" class="p-2 text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20 rounded-full transition-colors">
                 <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
            </button>
        </div>
        <nav id="history-list" class="flex-grow overflow-y-auto custom-scrollbar -mr-2 pr-2"></nav>
        <div id="sidebar-footer" class="flex-shrink-0 pt-4 border-t border-slate-200/60 dark:border-slate-700/60">
            <button id="settings-button" class="sidebar-button">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.438.995s.145.755.438.995l1.003.827c.48.398.668 1.03.26 1.431l-1.296 2.247a1.125 1.125 0 01-1.37.49l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.063-.374-.313-.686-.645-.87a6.52 6.52 0 01-.22-.127c-.324-.196-.72-.257-1.075-.124l-1.217.456a1.125 1.125 0 01-1.37-.49l-1.296-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.437-.995s-.145-.755-.437-.995l-1.004-.827a1.125 1.125 0 01-.26-1.431l1.296-2.247a1.125 1.125 0 011.37-.49l1.217.456c.355.133.75.072 1.076.124.072-.044.146-.087.22-.128.332-.183.582-.495.645-.869l.213-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                <span>تنظیمات</span>
            </button>
        </div>
    </aside>

    <div id="app-container" class="h-full w-full max-w-3xl mx-auto shadow-2xl bg-slate-100 dark:bg-slate-900">
        <header id="main-header" class="flex items-center justify-between p-4 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-200/80 dark:border-slate-800/80 z-20">
            <button id="menu-button" class="p-2 text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-4.125 6h-8.25" /></svg>
            </button>
            <div class="text-lg font-bold">
                <span style="background: linear-gradient(45deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;">Alpha</span>
                <span class="text-slate-800 dark:text-slate-200">Chat Bot</span>
            </div>
            <button id="new-chat-button" class="p-2 text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
            </button>
        </header>
        
        <main id="chat-window" class="flex-grow w-full p-4 sm:p-6 overflow-y-auto custom-scrollbar"></main>

        <footer id="main-footer" class="flex-shrink-0 px-4 sm:px-6 pb-4 sm:pb-6 z-10 pt-4 bg-gradient-to-t from-slate-100 via-slate-100 to-transparent dark:from-slate-900 dark:via-slate-900">
            <div id="image-preview-container" class="mb-3 relative p-1.5 bg-white/50 dark:bg-slate-700/50 backdrop-blur-md rounded-lg border border-slate-200 dark:border-slate-600 shadow-sm hidden">
                <img id="image-preview" src="" alt="Preview" class="h-20 w-20 object-cover rounded-md flex-shrink-0" />
                <span id="file-info-text" class="mr-2 text-slate-800 dark:text-slate-200"></span> 
                <button id="remove-image-button" class="absolute -top-2 -left-2 bg-slate-700 text-white rounded-full p-0.5 leading-none shadow-md hover:bg-red-600 transition-colors">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                </button>
            </div>
            
            <form id="message-form">
                <div class="chat-input-box">
                    <textarea id="message-input" class="chat-text-input" placeholder="هر چی میخوای بپرس" rows="1"></textarea>
                    
                    <div class="buttons-wrapper">
                        <div class="tools-container">
                            <button type="button" class="tools-button" id="tools-button">
                                <span class="tools-icon" id="tools-default-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
                                </span>
                                <span id="tools-button-text">ابزارها</span>
                                <button type="button" class="clear-tool-selection" id="clear-tool-selection" style="display: none;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </button>
                            </button>
                            <ul class="tools-menu" id="tools-menu">
                                <li class="tool-item" data-tool="deep-think" data-tool-name="تفکر عمیق">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tool-item-svg"><circle cx="12" cy="8.5" r="6.8" fill="#FFF9C4" opacity="0.35"><animate attributeName="opacity" values="0.25;0.6;0.25" dur="1.6s" repeatCount="indefinite" /></circle><path d="M12 3c-3.3 0-6 2.7-6 6 0 2.1 1.1 4 2.8 5.1V15c0 1.1.9 2 2 2h2.4c1.1 0 2-.9 2-2v-.9C16.9 13 18 11.1 18 9c0-3.3-2.7-6-6-6z" fill="#FFE082" stroke="#FBC02D" stroke-width="0.7"/><path d="M10 10.5 Q12 8.7 14 10.5" fill="none" stroke="#FFA000" stroke-width="1" stroke-linecap="round"/><line x1="9.6" y1="10.5" x2="9.6" y2="12" stroke="#FFA000" stroke-width="0.8" stroke-linecap="round"/><line x1="14.4" y1="10.5" x2="14.4" y2="12" stroke="#FFA000" stroke-width="0.8" stroke-linecap="round"/><rect x="9" y="15" width="6" height="3" rx="1" fill="#B0BEC5" stroke="#90A4AE" stroke-width="0.5"/><line x1="10" y1="16" x2="14" y2="16" stroke="#78909C" stroke-width="0.8" stroke-linecap="round"/><line x1="10" y1="17" x2="14" y2="17" stroke="#78909C" stroke-width="0.8" stroke-linecap="round"/><g stroke="#FFD54F" stroke-width="1.2" stroke-linecap="round" opacity="0.9"><line x1="12" y1="1.8" x2="12" y2="3.4"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" repeatCount="indefinite"/></line><line x1="5.2" y1="3.2" x2="6.6" y2="4.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.1s" repeatCount="indefinite"/></line><line x1="18.8" y1="3.2" x2="17.4" y2="4.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.2s" repeatCount="indefinite"/></line><line x1="3.5" y1="8.5" x2="5.2" y2="8.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.3s" repeatCount="indefinite"/></line><line x1="18.8" y1="8.5" x2="20.5" y2="8.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.4s" repeatCount="indefinite"/></line></g></svg>
                                    <span>تفکر عمیق</span>
                                </li>
                                <li class="tool-item" data-tool="reasoning" data-tool-name="استدلال">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tool-item-svg">
                                        <defs>
                                            <linearGradient id="reasoning-grad" x1="0%" y1="0%" x2="100%" y2="100%">
                                                <stop offset="0%" style="stop-color:#86EFAC; stop-opacity:1" />
                                                <stop offset="100%" style="stop-color:#3B82F6; stop-opacity:1" />
                                            </linearGradient>
                                        </defs>
                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.59V18h2v-1.41c1.89-.42 3.5-1.66 4.38-3.23l-1.48-.74c-.7 1.25-1.9 2.17-3.4 2.37V13h-2v1.59c-1.89.42-3.5 1.66-4.38 3.23l1.48.74c.7-1.25 1.9-2.17 3.4-2.37zM12 4c-1.93 0-3.5 1.57-3.5 3.5S10.07 11 12 11s3.5-1.57 3.5-3.5S13.93 4 12 4z" fill="url(#reasoning-grad)"/>
                                        <circle cx="12" cy="7.5" r="1.5" fill="#fff" opacity="0.8">
                                             <animate attributeName="r" values="1.5; 2.5; 1.5" dur="2s" repeatCount="indefinite" />
                                        </circle>
                                    </svg>
                                    <span>استدلال</span>
                                </li>
                                <!-- START: REMOVED PREMIUM LOCK -->
                                <li class="tool-item" data-tool="search" data-tool-name="جستجو در اینترنت">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tool-item-svg"><circle cx="12" cy="12" r="9" fill="none" stroke="#4682B4" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.7"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="8s" repeatCount="indefinite" /></circle><circle cx="12" cy="12" r="7" fill="#D4EAF7" stroke="#87CEEB" stroke-width="0.8"/><ellipse cx="12" cy="12" rx="3.2" ry="7" fill="none" stroke="#4682B4" stroke-width="0.8"/><ellipse cx="12" cy="12" rx="5.2" ry="7" fill="none" stroke="#4682B4" stroke-width="0.5" opacity="0.6"/><ellipse cx="12" cy="12" rx="7" ry="3.5" fill="none" stroke="#4682B4" stroke-width="0.8"/><ellipse cx="12" cy="9" rx="6" ry="2.2" fill="none" stroke="#4682B4" stroke-width="0.5" opacity="0.6"/><g><circle cx="17.5" cy="17.5" r="2.7" fill="rgba(180, 220, 255, 0.7)" stroke="#3B82F6" stroke-width="1"/><line x1="19.2" y1="19.2" x2="21.4" y2="21.4" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="round"/><circle cx="17.5" cy="17.5" r="1.3" fill="none" stroke="#3B82F6" stroke-width="0.8" stroke-dasharray="3 3"><animate attributeName="r" values="1.3;2.4;1.3" dur="2.2s" repeatCount="indefinite"/></circle></g></svg>
                                    <span>جستجو در اینترنت</span>
                                </li>
                                <!-- END: REMOVED PREMIUM LOCK -->
                                <div class="menu-divider"></div>
                                <li class="premium-locked-item tool-item-full-width">
                                    <div class="toggle-wrapper">
                                        <span class="toggle-label">فعال کردن افکار</span>
                                        <div class="toggle-switch">
                                            <div class="toggle-thumb"><span class="thumb-text">Pro</span></div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="attach-container">
                            <button type="button" id="attach-file-button" class="icon-button" aria-label="پیوست فایل">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
                            </button>
                            <div id="file-popup-menu">
                                <!-- START: REMOVED PREMIUM LOCK -->
                                <button type="button" id="select-image-option" class="popup-option">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="popup-option-svg"><rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="#E0E0E0" stroke="#BBB" stroke-width="1"/><path d="M3 15 L8 10 L13 15 L18 10 L21 15 V19 H3 Z" fill="#999999" stroke="#777" stroke-width="0.5"/><circle cx="7" cy="8" r="2" fill="#FFD700" stroke="#DAA520" stroke-width="0.5"/><path class="upload-arrow" d="M12 4 L12 11 M9 8 L12 11 L15 8" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
                                    <span>آپلود تصویر</span>
                                </button>
                                <button type="button" id="select-file-option" class="popup-option">
                                     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="popup-option-svg"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="#E0E0E0" stroke="#BBB" stroke-width="1"/><polyline points="14 2 14 8 20 8" fill="#CCCCCC" stroke="#AAA" stroke-width="0.5"/><g class="magnifier-group"><circle cx="11.5" cy="14.5" r="3" fill="#F0F0F0" stroke="#777" stroke-width="1"/><circle class="magnifying-lens" cx="11.5" cy="14.5" r="2.5" fill="rgba(180, 220, 255, 0.7)" stroke="rgba(100, 150, 200, 0.8)" stroke-width="0.5"/><path class="magnifying-handle" d="M13.5 16.5 C15 17.5 17 19.5 19 20.5 Q19.5 21 19 21.5 C17 20.5 15 18.5 13.5 17.5 Z" fill="#999999" stroke="#777" stroke-width="0.5"/></g></svg>
                                    <span>آپلود فایل</span>
                                </button>
                                <!-- END: REMOVED PREMIUM LOCK -->
                            </div>
                        </div>
                        
                        <input type="file" id="image-file-input" class="hidden" accept="image/*">
                        <input type="file" id="general-file-input" class="hidden"> 

                        <button id="submit-button" type="submit" class="icon-button send-button" aria-label="ارسال">
                             <svg id="send-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
                             <svg id="stop-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 5a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V6a1 1 0 00-1-1H5z" clip-rule="evenodd"></path></svg>
                        </button>
                    </div>
                </div>
            </form>
        </footer>
    </div>
    
    <div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-40 dark:bg-opacity-60 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden">
        <div id="settings-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 transform">
            <h2 class="text-xl font-bold text-center mb-6 text-slate-800 dark:text-white">تنظیمات</h2>
            <div class="mb-6 p-4 rounded-lg bg-slate-100 dark:bg-slate-700/50">
                <div id="settings-user-tier" class="flex flex-col items-center justify-center">
                </div>
            </div>
            <div class="flex items-center justify-between p-4 rounded-lg bg-slate-100 dark:bg-slate-700/50">
                <label for="theme-toggle" class="text-slate-700 dark:text-slate-300 font-medium">حالت تیره</label>
                <label class="theme-switch">
                    <input type="checkbox" id="theme-toggle">
                    <span class="slider round"></span>
                </label>
            </div>
        </div>
    </div>
    
    <div id="premium-feature-modal" class="fixed inset-0 z-[60] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
        <div class="premium-modal-content relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 text-center transform">
            <div id="premium-modal-icon-container" class="mb-4"></div>
            <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">این یک ویژگی نسخه کامل است!</h3>
            <p class="text-slate-600 dark:text-slate-300 mb-6 text-sm">برای استفاده از این قابلیت، اشتراک خود را به نسخه کامل ارتقا دهید.</p>
            <div class="flex flex-col gap-3">
                <button id="premium-modal-upgrade-btn" class="beautiful-upgrade-btn w-full">
                    🚀 ارتقا به نسخه نامحدود
                </button>
                <button id="premium-modal-close-btn" class="w-full px-6 py-2 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">بعداً</button>
            </div>
        </div>
    </div>

    <div id="plus-required-modal" class="fixed inset-0 z-[60] hidden items-center justify-center p-4">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
        <div class="premium-modal-content relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 text-center transform">
            <div id="plus-modal-icon-container" class="mb-4"></div>
            <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">قابلیت ویژه نسخه پلاس</h3>
            <p class="text-slate-600 dark:text-slate-300 mb-6 text-sm">شما کاربر اشتراکی هستید. برای استفاده از این قابلیت، از نسخه پلاس استفاده کنید.</p>
            <div class="flex flex-col gap-3">
                <button id="plus-modal-close-btn" class="w-full px-6 py-2 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">متوجه شدم</button>
            </div>
        </div>
    </div>

    <div id="history-item-menu" class="fixed bg-white dark:bg-slate-800 rounded-xl shadow-lg p-2 z-50 w-56 border border-slate-200 dark:border-slate-700">
    </div>
    
    <div id="message-item-menu" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
        <div id="message-item-menu-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
        <div id="message-item-menu-content" class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-2 border border-slate-200 dark:border-slate-700">
        </div>
    </div>

    <div id="confirm-modal" class="fixed inset-0 z-50 hidden">
        <div id="confirm-modal-overlay" class="absolute inset-0 bg-black/40"></div>
        <div class="relative w-full h-full flex items-center justify-center p-4">
            <div id="confirm-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 text-center">
                <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">تایید عملیات</h3>
                <p id="confirm-modal-message" class="text-slate-600 dark:text-slate-300 mb-6"></p>
                <div class="flex justify-center gap-4">
                    <button id="confirm-modal-cancel-btn" class="px-6 py-2 rounded-lg bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">انصراف</button>
                    <button id="confirm-modal-confirm-btn" class="px-6 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors">تایید</button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="rename-modal" class="fixed inset-0 z-50 hidden">
        <div id="rename-modal-overlay" class="absolute inset-0 bg-black/40"></div>
        <div class="relative w-full h-full flex items-center justify-center p-4">
            <form id="rename-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6">
                <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-4 text-center">تغییر نام گفتگو</h3>
                <input id="rename-input" type="text" class="w-full p-2 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none mb-6">
                <div class="flex justify-center gap-4">
                    <button id="rename-modal-cancel-btn" type="button" class="px-6 py-2 rounded-lg bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">انصراف</button>
                    <button id="rename-modal-confirm-btn" type="submit" class="px-6 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors">تایید</button>
                </div>
            </form>
        </div>
    </div>

    <div id="edit-modal" class="fixed inset-0 z-50 hidden">
        <div id="edit-modal-overlay" class="absolute inset-0 bg-black/40"></div>
        <div class="relative w-full h-full flex items-center justify-center p-4">
            <form id="edit-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-lg p-6">
                <h3 class="text-lg font-bold text-slate-800 dark:text-white mb-4 text-center">ویرایش پیام</h3>
                <textarea id="edit-input" rows="5" class="w-full p-2 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none mb-6"></textarea>
                <div class="flex justify-center gap-4">
                    <button id="edit-modal-cancel-btn" type="button" class="px-6 py-2 rounded-lg bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">انصراف</button>
                    <button id="edit-modal-confirm-btn" type="submit" class="px-6 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors">تایید و ارسال مجدد</button>
                </div>
            </form>
        </div>
    </div>

    <div id="html-preview-modal" class="hidden">
        <div id="html-preview-overlay" class="absolute inset-0 bg-black/40"></div>
        <div id="html-preview-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl transform">
            <div id="html-preview-header" class="bg-slate-50 dark:bg-slate-700">
                <h3 class="text-lg font-bold text-slate-800 dark:text-white">پیش‌نمایش HTML</h3>
                <button id="html-preview-close-btn" class="p-2 rounded-full text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600">
                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <div id="html-preview-iframe-container">
                <iframe id="html-preview-iframe" srcdoc="" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <script type="module" src="{{ url_for('static', filename='js/db.js') }}"></script>
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
    
</body>
</html>