diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..2d60aff --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,65 @@ +body { + font-family: 'Inter', sans-serif; + background-color: transparent; + color: #111827; +} + +#particles-js { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: #F3F4F6; + background-image: url(""); + background-repeat: no-repeat; + background-size: cover; + background-position: 50% 50%; + z-index: -1; +} + +.navbar-brand { + color: #4F46E5 !important; +} + +.btn-primary { + background-color: #4F46E5; + border-color: #4F46E5; +} + +.btn-primary:hover { + background-color: #4338CA; + border-color: #4338CA; +} + +.card { + border-radius: 0.5rem; + background-color: rgba(255, 255, 255, 0.02); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + transform: translateZ(0); +} + +.form-control:focus { + border-color: #4F46E5; + box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); +} + +@media print { + body { + background-color: #fff; + } + .navbar, .btn, footer, #addItemForm, .col-lg-4 { + display: none; + } + .col-lg-8 { + width: 100%; + max-width: 100%; + flex: 0 0 100%; + } + .card { + border: none !important; + box-shadow: none !important; + } +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..ecd6bf5 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,72 @@ +document.addEventListener('DOMContentLoaded', function () { + const addItemForm = document.getElementById('addItemForm'); + const estimateItems = document.getElementById('estimateItems').getElementsByTagName('tbody')[0]; + const summarySubtotal = document.getElementById('summarySubtotal'); + const summaryTax = document.getElementById('summaryTax'); + const summaryTotal = document.getElementById('summaryTotal'); + const taxRate = 0.10; // 10% + + // Set current date + document.getElementById('estimateDate').valueAsDate = new Date(); + + addItemForm.addEventListener('submit', function (e) { + e.preventDefault(); + const description = document.getElementById('itemDescription').value; + const quantity = parseFloat(document.getElementById('itemQuantity').value); + const price = parseFloat(document.getElementById('itemPrice').value); + + if (description && quantity > 0 && price >= 0) { + addItem(description, quantity, price); + addItemForm.reset(); + document.getElementById('itemQuantity').value = 1; + document.getElementById('itemPrice').value = "0.00"; + } + }); + + function addItem(description, quantity, price) { + const row = estimateItems.insertRow(); + const total = quantity * price; + + row.innerHTML = ` + + + + ${total.toFixed(2)} + + `; + + row.querySelector('.remove-item').addEventListener('click', function () { + row.remove(); + updateSummary(); + }); + + row.querySelectorAll('.item-quantity, .item-price').forEach(input => { + input.addEventListener('input', function () { + const newQuantity = parseFloat(row.querySelector('.item-quantity').value); + const newPrice = parseFloat(row.querySelector('.item-price').value); + const newTotal = newQuantity * newPrice; + row.querySelector('.item-total').textContent = newTotal.toFixed(2); + updateSummary(); + }); + }); + + updateSummary(); + } + + function updateSummary() { + let subtotal = 0; + estimateItems.querySelectorAll('tr').forEach(row => { + subtotal += parseFloat(row.querySelector('.item-total').textContent); + }); + + const tax = subtotal * taxRate; + const total = subtotal + tax; + + summarySubtotal.textContent = `$${subtotal.toFixed(2)}`; + summaryTax.textContent = `$${tax.toFixed(2)}`; + summaryTotal.textContent = `$${total.toFixed(2)}`; + } + + // Add a default item to get started + addItem('Example Item', 1, 100); +}); diff --git a/index.php b/index.php index e13ae95..8228c6b 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,232 @@ - - + - - - New Style - - - - + + + Estimate Builder + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- +
+ + + +
+
+ +
+
+
+
+
+
Estimate Details
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + + + + + + + + + + + + +
DescriptionQuantityPriceTotal
+
+ +
+ +
Add New Item
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+ + +
+
+
+
Summary
+
+ Subtotal + $0.00 +
+
+ Tax (10%) + $0.00 +
+
+
+ Total + $0.00 +
+
+ +
+
+
+
+
+
+ + + + + + + - + \ No newline at end of file