1524 lines
65 KiB
HTML
1524 lines
65 KiB
HTML
<!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> |