Hugging Face's logo

Spaces:
FinalYearProjectAY2526
/
FurryChat.ai
Running

App Files Community
Andrewbluebird commited on
Commit
0346abe
·
verified ·
1 Parent(s): fb467fa

Rename 'index.html' to 'IntroPage.html'

Browse files
Files changed (4) hide show
  1. IntroPage.html +315 -0
  2. SignIn.html +2 -2
  3. SignUp.html +2 -2
  4. index.html +5 -3
IntroPage.html ADDED
@@ -0,0 +1,315 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FurryChat.ai - Introduction</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
15
+ <script src="https://unpkg.com/@react-three/fiber@7.0.24/dist/react-three-fiber.js"></script>
16
+ <script src="https://unpkg.com/@react-three/drei@8.0.2/dist/drei.umd.js"></script>
17
+ <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
18
+ <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
19
+ <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
20
+ <style>
21
+ .chat-container {
22
+ height: calc(100vh - 180px);
23
+ overflow-y: auto;
24
+ scroll-behavior: smooth;
25
+ }
26
+ .message {
27
+ max-width: 80%;
28
+ animation: fadeIn 0.3s ease-in;
29
+ }
30
+ @keyframes fadeIn {
31
+ from { opacity: 0; transform: translateY(10px); }
32
+ to { opacity: 1; transform: translateY(0); }
33
+ }
34
+ .typing-indicator {
35
+ display: inline-flex;
36
+ align-items: center;
37
+ }
38
+ .typing-dot {
39
+ width: 8px;
40
+ height: 8px;
41
+ border-radius: 50%;
42
+ background-color: #9CA3AF;
43
+ margin: 0 2px;
44
+ animation: typing 1.4s infinite ease-in-out;
45
+ }
46
+ .typing-dot:nth-child(2) {
47
+ animation-delay: 0.2s;
48
+ }
49
+ .typing-dot:nth-child(3) {
50
+ animation-delay: 0.4s;
51
+ }
52
+ @keyframes typing {
53
+ 0%, 60%, 100% { transform: translateY(0); }
54
+ 30% { transform: translateY(-5px); }
55
+ }
56
+ ::-webkit-scrollbar {
57
+ width: 6px;
58
+ }
59
+ ::-webkit-scrollbar-track {
60
+ background: #f1f1f1;
61
+ border-radius: 10px;
62
+ }
63
+ ::-webkit-scrollbar-thumb {
64
+ background: #c5c5c5;
65
+ border-radius: 10px;
66
+ }
67
+ ::-webkit-scrollbar-thumb:hover {
68
+ background: #a8a8a8;
69
+ }
70
+
71
+ /* 3D Model Viewer Styles */
72
+ model-viewer {
73
+ width: 100%;
74
+ height: 100%;
75
+ background-color: #f8fafc;
76
+ border-radius: 10px;
77
+ }
78
+
79
+ .animation-controls {
80
+ background: rgba(255, 255, 255, 0.9);
81
+ padding: 15px;
82
+ border-radius: 10px;
83
+ margin-top: 10px;
84
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
85
+ }
86
+
87
+ .animation-buttons {
88
+ display: flex;
89
+ flex-wrap: wrap;
90
+ gap: 8px;
91
+ margin-top: 10px;
92
+ }
93
+
94
+ .animation-btn {
95
+ flex: 1;
96
+ min-width: 80px;
97
+ padding: 8px 12px;
98
+ background: #3b82f6;
99
+ color: white;
100
+ border: none;
101
+ border-radius: 6px;
102
+ cursor: pointer;
103
+ transition: all 0.3s;
104
+ font-size: 12px;
105
+ font-weight: 500;
106
+ }
107
+
108
+ .animation-btn:hover {
109
+ background: #2563eb;
110
+ }
111
+
112
+ .animation-btn.active {
113
+ background: #1d4ed8;
114
+ }
115
+
116
+ .upload-section {
117
+ background: rgba(255, 255, 255, 0.9);
118
+ padding: 15px;
119
+ border-radius: 10px;
120
+ margin-top: 10px;
121
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
122
+ }
123
+
124
+ .upload-btn {
125
+ display: block;
126
+ width: 100%;
127
+ padding: 10px;
128
+ background: #10b981;
129
+ color: white;
130
+ border: none;
131
+ border-radius: 8px;
132
+ font-weight: bold;
133
+ cursor: pointer;
134
+ transition: all 0.3s;
135
+ margin-top: 10px;
136
+ }
137
+
138
+ .upload-btn:hover {
139
+ background: #059669;
140
+ }
141
+
142
+ .model-info {
143
+ margin-top: 10px;
144
+ font-size: 12px;
145
+ text-align: center;
146
+ color: #6b7280;
147
+ }
148
+ </style>
149
+ </head>
150
+ <body class="bg-gray-50">
151
+ <!-- Hero Section with Vanta.js Background -->
152
+ <div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
153
+
154
+ <div class="relative z-10">
155
+ <!-- Navigation -->
156
+ <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm py-4 px-6">
157
+ <div class="container mx-auto flex justify-between items-center">
158
+ <div class="flex items-center space-x-2">
159
+ <i data-feather="message-circle" class="text-blue-600"></i>
160
+ <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
161
+ </div>
162
+ <div class="hidden md:flex space-x-8">
163
+ <a href="IntroPage.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
164
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
165
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
166
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
167
+ </div>
168
+ <a href="SignIn.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
169
+ Login
170
+ </a>
171
+ </div>
172
+ </nav>
173
+
174
+ <!-- Hero Section -->
175
+ <section class="py-20 px-4 relative">
176
+ <div class="container mx-auto text-center">
177
+ <h1 class="text-5xl md:text-6xl font-bold mb-6 text-gray-800">Where <span class="text-blue-600">Furry Friends</span> Come to Life</h1>
178
+ <p class="text-xl md:text-2xl text-gray-600 max-w-4xl mx-auto mb-10">
179
+ AI-powered roleplay with your favorite anthropomorphic characters. Create, chat, and bond with your digital furry companions.
180
+ </p>
181
+ <div class="flex flex-col md:flex-row justify-center gap-4">
182
+ <a href="SignIn.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors">
183
+ Login
184
+ </a>
185
+ <a href="#" class="bg-white hover:bg-gray-100 text-gray-800 px-8 py-3 rounded-lg font-semibold border border-gray-200 transition-colors">
186
+ Meet Our Characters
187
+ </a>
188
+ </div>
189
+ <div class="mt-12 max-w-md mx-auto bg-white p-6 rounded-lg shadow-sm">
190
+ <h3 class="text-lg font-medium text-center mb-4">Get updates via WhatsApp (HK)</h3>
191
+ <div class="flex">
192
+ <select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
193
+ <option>+852</option>
194
+ </select>
195
+ <input type="tel" placeholder="Phone number" class="flex-1 border border-gray-300 rounded-r-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" pattern="[0-9]{8}">
196
+ </div>
197
+ <button class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
198
+ Subscribe via WhatsApp
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Featured Characters -->
205
+ <section class="py-16 px-4">
206
+ <div class="container mx-auto">
207
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Meet Our <span class="text-blue-600">Furry Pals</span></h2>
208
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
209
+ <!-- Character 1 -->
210
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
211
+ <img src="http://static.photos/animals/640x360/1" alt="Luna the Wolf" class="w-full h-48 object-cover">
212
+ <div class="p-6">
213
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Luna the Wolf</h3>
214
+ <p class="text-gray-600 mb-4">Mystical and wise, Luna guides with ancestral knowledge.</p>
215
+ <a href="#" class="inline-block text-blue-600 hover:text-blue-700 font-medium">Chat with Luna →</a>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Character 2 -->
220
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
221
+ <img src="http://static.photos/animals/640x360/2" alt="Rex the Fox" class="w-full h-48 object-cover">
222
+ <div class="p-6">
223
+ <h3 class="text-xl font-bold mb-2 text-gray-800">Rex the Fox</h3>
224
+ <p class="text-gray-600 mb-4">Clever and playful, Rex always has a trick up his sleeve.</p>
225
+ <a href="#" class="inline-block text-blue-600 hover:text-blue-700 font-medium">Chat with Rex →</a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+ <!-- Features Section (changed from Chat section) -->
232
+ <section class="py-16 px-4">
233
+ <div class="container mx-auto">
234
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Amazing <span class="text-blue-600">Features</span></h2>
235
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
236
+ <div class="text-center">
237
+ <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
238
+ <i data-feather="cpu" class="text-blue-600 w-8 h-8"></i>
239
+ </div>
240
+ <h3 class="text-xl font-semibold mb-2">Advanced AI</h3>
241
+ <p class="text-gray-600">Our characters learn and remember your preferences for more natural conversations.</p>
242
+ </div>
243
+ <div class="text-center">
244
+ <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
245
+ <i data-feather="sliders" class="text-blue-600 w-8 h-8"></i>
246
+ </div>
247
+ <h3 class="text-xl font-semibold mb-2">Customization</h3>
248
+ <p class="text-gray-600">Create your own furry character with unique traits and personality.</p>
249
+ </div>
250
+ <div class="text-center">
251
+ <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
252
+ <i data-feather="globe" class="text-blue-600 w-8 h-8"></i>
253
+ </div>
254
+ <h3 class="text-xl font-semibold mb-2">Multi-platform</h3>
255
+ <p class="text-gray-600">Chat anywhere, anytime - web, mobile, and desktop apps available.</p>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Footer -->
262
+ <footer class="bg-gray-800 text-white mt-16 py-8">
263
+ <div class="container mx-auto px-4">
264
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
265
+ <div>
266
+ <div class="flex items-center space-x-2 mb-4">
267
+ <i data-feather="message-circle" class="text-blue-400"></i>
268
+ <span class="text-xl font-bold">FurryChat.ai</span>
269
+ </div>
270
+ <p class="text-gray-400">Perfect AI Furry roleplay haven powered by advanced artificial intelligence.</p>
271
+ </div>
272
+ <div>
273
+ <h4 class="font-semibold mb-4">Product</h4>
274
+ <ul class="space-y-2 text-gray-400">
275
+ <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
276
+ <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
277
+ <li><a href="#" class="hover:text-white transition-colors">API</a></li>
278
+ </ul>
279
+ </div>
280
+ <div>
281
+ <h4 class="font-semibold mb-4">Community</h4>
282
+ <ul class="space-y-2 text-gray-400">
283
+ <li><a href="#" class="hover:text-white transition-colors">Furry AI Gallery</a></li>
284
+ <li><a href="#" class="hover:text-white transition-colors">Furry AI Avatar Marketplace</a></li>
285
+ <li><a href="https://discord.gg/NKaAqn5q" class="hover:text-white transition-colors">Discord server</a></li>
286
+ </ul>
287
+ </div>
288
+ <div>
289
+ <h4 class="font-semibold mb-4">Company</h4>
290
+ <ul class="space-y-2 text-gray-400">
291
+ <li><a href="#" class="hover:text-white transition-colors">About</a></li>
292
+ <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
293
+ <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
294
+ </ul>
295
+ </div>
296
+ <div>
297
+ <h4 class="font-semibold mb-4">Support</h4>
298
+ <ul class="space-y-2 text-gray-400">
299
+ <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li>
300
+ <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
301
+ <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
302
+ </ul>
303
+ </div>
304
+ </div>
305
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
306
+ <p>© 2025 MultiForce Entertainment Technologies LTD. All rights reserved.</p>
307
+ </div>
308
+ </div>
309
+ </footer>
310
+ </div>
311
+
312
+
313
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
314
+ </body>
315
+ </html>
SignIn.html CHANGED
@@ -22,8 +22,8 @@
22
  <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
23
  </div>
24
  <div class="hidden md:flex space-x-8">
25
- <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
26
- <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
27
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
28
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
29
  </div>
 
22
  <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
23
  </div>
24
  <div class="hidden md:flex space-x-8">
25
+ <a href="IntroPage.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
26
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
27
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
28
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
29
  </div>
SignUp.html CHANGED
@@ -22,8 +22,8 @@
22
  <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
23
  </div>
24
  <div class="hidden md:flex space-x-8">
25
- <a href="/" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
26
- <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
27
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
28
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
29
  </div>
 
22
  <span class="text-xl font-bold text-gray-800">FurryChat.ai</span>
23
  </div>
24
  <div class="hidden md:flex space-x-8">
25
+ <a href="IntroPage.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
26
+ <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a>
27
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a>
28
  <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
29
  </div>
index.html CHANGED
@@ -1,10 +1,11 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>FurryChat.ai</title>
7
- <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
@@ -148,7 +149,8 @@
148
  </style>
149
  </head>
150
  <body class="bg-gray-50">
151
- <!-- Hero Section with Vanta.js Background -->
 
152
  <div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
153
 
154
  <div class="relative z-10">
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>FurryChat.ai - Introduction</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 
149
  </style>
150
  </head>
151
  <body class="bg-gray-50">
152
+ <!-- Renamed to IntroPage.html -->
153
+ <!-- Hero Section with Vanta.js Background -->
154
  <div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
155
 
156
  <div class="relative z-10">