yoco updated to use webhook

2025-12-29 14:43:24 +02:00
parent 6de01c13c5
commit 00b8ff77b2
123 changed files with 6959 additions and 12669 deletions
@@ -86,7 +86,7 @@ a:hover {
 /* ===== CONTAINER & LAYOUT ===== */
 .container {
    max-width: var(--max-width);
-    margin: 0 auto;
+    margin: 20px auto;
    padding: 0 var(--spacing-md);
 }

@@ -385,14 +385,14 @@ nav a:hover {

 /* ===== BADGE / CERTIFICATION ===== */
 .badge {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-md);
-    background-color: white;
-    padding: var(--spacing-lg);
-    border: 2px solid var(--accent-dark);
-    border-radius: 2px;
-    margin-bottom: var(--spacing-lg);
+    display: inline-block;
+    font-weight: 900;
+    background-color: var(--bg-secondary);
+    color: var(--text-secondary);
+    padding: 4px 8px;
+    font-size: 0.8rem;
+    margin-bottom: var(--spacing-sm);
+    border-radius: 20px;
 }

 .badge-icon {
@@ -674,3 +674,172 @@ footer {
    padding: 6px 12px;
    font-size: 0.85rem;
 }
+
+/* ===== STATUS BADGES ===== */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 900;
+    background-color: var(--bg-secondary);
+    color: var(--text-secondary);
+    padding: 4px 8px;
+    font-size: 0.8rem;
+    margin-bottom: var(--spacing-sm);
+    border-radius: 20px;
+}
+
+/* Status badge variants */
+.status-badge.pending,
+.status-badge.submitted {
+    background-color: var(--accent-light);
+    color: var(--text-primary);
+}
+
+.status-badge.approved,
+.status-badge.completed,
+.status-badge.paid {
+    background-color: var(--accent-pink);
+    color: white;
+}
+
+.status-badge.processing,
+.status-badge.in_production,
+.status-badge.proof_ready {
+    background-color: var(--bg-secondary);
+    color: var(--text-secondary);
+}
+
+.status-badge.rejected,
+.status-badge.cancelled {
+    background-color: #f8d7da;
+    color: var(--text-primary);
+}
+
+.status-badge.unpaid {
+    background-color: var(--accent-light);
+    color: var(--text-primary);
+}
+
+/* ===== CUSTOM ORDER COMPONENTS ===== */
+.alert {
+    padding: var(--spacing-md);
+    border-radius: 20px;
+    margin-bottom: var(--spacing-lg);
+    border: 1px solid;
+}
+
+.alert-success {
+    background-color: #e8f5e9;
+    border-color: #c8e6c9;
+    color: #2e7d32;
+}
+
+.alert-info {
+    background-color: var(--accent-light);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: var(--spacing-lg);
+}
+
+.card-section {
+    margin-bottom: var(--spacing-lg);
+}
+
+.card-section:last-child {
+    margin-bottom: 0;
+}
+
+.spec-group {
+    margin-bottom: var(--spacing-md);
+}
+
+.spec-group dt {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.spec-group dd {
+    margin: 0;
+    color: var(--text-secondary);
+}
+
+.image-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: var(--spacing-md);
+}
+
+.image-gallery img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.image-gallery img:hover {
+    transform: scale(1.05);
+}
+
+.proof-item {
+    padding: var(--spacing-md);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    margin-bottom: var(--spacing-md);
+    transition: var(--transition);
+}
+
+.proof-item:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.proof-item.approved {
+    background-color: #f0f9ff;
+    border-color: #7dd3fc;
+}
+
+.payment-section {
+    background-color: var(--bg-secondary);
+    padding: var(--spacing-md);
+    border-radius: 20px;
+    margin-bottom: var(--spacing-md);
+}
+
+.payment-row {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacing-sm) 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.payment-row.total {
+    font-weight: 600;
+    font-size: 1.1rem;
+    border-bottom: none;
+    padding-top: var(--spacing-md);
+}
+
+.terms-box {
+    background-color: var(--accent-light);
+    padding: var(--spacing-md);
+    border-radius: 20px;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+.terms-box ul {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+
+.terms-box li {
+    margin-bottom: 0.5rem;
+}
+