pinto/Additional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

everything semi working before sample implementation

Browse Source
This commit is contained in:
twotalesanimation
2025-12-30 00:09:14 +02:00
parent 00b8ff77b2
commit 3c24c0e9ef
39 changed files with 1072 additions and 1615 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/custom-orders/create.blade.php
+5 -18
View File
@@ -21,10 +21,6 @@
}
.form-card {
background: white;
padding: var(--spacing-lg);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: var(--spacing-lg);
max-width: 700px;
}
@@ -196,10 +192,6 @@
}
.info-box {
background-color: var(--accent-light);
border: 1px solid var(--border-color);
padding: var(--spacing-lg);
border-radius: 20px;
margin-bottom: var(--spacing-lg);
}
@@ -234,12 +226,7 @@
top: 120px;
}
.cost-summary-content {
background: white;
padding: var(--spacing-lg);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.cost-summary-content h3 {
@@ -350,7 +337,7 @@
@endif
<!-- Info Box -->
<div class="info-box">
<div class="info-box card--pink">
<h2>How It Works</h2>
<ul>
<li>Submit your custom order with design specifications and reference images</li>
@@ -362,7 +349,7 @@
<!-- Form -->
<div class="form-wrapper">
<form action="{{ route('custom-orders.store') }}" method="POST" enctype="multipart/form-data" id="custom-order-form" class="form-card" data-action="{{ route('custom-orders.store') }}">
<form action="{{ route('custom-orders.store') }}" method="POST" enctype="multipart/form-data" id="custom-order-form" class="form-card card" data-action="{{ route('custom-orders.store') }}">
@csrf
<!-- Order Type & Dimensions -->
@@ -492,7 +479,7 @@
<!-- Cost Summary Sidebar -->
<div class="cost-summary">
<div class="cost-summary-content">
<div class="cost-summary-content card">
<h3>Cost Summary</h3>
<div class="cost-item disabled" id="material-cost-item">
@@ -520,7 +507,7 @@
</div>
</div>
<div style="background: var(--accent-light); padding: 1.5rem; border-radius: 20px; margin-bottom: 1rem;">
<div class="card" style="padding: 1.5rem; margin-bottom: 1rem; background: var(--accent-light);">
<p style="margin: 0 0 0.5rem 0; color: black;">Estimated Total:</p>
<div style="font-family: 'Abril Fatface', cursive; font-size: 3rem; font-weight: 400; color: white;">R<span id="total-cost">0.00</span></div>
<small style="color: #fff; display: block; margin-top: 0.5rem;">incl. VAT</small>
resources/views/custom-orders/deposit-success.blade.php
+82 -88
View File
@@ -5,47 +5,43 @@
@section('styles')
<style>
.success-container {
max-width: 600px;
margin: var(--spacing-xl) auto;
padding: var(--spacing-xl);
background-color: var(--accent-light);
border: 2px solid var(--accent-pink);
border-radius: 20px;
text-align: center;
margin: 3rem 0;
}
.success-icon {
font-size: 4rem;
color: var(--accent-pink);
margin-bottom: var(--spacing-md);
margin-bottom: 1.5rem;
}
.success-title {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--text-primary);
margin-bottom: var(--spacing-md);
h1 {
font-family: 'Abril Fatface', cursive;
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.success-message {
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
.subtitle {
color: #666;
font-size: 1.1rem;
margin-bottom: 2rem;
}
.order-details {
background-color: white;
padding: var(--spacing-lg);
border-radius: 8px;
margin-bottom: var(--spacing-lg);
margin: 2rem 0;
text-align: left;
}
.order-details-inner {
padding: 2rem;
border-radius: 20px;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
border-bottom: 1px solid #eee;
}
.detail-row:last-child {
@@ -53,98 +49,96 @@
}
.detail-label {
color: var(--text-secondary);
font-weight: 500;
font-weight: 600;
color: var(--primary-color);
}
.detail-value {
color: var(--text-primary);
font-weight: 600;
color: #666;
}
.next-steps {
.next-steps-title {
font-family: 'Abril Fatface', cursive;
font-size: 1.3rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
text-align: left;
background-color: white;
padding: var(--spacing-lg);
border-radius: 8px;
margin-bottom: var(--spacing-lg);
}
.next-steps h3 {
color: var(--text-primary);
margin-bottom: var(--spacing-md);
.next-steps-inner {
padding: 2rem;
border-radius: 20px;
}
.next-steps ol {
color: var(--text-secondary);
padding-left: var(--spacing-lg);
.next-steps ul {
color: #666;
padding-left: 0;
list-style: none;
}
.next-steps li {
margin-bottom: var(--spacing-sm);
margin-bottom: 0.8rem;
}
.action-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.action-buttons .btn {
flex: 1;
min-width: 150px;
.actions {
margin-top: 2rem;
text-align: center;
}
</style>
@endsection
@section('content')
<div class="container">
<main class="container">
<div class="success-container">
<div class="success-icon">✓</div>
<h1 class="success-title">Payment Successful!</h1>
<p class="success-message">
Your deposit payment has been received and processed successfully.
</p>
<h1>Deposit Payment Successful!</h1>
<p class="subtitle">Your deposit payment has been received and processed successfully.</p>
<div class="order-details">
<div class="detail-row">
<span class="detail-label">Order Number:</span>
<span class="detail-value">{{ $customOrder->order_number }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Order Type:</span>
<span class="detail-value">{{ ucfirst($customOrder->type) }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Deposit Amount:</span>
<span class="detail-value">R{{ number_format($customOrder->deposit_amount, 2) }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Remaining Balance:</span>
<span class="detail-value">R{{ number_format($customOrder->balance_amount, 2) }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Payment Status:</span>
<span class="detail-value"><span class="status-badge paid">Paid</span></span>
<!-- Order Details -->
<div class="order-details card">
<div class="order-details-inner">
<div class="detail-row">
<span class="detail-label">Order Number:</span>
<span class="detail-value"><strong>{{ $customOrder->order_number }}</strong></span>
</div>
<div class="detail-row">
<span class="detail-label">Order Type:</span>
<span class="detail-value">{{ ucfirst($customOrder->type) }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Deposit Amount Paid:</span>
<span class="detail-value"><strong>R{{ number_format($customOrder->deposit_amount, 2) }}</strong></span>
</div>
<div class="detail-row">
<span class="detail-label">Remaining Balance:</span>
<span class="detail-value">R{{ number_format($customOrder->balance_amount, 2) }}</span>
</div>
<div class="detail-row">
<span class="detail-label">Total Project Cost:</span>
<span class="detail-value"><strong>R{{ number_format($customOrder->total_cost, 2) }}</strong></span>
</div>
</div>
</div>
<div class="next-steps">
<h3>What Happens Next?</h3>
<ol>
<li>Your design requirements have been received</li>
<li>Our design team will review your specifications</li>
<li>You'll receive proof designs for your approval within 3-5 business days</li>
<li>Once you approve the proofs, we'll prepare for printing</li>
<li>The remaining balance (80%) will be due before printing begins</li>
</ol>
</div>
<div class="action-buttons">
<a href="{{ route('custom-orders.show', $customOrder) }}" class="btn">View Order Details</a>
<a href="{{ route('my-orders') }}" class="btn btn--secondary">Back to Orders</a>
<!-- What's Next -->
<div class="card--pink">
<div class="next-steps-inner">
<h2 class="next-steps-title" style="text-align: center;">What Happens Next?</h2>
<ul class="next-steps">
<li>Your design requirements have been received and confirmed</li>
<li>Our design team will review your specifications and reference images</li>
<li>You'll receive proof designs for your approval within 3-5 business days</li>
<li>Once you approve the proofs, we'll prepare for printing</li>
<li>The remaining balance (80%) will be due before printing begins</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Actions -->
<div class="actions">
<a href="{{ route('custom-orders.show', $customOrder) }}" class="btn">View Order Details</a>
<a href="{{ route('custom-orders.index') }}" class="btn btn--secondary">Back to My Orders</a>
</div>
</main>
@endsection
resources/views/custom-orders/index.blade.php
+2 -6
View File
@@ -65,14 +65,10 @@
}
.order-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}
.order-card:hover {
.order-card.card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
@@ -260,7 +256,7 @@
@else
<div class="orders-grid">
@foreach ($customOrders as $order)
<div class="order-card">
<div class="order-card card">
<div class="order-card-header">
<div>
<div class="order-number">Order #{{ $order->order_number }}</div>
resources/views/custom-orders/show.blade.php
+5 -18
View File
@@ -37,24 +37,11 @@
}
/* Timeline-specific styles */
.card {
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.timeline-container {
background: white;
padding: var(--spacing-lg);
border-radius: 20px;
margin-bottom: var(--spacing-lg);
transition: var(--transition);
}
.timeline-container:hover {
.timeline-container.card:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@@ -185,7 +172,7 @@
@endif
<!-- Timeline -->
<div class="timeline-container">
<div class="timeline-container card">
<h2 class="timeline-title">Order Progress</h2>
<div class="timeline">
@php
@@ -366,7 +353,7 @@
<!-- Payment Status -->
<h3 style="margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md);">Payment Status</h3>
<div style="padding: var(--spacing-sm); background-color: var(--accent-light); border-radius: 20px; margin-bottom: var(--spacing-md);">
<div class="card" style="padding: var(--spacing-sm); background-color: var(--accent-light); margin-bottom: var(--spacing-md);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
<strong>Deposit (20%)</strong>
<span class="status-badge {{ $customOrder->deposit_status }}">{{ ucfirst($customOrder->deposit_status) }}</span>
@@ -374,7 +361,7 @@
<p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">R{{ number_format($customOrder->deposit_amount, 2) }}</p>
</div>
<div style="padding: var(--spacing-sm); background-color: var(--accent-light); border-radius: 20px; margin-bottom: var(--spacing-lg);">
<div class="card" style="padding: var(--spacing-sm); background-color: var(--accent-light); margin-bottom: var(--spacing-lg);">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs);">
<strong>Balance (80%)</strong>
<span class="status-badge {{ $customOrder->balance_status }}">{{ ucfirst($customOrder->balance_status) }}</span>
@@ -395,7 +382,7 @@
</div>
<!-- Terms -->
<div class="terms-box">
<div class="terms-box card--pink">
<h3 style="color: var(--text-primary); margin-top: 0;">Payment Terms</h3>
<ul>
<li>The 20% deposit is non-refundable</li>