Hugging Face's logo

Spaces:
aazzrrooddeell
/
api
Running

App Files Community
api
File size: 13,619 Bytes 
e80d949
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IdeaSpark - Share Your Creative Ideas</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        .idea-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .idea-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        .tag {
            transition: all 0.2s ease;
        }
        .tag:hover {
            transform: scale(1.05);
        }
        .floating-btn {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- Navigation -->
    <nav class="gradient-bg text-white shadow-lg">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-lightbulb text-2xl"></i>
                <h1 class="text-2xl font-bold">IdeaSpark</h1>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="#" class="hover:text-gray-200 font-medium">Explore</a>
                <a href="#" class="hover:text-gray-200 font-medium">Categories</a>
                <a href="#" class="hover:text-gray-200 font-medium">Top Ideas</a>
                <a href="#" class="hover:text-gray-200 font-medium">About</a>
            </div>
            <div class="flex items-center space-x-4">
                <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
                    Sign In
                </button>
                <button class="md:hidden text-white">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="gradient-bg text-white py-16">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Share Your Creative Ideas With The World</h1>
            <p class="text-xl mb-8 max-w-2xl mx-auto">Join our community of innovators, thinkers, and creators. Your idea might spark the next big thing!</p>
            <div class="flex flex-col md:flex-row justify-center gap-4">
                <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition">
                    Share Your Idea
                </button>
                <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition">
                    Explore Ideas
                </button>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-12">
        <!-- Search and Filter -->
        <div class="mb-12">
            <div class="bg-white rounded-xl shadow-md p-6">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-1 relative">
                        <input type="text" placeholder="Search for ideas..." class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <select class="border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option>All Categories</option>
                        <option>Technology</option>
                        <option>Business</option>
                        <option>Art & Design</option>
                        <option>Education</option>
                        <option>Science</option>
                    </select>
                    <select class="border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option>Sort By: Newest</option>
                        <option>Sort By: Most Popular</option>
                        <option>Sort By: Trending</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Idea Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Idea Card 1 -->
            <div class="idea-card bg-white rounded-xl overflow-hidden shadow-md">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div class="flex items-center space-x-2">
                            <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
                                <i class="fas fa-user text-purple-600"></i>
                            </div>
                            <div>
                                <p class="font-medium">Alex Johnson</p>
                                <p class="text-gray-500 text-sm">2 days ago</p>
                            </div>
                        </div>
                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Technology</span>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI-Powered Personal Shopping Assistant</h3>
                    <p class="text-gray-600 mb-4">An AI that learns your style preferences and suggests clothing items from multiple retailers that match your taste and budget.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="tag bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">AI</span>
                        <span class="tag bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Fashion</span>
                        <span class="tag bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">E-commerce</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-4">
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600">
                                <i class="far fa-thumbs-up"></i>
                                <span>42</span>
                            </button>
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600">
                                <i class="far fa-comment"></i>
                                <span>8</span>
                            </button>
                        </div>
                        <button class="text-purple-600 font-medium hover:text-purple-800">
                            View Details
                        </button>
                    </div>
                </div>
            </div>

            <!-- Idea Card 2 -->
            <div class="idea-card bg-white rounded-xl overflow-hidden shadow-md">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div class="flex items-center space-x-2">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                                <i class="fas fa-user text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium">Maria Garcia</p>
                                <p class="text-gray-500 text-sm">1 week ago</p>
                            </div>
                        </div>
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Sustainability</span>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Community Composting Network</h3>
                    <p class="text-gray-600 mb-4">A neighborhood-based composting system where residents can drop off food scraps and receive compost for their gardens in return.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="tag bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Eco-friendly</span>
                        <span class="tag bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Community</span>
                        <span class="tag bg-teal-100 text-teal-800 text-xs px-2 py-1 rounded-full">Gardening</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-4">
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600">
                                <i class="far fa-thumbs-up"></i>
                                <span>76</span>
                            </button>
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600">
                                <i class="far fa-comment"></i>
                                <span>14</span>
                            </button>
                        </div>
                        <button class="text-purple-600 font-medium hover:text-purple-800">
                            View Details
                        </button>
                    </div>
                </div>
            </div>

            <!-- Idea Card 3 -->
            <div class="idea-card bg-white rounded-xl overflow-hidden shadow-md">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <div class="flex items-center space-x-2">
                            <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center">
                                <i class="fas fa-user text-pink-600"></i>
                            </div>
                            <div>
                                <p class="font-medium">Sam Wilson</p>
                                <p class="text-gray-500 text-sm">3 days ago</p>
                            </div>
                        </div>
                        <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Education</span>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Interactive History Learning App</h3>
                    <p class="text-gray-600 mb-4">An AR app that brings historical events to life by overlaying interactive scenes and characters in your current location.</p>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <span class="tag bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">AR</span>
                        <span class="tag bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">History</span>
                        <span class="tag bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Mobile</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-4">
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600">
                                <i class="far fa-thumbs-up"></i>
                                <span>53</span>
                            </button>
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600">
                                <i class="far fa-comment"></i>
                                <span>9</span>
                            </button>
                        </div>
                        <button class="text-purple-600 font-medium hover:text-purple-800">
                            View Details
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Load More Button -->
        <div class="text-center mt-12">
            <button class="bg-white border-2 border-purple-600 text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-50 transition">
                Load More Ideas
            </button>
        </div>
    </main>

    <!-- Submit Idea Modal (Hidden by default) -->
    <div id="ideaModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold">Share Your Idea</h2>
                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                <form id="ideaForm" class="space-y-6">
                    <div>
                        <label for="ideaTitle" class="block font-medium mb-2">Title</label>
                        <input type="text"
</html>