Studyhdhsgxvv2hh

HTML-CSS
1
منظومة المبرمجين body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } 
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    header {
        background-color: #333;
        color: #fff;
        padding: 1rem;
        text-align: center;
    }

    .product-form {
        background-color: #fff;
        padding: 1rem;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
    }

    .product-form label {
        display: block;
        margin-top: 1rem;
    }

    .product-form input {
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.5rem;
        box-sizing: border-box;
    }

    .product-form button {
        padding: 0.5rem 1rem;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 1rem;
    }

    .product {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .product img {
        max-width: 100px;
        height: auto;
        margin-bottom: 1rem;
    }

    .product button {
        padding: 0.5rem 1rem;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 0.5rem;
    }

    .product button.delete {
        background-color: #dc3545;
    }
</style>

إدارة المنتجات - شركة أطلس

<div class="container">
    <form class="product-form" id="product-form">
        <label for="productName">اسم المنتج:</label>
        <input type="text" id="productName" required>
        
        <label for="productImage">اختر صورة:</label>
        <input type="file" id="productImage" accept="image/*" required>
        
        <label for="productSpecs">المواصفات:</label>
        <input type="text" id="productSpecs" required>
        
        <label for="productCost">سعر التكلفة:</label>
        <input type="number" id="productCost" step="0.01" required>
        
        <label for="productPrice">سعر البيع:</label>
        <input type="number" id="productPrice" step="0.01" required>
        
        <label for="productQuantity">الكمية:</label>
        <input type="number" id="productQuantity" required>
        
        <button type="button" onclick="addProduct()">إضافة منتج</button>
    </form>

    <h2>المنتجات</h2>
    <div id="products-container">
        <!-- المنتجات ستظهر هنا -->
    </div>
</div>

<script>
    function addProduct() {
        var name = document.getElementById('productName').value;
        var imageFile = document.getElementById('productImage').files[0];
        var specs = document.getElementById('productSpecs').value;
        var cost = document.getElementById('productCost').value;
        var price = document.getElementById('productPrice').value;
        var quantity = document.getElementById('productQuantity').value;

        if (name && imageFile && specs && cost && price && quantity) {
            var reader = new FileReader();

            reader.onload = function(event) {
                var imageData = event.target.result;
                var products = JSON.parse(localStorage.getItem('products')) || [];
                products.push({
                    name: name,
                    image: imageData,
                    specs: specs,
                    cost: parseFloat(cost),
                    price: parseFloat(price),
                    quantity: parseInt(quantity)
                });
                localStorage.setItem('products', JSON.stringify(products));
                displayProducts();
                document.getElementById('product-form').reset();
            };

            reader.readAsDataURL(imageFile);
        } else {
            alert('يرجى ملء جميع الحقول.');
        }
    }

    function displayProducts() {
        var products = JSON.parse(localStorage.getItem('products')) || [];
        var productsContainer = document.getElementById('products-container');
        productsContainer.innerHTML = '';

        products.forEach(function(product, index) {
            var productHTML = `
                <div class="product">
                    <img src="${product.image}" alt="${product.name}">
                    <h3>${product.name}</h3>
                    <p>سعر التكلفة: ${product.cost} دينار</p>
                    <p>سعر البيع: ${product.price} دينار</p>
                    <p>الكمية: ${product.quantity}</p>
                    <p>المواصفات: ${product.specs}</p>
                    <button onclick="editProduct(${index})">تعديل</button>
                    <button class="delete" onclick="deleteProduct(${index})">حذف</button>
                </div>
            `;
            productsContainer.innerHTML += productHTML;
        });
    }

    function editProduct(index) {
        var products = JSON.parse(localStorage.getItem('products')) || [];
        var product = products[index];

        document.getElementById('productName').value = product.name;
        document.getElementById('productSpecs').value = product.specs;
        document.getElementById('productCost').value = product.cost;
        document.getElementById('productPrice').value = product.price;
        document.getElementById('productQuantity').value = product.quantity;

        // تغيير وظيفة الزر ليصبح "تحديث"
        document.querySelector('button').innerText = 'تحديث منتج';
        document.querySelector('button').setAttribute('onclick', `updateProduct(${index})`);
    }

    function updateProduct(index) {
        var name = document.getElementById('productName').value;
        var specs = document.getElementById('productSpecs').value;
        var cost = document.getElementById('productCost').value;
        var price = document.getElementById('productPrice').value;
        var quantity = document.getElementById('productQuantity').value;

        if (name && specs && cost && price && quantity) {
            var products = JSON.parse(localStorage.getItem('products')) || [];
            products[index] = {
                name: name,
                image: products[index].image, // صورة لا يتم تعديلها
                specs: specs,
                cost: parseFloat(cost),
                price: parseFloat(price),
                quantity: parseInt(quantity)
            };
            localStorage.setItem('products', JSON.stringify(products));
            displayProducts();
            document.getElementById('product-form').reset();

            // إعادة زر الإضافة
            document.querySelector('button').innerText = 'إضافة منتج';
            document.querySelector('button').setAttribute('onclick', 'addProduct()');
        } else {
            alert('يرجى ملء جميع الحقول.');
        }
    }

    function deleteProduct(index) {
        var products = JSON.parse(localStorage.getItem('products')) || [];
        products.splice(index, 1);
        localStorage.setItem('products', JSON.stringify(products));
        displayProducts();
    }

    window.onload = function() {
        displayProducts();
    };
</script>
2

Please provide a proper title and some context for this thread

Otherwise, we will just close it.