Hugging Face's logo

Spaces:
nnick79
/
tapchat
Running

App Files Community
nnick79 commited on
Commit
64e436e
·
verified ·
1 Parent(s): a9bd1b8

keep going replicate the entire site every page every button

Browse files
Files changed (3) hide show
  1. categories.html +147 -0
  2. characters.html +104 -0
  3. create.html +10 -0
categories.html ADDED
@@ -0,0 +1,147 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Categories - TapChat</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ </head>
14
+ <body class="bg-gray-900 text-white font-sans">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <!-- Categories Header -->
18
+ <section class="relative py-16 md:py-24 bg-gradient-to-br from-gray-900 to-gray-800">
19
+ <div class="absolute inset-0 opacity-10">
20
+ <div class="pattern-grid-lg text-gray-700/20 w-full h-full"></div>
21
+ </div>
22
+ <div class="container mx-auto px-4 relative z-10">
23
+ <div class="max-w-3xl mx-auto text-center">
24
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
25
+ Explore by <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-400">Category</span>
26
+ </h1>
27
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
28
+ Discover characters organized by themes, genres, and interests. Find exactly what matches your mood.
29
+ </p>
30
+ </div>
31
+ </div>
32
+ </section>
33
+
34
+ <!-- Categories Grid -->
35
+ <section class="py-16 bg-gray-900">
36
+ <div class="container mx-auto px-4">
37
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
38
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
39
+ <div class="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center mx-auto mb-4">
40
+ <i data-feather="heart" class="text-purple-400 w-8 h-8"></i>
41
+ </div>
42
+ <h3 class="text-lg font-semibold mb-2">Romance</h3>
43
+ <p class="text-gray-400 text-sm">1.2M characters</p>
44
+ </a>
45
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
46
+ <div class="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center mx-auto mb-4">
47
+ <i data-feather="sword" class="text-blue-400 w-8 h-8"></i>
48
+ </div>
49
+ <h3 class="text-lg font-semibold mb-2">Adventure</h3>
50
+ <p class="text-gray-400 text-sm">980K characters</p>
51
+ </a>
52
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
53
+ <div class="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mx-auto mb-4">
54
+ <i data-feather="users" class="text-green-400 w-8 h-8"></i>
55
+ </div>
56
+ <h3 class="text-lg font-semibold mb-2">Friendship</h3>
57
+ <p class="text-gray-400 text-sm">750K characters</p>
58
+ </a>
59
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
60
+ <div class="w-16 h-16 rounded-full bg-yellow-500/20 flex items-center justify-center mx-auto mb-4">
61
+ <i data-feather="zap" class="text-yellow-400 w-8 h-8"></i>
62
+ </div>
63
+ <h3 class="text-lg font-semibold mb-2">Supernatural</h3>
64
+ <p class="text-gray-400 text-sm">1.5M characters</p>
65
+ </a>
66
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
67
+ <div class="w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
68
+ <i data-feather="film" class="text-red-400 w-8 h-8"></i>
69
+ </div>
70
+ <h3 class="text-lg font-semibold mb-2">Movies & TV</h3>
71
+ <p class="text-gray-400 text-sm">2.1M characters</p>
72
+ </a>
73
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
74
+ <div class="w-16 h-16 rounded-full bg-indigo-500/20 flex items-center justify-center mx-auto mb-4">
75
+ <i data-feather="book-open" class="text-indigo-400 w-8 h-8"></i>
76
+ </div>
77
+ <h3 class="text-lg font-semibold mb-2">Anime</h3>
78
+ <p class="text-gray-400 text-sm">3.4M characters</p>
79
+ </a>
80
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
81
+ <div class="w-16 h-16 rounded-full bg-pink-500/20 flex items-center justify-center mx-auto mb-4">
82
+ <i data-feather="gamepad" class="text-pink-400 w-8 h-8"></i>
83
+ </div>
84
+ <h3 class="text-lg font-semibold mb-2">Games</h3>
85
+ <p class="text-gray-400 text-sm">1.8M characters</p>
86
+ </a>
87
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
88
+ <div class="w-16 h-16 rounded-full bg-teal-500/20 flex items-center justify-center mx-auto mb-4">
89
+ <i data-feather="star" class="text-teal-400 w-8 h-8"></i>
90
+ </div>
91
+ <h3 class="text-lg font-semibold mb-2">Celebrities</h3>
92
+ <p class="text-gray-400 text-sm">890K characters</p>
93
+ </a>
94
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
95
+ <div class="w-16 h-16 rounded-full bg-orange-500/20 flex items-center justify-center mx-auto mb-4">
96
+ <i data-feather="music" class="text-orange-400 w-8 h-8"></i>
97
+ </div>
98
+ <h3 class="text-lg font-semibold mb-2">Music</h3>
99
+ <p class="text-gray-400 text-sm">620K characters</p>
100
+ </a>
101
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
102
+ <div class="w-16 h-16 rounded-full bg-cyan-500/20 flex items-center justify-center mx-auto mb-4">
103
+ <i data-feather="book" class="text-cyan-400 w-8 h-8"></i>
104
+ </div>
105
+ <h3 class="text-lg font-semibold mb-2">Books</h3>
106
+ <p class="text-gray-400 text-sm">1.1M characters</p>
107
+ </a>
108
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
109
+ <div class="w-16 h-16 rounded-full bg-lime-500/20 flex items-center justify-center mx-auto mb-4">
110
+ <i data-feather="smile" class="text-lime-400 w-8 h-8"></i>
111
+ </div>
112
+ <h3 class="text-lg font-semibold mb-2">Comedy</h3>
113
+ <p class="text-gray-400 text-sm">740K characters</p>
114
+ </a>
115
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-xl p-6 text-center transition-all transform hover:-translate-y-1">
116
+ <div class="w-16 h-16 rounded-full bg-rose-500/20 flex items-center justify-center mx-auto mb-4">
117
+ <i data-feather="shield" class="text-rose-400 w-8 h-8"></i>
118
+ </div>
119
+ <h3 class="text-lg font-semibold mb-2">Superheroes</h3>
120
+ <p class="text-gray-400 text-sm">1.3M characters</p>
121
+ </a>
122
+ </div>
123
+ </div>
124
+ </section>
125
+
126
+ <!-- CTA Section -->
127
+ <section class="py-20 bg-gradient-to-r from-purple-900/30 to-indigo-900/30">
128
+ <div class="container mx-auto px-4 text-center">
129
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Want More Categories?</h2>
130
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">
131
+ We're constantly adding new categories based on community requests.
132
+ </p>
133
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
134
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all shadow-lg shadow-purple-500/20">
135
+ Request Category
136
+ </button>
137
+ </div>
138
+ </div>
139
+ </section>
140
+
141
+ <custom-footer></custom-footer>
142
+
143
+ <script src="components/navbar.js"></script>
144
+ <script src="components/footer.js"></script>
145
+ <script>feather.replace();</script>
146
+ </body>
147
+ </html>
characters.html ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Characters - TapChat</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+ </head>
14
+ <body class="bg-gray-900 text-white font-sans">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <!-- Characters Header -->
18
+ <section class="relative py-16 md:py-24 bg-gradient-to-br from-gray-900 to-gray-800">
19
+ <div class="absolute inset-0 opacity-10">
20
+ <div class="pattern-grid-lg text-gray-700/20 w-full h-full"></div>
21
+ </div>
22
+ <div class="container mx-auto px-4 relative z-10">
23
+ <div class="max-w-3xl mx-auto text-center">
24
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
25
+ Discover <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-400">Millions</span> of Characters
26
+ </h1>
27
+ <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
28
+ Browse our extensive collection of AI characters across various categories. Find your perfect conversation partner today.
29
+ </p>
30
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
31
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all shadow-lg shadow-purple-500/20">
32
+ Create Your Own
33
+ </button>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ </section>
38
+
39
+ <!-- Search and Filters -->
40
+ <section class="py-8 bg-gray-900 border-b border-gray-800">
41
+ <div class="container mx-auto px-4">
42
+ <div class="flex flex-col md:flex-row gap-4 items-center">
43
+ <div class="relative flex-grow">
44
+ <input type="text" placeholder="Search characters..." class="w-full bg-gray-800 border border-gray-700 rounded-full py-3 px-6 pl-12 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
45
+ <i data-feather="search" class="absolute left-4 top-3.5 text-gray-400 w-5 h-5"></i>
46
+ </div>
47
+ <div class="flex gap-2 flex-wrap">
48
+ <select class="bg-gray-800 border border-gray-700 rounded-full py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
49
+ <option>All Categories</option>
50
+ <option>Romance</option>
51
+ <option>Adventure</option>
52
+ <option>Fantasy</option>
53
+ <option>Sci-Fi</option>
54
+ </select>
55
+ <select class="bg-gray-800 border border-gray-700 rounded-full py-3 px-4 text-white focus:outline-none focus:ring-2 focus:ring-purple-500">
56
+ <option>Most Popular</option>
57
+ <option>Newest</option>
58
+ <option>Trending</option>
59
+ </select>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </section>
64
+
65
+ <!-- Characters Grid -->
66
+ <section class="py-16 bg-gray-900">
67
+ <div class="container mx-auto px-4">
68
+ <div id="characters-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
69
+ <!-- Character cards will be populated by JavaScript -->
70
+ </div>
71
+
72
+ <!-- Load More Button -->
73
+ <div class="text-center mt-12">
74
+ <button class="bg-gray-800 hover:bg-gray-700 text-white px-8 py-3 rounded-full font-semibold transition-all border border-gray-700">
75
+ Load More Characters
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- CTA Section -->
82
+ <section class="py-20 bg-gradient-to-r from-purple-900/30 to-indigo-900/30">
83
+ <div class="container mx-auto px-4 text-center">
84
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Can't Find What You're Looking For?</h2>
85
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-10">
86
+ Create your own unique character with our powerful AI tools.
87
+ </p>
88
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
89
+ <button class="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all shadow-lg shadow-purple-500/20">
90
+ Create Character
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <custom-footer></custom-footer>
97
+
98
+ <script src="components/navbar.js"></script>
99
+ <script src="components/footer.js"></script>
100
+ <script src="components/character-card.js"></script>
101
+ <script src="script.js"></script>
102
+ <script>feather.replace();</script>
103
+ </body>
104
+ </html>
create.html ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
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>Create Character - TapChat</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <link rel="stylesheet" href="style.css">
10
+ <script src="https://cdn.tail