diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..8b3c29d --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,52 @@ + +body { + background-color: #F3F4F6; + font-family: 'Inter', sans-serif; + color: #111827; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Georgia', serif; +} + +.card { + border-radius: 0.5rem; + border: none; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); +} + +.btn-primary { + background-image: linear-gradient(to right, #4F46E5, #2563EB); + border: none; + border-radius: 0.5rem; + padding: 0.75rem 1.5rem; + font-weight: 600; + transition: transform 0.2s ease-in-out; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +.form-control, .form-select { + border-radius: 0.5rem; +} + +.form-label { + font-weight: 600; +} + +#price-summary { + font-size: 1.25rem; + font-weight: 700; + color: #4F46E5; +} + +.hero-image { + height: 400px; + background-image: url('https://picsum.photos/seed/printshop_hero/1200/400'); + background-size: cover; + background-position: center; + border-radius: 0.5rem; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..b95b94f --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,53 @@ + +document.addEventListener('DOMContentLoaded', function () { + const orderForm = document.getElementById('orderForm'); + if (!orderForm) return; + + const priceSummary = document.getElementById('price-summary'); + const fileInput = document.getElementById('document'); + const specificReqBtn = document.getElementById('specificReqBtn'); + + const basePrices = { + printType: { 'one-sided': 0.10, 'both-sided': 0.18 }, + color: { 'bw': 0.05, 'color': 0.25 }, + paperSize: { 'a4': 0.02, 'jumbo': 0.05 }, + pagesPerSheet: { '1': 0, '2': 0.01, '4': 0.02 } + }; + + function calculatePrice() { + const formData = new FormData(orderForm); + const printType = formData.get('printType'); + const color = formData.get('color'); + const paperSize = formData.get('paperSize'); + const pagesPerSheet = formData.get('pagesPerSheet'); + const quantity = parseInt(formData.get('quantity') || '1', 10); + + let cost = 0; + cost += basePrices.printType[printType] || 0; + cost += basePrices.color[color] || 0; + cost += basePrices.paperSize[paperSize] || 0; + cost += basePrices.pagesPerSheet[pagesPerSheet] || 0; + + const total = cost * quantity; + priceSummary.textContent = `$${total.toFixed(2)}`; + } + + orderForm.addEventListener('change', calculatePrice); + orderForm.addEventListener('input', calculatePrice); + + orderForm.addEventListener('submit', function(e) { + if (!fileInput.files || fileInput.files.length === 0) { + e.preventDefault(); + alert('Please upload a document before submitting.'); + fileInput.focus(); + } + }); + + if (specificReqBtn) { + specificReqBtn.addEventListener('click', function() { + alert('Please visit the shop for more specific requirements.'); + }); + } + + calculatePrice(); +}); diff --git a/index.php b/index.php index 7205f3d..6970c6d 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,149 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + AutoPrint - Automatic Printing Website + + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+
+

Welcome to AutoPrint

+

Your self-service printing solution. Upload, pay, and collect.

+
+ +
+ +
+
+

Start Your Order

+
+ +
+ +
+
+ Abstract icon representing a document. +

1. Upload Your Document

+

Supports PDF, JPG, PNG, DOC, DOCX.

+ +
+ +
+ +
+ + +
+
+ + +
+
+ + +
+
+ Abstract icon representing customization settings. +

2. Select Printing Options

+
+ +
+
+ +
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + +
+
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +
+

Estimated Price:

+

$0.00

+
+
+
+ +
+ +
+
+ +
+
+
+
+ +
-
- + + - + \ No newline at end of file diff --git a/order_handler.php b/order_handler.php new file mode 100644 index 0000000..6ff8fa0 --- /dev/null +++ b/order_handler.php @@ -0,0 +1,30 @@ + + + + + + + Order Confirmation - AutoPrint + + + + +
+
+

Thank You, !

+

Your order has been successfully submitted.

+

We have received your document and printing specifications. You will receive a notification once your order is ready for pickup.

+
+

For any questions, please contact our support.

+ Place Another Order +
+
+ +