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

247
app/views/pages/components.html.erb Normal file
View File

@@ -0,0 +1,247 @@
<div class="py-12">
<div class="text-center mb-16">
<h1 class="mb-4">Aperonight Design System</h1>
<p class="text-xl text-neutral-600 max-w-3xl mx-auto">
A comprehensive collection of reusable components for premium event booking experiences.
</p>
</div>
<!-- Buttons Section -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Buttons</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card">
<h3 class="demo-title mb-4">Primary Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-primary">Small</button>
<button class="btn btn-md btn-primary">Medium</button>
<button class="btn btn-lg btn-primary">Large</button>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Secondary Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-secondary">Small</button>
<button class="btn btn-md btn-secondary">Medium</button>
<button class="btn btn-lg btn-secondary">Large</button>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Outline Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-outline">Small</button>
<button class="btn btn-md btn-outline">Medium</button>
<button class="btn btn-lg btn-outline">Large</button>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Ghost Buttons</h3>
<div class="flex flex-wrap gap-3">
<button class="btn btn-sm btn-ghost">Small</button>
<button class="btn btn-md btn-ghost">Medium</button>
<button class="btn btn-lg btn-ghost">Large</button>
</div>
</div>
</div>
</section>
<!-- Form Elements -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Form Elements</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="card">
<h3 class="demo-title mb-4">Input Fields</h3>
<form>
<div class="form-group">
<label class="form-label">Event Name</label>
<input type="text" class="form-input focus-ring" placeholder="Enter event name">
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-textarea focus-ring" rows="3" placeholder="Describe your event"></textarea>
</div>
<div class="form-group">
<label class="form-label">Category</label>
<select class="form-select focus-ring">
<option>Select category</option>
<option>Networking</option>
<option>Tech</option>
<option>Creative</option>
</select>
</div>
<div class="form-group">
<div class="search-box">
<input type="search" class="form-input search-input focus-ring" placeholder="Search events...">
<i class="search-icon">
<!-- Search icon would be inserted by Lucide JS -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</i>
</div>
</div>
<div class="flex gap-3 mt-6">
<button type="submit" class="btn btn-md btn-primary">Submit</button>
<button type="reset" class="btn btn-md btn-outline">Reset</button>
</div>
</form>
</div>
<div class="card">
<h3 class="demo-title mb-4">Validation States</h3>
<div class="form-group">
<label class="form-label">Email (Valid)</label>
<input type="email" class="form-input" value="user@example.com" style="border-color: var(--color-success); background: var(--color-success-light);">
<div class="form-error mt-1" style="color: var(--color-success); display: flex; align-items: center; gap: 0.25rem;">
<!-- Check icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
Email is valid
</div>
</div>
<div class="form-group">
<label class="form-label">Password (Error)</label>
<input type="password" class="form-input" value="123" style="border-color: var(--color-danger); background: var(--color-danger-light);">
<div class="form-error">
<!-- Alert icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
Password must be at least 8 characters
</div>
</div>
<div class="form-group">
<label class="form-label">Phone (Warning)</label>
<input type="tel" class="form-input" value="+33 1 23 45" style="border-color: var(--color-warning); background: var(--color-warning-light);">
<div class="form-error mt-1" style="color: var(--color-warning-dark); display: flex; align-items: center; gap: 0.25rem;">
<!-- Warning icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
Please complete phone number
</div>
</div>
</div>
</div>
</section>
<!-- Badges and Tags -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Badges & Tags</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="card">
<h3 class="demo-title mb-4">Event Status Badges</h3>
<div class="flex flex-wrap gap-3">
<span class="badge badge-available">Available</span>
<span class="badge badge-limited">Limited</span>
<span class="badge badge-sold-out">Sold Out</span>
<span class="badge badge-featured">★ Featured</span>
<span class="badge badge-vip">VIP</span>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">Price Tags</h3>
<div class="flex flex-wrap items-center gap-4">
<div class="price-tag price-tag-sm" style="color: var(--color-neutral-600);">€15</div>
<div class="price-tag price-tag-md" style="color: var(--color-primary-600);">€35</div>
<div class="price-tag price-tag-lg" style="color: var(--color-accent-600);">€55</div>
<div class="price-tag price-tag-md" style="color: var(--color-neutral-600);">
<span style="text-decoration: line-through; opacity: 0.7;">€60</span>
<span style="color: var(--color-success); margin-left: 0.5rem;">€45</span>
</div>
</div>
</div>
</div>
</section>
<!-- Cards -->
<section class="mb-16">
<h2 class="mb-8 text-2xl font-bold">Cards</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="card hover-lift">
<div class="card-header">
<h3 class="font-bold mb-2">Basic Card</h3>
<p class="text-neutral-600 m-0">Simple card with header and content</p>
</div>
<div class="card-body">
<p>This is a basic card component that can be used for various content types. It includes proper spacing and hover effects.</p>
<button class="btn btn-md btn-primary mt-4">Learn More</button>
</div>
</div>
<div class="event-card hover-glow">
<div style="height: 200px; background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500)); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--text-xl); font-weight: bold;">
Event Image
</div>
<div style="padding: var(--space-6);">
<div class="flex gap-2 mb-4">
<span class="badge badge-featured">★ Featured</span>
<span class="badge badge-available">Available</span>
</div>
<h3 class="font-bold mb-2 text-neutral-900">Networking Event</h3>
<p class="text-neutral-600 mb-6 text-sm">Join professionals for an evening of networking and insights.</p>
<div class="flex justify-between items-center">
<span class="price-tag price-tag-md" style="color: var(--color-primary-600);">€35</span>
<button class="btn btn-sm btn-primary">Book Now</button>
</div>
</div>
</div>
<div class="card">
<h3 class="demo-title mb-4">User Profile</h3>
<div class="flex items-center gap-4 mb-4">
<div class="avatar avatar-lg">
<div class="avatar-image" style="background: linear-gradient(135deg, var(--color-primary-200), var(--color-accent-200));"></div>
<div class="avatar-status status-online"></div>
</div>
<div>
<h4 class="font-bold mb-1">Alex Johnson</h4>
<p class="text-neutral-600 text-sm m-0">Senior Developer</p>
<div class="rating mt-1">
<!-- Stars would be inserted by Lucide JS -->
<div class="flex">
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star filled" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<svg class="rating-star empty" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<span class="text-sm text-neutral-600 ml-2">4.2</span>
</div>
</div>
</div>
<div class="flex gap-2">
<button class="btn btn-sm btn-primary flex-1">Connect</button>
<button class="btn btn-sm btn-outline">Message</button>
</div>
</div>
</div>
</section>
</div>