diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e44972f --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,119 @@ +/* + * Custom Styles for Calc.io + * Palette: + * Primary: #6C63FF (Violet) + * Secondary: #4CC9F0 (Cyan) + * Background: #F8F9FA (Light Grey) + * Surface: #FFFFFF (White) + * Text: #212529 (Dark Grey) +*/ + +body { + font-family: 'Poppins', sans-serif; + background-color: #F8F9FA; + color: #212529; +} + +.navbar { + transition: background-color 0.3s ease-in-out; +} + +.navbar-brand { + color: #6C63FF !important; +} + +.hero-section { + background: linear-gradient(45deg, rgba(108, 99, 255, 0.9), rgba(76, 201, 240, 0.9)), url('https://picsum.photos/seed/finance-hero/1600/900') no-repeat center center; + background-size: cover; + padding: 10rem 0; + margin-top: 56px; /* Offset for fixed navbar */ +} + +.calculator-widget { + background-color: #FFFFFF; + color: #212529; + border-radius: 0.75rem; + padding: 2.5rem; + margin-top: 2rem; + text-align: left; + max-width: 800px; + margin-left: auto; + margin-right: auto; +} + +.form-range { + --bs-primary: #6C63FF; +} + +.form-range::-webkit-slider-thumb { + background-color: #6C63FF; +} +.form-range::-moz-range-thumb { + background-color: #6C63FF; +} +.form-range::-ms-thumb { + background-color: #6C63FF; +} + + +.results-panel { + background-color: rgba(255, 255, 255, 0.1); + border-radius: var(--bs-border-radius); + padding: 2rem; +} + +.interest-rates { + background-color: rgba(0, 0, 0, 0.2); + border-radius: var(--bs-border-radius); + padding: 1.5rem; + margin-top: 2rem; +} + +.interest-rates h6 { + margin-bottom: 1rem; + font-weight: 600; +} + +.rates-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1rem; + margin-bottom: 1rem; +} + +.rate-item { + background-color: rgba(255, 255, 255, 0.05); + padding: 1rem; + border-radius: 0.25rem; +} + +.rate-name { + font-size: 0.85rem; + color: #f8f9fa; + display: block; + margin-bottom: 0.25rem; +} + +.rate-value { + font-size: 1.25rem; + font-weight: 600; + color: #ffffff; + margin-bottom: 0; +} + + +.results-panel h3 { + color: #6C63FF; +} + +section { + padding: 5rem 0; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 600; +} + +.fw-bold { + font-weight: 600 !important; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..01e19df --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,69 @@ +document.addEventListener('DOMContentLoaded', function () { + // DOM Elements + const loanAmountInput = document.getElementById('loanAmount'); + const interestRateInput = document.getElementById('interestRate'); + const loanTermInput = document.getElementById('loanTerm'); + + const loanAmountLabel = document.getElementById('loanAmountLabel'); + const interestRateLabel = document.getElementById('interestRateLabel'); + const loanTermLabel = document.getElementById('loanTermLabel'); + + const monthlyPaymentOutput = document.getElementById('monthlyPayment'); + const totalInterestOutput = document.getElementById('totalInterest'); + const totalPaidOutput = document.getElementById('totalPaid'); + + // Format number as currency + const currencyFormatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }); + + function calculateLoan() { + const principal = parseFloat(loanAmountInput.value); + const annualInterestRate = parseFloat(interestRateInput.value); + const years = parseInt(loanTermInput.value, 10); + + // Update labels + loanAmountLabel.textContent = currencyFormatter.format(principal).replace('.00', ''); + interestRateLabel.textContent = `${annualInterestRate.toFixed(1)}%`; + loanTermLabel.textContent = `${years} ${years > 1 ? 'Years' : 'Year'}`; + + // Calculation logic + if (principal > 0 && annualInterestRate > 0 && years > 0) { + const monthlyInterestRate = annualInterestRate / 100 / 12; + const numberOfPayments = years * 12; + + const monthlyPayment = principal * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) / (Math.pow(1 + monthlyInterestRate, numberOfPayments) - 1); + + if (isFinite(monthlyPayment)) { + const totalPaid = monthlyPayment * numberOfPayments; + const totalInterest = totalPaid - principal; + + // Update UI + monthlyPaymentOutput.textContent = currencyFormatter.format(monthlyPayment); + totalInterestOutput.textContent = currencyFormatter.format(totalInterest); + totalPaidOutput.textContent = currencyFormatter.format(totalPaid); + } else { + // Handle case where interest is 0 or other invalid scenarios + resetResults(); + } + } else { + resetResults(); + } + } + + function resetResults() { + monthlyPaymentOutput.textContent = currencyFormatter.format(0); + totalInterestOutput.textContent = currencyFormatter.format(0); + totalPaidOutput.textContent = currencyFormatter.format(0); + } + + + // Event Listeners + loanAmountInput.addEventListener('input', calculateLoan); + interestRateInput.addEventListener('input', calculateLoan); + loanTermInput.addEventListener('input', calculateLoan); + + // Initial calculation on page load + calculateLoan(); +}); diff --git a/index.php b/index.php index e13ae95..d6eb961 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,161 @@ - - + - - - New Style - - - - + + + Interactive Loan Calculator + + + + + + + + + + + + + + + + + + + + + -
-
-

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

-
-
- + + + + + +
+
+

Instant Loan Calculator

+

Estimate your monthly payments with our simple and fast calculator.

+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
Your Results
+
+ Monthly Payment +

$0.00

+
+
+
+ Total Interest +

$0.00

+
+
+ Total Paid +

$0.00

+
+
+
+
+ + +
+
Current Polish Interest Rates (NBP)
+
+ +
+ +

%

+
+ +
+ Effective Date: +
+ + +
+
+ + +
+
+
+
+

Simple & Transparent

+

We believe financial tools should be easy to use and understand. Our calculator gives you a clear picture of your potential loan commitments without any hidden fees or complex jargon. Plan your future with confidence.

+
+
+ A person using a laptop and a calculator, planning their finances. +
+
+
+
+ + +
+
+
+
+ A modern desk with a keyboard, mouse, and a cup of coffee. +
+
+

Get in Touch

+

Have questions or suggestions? We'd love to hear from you. A full contact form will be available soon. For now, feel free to reach out via our social channels.

+
+
+
+
+ + + + + + + + + - + \ No newline at end of file diff --git a/php/functions.php b/php/functions.php new file mode 100644 index 0000000..7084981 --- /dev/null +++ b/php/functions.php @@ -0,0 +1,14 @@ + \ No newline at end of file