diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..8132613 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,29 @@ + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background-color: #f8f9fa; +} + +.hero { + background: linear-gradient(45deg, #007bff, #82baff); + color: white; + padding: 4rem 0; + text-align: center; +} + +.calculator-card { + background-color: #ffffff; + border-radius: 0.5rem; + padding: 2rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.form-label { + font-weight: 500; +} + +#monthlyPayment { + font-size: 2rem; + font-weight: bold; + color: #007bff; +} diff --git a/assets/images/pexels/1602726.jpg b/assets/images/pexels/1602726.jpg new file mode 100644 index 0000000..f5d4396 Binary files /dev/null and b/assets/images/pexels/1602726.jpg differ diff --git a/assets/images/pexels/5921560.jpg b/assets/images/pexels/5921560.jpg new file mode 100644 index 0000000..1d2f126 Binary files /dev/null and b/assets/images/pexels/5921560.jpg differ diff --git a/assets/images/pexels/8292854.jpg b/assets/images/pexels/8292854.jpg new file mode 100644 index 0000000..ae8eddf Binary files /dev/null and b/assets/images/pexels/8292854.jpg differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..91dc285 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,37 @@ + +document.addEventListener('DOMContentLoaded', function () { + const loanAmountInput = document.getElementById('loanAmount'); + const interestRateInput = document.getElementById('interestRate'); + const loanTermInput = document.getElementById('loanTerm'); + const monthlyPaymentDisplay = document.getElementById('monthlyPayment'); + + function calculateMonthlyPayment() { + const principal = parseFloat(loanAmountInput.value); + const annualInterestRate = parseFloat(interestRateInput.value); + const years = parseFloat(loanTermInput.value); + + if (isNaN(principal) || isNaN(annualInterestRate) || isNaN(years) || principal <= 0 || annualInterestRate <= 0 || years <= 0) { + monthlyPaymentDisplay.textContent = '$0.00'; + return; + } + + const monthlyInterestRate = annualInterestRate / 100 / 12; + const numberOfPayments = years * 12; + + const numerator = monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments); + const denominator = Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1; + const monthlyPayment = principal * (numerator / denominator); + + if (isFinite(monthlyPayment)) { + monthlyPaymentDisplay.textContent = `$${monthlyPayment.toFixed(2)}`; + } else { + monthlyPaymentDisplay.textContent = '$0.00'; + } + } + + loanAmountInput.addEventListener('input', calculateMonthlyPayment); + interestRateInput.addEventListener('input', calculateMonthlyPayment); + loanTermInput.addEventListener('input', calculateMonthlyPayment); + + calculateMonthlyPayment(); +}); diff --git a/includes/pexels.php b/includes/pexels.php new file mode 100644 index 0000000..0c04a85 --- /dev/null +++ b/includes/pexels.php @@ -0,0 +1,25 @@ + 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18'; +} +function pexels_get($url) { + $ch = curl_init(); + curl_setopt_array($ch, [ + CURLOPT_URL => $url, + CURLOPT_RETURNTRANSFER => true, + CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ], + CURLOPT_TIMEOUT => 15, + ]); + $resp = curl_exec($ch); + $code = curl_getinfo($ch, CURLINFO_HTTP_CODE); + curl_close($ch); + if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true); + return null; +} +function download_to($srcUrl, $destPath) { + $data = file_get_contents($srcUrl); + if ($data === false) return false; + if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true); + return file_put_contents($destPath, $data) !== false; +} diff --git a/index.php b/index.php index 6f7ffab..1ca154c 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,72 @@ - - + - - - New Style - - - - + + + Interactive Loan Calculator + + + + + -
-
-

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

+ +
+
+

Loan Calculator

+

Estimate your monthly loan payments instantly.

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

Monthly Payment

+

$0.00

+ A close-up of a calculator and a pen on a desk. +
+
+
+
+
+ +
+
+

Plan Your Finances

+

Use our loan calculator to understand how your loan works. See how different loan terms and interest rates can affect your monthly payments and help you budget accordingly.

+ A piggy bank with coins, symbolizing savings from a good loan. +
+
+ A person reviewing financial documents, illustrating the concept of a loan. +
+
+
+ + + + + - + \ No newline at end of file