DEV Community

Mohammed Al-Makhlafi
Mohammed Al-Makhlafi

Posted on

Untitledmazina-2026

#codepen #programming #webdev #ai


  1. <!DOCTYPE html>

    نظام مازينا الذكي 2026 - الإصدار الملون :root { --primary: #003366; --gold: #D4AF37; --bg: #f0f2f5; --success: #28a745; --danger: #dc3545; } body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg); margin: 0; padding: 0; } .header { background: var(--primary); color: white; text-align: center; padding: 15px; border-bottom: 5px solid var(--gold); } .ticker-bar { background: #fff; border-bottom: 2px solid #ddd; padding: 10px; font-weight: bold; color: var(--primary); font-size: 1.1rem; } .container { padding: 15px; max-width: 600px; margin: auto; } .tank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .tank-card { background: white; padding: 15px; border-radius: 12px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 5px solid var(--gold); } .total-card { grid-column: span 2; background: var(--primary); color: var(--gold); } .card { background: white; border-radius: 15px; padding: 20px; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-right: 10px solid #ccc; } .hidden { display: none; } input, select, textarea { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid #ddd; box-sizing: border-box; font-weight: bold; } .btn-action { background: var(--success); color: white; border: none; padding: 14px; width: 100%; border-radius: 8px; font-weight: bold; cursor: pointer; } /* تنسيقات التلوين الجديدة */ .log-in { background-color: #e8f5e9; border-right: 5px solid var(--success); } /* أخضر للتوريد */ .log-out { background-color: #ffebee; border-right: 5px solid var(--danger); } /* أحمر للسحب */ #invoiceModal { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; z-index:2000; } .modal-content { background:white; padding:10px; border-radius:10px; max-width:90%; max-height:90%; text-align:center; } .modal-content img { max-width:100%; max-height:80vh; border-radius:5px; } #ai-bot { position: fixed; bottom: 20px; left: 20px; background: var(--gold); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; cursor: pointer; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .ai-window { position: fixed; bottom: 90px; left: 20px; width: 330px; background: white; border-radius: 15px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); z-index: 1001; padding: 15px; display: none; } @media print { .no-print { display: none !important; } } 
    <h3>📄 صورة الفاتورة</h3>
    <img id="modalImg" alt="الفاتورة">
    <br>
    إغلاق




<h1>🛢️ مـحطـة مـازيـنـا 2026</h1>



تحميل البيانات...




    الخزان الحديد رقم واحد 1<br><b id="tk1">0</b>
    الخزان الأحمر رقم 2<br><b id="tk2">0</b>
    الخزان الأخضر رقم 3<br><b id="tk4">0</b>
    الخزان الأبيض رقم 4<br><b id="tk3">0</b>
    📊 المجموع الكلي للوقود<br><b id="totalStock">0</b> لتر



    <b>تحديد الهوية للدخول:</b>

        -- اختر اسمك --
        أحمد طه (المورد)
        محمد طه (المسؤول)
        مراد طه (الادارة العليا)
        هشام عقلان (الادارة العليا)
        علي هشام (الادارة الوسطى)





        <h3>📦 توريد وقود جديد</h3>

            الخزان الحديد رقم 1
            الخزان الأحمر رقم 2
            الخزان الأخضر رقم 3
            الخزان الأبيض رقم 4


        إرفاق الفاتورة:

        حفظ التوريد



        <h3>📤 سحب وقود جديد</h3>

            الخزان الحديد رقم 1
            الخزان الأحمر رقم 2
            الخزان الأخضر رقم 3
            الخزان الأبيض رقم 4




        اعتماد السحب




            <h3>📋 سجل العمليات الملون</h3>
            📥 PDF
Enter fullscreen mode Exit fullscreen mode

🤖

<h4>المساعد الذكي (مازينا AI)</h4>
بانتظار تسجيل الدخول...


    إرسال




let db = JSON.parse(localStorage.getItem('mazina_v2026_color')) || {
    stock: { tk1: 3500, tk2: 1700, tk3: 0, tk4: 2000 },
    records: [],
    visits: []
};

function sync() {
    localStorage.setItem('mazina_v2026_color', JSON.stringify(db));
    updateView();
}

function initApp() {
    let user = document.getElementById("userSelector").value;
    if(!user) return;
    db.visits.push({ name: user, date: new Date().toLocaleDateString('ar-YE'), time: new Date().toLocaleTimeString('ar-YE') });
    document.getElementById("mainUI").classList.remove("hidden");
    document.getElementById("ahmedPanel").className = (user === 'أحمد طه' ? 'card' : 'hidden');
    document.getElementById("mohammedPanel").className = (user === 'محمد طه' ? 'card' : 'hidden');
    document.getElementById("ai-res").innerText = `مرحباً ${user.split(" ")[0]}! كيف يمكنني مساعدتك اليوم؟`;
    sync();
}

async function handleSave(type) {
    let user = document.getElementById("userSelector").value;
    let qty = parseInt(type === 'توريد' ? document.getElementById("inQty").value : document.getElementById("outQty").value);
    let tank = type === 'توريد' ? document.getElementById("inTank").value : document.getElementById("outTank").value;

    if(!qty) return alert("الرجاء إدخال الكمية!");
    if(type === 'سحب' &amp;&amp; db.stock[tank] &lt; qty) return alert("عذراً، الرصيد غير كافٍ!");

    let imageData = "";
    if(type === 'توريد') {
        let file = document.getElementById("invoiceInput").files[0];
        if(file) imageData = await toBase64(file);
    }

    db.stock[tank] += (type === 'توريد' ? qty : -qty);
    db.records.push({
        id: Date.now(),
        type, user, qty, tank,
        target: document.getElementById("outTarget")?.value || "تعبئة",
        notes: document.getElementById("outNotes")?.value || "",
        image: imageData,
        date: new Date().toLocaleDateString('ar-YE'),
        time: new Date().toLocaleTimeString('ar-YE')
    });

    document.getElementById("invoiceInput").value = "";
    sync();
}

const toBase64 = file =&gt; new Promise((res, rej) =&gt; {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () =&gt; res(reader.result);
    reader.onerror = error =&gt; rej(error);
});

function updateView() {
    let total = 0;
    let names = { tk1: "الحديد 1", tk2: "الأحمر 2", tk3: "الأبيض 4", tk4: "الأخضر 3" };
    for(let key in db.stock) {
        document.getElementById(key).innerText = db.stock[key];
        total += db.stock[key];
    }
    document.getElementById("totalStock").innerText = total;

    let currentUser = document.getElementById("userSelector").value;
    let html = "";
    db.records.slice().reverse().forEach(r =&gt; {
        let actions = (currentUser === 'محمد طه') ? 
            `&lt;span onclick="editEntry(${r.id})" style="cursor:pointer; margin-left:8px;"&gt;🖊️&lt;/span&gt;
             &lt;span onclick="deleteEntry(${r.id})" style="cursor:pointer; color:red;"&gt;🗑️&lt;/span&gt;` : '';

        let nameTag = r.image ? `&lt;b onclick="showInvoice('${r.id}')" style="color:var(--primary); cursor:pointer; text-decoration:underline;"&gt;${r.user}&lt;/b&gt;` : `&lt;b&gt;${r.user}&lt;/b&gt;`;
        let colorClass = (r.type === 'توريد') ? 'log-in' : 'log-out';

        html += `&lt;div class="${colorClass}" style="padding:10px; margin-bottom:5px; border-radius:8px; font-size:0.85rem;"&gt;
            ${actions} ${nameTag}: &lt;span style="font-weight:bold; color:${r.type === 'سحب' ? 'red' : 'green'};"&gt;${r.type}&lt;/span&gt; ${r.qty}L (${names[r.tank]})&lt;br&gt;
            &lt;small&gt;${r.date} | ${r.time} | الوجهة: ${r.target}&lt;/small&gt;
            ${r.notes ? `&lt;div style="color:var(--primary); font-style:italic;"&gt;ملاحظة: ${r.notes}&lt;/div&gt;` : ''}
        &lt;/div&gt;`;
    });
    document.getElementById("logsDisplay").innerHTML = html;
}

function showInvoice(id) {
    let r = db.records.find(x =&gt; x.id == id);
    if(r &amp;&amp; r.image) {
        document.getElementById("modalImg").src = r.image;
        document.getElementById("invoiceModal").style.display = "flex";
    }
}

function closeInvoice() { document.getElementById("invoiceModal").style.display = "none"; }

function askAI() {
    let q = document.getElementById("aiInp").value;
    let res = document.getElementById("ai-res");
    let user = document.getElementById("userSelector").value;
    let today = new Date().toLocaleDateString('ar-YE');

    if(q.includes("زار النظام") &amp;&amp; user === "محمد طه") {
        res.innerHTML = "&lt;b&gt;آخر الزوار:&lt;/b&gt;&lt;br&gt;" + db.visits.slice(-5).map(v =&gt; `${v.name} (${v.time})`).join("&lt;br&gt;");
    } else if(q.includes("سحب") &amp;&amp; q.includes("يوم")) {
        let total = db.records.filter(r =&gt; r.type === 'سحب' &amp;&amp; r.date === today).reduce((a,b)=&gt;a+b.qty, 0);
        res.innerText = `إجمالي سحب اليوم (${today}) هو ${total} لتر.`;
    } else if(q.includes("توريد")) {
        let total = db.records.filter(r =&gt; r.type === 'توريد').reduce((a,b)=&gt;a+b.qty, 0);
        res.innerText = `إجمالي التوريدات المسجلة: ${total} لتر.`;
    } else if(q.includes("المخزون")) {
        let total = Object.values(db.stock).reduce((a,b)=&gt;a+b);
        res.innerText = `المخزون الحالي: ${total} لتر.`;
    } else {
        res.innerText = "يمكنني تزويدك بمعلومات السحب، التوريد، والمخزون.";
    }
    document.getElementById("aiInp").value = "";
}

function deleteEntry(id) {
    if(confirm("هل تريد حذف هذه العملية؟")) {
        let r = db.records.find(x =&gt; x.id === id);
        if(r.type === 'سحب') db.stock[r.tank] += r.qty; else db.stock[r.tank] -= r.qty;
        db.records = db.records.filter(x =&gt; x.id !== id);
        sync();
    }
}

function editEntry(id) {
    let r = db.records.find(x =&gt; x.id === id);
    let nD = prompt("تعديل التاريخ:", r.date);
    let nT = prompt("تعديل الوقت:", r.time);
    if(nD &amp;&amp; nT) { r.date = nD; r.time = nT; sync(); }
}

function downloadPDF() {
    const element = document.getElementById('printableContent');
    html2pdf().from(element).save('سجل_مازينا_2026.pdf');
}

function toggleAI() { let w = document.getElementById("aiWindow"); w.style.display = (w.style.display==='block'?'none':'block'); }

setInterval(() =&gt; {
    let n = new Date();
    document.getElementById("liveTicker").innerText = `اليوم: ${n.toLocaleDateString('ar-YE', {weekday:'long'})} | ${n.toLocaleDateString('ar-YE')} | ${n.toLocaleTimeString('ar-YE')}`;
}, 1000);

updateView();
Enter fullscreen mode Exit fullscreen mode

Top comments (0)