Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Discussions | GlowUp Premium</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <style> | |
| .thread:hover { | |
| background-color: #f9fafb; | |
| } | |
| .category-header { | |
| background-color: #f3f4f6; | |
| border-left: 4px solid #6366F1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <!-- Forum Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-900">Community Forum</h1> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center space-x-2 bg-primary text-white px-4 py-2 rounded"> | |
| <i data-feather="plus" class="w-5 h-5"></i> | |
| <span>New Thread</span> | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search forum..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div class="space-y-8"> | |
| <!-- Category 1 --> | |
| <div class="rounded-lg overflow-hidden shadow-sm"> | |
| <div class="category-header px-6 py-3 flex items-center"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4"> | |
| <i data-feather="zap" class="text-white w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-bold text-gray-900">Performance Optimization</h2> | |
| <p class="text-gray-600 text-sm">Discuss optimization techniques and strategies</p> | |
| </div> | |
| </div> | |
| <div class="bg-white divide-y divide-gray-100"> | |
| <!-- Thread --> | |
| <div class="thread px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="http://static.photos/people/200x200/10" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">Best practices for daily optimization routines</h3> | |
| <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1"> | |
| <span>Started by <a href="#" class="text-primary">Alex_Morgan</a></span> | |
| <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> 2 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="text-center"> | |
| <div class="text-gray-900 font-medium">24</div> | |
| <div class="text-xs text-gray-500">Replies</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-gray-900 font-medium">152</div> | |
| <div class="text-xs text-gray-500">Views</div> | |
| </div> | |
| <div class="w-40"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/people/200x200/11" alt="User" class="w-8 h-8 rounded-full"> | |
| <div class="text-sm"> | |
| <div class="text-gray-900 font-medium truncate">Jordan_Taylor</div> | |
| <div class="text-xs text-gray-500">Today, 02:15 PM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Thread --> | |
| <div class="thread px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="http://static.photos/people/200x200/12" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">Measuring optimization impact - what metrics matter?</h3> | |
| <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1"> | |
| <span>Started by <a href="#" class="text-primary">Sam_Williams</a></span> | |
| <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> 1 week ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="text-center"> | |
| <div class="text-gray-900 font-medium">18</div> | |
| <div class="text-xs text-gray-500">Replies</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-gray-900 font-medium">87</div> | |
| <div class="text-xs text-gray-500">Views</div> | |
| </div> | |
| <div class="w-40"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/people/200x200/13" alt="User" class="w-8 h-8 rounded-full"> | |
| <div class="text-sm"> | |
| <div class="text-gray-900 font-medium truncate">Casey_Smith</div> | |
| <div class="text-xs text-gray-500">Yesterday, 08:45 AM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Category 2 --> | |
| <div class="rounded-lg overflow-hidden shadow-sm"> | |
| <div class="category-header px-6 py-3 flex items-center"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-4"> | |
| <i data-feather="shield" class="text-white w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-bold text-gray-900">Troubleshooting</h2> | |
| <p class="text-gray-600 text-sm">Get help with issues and bugs</p> | |
| </div> | |
| </div> | |
| <div class="bg-white divide-y divide-gray-100"> | |
| <!-- Thread --> | |
| <div class="thread px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="http://static.photos/people/200x200/14" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-medium text-gray-900 hover:text-primary cursor-pointer">Version 2.3 causing performance issues?</h3> | |
| <div class="flex items-center space-x-3 text-sm text-gray-500 mt-1"> | |
| <span>Started by <a href="#" class="text-primary">Taylor_Roby</a></span> | |
| <span><i data-feather="clock" class="w-3 h-3 inline mr-1"></i> 3 days ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="text-center"> | |
| <div class="text-gray-900 font-medium">7</div> | |
| <div class="text-xs text-gray-500">Replies</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-gray-900 font-medium">42</div> | |
| <div class="text-xs text-gray-500">Views</div> | |
| </div> | |
| <div class="w-40"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/people/200x200/15" alt="User" class="w-8 h-8 rounded-full"> | |
| <div class="text-sm"> | |
| <div class="text-gray-900 font-medium truncate">Team_GlowUp</div> | |
| <div class="text-xs text-gray-500">Today, 10:30 AM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |