Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Access</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    :root {
        --bg: #000000;
        --panel: #0f0f0f;
        --accent: #00ff41; /* Hacker Green */
        --danger: #ff0033;
        --text: #cccccc;
    }

    body {
        margin: 0;
        background: var(--bg);
        font-family: 'Courier New', Courier, monospace; /* خط الآلة الكاتبة */
        color: var(--text);
        overflow-x: hidden;
        user-select: none;
    }

    /* --- شاشة الدخول --- */
    #lock-layer {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: #000;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .input-box {
        border-bottom: 2px solid #333;
        padding: 5px;
        width: 200px;
        position: relative;
    }

    #pass-entry {
        background: transparent;
        border: none;
        color: var(--accent);
        font-family: inherit;
        font-size: 18px;
        text-align: center;
        width: 100%;
        outline: none;
        letter-spacing: 3px;
    }

    #status-msg {
        margin-top: 15px;
        color: var(--danger);
        font-size: 12px;
        opacity: 0;
        height: 15px;
    }

    /* --- الواجهة الداخلية --- */
    #main-interface {
        display: none;
        padding: 20px;
        opacity: 0;
        transition: opacity 1s;
    }

    .grid-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        padding: 20px;
        border: 1px dashed #333;
    }

    .unit {
        width: 80px;
        padding: 10px;
        background: var(--panel);
        border: 1px solid #333;
        text-align: center;
        z-index: 2;
    }
    .unit h4 { margin: 0; color: #666; font-size: 12px; }
    .unit .reading { color: var(--accent); font-size: 11px; margin-top: 5px; }

    .line {
        flex-grow: 1;
        height: 2px;
        background: #333;
        margin: 0 -5px;
        max-width: 100px;
        position: relative;
    }
    .line.active { background: var(--accent); box-shadow: 0 0 5px var(--accent); }

    /* Controls */
    .ctrl-panel {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;
        background: var(--panel); padding: 15px; border: 1px solid #222;
    }
    .slider-grp { display: flex; flex-direction: column; align-items: center; width: 140px; }
    label { font-size: 10px; color: #888; margin-bottom: 5px; }
    input[type=range] { width: 100%; accent-color: var(--accent); }
    
    button#exec-btn {
        background: #222; color: var(--accent); border: 1px solid var(--accent);
        padding: 10px 40px; cursor: pointer; font-family: inherit; font-weight: bold;
        transition: 0.2s;
    }
    button#exec-btn:hover { background: var(--accent); color: #000; }

    #chart-wrapper { max-width: 800px; margin: 20px auto; border: 1px solid #222; padding: 10px; }
</style>
</head>
<body>

<div id="lock-layer">
    <div style="color:#444; font-size:10px; margin-bottom:10px;">SECURE TERMINAL</div>
    <div class="input-box">
        <input type="password" id="pass-entry" placeholder="******" onkeyup="attemptLogin(event)" autofocus>
    </div>
    <div id="status-msg">ACCESS DENIED</div>
</div>

<div id="main-interface">
    <div class="grid-container">
        <div class="unit" id="u-olt"><h4>OLT</h4><div class="reading">7.0 dBm</div></div>
        <div class="line" id="l-1"></div>
        <div class="unit" id="u-fdt"><h4>NODE A</h4><div class="reading" id="r-fdt">--</div></div>
        <div class="line" id="l-2"></div>
        <div class="unit" id="u-fat"><h4>NODE B</h4><div class="reading" id="r-fat">--</div></div>
        <div class="line" id="l-3"></div>
        <div class="unit" id="u-ont"><h4>TERM</h4><div class="reading" id="r-ont">--</div></div>
    </div>

    <div class="ctrl-panel">
        <div class="slider-grp">
            <label>DISTANCE A (KM)</label>
            <input type="range" id="dst1" min="1" max="15" value="5" oninput="uiUpdate()">
            <span id="txt1" style="font-size:10px;">5</span>
        </div>
        <div class="slider-grp">
            <label>DISTANCE B (KM)</label>
            <input type="range" id="dst2" min="0.5" max="5" step="0.1" value="2" oninput="uiUpdate()">
            <span id="txt2" style="font-size:10px;">2</span>
        </div>
        <div class="slider-grp">
            <label>DROP LEN (M)</label>
            <input type="range" id="dst3" min="10" max="500" value="100" oninput="uiUpdate()">
            <span id="txt3" style="font-size:10px;">100</span>
        </div>
        <div class="slider-grp">
            <label>CONDITION</label>
            <select id="cond" style="background:#000; color:#fff; border:1px solid #333; font-family:inherit; font-size:10px;">
                <option value="0">OPTIMAL</option>
                <option value="1">BEND_LOSS</option>
                <option value="2">DIRTY_CONN</option>
                <option value="3">FIBER_CUT</option>
            </select>
        </div>
        <button id="exec-btn" onclick="processSim()">INITIALIZE</button>
    </div>

    <div id="chart-wrapper">
        <canvas id="mainChart"></canvas>
    </div>
</div>

<script>
    // --- Security Module (Base64 Method) ---
    // الكود المشفر لكلمة المرور "1155991155"
    // هذه الطريقة مضمونة وتعمل بدون انترنت
    const AUTH_TOKEN = "MTE1NTk5MTE1NQ=="; 

    function attemptLogin(e) {
        if (e.key === 'Enter') {
            const input = document.getElementById('pass-entry').value.trim();
            // تشفير المدخلات ومقارنتها
            if (btoa(input) === AUTH_TOKEN) {
                grantAccess();
            } else {
                denyAccess();
            }
        }
    }

    function grantAccess() {
        const lock = document.getElementById('lock-layer');
        lock.style.transition = 'opacity 0.5s';
        lock.style.opacity = '0';
        setTimeout(() => {
            lock.style.display = 'none';
            const app = document.getElementById('main-interface');
            app.style.display = 'block';
            setTimeout(() => app.style.opacity = '1', 50);
        }, 500);
    }

    function denyAccess() {
        const msg = document.getElementById('status-msg');
        const input = document.getElementById('pass-entry');
        msg.style.opacity = '1';
        input.value = '';
        setTimeout(() => msg.style.opacity = '0', 2000);
    }

    // --- Simulation Core ---
    let chartInstance;

    function uiUpdate() {
        ['1','2','3'].forEach(i => {
            document.getElementById('txt'+i).innerText = document.getElementById('dst'+i).value;
        });
    }

    function processSim() {
        // Reset Visuals
        document.querySelectorAll('.line').forEach(el => el.classList.remove('active'));
        
        const d1 = parseFloat(document.getElementById('dst1').value);
        const d2 = parseFloat(document.getElementById('dst2').value);
        const d3 = parseFloat(document.getElementById('dst3').value) / 1000;
        const cond = document.getElementById('cond').value;

        let power = 7.0; // Starting Power
        let points = [power];

        // Calc Logic
        // Seg 1
        let loss1 = (d1 * 0.35) + 0.5;
        if(cond === '3') loss1 += 50; // CUT
        power -= loss1;
        power -= 7.2; // Splitter 1:4
        if(cond === '2') power -= 3; // Dirty
        let pFDT = power; points.push(pFDT);

        // Seg 2
        power -= (d2 * 0.35) + 0.5;
        power -= 10.5; // Splitter 1:8
        let pFAT = power; points.push(pFAT);

        // Seg 3
        let loss3 = (d3 * 0.35) + 0.5;
        if(cond === '1') loss3 += 15; // Bend
        power -= loss3;
        let pONT = power; points.push(pONT);

        // Animation Sequence
        animateFlow(1);

        // Result Display
        setTimeout(() => {
            document.getElementById('r-fdt').innerText = pFDT.toFixed(2);
            document.getElementById('r-fat').innerText = pFAT.toFixed(2);
            const term = document.getElementById('r-ont');
            term.innerText = pONT.toFixed(2) + " dBm";
            
            // Color coding result
            if(pONT > -27 && pONT < -8) term.style.color = "#00ff41"; // Green
            else term.style.color = "#ff0033"; // Red

            drawGraph(points);
        }, 1200);
    }

    function animateFlow(step) {
        if(step > 3) return;
        document.getElementById('l-'+step).classList.add('active');
        setTimeout(() => animateFlow(step+1), 400);
    }

    function drawGraph(data) {
        const ctx = document.getElementById('mainChart').getContext('2d');
        if(chartInstance) chartInstance.destroy();
        
        chartInstance = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['START', 'NODE A', 'NODE B', 'END'],
                datasets: [{
                    label: 'Signal Level',
                    data: data,
                    borderColor: '#00ff41',
                    borderWidth: 1,
                    backgroundColor: 'rgba(0, 255, 65, 0.1)',
                    fill: true,
                    tension: 0
                }]
            },
            options: {
                scales: {
                    y: { grid: { color: '#222' }, ticks: { color: '#666' } },
                    x: { grid: { color: '#222' }, ticks: { color: '#666' } }
                },
                plugins: { legend: { display: false } }
            }
        });
    }
</script>

</body>
</html>

ايرث بغداد للاتصالات والانترنت

إيرث بغداد للاتصالات والإنترنت هي مزود خدمات إنترنت في العراق، وتحديدًا في محافظة الديوانية، وتعمل كوكيل معتمد لشركة إيرثلنك  ونقطة بيع معتمدة للمشروع الوطني 

