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>The Local Tap | BarFinder</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> | |
| .gallery-image { | |
| transition: transform 0.3s ease; | |
| } | |
| .gallery-image:hover { | |
| transform: scale(1.03); | |
| } | |
| .menu-tab.active { | |
| border-bottom: 3px solid #6366f1; | |
| color: #6366f1; | |
| } | |
| .hours-table tr:not(:last-child) { | |
| border-bottom: 1px solid #e5e7eb; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-indigo-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="cocktail" class="w-6 h-6"></i> | |
| <span class="font-bold text-xl">BarFinder</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="hover:text-indigo-200">Home</a> | |
| <a href="index.html#bars" class="hover:text-indigo-200">Bars</a> | |
| <a href="index.html#events" class="hover:text-indigo-200">Events</a> | |
| <a href="index.html#social" class="hover:text-indigo-200">Social</a> | |
| <a href="admin.html" class="bg-indigo-700 px-3 py-1 rounded hover:bg-indigo-600">Admin</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Bar Header --> | |
| <section class="relative"> | |
| <div class="h-64 md:h-96 w-full bg-gray-800 overflow-hidden"> | |
| <img src="http://static.photos/nightlife/1200x630/1" alt="The Local Tap" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent pt-20 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row md:items-end justify-between"> | |
| <div> | |
| <h1 class="text-3xl md:text-4xl font-bold text-white">The Local Tap</h1> | |
| <div class="flex items-center mt-2"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <i data-feather="star" class="w-5 h-5 fill-current"></i> | |
| <span class="ml-2 text-white">4.8 (142 reviews)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-3"> | |
| <button class="bg-white text-indigo-900 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 flex items-center"> | |
| <i data-feather="phone" class="w-4 h-4 mr-2"></i> | |
| Call | |
| </button> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> | |
| Directions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bar Info --> | |
| <section class="py-8 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-2/3"> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <nav class="flex space-x-8"> | |
| <button class="py-4 px-1 font-medium text-gray-500 hover:text-indigo-600 menu-tab active" data-tab="overview"> | |
| Overview | |
| </button> | |
| <button class="py-4 px-1 font-medium text-gray-500 hover:text-indigo-600 menu-tab" data-tab="menu"> | |
| Menu | |
| </button> | |
| <button class="py-4 px-1 font-medium text-gray-500 hover:text-indigo-600 menu-tab" data-tab="photos"> | |
| Photos | |
| </button> | |
| <button class="py-4 px-1 font-medium text-gray-500 hover:text-indigo-600 menu-tab" data-tab="reviews"> | |
| Reviews | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Overview Tab --> | |
| <div id="overview-tab" class="tab-content active"> | |
| <h2 class="text-2xl font-bold mb-4">About The Local Tap</h2> | |
| <p class="text-gray-700 mb-6"> | |
| The Local Tap is Boone's premier craft beer bar, featuring 40 rotating taps of the best local and regional brews. | |
| Our cozy atmosphere, knowledgeable staff, and regular events make us a favorite among locals and visitors alike. | |
| </p> | |
| <h3 class="text-xl font-bold mb-3">Today's Special</h3> | |
| <div class="bg-indigo-50 rounded-lg p-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="dollar-sign" class="w-6 h-6 text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">Happy Hour</h4> | |
| <p class="text-gray-700">4PM - 7PM • $3 Craft Beers</p> | |
| <p class="text-gray-600 mt-1">All local drafts included. Excludes specialty brews.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Weekly Specials</h3> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="calendar" class="w-5 h-5 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Monday</h4> | |
| <p class="text-gray-600">$4 Local IPAs all day</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="calendar" class="w-5 h-5 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Tuesday</h4> | |
| <p class="text-gray-600">$5 Burger & Beer combo</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 p-2 rounded-lg mr-4"> | |
| <i data="feather" data-feather="calendar" class="w-5 h-5 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Wednesday</h4> | |
| <p class="text-gray-600">Trivia Night - 8PM (win free drinks!)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="calendar" class="w-5 h-5 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Thursday</h4> | |
| <p class="text-gray-600">Karaoke - 9PM (half-price cocktails for performers)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="calendar" class="w-5 h-5 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Friday-Saturday</h4> | |
| <p class="text-gray-600">Live music - 10PM ($1 off all drafts during shows)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-gray-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="calendar" class="w-5 h-5 text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Sunday</h4> | |
| <p class="text-gray-600">$3 Mimosas 11AM-3PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Upcoming Events</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="music" class="w-5 h-5 text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Live Band: Mountain Sound</h4> | |
| <p class="text-gray-600">Tomorrow • 9PM-12AM</p> | |
| <p class="text-gray-700 mt-1">Local favorites playing rock and indie covers. $5 cover after 9PM.</p> | |
| <button class="mt-2 text-indigo-600 hover:text-indigo-800 font-medium"> | |
| More Info <i data-feather="arrow-right" class="w-4 h-4 inline"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-lg mr-4"> | |
| <i data-feather="award" class="w-5 h-5 text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Beer Release Party</h4> | |
| <p class="text-gray-600">June 10 • 6PM-10PM</p> | |
| <p class="text-gray-700 mt-1">Celebrating our new collaboration brew with Boone Brewing Company.</p> | |
| <button class="mt-2 text-indigo-600 hover:text-indigo-800 font-medium"> | |
| More Info <i data-feather="arrow-right" class="w-4 h-4 inline"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Tab --> | |
| <div id="menu-tab" class="tab-content hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Menu</h2> | |
| <h3 class="text-xl font-bold mb-3 mt-6">Food Menu</h3> | |
| <div class="space-y-6"> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h4 class="font-bold text-lg mb-2">Appetizers</h4> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Nachos</p> | |
| <p class="text-sm text-gray-600">Tortilla chips, cheese, jalapeños, pico de gallo, guacamole</p> | |
| </div> | |
| <p class="font-medium">$7.50</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Wings</p> | |
| <p class="text-sm text-gray-600">Choice of buffalo, BBQ, or garlic parmesan</p> | |
| </div> | |
| <p class="font-medium">$8.99</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Pretzel Bites</p> | |
| <p class="text-sm text-gray-600">Served with beer cheese and mustard</p> | |
| </div> | |
| <p class="font-medium">$6.50</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h4 class="font-bold text-lg mb-2">Burgers & Sandwiches</h4> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Classic Burger</p> | |
| <p class="text-sm text-gray-600">Beef patty, lettuce, tomato, onion, pickles</p> | |
| </div> | |
| <p class="font-medium">$10.99</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">BBQ Bacon Burger</p> | |
| <p class="text-sm text-gray-600">Beef patty, bacon, cheddar, BBQ sauce</p> | |
| </div> | |
| <p class="font-medium">$12.50</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Chicken Sandwich</p> | |
| <p class="text-sm text-gray-600">Grilled or fried chicken with lettuce and tomato</p> | |
| </div> | |
| <p class="font-medium">$9.99</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Drink Menu</h3> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h4 class="font-bold text-lg mb-2">Beer</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="font-medium mb-1">Local Drafts (16oz)</p> | |
| <div class="flex justify-between text-sm"> | |
| <p>Boone Brewing IPA</p> | |
| <p>$6.00</p> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <p>Mountain Valley Lager</p> | |
| <p>$5.50</p> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <p>Appalachian Amber</p> | |
| <p>$5.75</p> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-1">Domestic Bottles</p> | |
| <div class="flex justify-between text-sm"> | |
| <p>Bud Light</p> | |
| <p>$4.00</p> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <p>Coors Light</p> | |
| <p>$4.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200 pb-6"> | |
| <h4 class="font-bold text-lg mb-2">Cocktails</h4> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Margarita</p> | |
| <p class="text-sm text-gray-600">House margarita with lime and salt</p> | |
| </div> | |
| <p class="font-medium">$7.00</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Old Fashioned</p> | |
| <p class="text-sm text-gray-600">Bourbon, sugar, bitters</p> | |
| </div> | |
| <p class="font-medium">$9.00</p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">Moscow Mule</p> | |
| <p class="text-sm text-gray-600">Vodka, ginger beer, lime</p> | |
| </div> | |
| <p class="font-medium">$8.00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Photos Tab --> | |
| <div id="photos-tab" class="tab-content hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Photos</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/nightlife/640x360/1" alt="Bar Interior" class="w-full h-40 object-cover gallery-image"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/nightlife/640x360/2" alt="Bar Exterior" class="w-full h-40 object-cover gallery-image"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/nightlife/640x360/3" alt="Beer Selection" class="w-full h-40 object-cover gallery-image"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/food/640x360/1" | |
| </body> | |
| </html> |