kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Trying to work on new theme

Browse Source
This commit is contained in:
kb6e
2025-08-28 00:53:35 +02:00
parent 81bd30a7af
commit e084839289
23 changed files with 2401 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
app/views/pages/events.html.erb
View File

@@ -1,46 +1,217 @@
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-8">Upcoming Events</h1>
<% if @parties.any? %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<% @parties.each do |party| %>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<% if party.image.present? %>
<img src="<%= party.image %>" alt="<%= party.name %>" class="w-full h-48 object-cover">
<% else %>
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48 flex items-center justify-center">
<span class="text-gray-500">No Image</span>
</div>
<% end %>
<div class="p-6">
<h2 class="text-xl font-semibold mb-2"><%= party.name %></h2>
<p class="text-gray-600 mb-4"><%= party.description.truncate(100) %></p>
<div class="flex justify-between items-center">
<div>
<p class="text-sm text-gray-500"><%= party.venue_name %></p>
<p class="text-sm text-gray-500"><%= party.venue_address %></p>
</div>
<div>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<%= party.state.humanize %>
</span>
</div>
</div>
</div>
</div>
<% end %>
<% content_for :title, "All Events - Aperonight" %>
<div class="section">
<div class="container">
<div class="section-header">
<h1 class="section-title">All Events</h1>
<p class="section-description">Discover all our upcoming afterwork events tailored to your interests.</p>
</div>
<!-- Pagination -->
<div class="mt-8 flex justify-center">
<%= paginate @parties %>
<div class="events-filter-bar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4);">
<div class="search-box" style="flex: 1; max-width: 400px;">
<input type="text" class="form-input search-input" placeholder="Search events...">
<i data-lucide="search" class="search-icon"></i>
</div>
<div style="display: flex; gap: var(--space-3);">
<select class="form-select" style="min-width: 150px;">
<option>All Categories</option>
<option>Networking</option>
<option>Tech & Innovation</option>
<option>Creative & Design</option>
<option>Business</option>
<option>Wine & Tasting</option>
</select>
<select class="form-select" style="min-width: 120px;">
<option>Any Price</option>
<option>Free</option>
<option>Under €30</option>
<option>€30 - €60</option>
<option>Over €60</option>
</select>
</div>
</div>
<% else %>
<div class="text-center py-12">
<h2 class="text-xl font-medium text-gray-900 mb-4">No events found</h2>
<p class="text-gray-500">Check back later for upcoming events.</p>
<div class="events-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6);">
<!-- Event 1 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1540039155733-5bb30b53aa14?w=400&h=200&fit=crop" alt="Tech Networking Night" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Tech & Innovation Networking Night</h3>
<span class="badge badge-featured">★ Featured</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Thu, Mar 15 • 18:30</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Le Perchoir Marais, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€35</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1574391884720-bbc3740c59d1?w=400&h=200&fit=crop" alt="Creative Afterwork" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Creative Directors Exclusive Meetup</h3>
<span class="badge badge-vip">VIP</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Fri, Mar 16 • 19:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Atelier Des Lumières, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€65</span>
<button class="btn btn-sm btn-primary">Join VIP</button>
</div>
</div>
</div>
<!-- Event 3 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1569949381669-ecf31ae8e613?w=400&h=200&fit=crop" alt="Wine Tasting" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Wine & Business Premium Tasting</h3>
<span class="badge badge-available">Available</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Sat, Mar 18 • 17:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Cave Legrand, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€55</span>
<button class="btn btn-sm btn-secondary">Book Now</button>
</div>
</div>
</div>
<!-- Event 4 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=400&h=200&fit=crop" alt="Startup Pitch Night" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Startup Pitch Night</h3>
<span class="badge badge-limited">Limited</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Mon, Mar 20 • 18:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Station F, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€25</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
</div>
<!-- Event 5 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=200&fit=crop" alt="Jazz & Cocktails" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Jazz & Cocktails Evening</h3>
<span class="badge badge-available">Available</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Wed, Mar 22 • 20:00</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Blue Note, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€40</span>
<button class="btn btn-sm btn-secondary">Book Now</button>
</div>
</div>
</div>
<!-- Event 6 -->
<div class="event-card hover-glow">
<img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=400&h=200&fit=crop" alt="Art & Wine" style="width: 100%; height: 200px; object-fit: cover;">
<div style="padding: var(--space-5);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3);">
<h3 style="font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin: 0;">Art & Wine Gallery Night</h3>
<span class="badge badge-featured">★ Featured</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
<span>Fri, Mar 24 • 19:30</span>
</div>
<div style="display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--text-sm);">
<i data-lucide="map-pin" style="width: 16px; height: 16px;"></i>
<span>Gallery Lafayette, Paris</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span class="price-tag price-tag-md">€30</span>
<button class="btn btn-sm btn-primary">Reserve Spot</button>
</div>
</div>
</div>
</div>
<% end %>
</div>
<div style="display: flex; justify-content: center; margin-top: var(--space-8);">
<nav style="display: flex; gap: var(--space-2);">
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">Previous</a>
<a href="#" class="btn btn-primary" style="padding: var(--space-2) var(--space-4);">1</a>
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">2</a>
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">3</a>
<a href="#" class="btn btn-outline" style="padding: var(--space-2) var(--space-4);">Next</a>
</nav>
</div>
</div>
</div>
<style>
.events-filter-bar .search-input {
padding-left: var(--space-12);
}
.events-filter-bar .search-icon {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--color-neutral-400);
}
.events-filter-bar {
position: relative;
}
@media (max-width: 768px) {
.events-filter-bar {
flex-direction: column;
align-items: stretch;
}
.events-filter-bar .search-box {
max-width: none;
}
.events-filter-bar > div {
width: 100%;
}
}
</style>