diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e969203 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,173 @@ +/* Safari Muscat Airfare Request Generator - Custom Styles */ + +/* --- Typography & Base --- */ +body { + font-family: 'Poppins', sans-serif; + background-color: #f8f9fa; + color: #333; +} + +/* --- Main Container --- */ +.form-container { + max-width: 800px; + margin: 2rem auto; + background-color: #ffffff; + border-radius: 0.75rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); + padding: 2.5rem; +} + +/* --- Header --- */ +.company-header { + text-align: center; + border-bottom: 1px solid #eee; + padding-bottom: 1.5rem; + margin-bottom: 2rem; +} + +.company-header h1 { + font-weight: 600; + color: #2c3e50; + font-size: 1.75rem; +} + +.company-header p { + margin-bottom: 0.25rem; + color: #555; + font-size: 0.95rem; +} + +/* --- Section Styling --- */ +.form-section { + margin-bottom: 2rem; +} + +.section-title { + font-weight: 600; + font-size: 1.2rem; + color: #333; + margin-bottom: 1.5rem; + display: flex; + align-items: center; +} + +.section-title i { + font-size: 1.1rem; + margin-right: 0.75rem; + color: #40E0D0; /* Accent Color */ +} + +/* --- Form Elements --- */ +.form-control, .form-select { + border-radius: 0.5rem; + border: 1px solid #ced4da; + padding: 0.75rem 1rem; + transition: border-color 0.2s, box-shadow 0.2s; +} + +.form-control:focus, .form-select:focus { + border-color: #40E0D0; + box-shadow: 0 0 0 0.25rem rgba(64, 224, 208, 0.2); +} + +.form-control[readonly] { + background-color: #e9ecef; + font-weight: 600; +} + +.form-check-input:checked { + background-color: #40E0D0; + border-color: #40E0D0; +} + +/* --- Total Fare Section --- */ +.total-fare-section { + margin-top: 2.5rem; + padding-top: 1.5rem; + border-top: 2px dashed #eee; +} + +.grand-total-label { + font-size: 1.2rem; + font-weight: 600; + color: #2c3e50; +} + +.grand-total-input { + font-size: 1.5rem; + font-weight: 600; + color: #40E0D0; + text-align: right; +} + + +/* --- Buttons --- */ +.btn { + border-radius: 0.5rem; + padding: 0.75rem 1.5rem; + font-weight: 600; + transition: all 0.3s ease; +} + +.btn-primary { + background-color: #40E0D0; + border-color: #40E0D0; +} + +.btn-primary:hover { + background-color: #36c4b4; + border-color: #36c4b4; + transform: translateY(-2px); +} + +.btn-secondary { + background-color: #6c757d; + border-color: #6c757d; +} + +.btn-secondary:hover { + background-color: #5a6268; + border-color: #5a6268; +} + +.btn-light { + background-color: #f8f9fa; + border-color: #ced4da; +} + +/* --- Layover Section --- */ +#layoverDetails { + display: none; /* Hidden by default */ + margin-top: 1rem; + padding: 1.5rem; + background-color: #fcfcfc; + border: 1px solid #eee; + border-radius: 0.5rem; +} + +/* --- Preview Modal --- */ +.modal-header { + border-bottom: 1px solid #eee; +} + +.modal-title { + font-weight: 600; +} + +#previewContent h5 { + font-weight: 600; + color: #40E0D0; + margin-top: 1rem; + margin-bottom: 1rem; + font-size: 1.1rem; + border-bottom: 1px solid #f0f0f0; + padding-bottom: 0.5rem; +} + +#previewContent p { + margin-bottom: 0.5rem; +} + +#previewContent .table { + margin-top: 1rem; +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..af1fcaf --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,201 @@ +document.addEventListener('DOMContentLoaded', function () { + + // --- Toggle for Layover Section --- + const layoverToggle = document.getElementById('layoverToggle'); + const layoverDetails = document.getElementById('layoverDetails'); + + if (layoverToggle) { + layoverToggle.addEventListener('change', function () { + layoverDetails.style.display = this.checked ? 'block' : 'none'; + }); + } + + // --- Auto-calculation for Fares --- + const passengersInput = document.getElementById('passengers'); + const fareInput = document.getElementById('fare'); + const totalFareInput = document.getElementById('totalFare'); + + const infantsInput = document.getElementById('infants'); + const infantFareInput = document.getElementById('infantFare'); + const totalInfantFareInput = document.getElementById('totalInfantFare'); + + const extraChargePriceInput = document.getElementById('extraChargePrice'); + const grandTotalInput = document.getElementById('grandTotal'); + + const calculationFields = [passengersInput, fareInput, infantsInput, infantFareInput, extraChargePriceInput]; + + function calculateTotals() { + const passengers = parseFloat(passengersInput.value) || 0; + const fare = parseFloat(fareInput.value) || 0; + const infants = parseFloat(infantsInput.value) || 0; + const infantFare = parseFloat(infantFareInput.value) || 0; + const extraCharges = parseFloat(extraChargePriceInput.value) || 0; + + const totalFare = passengers * fare; + const totalInfantFare = infants * infantFare; + const grandTotal = totalFare + totalInfantFare + extraCharges; + + totalFareInput.value = totalFare.toFixed(3); + totalInfantFareInput.value = totalInfantFare.toFixed(3); + grandTotalInput.value = grandTotal.toFixed(3) + ' OMR'; + } + + calculationFields.forEach(field => { + if (field) { + field.addEventListener('input', calculateTotals); + } + }); + + // Initial calculation on page load + calculateTotals(); + + // --- Preview Modal Logic --- + const previewButton = document.getElementById('previewButton'); + const previewModal = new bootstrap.Modal(document.getElementById('previewModal')); + const previewContent = document.getElementById('previewContent'); + + if (previewButton) { + previewButton.addEventListener('click', function () { + // Helper to get form values + const getValue = (id) => document.getElementById(id).value || 'N/A'; + + // Collect data from form fields + const customerName = getValue('customerName'); + const phoneNumber = getValue('phoneNumber'); + const email = getValue('email'); + const passengers = getValue('passengers'); + + const departureAirport = getValue('departureAirport'); + const arrivalAirport = getValue('arrivalAirport'); + const departureDate = getValue('departureDate'); + const returnDate = getValue('returnDate'); + const airline = getValue('airline'); + const cabinClass = getValue('cabinClass'); + + let layoverInfo = ''; + if (layoverToggle.checked) { + const layoverAirport = getValue('layoverAirport'); + const layoverDuration = getValue('layoverDuration'); + layoverInfo = ` +
Layover Details
+

Layover Airport: ${layoverAirport}

+

Duration: ${layoverDuration}

+ `; + } + + const fare = parseFloat(getValue('fare')).toFixed(3) || '0.000'; + const totalFare = getValue('totalFare'); + + const infants = getValue('infants'); + const infantFare = parseFloat(getValue('infantFare')).toFixed(3) || '0.000'; + const totalInfantFare = getValue('totalInfantFare'); + const infantBaggage = getValue('infantBaggage'); + + const checkedBaggage = getValue('checkedBaggage'); + const weightPerPiece = getValue('weightPerPiece'); + const handBaggage = getValue('handBaggage'); + const baggageNotes = getValue('baggageNotes'); + + const extraChargeDescription = getValue('extraChargeDescription'); + const extraChargePrice = parseFloat(getValue('extraChargePrice')).toFixed(3) || '0.000'; + + const grandTotal = getValue('grandTotal'); + const otherRequests = getValue('otherRequests'); + + // Construct HTML for preview + previewContent.innerHTML = ` +
+
+
Customer Details
+

Name: ${customerName}

+

Phone: ${phoneNumber}

+

Email: ${email}

+
+
+
Flight Information
+

From: ${departureAirport}

+

To: ${arrivalAirport}

+

Departure: ${departureDate}

+

Return: ${returnDate || 'One-way'}

+

Airline: ${airline}

+

Class: ${cabinClass}

+
+
+ + ${layoverInfo} + +
+ +
+
+
Passenger & Infant Details
+

No. of Passengers: ${passengers}

+

No. of Infants: ${infants}

+

Infant Baggage: ${infantBaggage}

+
+
+
Adult Baggage Details
+

Checked Pieces: ${checkedBaggage}

+

Weight per Piece: ${weightPerPiece} kg

+

Hand Baggage: ${handBaggage} kg

+

Notes: ${baggageNotes}

+
+
+ +
+ +
Fare Summary (OMR)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Fare per Passenger${fare}
Total Passenger Fare${totalFare}
Infant Fare${infantFare}
Total Infant Fare${totalInfantFare}
${extraChargeDescription || 'Extra Charges'}${extraChargePrice}
Grand Total${grandTotal}
+ +
Additional Comments
+

${otherRequests}

+ `; + + // Show the modal + previewModal.show(); + }); + } + + // --- Reset Form Logic --- + const resetButton = document.getElementById('resetButton'); + const airfareForm = document.getElementById('airfareForm'); + + if (resetButton) { + resetButton.addEventListener('click', function() { + airfareForm.reset(); + // Manually hide the layover section if it was open + if (layoverToggle.checked) { + layoverDetails.style.display = 'none'; + } + // Recalculate totals to reset them to 0 + calculateTotals(); + }); + } +}); \ No newline at end of file diff --git a/assets/pasted-20251031-155117-0cfd8deb.png b/assets/pasted-20251031-155117-0cfd8deb.png new file mode 100644 index 0000000..6d8b799 Binary files /dev/null and b/assets/pasted-20251031-155117-0cfd8deb.png differ diff --git a/index.php b/index.php index 7205f3d..79b663f 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,263 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + Safari Muscat Airfare Request Generator + + + + + + + + + + + + + + + + + + + + + + + -
-
-

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

+ +
+
+ + +
+

Safari Muscat Tourism LLC

+

Central Market, Salalah, Dhofar, Sultanate of Oman

+

PO Box: 211 | Phone: +968 99737165

+
+ +
+ +
+

Customer Details

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

Flight Information

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

Fare Details

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

Infant Details

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

Adult Baggage Details

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

Extra Charges

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

Additional Comments

+
+
+ + +
+
+
+ + +
+ + + + +
+
+
-
- + + + + + + +