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/account/orders.blade.php
+6 -11
View File
@@ -50,10 +50,8 @@
}
.table-container {
background: white;
border-radius: 8px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
table {
@@ -114,10 +112,7 @@
}
.empty-state {
background-color: var(--bg-secondary);
border-radius: 8px;
padding: var(--spacing-xl);
text-align: center;
border-radius: 20px;
}
.empty-state p {
@@ -184,7 +179,7 @@
<h2>Standard Orders</h2>
@if ($standardOrders->count() > 0)
<div class="table-container">
<div class="table-container card">
<table>
<thead>
<tr>
@@ -215,7 +210,7 @@
</table>
</div>
@else
<div class="empty-state">
<div class="empty-state card--pink">
<p>You haven't placed any standard orders yet.</p>
<a href="{{ route('wallpapers') }}">Browse Products</a>
</div>
@@ -230,7 +225,7 @@
</div>
@if ($customOrders->count() > 0)
<div class="table-container">
<div class="table-container card">
<table>
<thead>
<tr>
@@ -267,7 +262,7 @@
</table>
</div>
@else
<div class="empty-state">
<div class="empty-state card--pink">
<p>You haven't created any custom orders yet.</p>
<a href="{{ route('custom-orders.create') }}">Create Custom Order</a>
</div>
resources/views/account/profile.blade.php
+3 -8
View File
@@ -28,10 +28,7 @@
}
.card {
background: white;
padding: var(--spacing-lg);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
.card h2 {
@@ -129,9 +126,7 @@
}
.help-box {
background-color: var(--accent-light);
padding: var(--spacing-lg);
border-radius: 8px;
border-radius: 20px;
}
.help-box h3 {
@@ -257,7 +252,7 @@
</ul>
</div>
<div class="help-box">
<div class="card--pink help-box">
<h3>Need Help?</h3>
<p>Contact us for assistance with your account or orders.</p>
<a href="mailto:support@example.com">support@example.com</a>
resources/views/cart.blade.php
+3 -10
View File
@@ -18,11 +18,7 @@
margin-bottom: 3rem;
}
.cart-items {
background: white;
padding: 2rem;
border-radius: 8px;
}
.empty-cart {
text-align: center;
@@ -111,9 +107,6 @@
}
.summary {
background: white;
padding: 2rem;
border-radius: 8px;
height: fit-content;
}
@@ -221,7 +214,7 @@
@if(count($items) > 0)
<div class="cart-container">
<!-- Cart Items -->
<div class="cart-items">
<div class="cart-items card">
@foreach($items as $item)
<div class="cart-item">
@if($item['product']->images->count() > 0)
@@ -277,7 +270,7 @@
</div>
<!-- Summary -->
<div class="summary">
<div class="summary card">
<h2>Order Summary</h2>
<div class="summary-row">
resources/views/checkout.blade.php
+3 -5
View File
@@ -20,9 +20,7 @@
.checkout-form,
.order-summary {
background: white;
padding: 2rem;
border-radius: 8px;
border-radius: 20px;
}
.checkout-form h2,
@@ -193,7 +191,7 @@
<div class="checkout-container">
<!-- Checkout Form -->
<form action="{{ route('order-process') }}" method="POST" class="checkout-form">
<form action="{{ route('order-process') }}" method="POST" class="checkout-form card">
@csrf
<h2>Delivery Information</h2>
@@ -231,7 +229,7 @@
</form>
<!-- Order Summary -->
<div class="order-summary">
<div class="order-summary card">
<h2>Order Summary</h2>
@foreach($items as $item)
resources/views/components/footer.blade.php
+6 -8
View File
@@ -3,9 +3,9 @@
<div class="footer-content">
<div class="footer-column">
<h4>Contact</h4>
<p>Email: info@additionaldesign.com</p>
<p>Phone: (555) 123-4567</p>
<p>Address: 123 Design Street, Creative City, ST 12345</p>
<p>Email: info@additional.co.za</p>
<p>Phone: +27 081 702 7873</p>
<p>Address: 360 Furrow Rd, Pretoria, South Africa</p>
</div>
<div class="footer-column">
@@ -21,25 +21,23 @@
<div class="footer-column">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#" target="_blank">Facebook</a>
<a href="#" target="_blank">Instagram</a>
<a href="#" target="_blank">Pinterest</a>
</div>
</div>
<div class="footer-column">
<h4>Newsletter</h4>
<p>Subscribe to stay updated on new collections and exclusive offers.</p>
<form style="display: flex; gap: 8px; margin-top: var(--spacing-sm);">
<input type="email" placeholder="Your email" style="flex: 1; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); color: white; font-size: 0.9rem;">
<button type="submit" class="btn" style="padding: 8px 16px;">Subscribe</button>
<input type="email" placeholder="Your email" style="border-radius: 20px; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.1); color: white; font-size: 0.9rem;">
<button type="submit" class="btn btn--secondary" style="padding: 8px 16px;">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Additional Design. All rights reserved. Designed with care and creativity.</p>
<p>&copy; <?= date('Y'); ?> Additional Design is a registered trading name of TWO TALES & CO. (PTY) LTD. All rights reserved. Site design and development by TTDEV.</p>
</div>
</div>
</footer>
resources/views/components/product-card.blade.php
+1 -1
View File
@@ -1,5 +1,5 @@
<a href="{{ route('product-detail', $product) }}" style="text-decoration: none; color: inherit;">
<div class="card" data-category="{{ $product->category->slug }}">
<div class="product-card" data-category="{{ $product->category->slug }}">
@if($product->images->count() > 0)
<img src="{{ asset('storage/' . $product->images->first()->image_path) }}" alt="{{ $product->name }}" class="card-image" style="background-size: cover; background-position: center;">
@else
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>
resources/views/fabrics.blade.php
+10 -10
View File
@@ -21,7 +21,7 @@
<div class="grid grid--3">
<!-- Upholstery Fabrics -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=500&q=80" alt="Upholstery Fabrics" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Upholstery Fabrics</div>
@@ -33,7 +33,7 @@
</div>
<!-- Curtain & Drape Fabrics -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1578926314433-8e18d4f89b16?w=500&q=80" alt="Curtain Fabrics" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Curtain & Drape Fabrics</div>
@@ -45,7 +45,7 @@
</div>
<!-- Decorative Textiles -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1606389506042-4bc31f98b485?w=500&q=80" alt="Decorative Textiles" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Decorative Textiles</div>
@@ -67,7 +67,7 @@
<div class="grid grid--3">
<!-- Botanical Garden Fabric -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1520763185298-1b434c919eba?w=500&q=80" alt="Botanical Garden" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Botanical Garden</div>
@@ -80,7 +80,7 @@
</div>
<!-- Geometric Modern -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1577720643272-265f434b3f6f?w=500&q=80" alt="Geometric Modern" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Geometric Modern</div>
@@ -93,7 +93,7 @@
</div>
<!-- Vintage Elegance -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=500&q=80" alt="Vintage Elegance" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Vintage Elegance</div>
@@ -106,7 +106,7 @@
</div>
<!-- Tropical Vibrancy -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=500&q=80" alt="Tropical Vibrancy" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Tropical Vibrancy</div>
@@ -119,7 +119,7 @@
</div>
<!-- Minimalist Serenity -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=500&q=80" alt="Minimalist Serenity" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Minimalist Serenity</div>
@@ -132,7 +132,7 @@
</div>
<!-- Luxe Textured -->
<div class="card">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1578926078328-123alce3f3ce?w=500&q=80" alt="Luxe Textured" class="card-image" style="object-fit: cover;">
<div class="card-content">
<div class="card-title">Luxe Textured</div>
@@ -175,7 +175,7 @@
<section class="section">
<div class="container">
<h2>Fabric Specifications & Care</h2>
<div style="background-color: var(--bg-secondary); padding: var(--spacing-lg); border-radius: 8px;">
<div style="background-color: var(--bg-secondary); padding: var(--spacing-lg); border-radius: 20px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg);">
<div>
<h4 style="color: var(--accent-dark); margin-bottom: 1rem;">Standard Widths</h4>
resources/views/home.blade.php
+5 -5
View File
@@ -163,7 +163,7 @@
<div class="grid grid--3">
@forelse($categories as $category)
<div class="card">
<div class="product-card">
<div class="card-image" style="background-image: url('{{ $category->image }}'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">{{ $category->name }}</div>
@@ -235,7 +235,7 @@
<p>Our work spans luxury hotels, high-end residences, and commercial spaces. See how we transform environments with our custom wallpaper and fabric solutions.</p>
<div class="grid grid--3">
<div class="card">
<div class="product-card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Luxury Resort Redesign</div>
@@ -244,7 +244,7 @@
</div>
</div>
<div class="card">
<div class="product-card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Modern Executive Office</div>
@@ -253,7 +253,7 @@
</div>
</div>
<div class="card">
<div class="product-card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=500&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Residential Penthouse</div>
@@ -276,7 +276,7 @@
</div>
</div>
<div style="background-color: var(--bg-secondary); padding: var(--spacing-lg); border-radius: 20px;">
<div class="card--pink">
<h3 style="color: var(--accent-dark); margin-bottom: var(--spacing-md);">Sustainability Commitment</h3>
<ul style="list-style: none; color: var(--text-secondary);">
<li style="margin-bottom: 12px;"><strong>Low-VOC Inks:</strong> Non-toxic printing processes safe for your home and the environment.</li>
resources/views/murals.blade.php
+3 -3
View File
@@ -229,15 +229,15 @@
<div class="container">
<h2>About Our Murals</h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem;">
<div style="background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
<div class="card">
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Custom Dimensions</h4>
<p>Order murals in any size. Simply provide your width and height measurements, and we'll print to exact specifications.</p>
</div>
<div style="background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
<div class="card">
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Non-Repeating Design</h4>
<p>Unlike wallpapers, murals are single cohesive images perfect for accent walls. One stunning focal point for your space.</p>
</div>
<div style="background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
<div class="card">
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Premium Quality</h4>
<p>High-resolution printing with vibrant colors and excellent durability. Professional installation guides included.</p>
</div>
resources/views/order-history.blade.php
+2 -7
View File
@@ -12,9 +12,6 @@
}
.empty-state {
background: white;
padding: 3rem;
border-radius: 8px;
text-align: center;
}
@@ -31,9 +28,7 @@
}
.order-card {
background: white;
padding: 1.5rem;
border-radius: 8px;
border-left: 4px solid var(--primary-color);
}
@@ -164,7 +159,7 @@
@if($orders->count() > 0)
<div class="orders-list">
@foreach($orders as $order)
<div class="order-card">
<div class="order-card card">
<!-- Order Header -->
<div class="order-header">
<div class="order-info">
@@ -210,7 +205,7 @@
@endforeach
</div>
@else
<div class="empty-state">
<div class="empty-state card--pink">
<p>No orders found. Start shopping today!</p>
<a href="{{ route('wallpapers') }}" class="btn">Browse Products</a>
</div>
resources/views/order-success.blade.php
+55 -41
View File
@@ -5,9 +5,6 @@
@section('styles')
<style>
.success-container {
background: white;
padding: 3rem;
border-radius: 8px;
text-align: center;
margin: 3rem 0;
}
@@ -31,13 +28,15 @@
}
.order-details {
background: #f9f9f9;
padding: 2rem;
border-radius: 8px;
margin: 2rem 0;
text-align: left;
}
.order-details-inner {
padding: 2rem;
border-radius: 20px;
}
.detail-row {
display: flex;
justify-content: space-between;
@@ -58,10 +57,13 @@
color: #666;
}
.order-items {
background: #f9f9f9;
margin: 2rem 0;
text-align: left;
}
.order-items-inner {
padding: 2rem;
border-radius: 8px;
border-radius: 20pxpx;
margin: 2rem 0;
text-align: left;
}
@@ -127,6 +129,13 @@
margin: 2rem 0;
border-left: 4px solid var(--primary-color);
}
.next-steps-title {
font-family: 'Abril Fatface', cursive;
font-size: 1.3rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
text-align: left;
}
</style>
@endsection
@@ -138,8 +147,8 @@
<p class="subtitle">Thank you for your purchase. Your order has been successfully received.</p>
<!-- Order Details -->
<div class="order-details">
<div class="detail-row">
<div class="order-details card">
<div class="order-details-inner">
<span class="detail-label">Order Number:</span>
<span class="detail-value"><strong>{{ $order->order_number }}</strong></span>
</div>
@@ -162,9 +171,11 @@
</span>
</div>
</div>
</div>
<!-- Order Items -->
<div class="order-items">
<!-- Order Items -->
<div class="order-items card">
<div class="order-items-inner">
<h2>Order Items</h2>
@foreach($order->items as $item)
<div class="item-row">
@@ -172,23 +183,23 @@
<div class="item-name">{{ $item->product->name }}</div>
<div class="item-qty">
@php
$stock = $item->printStock;
$stockText = $stock ? "{$stock->name}" : "Standard";
$stockCost = 0;
if ($stock) {
$stockCost = $item->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2;
}
$stock = $item->printStock;
$stockText = $stock ? "{$stock->name}" : "Standard";
$stockCost = 0;
if ($stock) {
$stockCost = $item->type === 'wallpaper' ? $stock->cost_per_meter : $stock->cost_per_m2;
}
@endphp
@if($item->type === 'wallpaper')
Length: {{ $item->length }}m | Finish: {{ $stockText }}<br>
<small>Stock Cost: R{{ number_format($stockCost, 2) }}/m</small>
Length: {{ $item->length }}m | Finish: {{ $stockText }}<br>
<small>Stock Cost: R{{ number_format($stockCost, 2) }}/m</small>
@elseif($item->type === 'mural')
Dimensions: {{ $item->width }}m × {{ $item->height }}m ({{ number_format($item->width * $item->height, 2) }}m²) | Finish: {{ $stockText }}<br>
<small>Stock Cost: R{{ number_format($stockCost, 2) }}/m²</small>
Dimensions: {{ $item->width }}m × {{ $item->height }}m ({{ number_format($item->width * $item->height, 2) }}m²) | Finish: {{ $stockText }}<br>
<small>Stock Cost: R{{ number_format($stockCost, 2) }}/m²</small>
@else
<small>Price: R{{ number_format($stockCost, 2) }} per unit</small>
<small>Price: R{{ number_format($stockCost, 2) }} per unit</small>
@endif
</div>
</div>
@@ -207,22 +218,25 @@
</div>
</div>
@endforeach
<div class="total-row">
<span>Order Total:</span>
<span>R{{ number_format($order->total, 2) }}</span>
</div>
</div>
<div class="note">
<strong>🔔 What's Next?</strong><br>
A confirmation email has been sent to <strong>{{ $order->customer_email }}</strong>. You'll receive updates about your order status and shipping information shortly.
</div>
<!-- Actions -->
<div class="actions">
<a href="{{ route('wallpapers') }}" class="btn">Continue Shopping</a>
<a href="{{ route('home') }}" class="btn btn--secondary">Back to Home</a>
<div class="total-row">
<span>Order Total:</span>
<span>R{{ number_format($order->total, 2) }}</span>
</div>
</div>
<div class="card--pink">
<h2 class="next-steps-title" style="text-align: center;">What Happens Next?</h2>
A confirmation email has been sent to <strong>{{ $order->customer_email }}</strong>. You'll receive updates about your order status and shipping information shortly.
</div>
</div>
<!-- Actions -->
<div class="actions">
<a href="{{ route('wallpapers') }}" class="btn">Continue Shopping</a>
<a href="{{ route('home') }}" class="btn btn--secondary">Back to Home</a>
</div>
</div>
</main>
@endsection
@endsection
resources/views/product-detail.blade.php
+5 -2
View File
@@ -457,11 +457,11 @@
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
<div>
<label for="width" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Width (meters):</label>
<input type="number" id="width" name="width" min="0.5" step="0.1" value="2" required style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
<input type="number" id="width" name="width" min="0.5" step="0.1" value="2" required style="font-family: var(--font-sans); width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
</div>
<div>
<label for="height" style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Height (meters):</label>
<input type="number" id="height" name="height" min="0.5" step="0.1" value="2.7" required style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
<input type="number" id="height" name="height" min="0.5" step="0.1" value="2.7" required style="font-family: var(--font-sans); width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
</div>
</div>
@endif
@@ -477,6 +477,9 @@
<button type="submit" class="btn" style="flex: 1;">Add to Cart</button>
<a href="{{ route('cart') }}" class="btn btn--secondary" style="flex: 1; text-align: center;">View Cart</a>
</div>
<div class="btn-group " style="margin-top: 1rem; gap: 1rem;">
<button class="btn btn--secondary" style="flex: 1;">Order Sample</button>
</div>
</form>
<script>