Hugging Face's logo

Spaces:
Really-amin
/
My_Ai
Running

App Files
Really-amin commited on
Commit
14cf77f
·
verified ·
1 Parent(s): 1c6b725

Upload index.html

Browse files
Files changed (1) hide show
  1. static/index.html +180 -0
static/index.html ADDED
@@ -0,0 +1,180 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>دستیار هوش مصنوعی پیشرفته</title>
7
+ <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
8
+ <style>
9
+ :root {
10
+ --primary-color: #3498db;
11
+ --secondary-color: #2980b9;
12
+ --background-color: #f0f3f5;
13
+ --text-color: #34495e;
14
+ --shadow-color: rgba(0, 0, 0, 0.1);
15
+ --message-bg-user: #3498db;
16
+ --message-bg-assistant: #ecf0f1;
17
+ }
18
+ body {
19
+ font-family: 'Vazirmatn', 'Tahoma', Arial, sans-serif;
20
+ background-color: var(--background-color);
21
+ margin: 0;
22
+ padding: 0;
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ min-height: 100vh;
27
+ color: var(--text-color);
28
+ }
29
+ #chat-container {
30
+ width: 95%;
31
+ max-width: 1200px;
32
+ background: white;
33
+ border-radius: 20px;
34
+ box-shadow: 0 10px 30px var(--shadow-color);
35
+ overflow: hidden;
36
+ display: flex;
37
+ flex-direction: column;
38
+ height: 90vh;
39
+ }
40
+ #chat-header {
41
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
42
+ color: white;
43
+ padding: 20px;
44
+ font-size: 28px;
45
+ font-weight: bold;
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ box-shadow: 0 2px 10px var(--shadow-color);
50
+ text-align: center;
51
+ }
52
+ .header-title {
53
+ flex-grow: 1;
54
+ text-align: center;
55
+ }
56
+ .header-icons {
57
+ display: flex;
58
+ gap: 15px;
59
+ }
60
+ .header-icon {
61
+ cursor: pointer;
62
+ font-size: 24px;
63
+ transition: transform 0.3s ease, opacity 0.3s ease;
64
+ }
65
+ .header-icon:hover {
66
+ transform: scale(1.1);
67
+ opacity: 0.8;
68
+ }
69
+ #chat-messages {
70
+ flex-grow: 1;
71
+ overflow-y: auto;
72
+ padding: 30px;
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 20px;
76
+ }
77
+ .message {
78
+ max-width: 75%;
79
+ padding: 15px 20px;
80
+ border-radius: 20px;
81
+ box-shadow: 0 3px 15px var(--shadow-color);
82
+ font-size: 16px;
83
+ line-height: 1.6;
84
+ transition: transform 0.3s ease;
85
+ }
86
+ .message:hover {
87
+ transform: translateY(-2px);
88
+ }
89
+ .user-message {
90
+ align-self: flex-end;
91
+ background-color: var(--message-bg-user);
92
+ color: white;
93
+ }
94
+ .assistant-message {
95
+ align-self: flex-start;
96
+ background-color: var(--message-bg-assistant);
97
+ border: 1px solid var(--secondary-color);
98
+ color: var(--text-color);
99
+ }
100
+ #input-container {
101
+ display: flex;
102
+ padding: 20px;
103
+ background: white;
104
+ border-top: 1px solid var(--secondary-color);
105
+ gap: 10px;
106
+ }
107
+ #user-input {
108
+ flex-grow: 1;
109
+ padding: 15px 25px;
110
+ border: 2px solid var(--secondary-color);
111
+ border-radius: 30px;
112
+ font-size: 16px;
113
+ font-family: 'Vazirmatn', 'Tahoma', Arial, sans-serif;
114
+ background: white;
115
+ transition: all 0.3s ease;
116
+ }
117
+ #user-input:focus {
118
+ outline: none;
119
+ box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
120
+ }
121
+ .input-button {
122
+ background: var(--primary-color);
123
+ color: white;
124
+ border: none;
125
+ border-radius: 50%;
126
+ width: 55px;
127
+ height: 55px;
128
+ font-size: 22px;
129
+ cursor: pointer;
130
+ display: flex;
131
+ justify-content: center;
132
+ align-items: center;
133
+ transition: all 0.3s ease;
134
+ box-shadow: 0 3px 15px var(--shadow-color);
135
+ }
136
+ .input-button:hover {
137
+ background-color: var(--secondary-color);
138
+ transform: translateY(-3px);
139
+ }
140
+ @media (max-width: 768px) {
141
+ #chat-container {
142
+ width: 100%;
143
+ height: 100vh;
144
+ border-radius: 0;
145
+ }
146
+ #chat-header {
147
+ font-size: 24px;
148
+ padding: 15px;
149
+ }
150
+ .message {
151
+ max-width: 85%;
152
+ }
153
+ }
154
+ </style>
155
+ </head>
156
+ <body>
157
+ <div id="chat-container">
158
+ <div id="chat-header">
159
+ <div class="header-icons">
160
+ <span class="header-icon" id="settings-button">⚙️</span>
161
+ <span class="header-icon" id="help-button">❓</span>
162
+ </div>
163
+ <span class="header-title">دستیار هوش مصنوعی پیشرفته</span>
164
+ <div class="header-icons" style="visibility: hidden;">
165
+ <span class="header-icon">⚙️</span>
166
+ <span class="header-icon">❓</span>
167
+ </div>
168
+ </div>
169
+ <div id="chat-messages"></div>
170
+ <div id="input-container">
171
+ <button class="input-button" id="send-button">➤</button>
172
+ <input type="text" id="user-input" placeholder="سوال خود را اینجا بنویسید...">
173
+ <button class="input-button" id="voice-input">🎤</button>
174
+ <button class="input-button" id="file-upload">📁</button>
175
+ </div>
176
+ </div>
177
+
178
+ <script src="{{ url_for('static', filename='script.js') }}"></script>
179
+ </body>
180
+ </html>