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

Update all views to use new design system components and styling

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
kbe
2025-09-08 17:59:12 +02:00
parent e4d778355e
commit 4b671a211b
39 changed files with 1068 additions and 5127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
app/views/orders/checkout.html.erb
View File

@@ -1,36 +1,29 @@
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Breadcrumb -->
<nav class="flex mb-6" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
<li class="inline-flex items-center">
<%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<%= link_to "Événements", events_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<%= link_to @order.event.name, event_path(@order.event.slug, @order.event), class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Commande #<%= @order.id %></span>
</div>
</li>
</ol>
<nav class="inline-flex items-center gap-2 bg-white px-4 py-3 rounded-xl shadow-sm border border-gray-100 mb-8" aria-label="Breadcrumb">
<div class="inline-flex items-center text-sm font-medium">
<%= link_to root_path, class: "text-gray-700 hover:text-purple-600 transition-colors" do %>
<i data-lucide="home" class="w-4 h-4 mr-2"></i>
Accueil
<% end %>
</div>
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
<div class="inline-flex items-center text-sm font-medium">
<%= link_to events_path, class: "text-gray-700 hover:text-purple-600 transition-colors" do %>
Événements
<% end %>
</div>
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
<div class="inline-flex items-center text-sm font-medium">
<%= link_to @order.event.name, event_path(@order.event.slug, @order.event), class: "text-gray-700 hover:text-purple-600 transition-colors" do %>
<%= @order.event.name %>
<% end %>
</div>
<i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i>
<div class="text-sm font-medium text-purple-600">
Commande #<%= @order.id %>
</div>
</nav>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -40,9 +33,7 @@
<% if @expiring_soon %>
<div class="mb-6 bg-orange-50 border border-orange-200 rounded-lg p-4">
<div class="flex items-start">
<svg class="w-5 h-5 text-orange-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<i data-lucide="alert-triangle" class="w-5 h-5 text-orange-600 mr-2 mt-0.5 flex-shrink-0"></i>
<div>
<h3 class="font-medium text-orange-800 mb-1">Attention - Commande bientôt expirée</h3>
<p class="text-orange-700 text-sm">Votre commande va expirer dans quelques minutes. Veuillez procéder rapidement au paiement pour éviter son expiration automatique.</p>
@@ -55,9 +46,7 @@
<% if @order.payment_attempts > 0 %>
<div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-start">
<svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<i data-lucide="info" class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0"></i>
<div>
<h3 class="font-medium text-blue-800 mb-1">Nouvelle tentative de paiement</h3>
<p class="text-blue-700 text-sm">
@@ -75,17 +64,13 @@
<h1 class="text-2xl font-bold text-gray-900 mb-2">Commande pour <%= @order.event.name %></h1>
<div class="flex items-center text-sm text-gray-600 space-x-4">
<div class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<i data-lucide="clock" class="w-4 h-4 mr-1"></i>
<% if @order.expires_at %>
Expire dans <%= time_ago_in_words(@order.expires_at, include_seconds: true) %>
<% end %>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<i data-lucide="file-text" class="w-4 h-4 mr-1"></i>
Commande #<%= @order.id %>
</div>
</div>
@@ -100,9 +85,7 @@
<div class="flex-1 min-w-0">
<h4 class="text-sm font-medium text-gray-900 truncate"><%= ticket.ticket_type.name %></h4>
<div class="flex items-center text-xs text-gray-500 mt-1">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<i data-lucide="user" class="w-3 h-3 mr-1"></i>
<%= ticket.first_name %> <%= ticket.last_name %>
</div>
</div>
@@ -148,9 +131,7 @@
<div class="space-y-6">
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4 border border-purple-200">
<div class="flex items-start">
<svg class="w-5 h-5 text-purple-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
<i data-lucide="shield" class="w-5 h-5 text-purple-600 mr-2 mt-0.5 flex-shrink-0"></i>
<div>
<h3 class="font-medium text-purple-800 mb-1">Paiement 100% sécurisé</h3>
<p class="text-purple-700 text-sm">Vos données bancaires sont protégées par le cryptage SSL et traitées par Stripe, leader mondial du paiement en ligne.</p>
@@ -160,33 +141,25 @@
<button
id="checkout-button"
class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl"
class="w-full btn btn-primary py-4 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl"
>
<div class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
<i data-lucide="credit-card" class="w-5 h-5 mr-2"></i>
Payer <%= @order.total_amount_euros %>€
</div>
</button>
<div class="flex items-center justify-center space-x-4 text-xs text-gray-500">
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
<i data-lucide="credit-card" class="w-4 h-4 mr-1"></i>
Visa
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
<i data-lucide="credit-card" class="w-4 h-4 mr-1"></i>
Mastercard
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
<i data-lucide="shield" class="w-4 h-4 mr-1"></i>
Sécurisé par Stripe
</span>
</div>
@@ -269,9 +242,7 @@
button.disabled = false;
button.innerHTML = `
<div class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
</svg>
<i data-lucide="credit-card" class="w-5 h-5 mr-2"></i>
Payer <%= @order.total_amount_euros %>€
</div>
`;
@@ -292,9 +263,7 @@
<!-- No Stripe Configuration -->
<div class="text-center py-8">
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
<svg class="w-12 h-12 text-yellow-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<i data-lucide="alert-triangle" class="w-12 h-12 text-yellow-600 mx-auto mb-4"></i>
<h3 class="font-semibold text-yellow-800 mb-2">Paiement temporairement indisponible</h3>
<p class="text-yellow-700 text-sm">Le système de paiement n'est pas encore configuré. Veuillez contacter l'organisateur pour plus d'informations.</p>
</div>
@@ -306,9 +275,7 @@
<div class="space-y-3">
<%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
<div class="flex items-center justify-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
Retour à l'événement
</div>
<% end %>

2
app/views/orders/new.html.erb
View File

@@ -133,7 +133,7 @@
<div class="flex flex-col sm:flex-row gap-4 pt-6">
<%= link_to "Retour", event_path(@event.slug, @event), class: "px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-center font-medium transition-colors duration-200" %>
<%= form.submit "Procéder au paiement", class: "flex-1 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5" %>
<%= form.button "Procéder au paiement", type: "submit", class: "flex-1 btn btn-primary py-3 px-6 rounded-xl shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transform hover:-translate-y-0.5" %>
</div>
<% end %>
</div>