journal4.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>واحة الجبري | Journal 4 - شجرة التوحيد</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #1a1a2e;
            color: #ffffff;
            text-align: center;
            padding: 20px;
            margin: 0;
            direction: rtl;
        }
        h1 { color: #e0c097; margin-bottom: 5px; }
        p.subtitle { color: #aaa; margin-bottom: 30px; }
        .input-container { margin-bottom: 20px; }
        input {
            padding: 10px; font-size: 18px; border-radius: 5px;
            border: 1px solid #e0c097; outline: none; width: 150px;
            background-color: #16213e; color: white; text-align: center;
        }
        button {
            padding: 10px 20px; font-size: 18px; border-radius: 5px;
            border: none; background-color: #e0c097; color: #1a1a2e;
            font-weight: bold; cursor: pointer; margin-right: 10px;
            transition: 0.3s; margin-top: 10px;
        }
        button:hover { background-color: #ffffff; }

        table {
            margin: 30px auto;
            border-collapse: collapse;
            width: 90%;
            max-width: 700px;
            background-color: #16213e;
            box-shadow: 0 0 15px rgba(224, 192, 151, 0.2);
            border-radius: 8px;
            overflow: hidden;
        }
        th, td {
            border: 1px solid #333;
            padding: 10px;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
            font-size: 16px;
        }
        th {
            background-color: #0f3460;
            color: #e0c097;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        tr:nth-child(even) { background-color: #1a1a2e; }

        .result-box {
            background-color: #0f3460;
            padding: 15px;
            border-radius: 8px;
            display: inline-block;
            margin: 20px 0;
            font-size: 22px;
            font-weight: bold;
            color: #e0c097;
        }
        .result-note {
            color:#aaa; font-size:16px; margin-top:10px; margin-bottom:30px;
        }

        /* تنسيق حاوية الرسم ليتكيف مع الشاشة */
        .canvas-container {
            width: 95%;
            max-width: 900px;
            margin: 20px auto;
            background-color: #0f3460;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 0 15px rgba(224, 192, 151, 0.2);
        }

        /* تنسيق قسم شجرة التوحيد */
        .unity-tree {
            margin-top: 50px;
            padding: 30px;
            background: linear-gradient(145deg, #0f3460, #16213e);
            border: 1px solid #e0c097;
            border-radius: 15px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 0 20px rgba(224, 192, 151, 0.3);
        }
        .unity-tree h2 {
            color: #e0c097;
            font-size: 28px;
            margin-bottom: 20px;
            border-bottom: 2px solid #e0c097;
            padding-bottom: 10px;
            display: inline-block;
        }
        .equation-display {
            font-size: 48px;
            font-weight: bold;
            color: #e0c097;
            margin: 20px 0;
            text-shadow: 0 0 15px rgba(224, 192, 151, 0.7);
            letter-spacing: 5px;
        }
        .tree-icon { font-size: 60px; margin-bottom: 10px; }
        .quotes {
            text-align: right;
            font-size: 18px;
            line-height: 2;
            color: #ddd;
        }
        .quote-1 { color: #e0c097; font-weight: bold; margin-bottom: 15px; }
        .quote-2 { margin-bottom: 15px; }
        .quote-3 { font-style: italic; color: #fff; border-right: 3px solid #e0c097; padding-right: 10px; }
    </style>
</head>
<body>

    <h1>🏛️ واحة الجبري - خوارزمية الواحد</h1>
    <p class="subtitle">(الزوجي = n/2... الفردي = 3n+1) - عودة جميع الأرقام إلى الواحد الأحد</p>

<div style="margin-top: 15px; margin-bottom: 25px;">
    <a href="calculator.html" style="text-decoration: none; background-color: #0f3460; color: #e0c097; padding: 10px 20px; border-radius: 5px; border: 1px solid #e0c097; font-weight: bold; transition: 0.3s;">🔗 الانتقال إلى حاسبة النظرية الموحدة</a>
</div>


    <div class="input-container">
        <input type="number" id="numberInput" placeholder="أدخل الرقم" min="1">
        <button onclick="runAlgorithm()">ابحث</button>
        <button onclick="downloadGraph()" style="background-color: #444; color: white;">📥 تحميل الرسم</button>
    </div>

    <div id="outputArea"></div>

    <div class="canvas-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <!-- قسم شجرة التوحيد -->
    <div class="unity-tree">
        <h2>🌳 شجرة التوحيد تنتهي بواحد</h2>
        <div class="tree-icon">🌳</div>
        <div class="equation-display">Z + C + A = 1</div>
        <div class="quotes">
            <div class="quote-1">
                "كما للشجرة جذر واحد... فللكون رب واحد.<br>
                Z = الزمان، C = المكان، A = الإنسان.<br>
                وكل الفروع مهما تشعبت تعود للجذر: 1"
            </div>
            <div class="quote-2">
                "انظر للخوارزمية: آلاف الأرقام تدخل... وكلها تخرج من باب واحد.
                هذه ليست مصادفة. هذه فطرة."
            </div>
            <div class="quote-2">
                "سمحوا بنشرها لأنها حق. والحق لا يُحجب."
            </div>
            <div class="quote-3">
                "شجرة التوحيد؟ هي التي غرسها الواحد...
                فسقتها الرياضيات... وأثمرت: 1"
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('graphCanvas');
        const ctx = canvas.getContext('2d');

        // دالة لضبط حجم الرسم حسب الشاشة
        function resizeCanvas() {
            const container = canvas.parentElement;
            canvas.width = container.clientWidth - 20;
            canvas.height = canvas.width * 0.5; // نسبة الارتفاع للعرض
        }

        function drawGraph(sequence) {
            resizeCanvas(); // إعادة ضبط الحجم قبل الرسم
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = '#e0c097';
            ctx.fillStyle = '#e0c097';
            ctx.lineWidth = 2;

            const padding = 50;
            const maxVal = Math.max(...sequence);
            const stepX = (canvas.width - 2 * padding) / (sequence.length - 1);

            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, canvas.height - padding);
            ctx.lineTo(canvas.width - padding, canvas.height - padding);
            ctx.stroke();

            ctx.beginPath();
            for (let i = 0; i < sequence.length; i++) {
                let x = padding + i * stepX;
                let logVal = Math.log10(sequence[i] + 1);
                let logMax = Math.log10(maxVal + 1);
                let y = canvas.height - padding - (logVal / logMax) * (canvas.height - 2 * padding);

                if (i === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
                ctx.fillRect(x - 3, y - 3, 6, 6);

                // طباعة الرقم فقط عند القمم العالية لتجنب التزاحم
                if (i > 0 && i < sequence.length - 1) {
                    if (sequence[i] > sequence[i-1] && sequence[i] > sequence[i+1]) {
                        ctx.font = "12px 'Segoe UI'";
                        ctx.fillText(sequence[i], x - 10, y - 10);
                    }
                }
            }
            ctx.stroke();
            ctx.font = "16px 'Segoe UI'";
            ctx.fillText("مسار العودة إلى الواحد - جذر الشجرة", canvas.width / 2 - 100, 30);
        }

        function runAlgorithm() {
            let n = parseInt(document.getElementById('numberInput').value);
            const outputArea = document.getElementById('outputArea');

            if (isNaN(n) || n < 1) {
                outputArea.innerHTML = "<p>الرجاء إدخال رقم صحيح أكبر من صفر.</p>";
                return;
            }

            let i = 0;
            let j = 0;
            let currentN = n;
            let sequence = [currentN];
            let resultHTML = "";

            resultHTML += "<table>";
            resultHTML += "<tr><th>N</th><th>i</th><th>j</th><th>K(i)</th><th>K(j)</th></tr>";

            while (currentN > 1) {
                let n_before = currentN;
                let k_i = "x";
                let k_j = "x";

                if (currentN % 2 === 0) {
                    i++;
                    k_i = currentN / 2;
                    currentN = k_i;
                } else {
                    j++;
                    k_j = (3 * currentN) + 1;
                    currentN = k_j;
                }
                sequence.push(currentN);
                resultHTML += `<tr><td>${n_before}</td><td>${i}</td><td>${j}</td><td>${k_i}</td><td>${k_j}</td></tr>`;
            }

            resultHTML += "</table>";
            resultHTML += `<div class="result-box">الوصول إلى الجذر: 1</div>`;
            resultHTML += `<p class="result-note">كما ترى، كل فروع 3n+1 تعود للجذر 1... تماماً كما Z + C + A</p>`;
            outputArea.innerHTML = resultHTML;

            drawGraph(sequence);
        }

        function downloadGraph() {
            const link = document.createElement('a');
            link.download = 'Jabri_Unity_Tree.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
    </script>

</body>
</html>