| |
|
| | |
| | document.addEventListener('view-details', (e) => { |
| | const equipment = e.detail; |
| | console.log('View details for:', equipment); |
| | |
| | alert(`Viewing details for ${equipment.manufacturer} ${equipment.model}`); |
| | }); |
| |
|
| | |
| | function generatePowerCapacityData(nominalPower, yearsToShow, annualDegradation) { |
| | return Array.from({ length: yearsToShow + 1 }, (_, year) => { |
| | const availablePower = Math.max( |
| | nominalPower * (1 - (year * annualDegradation) / 100), |
| | nominalPower * 0.8 |
| | ); |
| | return { |
| | year: `Ano ${year}`, |
| | power: availablePower, |
| | nominal: nominalPower, |
| | }; |
| | }); |
| | } |
| |
|
| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>ROI Visionary: Solar Payback Predictor</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/recharts@2.11.2/umd/Recharts.min.js"></script> |
| | <script src="components/chart-card.js"></script> |
| | </head> |
| | <body class="bg-gray-50 min-h-screen"> |
| | <div class="container mx-auto px-4 py-12"> |
| | <header class="mb-12 text-center"> |
| | <h1 class="text-4xl font-bold text-gray-900 mb-2">ROI Visionary</h1> |
| | <p class="text-xl text-gray-600">Solar Investment Payback Predictor</p> |
| | </header> |
| |
|
| | <main class="max-w-4xl mx-auto"> |
| | <div class="grid md:grid-cols-2 gap-8 mb-8"> |
| | <div class="bg-white p-6 rounded-xl shadow-md"> |
| | <h2 class="text-2xl font-semibold mb-4 text-gray-800">Investment Parameters</h2> |
| | <div class="space-y-4"> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Initial Investment (R$)</label> |
| | <input type="number" id="initialInvestment" value="50000" |
| | class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Annual Savings (R$)</label> |
| | <input type="number" id="annualSavings" value="12000" |
| | class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | <div> |
| | <label class="block text-sm font-medium text-gray-700 mb-1">Years to Show</label> |
| | <input type="number" id="yearsToShow" value="25" |
| | class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-200"> |
| | Calculate ROI |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | <div class="bg-white p-6 rounded-xl shadow-md"> |
| | <h2 class="text-2xl font-semibold mb-4 text-gray-800">Quick Summary</h2> |
| | <div class="space-y-4"> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-gray-600">Payback Period</span> |
| | <span id="paybackPeriod" class="font-medium">4.2 years</span> |
| | </div> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-gray-600">25-Year ROI</span> |
| | <span id="roiPercent" class="font-medium">480%</span> |
| | </div> |
| | <div class="flex justify-between items-center"> |
| | <span class="text-gray-600">Net Value</span> |
| | <span id="netValue" class="font-medium">R$ 240k</span> |
| | </div> |
| | <div class="pt-4"> |
| | <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
| | <div id="paybackProgress" class="h-full bg-blue-600" style="width: 16.8%"></div> |
| | </div> |
| | <div class="text-xs text-gray-500 mt-1">Years to payback: 4.2/25</div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <chart-card |
| | initial-investment="50000" |
| | annual-savings="12000" |
| | payback-years="4.2" |
| | years-to-show="25"> |
| | </chart-card> |
| | </main> |
| | </div> |
| |
|
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
