Update index.html

index.html

@@ -74,18 +74,53 @@
     </section>
 
     <section class="py-12 bg-gray-50">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-6 text-gray-800">Recommended For You</h2>
-          <div class="text-center text-xs text-gray-500 mb-8 max-w-2xl mx-auto">
+    <div class="container mx-auto px-4">
+        <h2 class="text-3xl font-bold text-center mb-2 text-gray-800">Fan Favorites & Recommendations</h2>
+        
+        <div class="text-center text-xs text-gray-500 mb-8 max-w-2xl mx-auto">
             <p>These listings are curated by the StreamAI platform and submitted by fans. StreamAI does not host and is not responsible for the content of external sites.</p>
-          </div>
-            <div class="max-w-4xl mx-auto mb-8 bg-white p-4 rounded-lg shadow">
-                <div class="flex items-center mb-2"><i class="fas fa-rss-square text-orange-500 mr-2"></i><h3 class="font-semibold">Personalized RSS Feed</h3></div>
-                <div id="rss-feed" class="mt-4 space-y-3"></div>
-            </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container"></div>
         </div>
-    </section>
+
+        <div class="max-w-2xl mx-auto mb-12 bg-white p-6 rounded-lg shadow-md">
+            <h3 class="text-xl font-semibold mb-4">Contribute a Fan Favorite!</h3>
+            <form id="add-listing-form" class="space-y-4">
+                <div>
+                    <label for="listing-title" class="block text-sm font-medium text-gray-700">Title</label>
+                    <input type="text" id="listing-title" name="title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
+                </div>
+                <div>
+                    <label for="listing-url" class="block text-sm font-medium text-gray-700">URL</label>
+                    <input type="url" id="listing-url" name="url" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
+                </div>
+                <div>
+                    <label for="listing-description" class="block text-sm font-medium text-gray-700">Short Description</label>
+                    <textarea id="listing-description" name="description" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label for="listing-source" class="block text-sm font-medium text-gray-700">Your Name (or Nickname)</label>
+                        <input type="text" id="listing-source" name="source_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
+                    </div>
+                    <div>
+                        <label for="listing-category" class="block text-sm font-medium text-gray-700">Category</label>
+                        <select id="listing-category" name="category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                            <option value="local_town">Local Town Favorite</option>
+                            <option value="city">City Favorite</option>
+                            <option value="national">National Recommendation</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <button type="submit" id="submit-listing-btn" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                        Submit Listing
+                    </button>
+                </div>
+            </form>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container">
+            </div>
+    </div>
+</section>
 
     <footer class="bg-gray-800 text-white py-12">
         <div class="container mx-auto px-4 text-center"><p>&copy; 2025 StreamAI. All rights reserved.</p></div>