30f3ecc6ad
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> This commit refactors the entire application to replace the 'parties' concept with 'events'. All controllers, models, views, and related files have been updated to reflect this change. The parties table has been replaced with an events table, and all related functionality has been updated accordingly.
1524 lines
65 KiB
HTML
Executable File
1524 lines
65 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aperonight Design System - Component Library</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<link rel="stylesheet" href="enhanced_aperonight_theme.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
line-height: 1.6;
|
|
color: var(--color-neutral-900);
|
|
background: var(--color-neutral-50);
|
|
}
|
|
|
|
.component-section {
|
|
padding: var(--space-12) 0;
|
|
border-bottom: 1px solid var(--color-neutral-200);
|
|
}
|
|
|
|
.component-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2xl);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-6);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
.component-grid {
|
|
display: grid;
|
|
gap: var(--space-6);
|
|
margin-bottom: var(--space-8);
|
|
}
|
|
|
|
.component-demo {
|
|
background: white;
|
|
padding: var(--space-6);
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--color-neutral-200);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.demo-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-lg);
|
|
font-weight: 700;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.demo-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
}
|
|
|
|
.demo-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.color-palette {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.color-swatch {
|
|
text-align: center;
|
|
}
|
|
|
|
.color-circle {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: var(--radius-full);
|
|
margin: 0 auto var(--space-2);
|
|
border: 2px solid var(--color-neutral-200);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.color-name {
|
|
font-size: var(--text-xs);
|
|
color: var(--color-neutral-600);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.typography-demo h1,
|
|
.typography-demo h2,
|
|
.typography-demo h3,
|
|
.typography-demo h4,
|
|
.typography-demo h5,
|
|
.typography-demo h6 {
|
|
margin-bottom: var(--space-2);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.typography-demo p {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.spacing-demo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.spacing-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.spacing-visual {
|
|
background: var(--color-primary-200);
|
|
height: 20px;
|
|
}
|
|
|
|
.spacing-label {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--color-neutral-600);
|
|
min-width: 120px;
|
|
}
|
|
|
|
.form-demo {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.notification-demo {
|
|
position: relative;
|
|
}
|
|
|
|
.notification {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4);
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: var(--space-3);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.notification-success {
|
|
background: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
border: 1px solid var(--color-success);
|
|
}
|
|
|
|
.notification-warning {
|
|
background: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
border: 1px solid var(--color-warning);
|
|
}
|
|
|
|
.notification-error {
|
|
background: var(--color-danger-light);
|
|
color: var(--color-danger-dark);
|
|
border: 1px solid var(--color-danger);
|
|
}
|
|
|
|
.notification-info {
|
|
background: var(--color-primary-50);
|
|
color: var(--color-primary-800);
|
|
border: 1px solid var(--color-primary-200);
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-8);
|
|
max-width: 500px;
|
|
width: 90%;
|
|
box-shadow: var(--shadow-2xl);
|
|
position: relative;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-xl);
|
|
font-weight: 700;
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: var(--space-2);
|
|
color: var(--color-neutral-500);
|
|
border-radius: var(--radius);
|
|
transition: all var(--duration-fast);
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tooltip-content {
|
|
position: absolute;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--color-neutral-900);
|
|
color: white;
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius);
|
|
font-size: var(--text-sm);
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all var(--duration-normal);
|
|
z-index: 100;
|
|
}
|
|
|
|
.tooltip-content::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 5px solid transparent;
|
|
border-top-color: var(--color-neutral-900);
|
|
}
|
|
|
|
.tooltip:hover .tooltip-content {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: var(--color-neutral-200);
|
|
border-radius: var(--radius-full);
|
|
overflow: hidden;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-400) 100%);
|
|
border-radius: var(--radius-full);
|
|
transition: width var(--duration-slow) var(--ease-out);
|
|
}
|
|
|
|
.avatar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary-100);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
color: var(--color-primary-600);
|
|
border: 2px solid white;
|
|
box-shadow: var(--shadow-sm);
|
|
position: relative;
|
|
}
|
|
|
|
.avatar-lg {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.avatar-sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.avatar-status {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-full);
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.status-online { background: var(--color-success); }
|
|
.status-offline { background: var(--color-neutral-400); }
|
|
.status-busy { background: var(--color-danger); }
|
|
|
|
.tabs {
|
|
border-bottom: 1px solid var(--color-neutral-200);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.tab-button {
|
|
background: none;
|
|
border: none;
|
|
padding: var(--space-3) var(--space-4);
|
|
font-weight: 500;
|
|
color: var(--color-neutral-600);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition: all var(--duration-normal);
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.tab-button:hover {
|
|
color: var(--color-primary-600);
|
|
background: var(--color-primary-50);
|
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: var(--color-primary-600);
|
|
border-bottom-color: var(--color-primary-600);
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
padding: var(--space-4) 0;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid var(--color-neutral-200);
|
|
border-top-color: var(--color-primary-600);
|
|
border-radius: var(--radius-full);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.loading-dots {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.loading-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--color-primary-600);
|
|
border-radius: var(--radius-full);
|
|
animation: bounce 1.4s infinite both;
|
|
}
|
|
|
|
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 80%, 100% { transform: scale(0); }
|
|
40% { transform: scale(1); }
|
|
}
|
|
|
|
.price-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
font-family: var(--font-display);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.price-tag-sm {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.price-tag-md {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.price-tag-lg {
|
|
font-size: var(--text-2xl);
|
|
}
|
|
|
|
.rating {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
align-items: center;
|
|
}
|
|
|
|
.rating-star {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.rating-star.filled {
|
|
fill: currentColor;
|
|
}
|
|
|
|
.rating-star.empty {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.search-input {
|
|
padding-left: var(--space-12);
|
|
}
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
left: var(--space-4);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: var(--space-2);
|
|
display: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: var(--space-3);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: background var(--duration-fast);
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--color-primary-50);
|
|
}
|
|
|
|
.breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.breadcrumb-item {
|
|
color: var(--color-neutral-600);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item:hover {
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.breadcrumb-item.current {
|
|
color: var(--color-neutral-900);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.breadcrumb-separator {
|
|
color: var(--color-neutral-400);
|
|
}
|
|
|
|
/* Enhanced form elements based on finder styles */
|
|
.form-group {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.form-label {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-sm);
|
|
font-weight: 700;
|
|
color: var(--color-neutral-700);
|
|
margin-bottom: var(--space-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
display: block;
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
background: var(--color-neutral-50);
|
|
border: 2px solid var(--color-neutral-200);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
font-size: var(--text-base);
|
|
font-weight: 500;
|
|
color: var(--color-neutral-900);
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
font-family: var(--font-sans);
|
|
width: 100%;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary-500);
|
|
background: white;
|
|
box-shadow: 0 0 0 4px rgb(168 85 247 / 0.1);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--color-neutral-500);
|
|
}
|
|
|
|
.form-select {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 12px center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
padding-right: var(--space-12);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-error {
|
|
color: var(--color-danger);
|
|
font-size: var(--text-sm);
|
|
margin-top: var(--space-1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.focus-ring {
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
}
|
|
|
|
.focus-ring:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary-500);
|
|
background: white;
|
|
box-shadow: 0 0 0 4px rgb(168 85 247 / 0.1);
|
|
}
|
|
|
|
/* Enhanced buttons with gradient effects */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-lg);
|
|
transition: all var(--duration-normal) var(--ease-out);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: var(--space-2) var(--space-4);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.btn-md {
|
|
padding: var(--space-3) var(--space-6);
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.btn-lg {
|
|
padding: var(--space-4) var(--space-8);
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%);
|
|
color: white;
|
|
box-shadow: var(--shadow-purple-md);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-purple-lg);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--color-neutral-800);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-neutral-900);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 2px solid var(--color-primary-600);
|
|
color: var(--color-primary-600);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--color-primary-50);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: var(--color-neutral-100);
|
|
}
|
|
|
|
/* Enhanced badges with better styling */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--space-1) var(--space-3);
|
|
border-radius: var(--radius-full);
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.badge-available {
|
|
background: var(--color-success-light);
|
|
color: var(--color-success-dark);
|
|
border: 1px solid var(--color-success);
|
|
}
|
|
|
|
.badge-limited {
|
|
background: var(--color-warning-light);
|
|
color: var(--color-warning-dark);
|
|
border: 1px solid var(--color-warning);
|
|
}
|
|
|
|
.badge-sold-out {
|
|
background: var(--color-danger-light);
|
|
color: var(--color-danger-dark);
|
|
border: 1px solid var(--color-danger);
|
|
}
|
|
|
|
.badge-featured {
|
|
background: var(--color-accent-100);
|
|
color: var(--color-accent-700);
|
|
border: 1px solid var(--color-accent-300);
|
|
}
|
|
|
|
.badge-vip {
|
|
background: var(--color-primary-100);
|
|
color: var(--color-primary-800);
|
|
border: 1px solid var(--color-primary-300);
|
|
}
|
|
|
|
/* Enhanced cards with hover effects */
|
|
.card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-6);
|
|
border: 1px solid var(--color-neutral-200);
|
|
box-shadow: var(--shadow-sm);
|
|
transition: all var(--duration-slow) var(--ease-out);
|
|
}
|
|
|
|
.card.hover-lift:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: var(--shadow-2xl);
|
|
border-color: var(--color-primary-200);
|
|
}
|
|
|
|
.card-header {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.card-body {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.event-card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
transition: all var(--duration-slow) var(--ease-out);
|
|
border: 1px solid var(--color-neutral-200);
|
|
position: relative;
|
|
}
|
|
|
|
.event-card.hover-glow:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: var(--shadow-2xl);
|
|
border-color: var(--color-primary-200);
|
|
}
|
|
|
|
.nav {
|
|
background: white;
|
|
box-shadow: var(--shadow-sm);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--color-neutral-700);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
padding: var(--space-3) var(--space-2);
|
|
border-radius: var(--radius);
|
|
transition: all var(--duration-normal);
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--color-primary-600);
|
|
background: var(--color-primary-50);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--space-4);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.component-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.demo-group {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.color-palette {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<div class="container">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) 0;">
|
|
<div style="display: flex; align-items: center; gap: var(--space-3);">
|
|
<div style="width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-family: var(--font-display); box-shadow: var(--shadow-purple-sm);">A</div>
|
|
<span style="font-size: var(--text-xl); font-weight: 800; color: var(--color-neutral-900); font-family: var(--font-display);">Component Library</span>
|
|
</div>
|
|
<div style="display: flex; gap: var(--space-2); align-items: center;">
|
|
<button class="btn btn-md btn-outline">Documentation</button>
|
|
<button class="btn btn-md btn-primary">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<section style="background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-accent-50) 100%); padding: var(--space-16) 0;">
|
|
<div class="container">
|
|
<div style="text-align: center; max-width: 800px; margin: 0 auto;">
|
|
<h1 style="font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Aperonight Design System</h1>
|
|
<p style="font-size: var(--text-xl); color: var(--color-neutral-600); margin-bottom: var(--space-8);">A comprehensive collection of reusable components for premium event booking experiences.</p>
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="breadcrumb" style="justify-content: center; margin-bottom: var(--space-6);">
|
|
<a href="#" class="breadcrumb-item">Home</a>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<a href="#" class="breadcrumb-item">Design System</a>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<span class="breadcrumb-item current">Components</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<!-- Colors Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Color Palette</h2>
|
|
<div class="component-demo">
|
|
<div class="demo-title">Brand Colors</div>
|
|
<div class="color-palette">
|
|
<div class="color-swatch">
|
|
<div class="color-circle" style="background: var(--color-primary-600);"></div>
|
|
<div class="color-name">Primary</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-circle" style="background: var(--color-accent-500);"></div>
|
|
<div class="color-name">Accent</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-circle" style="background: var(--color-success);"></div>
|
|
<div class="color-name">Success</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-circle" style="background: var(--color-warning);"></div>
|
|
<div class="color-name">Warning</div>
|
|
</div>
|
|
<div class="color-swatch">
|
|
<div class="color-circle" style="background: var(--color-danger);"></div>
|
|
<div class="color-name">Danger</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Typography Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Typography</h2>
|
|
<div class="component-demo">
|
|
<div class="typography-demo">
|
|
<h1>Heading 1 - Hero Title</h1>
|
|
<h2>Heading 2 - Section Title</h2>
|
|
<h3>Heading 3 - Subsection</h3>
|
|
<h4>Heading 4 - Component Title</h4>
|
|
<p><strong>Bold text</strong> and regular paragraph text with good readability and proper line spacing for optimal user experience.</p>
|
|
<p style="font-size: var(--text-sm); color: var(--color-neutral-600);">Small text for captions and metadata information.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Buttons Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Buttons</h2>
|
|
<div class="component-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
|
<div class="component-demo">
|
|
<div class="demo-title">Primary Buttons</div>
|
|
<div class="demo-group">
|
|
<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="component-demo">
|
|
<div class="demo-title">Secondary Buttons</div>
|
|
<div class="demo-group">
|
|
<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="component-demo">
|
|
<div class="demo-title">Outline Buttons</div>
|
|
<div class="demo-group">
|
|
<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="component-demo">
|
|
<div class="demo-title">Icon Buttons</div>
|
|
<div class="demo-group">
|
|
<button class="btn btn-md btn-primary">
|
|
<i data-lucide="search" style="width: 16px; height: 16px;"></i>
|
|
Search
|
|
</button>
|
|
<button class="btn btn-md btn-secondary">
|
|
<i data-lucide="plus" style="width: 16px; height: 16px;"></i>
|
|
Add Event
|
|
</button>
|
|
<button class="btn btn-md btn-outline">
|
|
<i data-lucide="calendar" style="width: 16px; height: 16px;"></i>
|
|
Schedule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Badges Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Badges & Status Indicators</h2>
|
|
<div class="component-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
|
<div class="component-demo">
|
|
<div class="demo-title">Event Status Badges</div>
|
|
<div class="demo-group">
|
|
<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="component-demo">
|
|
<div class="demo-title">Notification Badges</div>
|
|
<div class="demo-group">
|
|
<div style="position: relative; display: inline-block;">
|
|
<button class="btn btn-md btn-ghost">
|
|
<i data-lucide="bell" style="width: 20px; height: 20px;"></i>
|
|
</button>
|
|
<span style="position: absolute; top: -8px; right: -8px; background: var(--color-danger); color: white; border-radius: var(--radius-full); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700;">3</span>
|
|
</div>
|
|
<div style="position: relative; display: inline-block;">
|
|
<button class="btn btn-md btn-ghost">
|
|
<i data-lucide="message-circle" style="width: 20px; height: 20px;"></i>
|
|
</button>
|
|
<span style="position: absolute; top: -4px; right: -4px; background: var(--color-primary-600); color: white; border-radius: var(--radius-full); width: 8px; height: 8px;"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cards Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Cards</h2>
|
|
<div class="component-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
|
<div class="card hover-lift">
|
|
<div class="card-header">
|
|
<h3 style="font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-2);">Basic Card</h3>
|
|
<p style="color: var(--color-neutral-600); margin: 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" style="margin-top: var(--space-4);">Learn More</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-card hover-glow">
|
|
<img src="https://images.unsplash.com/photo-1556761175-b413da4baf72?w=400&h=200&fit=crop" alt="Event" style="width: 100%; height: 200px; object-fit: cover;">
|
|
<div style="padding: var(--space-6);">
|
|
<div style="display: flex; gap: var(--space-2); margin-bottom: var(--space-3);">
|
|
<span class="badge badge-featured">★ Featured</span>
|
|
<span class="badge badge-available">Available</span>
|
|
</div>
|
|
<h3 style="font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-2); color: var(--color-neutral-900);">Networking Event</h3>
|
|
<p style="color: var(--color-neutral-600); margin-bottom: var(--space-4); font-size: var(--text-sm);">Join professionals for an evening of networking and insights.</p>
|
|
<div style="display: flex; justify-content: space-between; align-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 style="background: white; border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-sm);">
|
|
<div class="demo-title">User Profile Card</div>
|
|
<div style="display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4);">
|
|
<div class="avatar avatar-lg">
|
|
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&face" alt="User" class="avatar-image">
|
|
<div class="avatar-status status-online"></div>
|
|
</div>
|
|
<div>
|
|
<h4 style="font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-1);">Alex Johnson</h4>
|
|
<p style="color: var(--color-neutral-600); font-size: var(--text-sm);">Senior Developer</p>
|
|
<div class="rating" style="margin-top: var(--space-1);">
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star empty"></i>
|
|
<span style="font-size: var(--text-sm); color: var(--color-neutral-600); margin-left: var(--space-2);">4.2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: var(--space-2);">
|
|
<button class="btn btn-sm btn-primary" style="flex: 1;">Connect</button>
|
|
<button class="btn btn-sm btn-outline">Message</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Forms Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Form Elements</h2>
|
|
<div class="component-grid" style="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));">
|
|
<div class="component-demo">
|
|
<div class="demo-title">Input Fields</div>
|
|
<div class="form-demo">
|
|
<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">
|
|
<label style="display: flex; align-items: center; gap: var(--space-2); cursor: pointer;">
|
|
<input type="checkbox" style="width: 18px; height: 18px; accent-color: var(--color-primary-600);">
|
|
I agree to the terms and conditions
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="search-box">
|
|
<input type="search" class="form-input search-input focus-ring" placeholder="Search events...">
|
|
<i data-lucide="search" class="search-icon" style="width: 20px; height: 20px;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Form Validation</div>
|
|
<div class="form-demo">
|
|
<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 style="color: var(--color-success); font-size: var(--text-sm); margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-1);">
|
|
<i data-lucide="check-circle" style="width: 16px; height: 16px;"></i>
|
|
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">
|
|
<i data-lucide="alert-circle" style="width: 16px; height: 16px;"></i>
|
|
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 style="color: var(--color-warning-dark); font-size: var(--text-sm); margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-1);">
|
|
<i data-lucide="alert-triangle" style="width: 16px; height: 16px;"></i>
|
|
Please complete phone number
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Notifications Section -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Notifications & Alerts</h2>
|
|
<div class="component-demo">
|
|
<div class="notification-demo">
|
|
<div class="notification notification-success">
|
|
<i data-lucide="check-circle" style="width: 20px; height: 20px;"></i>
|
|
<span>Event successfully created! Your attendees will receive confirmation emails.</span>
|
|
</div>
|
|
|
|
<div class="notification notification-warning">
|
|
<i data-lucide="alert-triangle" style="width: 20px; height: 20px;"></i>
|
|
<span>Only 5 spots remaining for this event. Book quickly to secure your place.</span>
|
|
</div>
|
|
|
|
<div class="notification notification-error">
|
|
<i data-lucide="x-circle" style="width: 20px; height: 20px;"></i>
|
|
<span>Payment failed. Please check your card details and try again.</span>
|
|
</div>
|
|
|
|
<div class="notification notification-info">
|
|
<i data-lucide="info" style="width: 20px; height: 20px;"></i>
|
|
<span>New features available! Check out our improved event discovery tools.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Navigation Elements -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Navigation & Tabs</h2>
|
|
<div class="component-demo">
|
|
<div class="demo-title">Tab Navigation</div>
|
|
<div class="tabs">
|
|
<div class="tab-list">
|
|
<button class="tab-button active" onclick="showTab('upcoming')">Upcoming Events</button>
|
|
<button class="tab-button" onclick="showTab('past')">Past Events</button>
|
|
<button class="tab-button" onclick="showTab('saved')">Saved Events</button>
|
|
<button class="tab-button" onclick="showTab('hosting')">Hosting</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upcoming" class="tab-content active">
|
|
<div style="display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-neutral-50); border-radius: var(--radius-lg);">
|
|
<i data-lucide="calendar" style="width: 24px; height: 24px; color: var(--color-primary-600);"></i>
|
|
<div>
|
|
<h4 style="font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-1);">You have 3 upcoming events</h4>
|
|
<p style="color: var(--color-neutral-600); font-size: var(--text-sm);">Next event starts in 2 days</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="past" class="tab-content">
|
|
<div style="display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-neutral-50); border-radius: var(--radius-lg);">
|
|
<i data-lucide="history" style="width: 24px; height: 24px; color: var(--color-neutral-500);"></i>
|
|
<div>
|
|
<h4 style="font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-1);">12 events attended</h4>
|
|
<p style="color: var(--color-neutral-600); font-size: var(--text-sm);">Great networking history!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="saved" class="tab-content">
|
|
<div style="display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-neutral-50); border-radius: var(--radius-lg);">
|
|
<i data-lucide="bookmark" style="width: 24px; height: 24px; color: var(--color-accent-500);"></i>
|
|
<div>
|
|
<h4 style="font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-1);">5 saved events</h4>
|
|
<p style="color: var(--color-neutral-600); font-size: var(--text-sm);">Events you're interested in</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hosting" class="tab-content">
|
|
<div style="display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-neutral-50); border-radius: var(--radius-lg);">
|
|
<i data-lucide="users" style="width: 24px; height: 24px; color: var(--color-success);"></i>
|
|
<div>
|
|
<h4 style="font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-1);">2 events hosting</h4>
|
|
<p style="color: var(--color-neutral-600); font-size: var(--text-sm);">Active event host</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Interactive Elements -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Interactive Elements</h2>
|
|
<div class="component-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
|
<div class="component-demo">
|
|
<div class="demo-title">Tooltips</div>
|
|
<div class="demo-group">
|
|
<div class="tooltip">
|
|
<button class="btn btn-md btn-primary">Hover me</button>
|
|
<div class="tooltip-content">This is a helpful tooltip</div>
|
|
</div>
|
|
<div class="tooltip">
|
|
<button class="btn btn-md btn-outline">Settings</button>
|
|
<div class="tooltip-content">Configure your preferences</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Progress Indicators</div>
|
|
<div class="demo-vertical">
|
|
<div>
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--space-2);">
|
|
<span style="font-size: var(--text-sm); font-weight: 600;">Event Setup</span>
|
|
<span style="font-size: var(--text-sm); color: var(--color-neutral-600);">75%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 75%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--space-2);">
|
|
<span style="font-size: var(--text-sm); font-weight: 600;">Registrations</span>
|
|
<span style="font-size: var(--text-sm); color: var(--color-neutral-600);">45/60</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 75%; background: var(--color-success);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Loading States</div>
|
|
<div class="demo-group">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-dots">
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
<div class="loading-dot"></div>
|
|
</div>
|
|
<button class="btn btn-md btn-primary" disabled style="opacity: 0.7;">
|
|
<div style="width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-full); animation: spin 1s linear infinite; margin-right: var(--space-2);"></div>
|
|
Loading...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Avatar Groups</div>
|
|
<div class="demo-vertical">
|
|
<div style="margin-bottom: var(--space-4);">
|
|
<div style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2);">Event Attendees</div>
|
|
<div class="avatar-group">
|
|
<div class="avatar">
|
|
<img src="https://images.unsplash.com/photo-1494790108755-2616b2174d3c?w=100&h=100&fit=crop&face" alt="User 1" class="avatar-image">
|
|
<div class="avatar-status status-online"></div>
|
|
</div>
|
|
<div class="avatar">
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&face" alt="User 2" class="avatar-image">
|
|
<div class="avatar-status status-busy"></div>
|
|
</div>
|
|
<div class="avatar">JD</div>
|
|
<div class="avatar">+5</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div style="font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2);">Small Avatars</div>
|
|
<div class="avatar-group">
|
|
<div class="avatar avatar-sm">AB</div>
|
|
<div class="avatar avatar-sm">CD</div>
|
|
<div class="avatar avatar-sm">EF</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing & Data Display -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Data Display</h2>
|
|
<div class="component-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
|
|
<div class="component-demo">
|
|
<div class="demo-title">Price Tags</div>
|
|
<div class="demo-vertical">
|
|
<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: var(--space-2);">€45</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Ratings</div>
|
|
<div class="demo-vertical">
|
|
<div class="rating">
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<span style="margin-left: var(--space-2); font-weight: 600;">5.0</span>
|
|
<span style="color: var(--color-neutral-500);">(24 reviews)</span>
|
|
</div>
|
|
|
|
<div class="rating">
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star empty"></i>
|
|
<span style="margin-left: var(--space-2); font-weight: 600;">4.2</span>
|
|
</div>
|
|
|
|
<div class="rating">
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star filled"></i>
|
|
<i data-lucide="star" class="rating-star empty"></i>
|
|
<i data-lucide="star" class="rating-star empty"></i>
|
|
<span style="margin-left: var(--space-2); font-weight: 600;">3.5</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Statistics</div>
|
|
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);">
|
|
<div style="text-align: center; padding: var(--space-4); background: var(--color-primary-50); border-radius: var(--radius-lg);">
|
|
<div style="font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; color: var(--color-primary-600); margin-bottom: var(--space-1);">42</div>
|
|
<div style="font-size: var(--text-xs); color: var(--color-neutral-600); text-transform: uppercase; font-weight: 600;">Events</div>
|
|
</div>
|
|
<div style="text-align: center; padding: var(--space-4); background: var(--color-success-light); border-radius: var(--radius-lg);">
|
|
<div style="font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; color: var(--color-success-dark); margin-bottom: var(--space-1);">1.2K</div>
|
|
<div style="font-size: var(--text-xs); color: var(--color-neutral-600); text-transform: uppercase; font-weight: 600;">Attendees</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="demo-title">Key-Value Lists</div>
|
|
<div style="display: flex; flex-direction: column; gap: var(--space-3);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-200);">
|
|
<span style="color: var(--color-neutral-600);">Date</span>
|
|
<span style="font-weight: 600;">March 15, 2024</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-200);">
|
|
<span style="color: var(--color-neutral-600);">Duration</span>
|
|
<span style="font-weight: 600;">3 hours</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-200);">
|
|
<span style="color: var(--color-neutral-600);">Capacity</span>
|
|
<span style="font-weight: 600;">50 people</span>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0;">
|
|
<span style="color: var(--color-neutral-600);">Price</span>
|
|
<span style="font-weight: 800; color: var(--color-primary-600);">€35</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Spacing Reference -->
|
|
<section class="component-section">
|
|
<h2 class="component-title">Spacing System</h2>
|
|
<div class="component-demo">
|
|
<div class="spacing-demo">
|
|
<div class="spacing-item">
|
|
<span class="spacing-label">--space-1 (4px)</span>
|
|
<div class="spacing-visual" style="width: var(--space-1);"></div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<span class="spacing-label">--space-2 (8px)</span>
|
|
<div class="spacing-visual" style="width: var(--space-2);"></div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<span class="spacing-label">--space-4 (16px)</span>
|
|
<div class="spacing-visual" style="width: var(--space-4);"></div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<span class="spacing-label">--space-8 (32px)</span>
|
|
<div class="spacing-visual" style="width: var(--space-8);"></div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<span class="spacing-label">--space-12 (48px)</span>
|
|
<div class="spacing-visual" style="width: var(--space-12);"></div>
|
|
</div>
|
|
<div class="spacing-item">
|
|
<span class="spacing-label">--space-16 (64px)</span>
|
|
<div class="spacing-visual" style="width: var(--space-16);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Modal Demo -->
|
|
<div class="modal-overlay" id="modalDemo">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Confirm Booking</h3>
|
|
<button class="modal-close" onclick="closeModal()">
|
|
<i data-lucide="x" style="width: 20px; height: 20px;"></i>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<p style="margin-bottom: var(--space-6); color: var(--color-neutral-600);">Are you sure you want to book this event? You will receive a confirmation email after payment.</p>
|
|
<div style="display: flex; gap: var(--space-3); justify-content: flex-end;">
|
|
<button class="btn btn-md btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn btn-md btn-primary" onclick="closeModal()">Confirm Booking</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer style="background: var(--color-neutral-900); color: var(--color-neutral-300); padding: var(--space-12) 0; text-align: center;">
|
|
<div class="container">
|
|
<div style="margin-bottom: var(--space-8);">
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-4);">
|
|
<div style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-500) 100%); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-family: var(--font-display);">A</div>
|
|
<span style="font-size: var(--text-lg); font-weight: 800; color: white; font-family: var(--font-display);">Aperonight Design System</span>
|
|
</div>
|
|
<p>Complete component library for premium event booking experiences</p>
|
|
</div>
|
|
<div style="display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6);">
|
|
<button class="btn btn-md btn-ghost" onclick="showModal()" style="color: var(--color-neutral-300);">Show Modal</button>
|
|
<button class="btn btn-md btn-ghost" style="color: var(--color-neutral-300);">Documentation</button>
|
|
<button class="btn btn-md btn-ghost" style="color: var(--color-neutral-300);">GitHub</button>
|
|
</div>
|
|
<p style="color: var(--color-neutral-500); font-size: var(--text-sm);">© 2024 Aperonight. Built with passion for great design.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Tab functionality
|
|
function showTab(tabName) {
|
|
// Hide all tab contents
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
|
|
// Remove active class from all buttons
|
|
document.querySelectorAll('.tab-button').forEach(button => {
|
|
button.classList.remove('active');
|
|
});
|
|
|
|
// Show selected tab content
|
|
document.getElementById(tabName).classList.add('active');
|
|
|
|
// Add active class to clicked button
|
|
event.target.classList.add('active');
|
|
}
|
|
|
|
// Modal functionality
|
|
function showModal() {
|
|
document.getElementById('modalDemo').style.display = 'flex';
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modalDemo').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking overlay
|
|
document.getElementById('modalDemo').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeModal();
|
|
}
|
|
});
|
|
|
|
// Progress bar animation
|
|
function animateProgress() {
|
|
const progressBars = document.querySelectorAll('.progress-fill');
|
|
progressBars.forEach(bar => {
|
|
const width = bar.style.width;
|
|
bar.style.width = '0%';
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, 100);
|
|
});
|
|
}
|
|
|
|
// Animate progress bars on scroll
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
animateProgress();
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
document.querySelectorAll('.progress-bar').forEach(bar => {
|
|
observer.observe(bar);
|
|
});
|
|
|
|
// Add interactive hover effects
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add hover effects to cards
|
|
document.querySelectorAll('.card, .event-card').forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-4px)';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0)';
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |