Spaces:
Running
Running
Needs vs. Wants for features Needs: Clean UI Quick tab to see bars at a glance with their special/event of the day and a button to click to put you in the detailed overview tab for more information (weekly specials, hours, address, busy time, food menu dropdown that business owners can add). Daily, weekly specials (food and drinks), hours, address, busy time, google reviews, age restrictions for the day. Calendar tab that has the monthly events that vendors can populate. Either google calendar and convert that into a custom one or just the google calendar on the app itself. Reporting system for Users and bar owners to report incorrect/old information and get in contact with us. Local Admin we can give permissions to keep the app updated when we graduate and login for them. (Or have AI be the admin). Terms of service, usage policy, privacy policy, legal disclaimer etc. Wants: A social media feed (from instagram) where bar’s posts auto fill as posted. It can then be sorted by specific bar. Radius from the user. Ability for bar owners to input their information themselves about their specific bars. Coordinate with bars and monetization & app promotion strategies. Moderators going through reports and have the ability to update bar info. Moderator login to the app. To recruit admins from other cities/towns we can have an application process with a contract and incentivize them with a % of the profit from their area. Potential customer login/account for rewards and promotions from bars? Age verification from that. Connector between event planners/bands with to bars through app Sponsored page that has 3 sponsored bars (bidded out each week/month or something) and 3 sponsored events/bands. Scaling for the future.. A one stop app that consolidates all relevant information about bars within a preset distance from Boone/App State for users to easily search through specials, events, times, etc.
771cece verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BarFinder Admin</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .sidebar-icon { | |
| margin-right: 0; | |
| } | |
| .content { | |
| transition: margin-left 0.3s ease; | |
| } | |
| .content.expanded { | |
| margin-left: 80px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Admin Layout --> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 flex flex-col" id="sidebar"> | |
| <div class="p-4 flex items-center justify-between border-b border-indigo-800"> | |
| <div class="flex items-center"> | |
| <i data-feather="cocktail" class="w-6 h-6"></i> | |
| <span class="ml-2 font-bold sidebar-text">BarFinder Admin</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-gray-300 hover:text-white focus:outline-none"> | |
| <i data-feather="chevron-left" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <nav class="p-4 space-y-1"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-800 text-white"> | |
| <i data-feather="home" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="map-pin" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Bars</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="calendar" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Events</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="instagram" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Social Feeds</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="star" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Sponsored</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="users" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Users</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="alert-triangle" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Reports</span> | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i data-feather="settings" class="sidebar-icon w-5 h-5 mr-3"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-indigo-800"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/1" alt="Admin" class="w-8 h-8 rounded-full"> | |
| <div class="ml-3 sidebar-text"> | |
| <p class="text-sm font-medium text-white">Admin User</p> | |
| <p class="text-xs text-indigo-300">Super Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="content flex-1 flex flex-col overflow-hidden" id="content"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-3 flex items-center justify-between"> | |
| <h1 class="text-xl font-bold text-gray-800">Admin Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i data-feather="help-circle" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> | |
| <i data-feather="map-pin" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Bars</p> | |
| <p class="text-2xl font-semibold text-gray-800">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i data-feather="calendar" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Upcoming Events</p> | |
| <p class="text-2xl font-semibold text-gray-800">18</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Pending Reports</p> | |
| <p class="text-2xl font-semibold text-gray-800">7</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i data-feather="users" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Users</p> | |
| <p class="text-2xl font-semibold text-gray-800">1,243</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/people/200x200/2" alt="User" class="w-10 h-10 rounded-full"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500">Added new event "Summer Beer Fest" at Boone Brews</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/people/200x200/3" alt="User" class="w-10 h-10 rounded-full"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Michael Chen</p> | |
| <p class="text-sm text-gray-500">Updated menu for The Local Tap</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/people/200x200/4" alt="User" class="w-10 h-10 rounded-full"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Alex Rodriguez</p> | |
| <p class="text-sm text-gray-500">Reported incorrect hours for Mountain View Lounge</p> | |
| <p class="text-xs text-gray-400 mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 bg-gray-50 text-center"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all activity</a> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Pending Approvals</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-4"> | |
| <p class="text-sm font-medium text-gray-700 mb-1">New Bar Submission</p> | |
| <p class="text-sm text-gray-500">"The Rusty Anchor" submitted by David Wilson</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <button class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded hover:bg-green-200">Approve</button> | |
| <button class="px-3 py-1 bg-red-100 text-red-800 text-sm rounded hover:bg-red-200">Reject</button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-sm font-medium text-gray-700 mb-1">Event Submission</p> | |
| <p class="text-sm text-gray-500">"Jazz Night" at Appalachian Pub</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <button class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded hover:bg-green-200">Approve</button> | |
| <button class="px-3 py-1 bg-red-100 text-red-800 text-sm rounded hover:bg-red-200">Reject</button> | |
| </div> | |
| </div> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all pending approvals</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2> | |
| </div> | |
| <div class="p-6 grid grid-cols-2 gap-4"> | |
| <a href="#" class="p-4 border border-gray-200 rounded-lg text-center hover:bg-gray-50"> | |
| <i data-feather="plus" class="w-6 h-6 text-indigo-600 mx-auto"></i> | |
| <p class="mt-2 text-sm font-medium text-gray-700">Add New Bar</p> | |
| </a> | |
| <a href="#" class="p-4 border border-gray-200 rounded-lg text-center hover:bg-gray-50"> | |
| <i data-feather="calendar" class="w-6 h-6 text-indigo-600 mx-auto"></i> | |
| <p class="mt-2 text-sm font-medium text-gray-700">Create Event</p> | |
| </a> | |
| <a href="#" class="p-4 border border-gray-200 rounded-lg text-center hover:bg-gray-50"> | |
| <i data-feather="star" class="w-6 h-6 text-indigo-600 mx-auto"></i> | |
| <p class="mt-2 text-sm font-medium text-gray-700">Manage Sponsors</p> | |
| </a> | |
| <a href="#" class="p-4 border border-gray-200 rounded-lg text-center hover:bg-gray-50"> | |
| <i data-feather="users" class="w-6 h-6 text-indigo-600 mx-auto"></i> | |
| <p class="mt-2 text-sm font-medium text-gray-700">Add Admin</p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('toggle-sidebar').addEventListener('click', function() { | |
| const sidebar = document.getElementById('sidebar'); | |
| const content = document.getElementById('content'); | |
| const icon = this.querySelector('i'); | |
| sidebar.classList.toggle('collapsed'); | |
| content.classList.toggle('expanded'); | |
| if (sidebar.classList.contains('collapsed')) { | |
| icon.setAttribute('data-feather', 'chevron-right'); | |
| } else { | |
| icon.setAttribute('data-feather', 'chevron-left'); | |
| } | |
| feather.replace(); | |
| }); | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |