Spaces:

Alinabil1
/

Darak

Sleeping

File size: 17,854 Bytes

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark - Amortization Terminal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        term: { 
                            bg: '#050A15', 
                            surface: '#0A0F1E', 
                            primary: '#F59E0B', /* Darak Gold */
                            accent: '#D97706' 
                        }
                    },
                    fontFamily: { sans: ['Cairo', 'sans-serif'], mono: ['Space Mono', 'monospace'] }
                }
            }
        }
    </script>
    
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background: #050A15; color: #fff; font-family: 'Cairo', sans-serif; }
        
        /* Grid Background matching Darak identity */
        .bg-grid {
            position: absolute; inset: 0;
            background-image: 
                linear-gradient(to right, rgba(245, 158, 11, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 0; pointer-events: none;
        }

        .panel {
            background: rgba(10, 15, 30, 0.85);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(245, 158, 11, 0.1);
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(245, 158, 11, 0.05);
        }

        /* Terminal Sliders - Gold */
        input[type=range] {
            -webkit-appearance: none; width: 100%; background: transparent; margin: 10px 0;
        }
        input[type=range]:focus { outline: none; }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%; height: 4px; cursor: pointer;
            background: rgba(255,255,255,0.1); border-radius: 2px;
        }
        input[type=range]::-webkit-slider-thumb {
            height: 16px; width: 16px; border-radius: 50%;
            background: #F59E0B; cursor: pointer;
            -webkit-appearance: none; margin-top: -6px;
            box-shadow: 0 0 15px rgba(245, 158, 11, 0.8);
            transition: transform 0.2s;
        }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
        
        /* Custom Scrollbar - Gold */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #F59E0B; }

    </style>
</head>
<body class="w-screen h-screen flex flex-col p-4 gap-4 relative">

    <div class="bg-grid"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_transparent_0%,_#050A15_100%)] z-0 pointer-events-none opacity-80"></div>

    <!-- Top Nav -->
    <nav class="panel w-full h-16 shrink-0 flex items-center justify-between px-6 z-10">
        <div class="flex items-center gap-3 cursor-pointer" onclick="window.location.href='index.html'">
            <img src="logo.png" alt="Darak Logo" class="h-10 drop-shadow-[0_0_10px_rgba(245,158,11,0.5)]">
            <span class="text-sm font-black tracking-widest uppercase text-white">DARAK <span class="text-term-primary">FINANCIAL TERMINAL</span></span>
        </div>
        <button onclick="window.location.href='index.html'" class="text-gray-400 hover:text-term-primary transition text-sm font-bold flex items-center gap-2">
            العودة للرئيسية <i class="fa-solid fa-arrow-left"></i>
        </button>
    </nav>

    <!-- Main Container -->
    <main class="flex-1 flex gap-4 z-10 overflow-hidden">
        
        <!-- LEFT: INPUT PANEL -->
        <div class="w-[350px] shrink-0 panel flex flex-col p-6 overflow-y-auto">
            
            <div class="border-b border-term-primary/20 pb-4 mb-6">
                <h2 class="text-xs tracking-widest font-bold text-gray-400 uppercase"><i class="fa-solid fa-sliders text-term-primary ml-1"></i> متغيرات القرض</h2>
            </div>

            <div class="space-y-8 flex-1">
                <!-- Price -->
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="text-xs text-gray-400 font-bold uppercase">سعر العقار</label>
                        <div class="text-lg font-black text-term-primary"><span id="val-price">10,000,000</span> <span class="text-[10px] text-gray-500">ج.م</span></div>
                    </div>
                    <input type="range" id="slider-price" min="500000" max="50000000" step="100000" value="10000000">
                </div>

                <!-- Down Payment -->
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="text-xs text-gray-400 font-bold uppercase">المقدم (<span id="val-dp-pct" class="text-white">20</span>%)</label>
                        <div class="text-base font-bold text-gray-300"><span id="val-dp-amt">2,000,000</span> <span class="text-[10px] text-gray-500">ج.م</span></div>
                    </div>
                    <input type="range" id="slider-dp" min="0" max="80" step="1" value="20">
                </div>

                <!-- Years -->
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="text-xs text-gray-400 font-bold uppercase">مدة التقسيط</label>
                        <div class="text-lg font-black text-white"><span id="val-years">10</span> <span class="text-[10px] text-gray-500">سنوات</span></div>
                    </div>
                    <input type="range" id="slider-years" min="1" max="30" step="1" value="10">
                </div>

                <!-- Interest Rate -->
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="text-xs text-gray-400 font-bold uppercase">الفائدة السنوية</label>
                        <div class="text-lg font-black text-white"><span id="val-rate">12</span> <span class="text-[10px] text-gray-500">%</span></div>
                    </div>
                    <input type="range" id="slider-rate" min="0" max="30" step="0.5" value="12">
                </div>
            </div>

            <!-- Big Monthly Payment Display -->
            <div class="mt-8 p-6 bg-black/40 border border-term-primary/30 rounded-xl relative overflow-hidden text-center">
                <div class="absolute -top-10 -right-10 w-32 h-32 bg-term-primary/20 blur-[40px]"></div>
                <div class="text-xs text-gray-400 uppercase tracking-widest font-bold mb-2">القسط الشهري المتوقع</div>
                <div class="text-4xl font-black text-white font-mono drop-shadow-[0_0_15px_rgba(245,158,11,0.5)]" id="val-monthly">0</div>
                <div class="text-[10px] text-term-primary mt-1 font-mono">جنيه / شهر</div>
            </div>

            <button onclick="window.location.href='onboarding.html'" class="w-full mt-4 bg-term-primary/10 hover:bg-term-primary text-term-primary hover:text-black border border-term-primary transition-all duration-300 py-3 rounded-lg font-bold text-sm uppercase tracking-wider">
                ابحث عن عقار بهذه الميزانية
            </button>
        </div>

        <!-- RIGHT: CHART PANEL -->
        <div class="flex-1 panel flex flex-col p-6 overflow-hidden">
            
            <!-- Quick Stats Header -->
            <div class="grid grid-cols-3 gap-4 mb-6 border-b border-white/5 pb-6 text-center">
                <div class="bg-black/30 p-4 rounded-xl border border-white/5">
                    <div class="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1">أصل مبلغ القرض</div>
                    <div class="text-xl font-bold text-white font-mono" id="stat-principal">0 <span class="text-xs text-gray-500">ج.م</span></div>
                </div>
                <div class="bg-black/30 p-4 rounded-xl border border-white/5">
                    <div class="text-[10px] text-gray-500 font-bold uppercase tracking-widest mb-1">إجمالي الفوائد</div>
                    <div class="text-xl font-bold text-white font-mono" id="stat-interest">0 <span class="text-xs text-gray-500">ج.م</span></div>
                </div>
                <div class="bg-term-primary/10 p-4 rounded-xl border border-term-primary/30 shadow-[0_0_15px_rgba(245,158,11,0.1)]">
                    <div class="text-[10px] text-term-primary font-bold uppercase tracking-widest mb-1">إجمالي التكلفة</div>
                    <div class="text-xl font-black text-term-primary font-mono" id="stat-total">0 <span class="text-xs text-term-primary/60">ج.م</span></div>
                </div>
            </div>

            <div class="flex items-center justify-between mb-4">
                <h2 class="text-sm tracking-widest font-bold text-white uppercase"><i class="fa-solid fa-chart-line text-term-primary ml-1"></i> جدول الإهلاك الزمني</h2>
                <div class="flex gap-4 text-xs font-mono">
                    <span class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-[#F59E0B]"></span> الرصيد المتبقي</span>
                    <span class="flex items-center gap-2"><span class="w-3 h-3 rounded bg-[#4ade80]"></span> الفوائد المتراكمة</span>
                </div>
            </div>

            <!-- Massive Area Chart -->
            <div class="flex-1 relative w-full h-full">
                <canvas id="amortizationChart"></canvas>
            </div>
            
        </div>
    </main>

    <script>
        // Formatting helper
        const formatCurrency = (num) => new Intl.NumberFormat('en-US').format(Math.round(num));

        // DOM Elements
        const sliderPrice = document.getElementById('slider-price');
        const sliderDp = document.getElementById('slider-dp');
        const sliderYears = document.getElementById('slider-years');
        const sliderRate = document.getElementById('slider-rate');

        // Chart Instance
        let amortizationChart = null;

        function initChart() {
            const ctx = document.getElementById('amortizationChart').getContext('2d');
            
            Chart.defaults.color = '#94a3b8';
            Chart.defaults.font.family = 'Space Mono';

            amortizationChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [], // Years
                    datasets: [
                        {
                            label: 'الرصيد المتبقي',
                            data: [],
                            borderColor: '#F59E0B',
                            backgroundColor: 'rgba(245, 158, 11, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            pointRadius: 0,
                            pointHoverRadius: 6,
                            tension: 0.4
                        },
                        {
                            label: 'الفوائد المتراكمة',
                            data: [],
                            borderColor: '#4ade80',
                            backgroundColor: 'rgba(74, 222, 128, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            pointRadius: 0,
                            pointHoverRadius: 6,
                            tension: 0.4
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(10, 15, 30, 0.95)',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            titleFont: { family: 'Cairo' },
                            bodyFont: { family: 'Space Mono' },
                            borderColor: 'rgba(245,158,11,0.3)',
                            borderWidth: 1,
                            padding: 12,
                            textDirection: 'rtl',
                            callbacks: {
                                label: function(context) {
                                    return ' ' + context.dataset.label + ': ' + formatCurrency(context.raw) + ' ج.م';
                                }
                            }
                        }
                    },
                    scales: {
                        x: { 
                            grid: { color: 'rgba(255,255,255,0.03)' },
                            ticks: { font: { family: 'Cairo' } }
                        },
                        y: { 
                            grid: { color: 'rgba(255,255,255,0.03)' },
                            position: 'right', // Put Y axis on right for RTL
                            ticks: { callback: function(value) { return formatCurrency(value); } }
                        }
                    }
                }
            });
        }

        function calculateAmortization() {
            // Get Values
            const price = parseFloat(sliderPrice.value);
            const dpPct = parseFloat(sliderDp.value);
            const years = parseFloat(sliderYears.value);
            const annualRate = parseFloat(sliderRate.value);

            // Basic Math
            const dpAmt = price * (dpPct / 100);
            const principal = price - dpAmt;
            const monthlyRate = (annualRate / 100) / 12;
            const totalMonths = years * 12;

            let monthlyPayment = 0;
            if (annualRate > 0) {
                monthlyPayment = principal * (monthlyRate * Math.pow(1 + monthlyRate, totalMonths)) / (Math.pow(1 + monthlyRate, totalMonths) - 1);
            } else {
                monthlyPayment = principal / totalMonths;
            }
            if(isNaN(monthlyPayment) || !isFinite(monthlyPayment)) monthlyPayment = 0;

            // Update UI Inputs
            document.getElementById('val-price').innerText = formatCurrency(price);
            document.getElementById('val-dp-pct').innerText = dpPct;
            document.getElementById('val-dp-amt').innerText = formatCurrency(dpAmt);
            document.getElementById('val-years').innerText = years;
            document.getElementById('val-rate').innerText = annualRate;
            document.getElementById('val-monthly').innerText = formatCurrency(monthlyPayment);

            // Generate Amortization Schedule for Chart
            let currentPrincipal = principal;
            let accInterest = 0;
            
            const labels = [];
            const principalData = [];
            const interestData = [];

            // Add Year 0
            labels.push('السنة 0');
            principalData.push(currentPrincipal);
            interestData.push(0);

            for (let m = 1; m <= totalMonths; m++) {
                let interestPayment = currentPrincipal * monthlyRate;
                let principalPayment = monthlyPayment - interestPayment;
                
                if (annualRate === 0) {
                    interestPayment = 0;
                    principalPayment = monthlyPayment;
                }

                accInterest += interestPayment;
                currentPrincipal -= principalPayment;
                if (currentPrincipal < 0) currentPrincipal = 0;

                // Save data point every 12 months (or last month)
                if (m % 12 === 0 || m === totalMonths) {
                    labels.push('السنة ' + (m/12));
                    principalData.push(currentPrincipal);
                    interestData.push(accInterest);
                }
            }

            // Update Top Stats
            document.getElementById('stat-principal').innerHTML = formatCurrency(principal) + ' <span class="text-xs text-gray-500">ج.م</span>';
            document.getElementById('stat-interest').innerHTML = formatCurrency(accInterest) + ' <span class="text-xs text-gray-500">ج.م</span>';
            document.getElementById('stat-total').innerHTML = formatCurrency(principal + accInterest + dpAmt) + ' <span class="text-xs text-term-primary/60">ج.م</span>';

            // Update Chart
            amortizationChart.data.labels = labels;
            amortizationChart.data.datasets[0].data = principalData; // Remaining Principal
            amortizationChart.data.datasets[1].data = interestData; // Accumulated Interest
            amortizationChart.update();
        }

        // Setup Event Listeners
        [sliderPrice, sliderDp, sliderYears, sliderRate].forEach(slider => {
            slider.addEventListener('input', calculateAmortization);
        });

        // Init
        document.addEventListener('DOMContentLoaded', () => {
            initChart();
            calculateAmortization();
        });

    </script>
</body>
</html>