crud

big crud

This tailwind example is contributed by Hacker Development, on 01-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Table

Author Hacker Development

511

Fork Fullscreen

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>نظام بيع المأكولات</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      direction: rtl;
      padding: 20px;
      background: #f0f3f4;
      transition: background 0.3s ease;
    }

h2 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 20px;
    }

.form-group, .buyer-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 15px;
    }

input, select {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      width: 200px;
      transition: border-color 0.3s ease;
    }

input:focus, select:focus {
      border-color: #3498db;
    }

button {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      background-color: #3498db;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

button:hover {
      background-color: #2980b9;
    }

.form-group input, .form-group select, .form-group button {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

.btn-container {
      text-align: center;
      margin-top: 30px;
    }

/* Style for the invention form */
    .invention-form {
      display: none;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      margin-top: 20px;
    }

.invention-form input, .invention-form button {
      width: 200px;
    }

/* جدول المأكولات */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

th, td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
      font-size: 16px;
    }

th {
      background-color: #3498db;
      color: white;
    }

td {
      background-color: #ecf0f1;
    }

tr:hover {
      background-color: #f1f1f1;
    }

.invoice-summary {
      font-size: 18px;
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
    }

/* التأثيرات على الأزرار */
    .btn-container button {
      padding: 10px 20px;
      background-color: #2ecc71;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

.btn-container button:hover {
      background-color: #27ae60;
    }
  </style>
</head>
<body>

<h2>🍽️ نظام بيع المأكولات</h2>

<div class="buyer-info">
    <input type="text" id="buyerName" placeholder="اسم المشتري">
    <input type="text" id="buyerPhone" placeholder="رقم الهاتف">
    <input type="text" id="buyerLocation" placeholder="المكان">
    <label><input type="checkbox" id="superDelivery"> سوبر دليفري</label>
  </div>

<div class="form-group">
    <select id="productSelect" onchange="toggleCustomInput()">
      <option value="">اختر منتج</option>
      <option value="بيتزا">بيتزا</option>
      <option value="برجر">برجر</option>
      <option value="شاورما">شاورما</option>
      <option value="كريب">كريب</option>
      <option value="بطاطس">بطاطس</option>
      <option value="عصير">عصير</option>
      <option value="مشروبات غازية">مشروبات غازية</option>
      <option value="custom">غير ذلك</option>
    </select>
    <input type="text" id="customProduct" placeholder="اسم المنتج" style="display:none;">
    <input type="number" id="price" placeholder="سعر البيع">
    <input type="number" id="cost" placeholder="سعر الشراء">
    <input type="number" id="quantity" placeholder="الكمية">
    <select id="categorySelect">
      <option value="">اختر الفئة</option>
      <option value="فطار">فطار</option>
      <option value="غداء">غداء</option>
      <option value="عشاء">عشاء</option>
      <option value="حلويات">حلويات</option>
    </select>
    <button onclick="addProduct()">إضافة المنتج</button>
  </div>

<div class="btn-container">
    <button onclick="showInventionForm()">اختراع وجبة جديدة</button>
  </div>

<div class="invention-form" id="inventionForm">
    <h3>اختراع وجبة جديدة</h3>
    <input type="text" id="inventedDishName" placeholder="اسم الوجبة" required>
    <textarea id="inventedDishIngredients" placeholder="المكونات (افصل بين المكونات بفواصل)" rows="4" required></textarea>
    <button onclick="saveInventedDish()">حفظ الوجبة</button>
  </div>

<table>
    <thead>
      <tr>
        <th>المنتج</th>
        <th>الفئة</th>
        <th>سعر البيع</th>
        <th>سعر الشراء</th>
        <th>الكمية</th>
        <th>الربح</th>
        <th>الإجراءات</th>
      </tr>
    </thead>
    <tbody id="productList"></tbody>
  </table>

<div class="btn-container">
    <button class="print-btn" onclick="printInvoice()">🧾 طباعة البون</button>
  </div>

function saveProducts() {
      localStorage.setItem('products', JSON.stringify(products));
    }

function loadProducts() {
      const data = localStorage.getItem('products');
      if (data) products = JSON.parse(data);
    }

function addProduct() {
      const select = document.getElementById('productSelect');
      const name = select.value === 'custom' ? document.getElementById('customProduct').value.trim() : select.value;
      const price = parseFloat(document.getElementById('price').value);
      const cost = parseFloat(document.getElementById('cost').value);
      const quantity = parseInt(document.getElementById('quantity').value);
      const category = document.getElementById('categorySelect').value;

if (!name || !category || isNaN(price) || isNaN(cost) || isNaN(quantity)) {
        return alert("يرجى ملء جميع الحقول");
      }

products.push({ name, category, price, cost, quantity });
      saveProducts();
      renderProducts();

document.getElementById('customProduct').value = '';
      document.getElementById('price').value = '';
      document.getElementById('cost').value = '';
      document.getElementById('quantity').value = '';
      document.getElementById('productSelect').value = '';
      document.getElementById('categorySelect').value = '';
      toggleCustomInput();
    }

function toggleCustomInput() {
      const select = document.getElementById('productSelect');
      const customInput = document.getElementById('customProduct');
      customInput.style.display = select.value === 'custom' ? 'inline-block' : 'none';
    }

function deleteProduct(index) {
      if (confirm("هل أنت متأكد من الحذف؟")) {
        products.splice(index, 1);
        saveProducts();
        renderProducts();
      }
    }

function searchProducts() {
      const term = document.getElementById('search').value.toLowerCase();
      const rows = document.querySelectorAll('#productList tr');
      rows.forEach(row => {
        const productName = row.children[0].textContent.toLowerCase();
        row.style.display = productName.includes(term) ? '' : 'none';
      });
    }

function printInvoice() {
      const buyerName = document.getElementById('buyerName').value.trim();
      const buyerPhone = document.getElementById('buyerPhone').value.trim();
      const buyerLocation = document.getElementById('buyerLocation').value.trim();
      const isSuperDelivery = document.getElementById('superDelivery').checked;

if (!buyerName || !buyerPhone || !buyerLocation) {
        return alert("يرجى إدخال بيانات المشتري أولاً");
      }

if (isSuperDelivery) {
        total += 30;
        html += `<tr><td colspan="4">سوبر دليفري</td><td>30</td></tr>`;
      }

html += `</tbody></table>
        <div class="invoice-summary">الإجمالي الكلي: ${total} جنيه</div>
        <p style="text-align:center; margin-top:50px;">شكراً لتعاملكم معنا</p>
        </body></html>`;

win.document.write(html);
      win.document.close();
      win.print();
    }

function showInventionForm() {
      const form = document.getElementById('inventionForm');
      form.style.display = form.style.display === 'none' ? 'flex' : 'none';
    }

function saveInventedDish() {
      const name = document.getElementById('inventedDishName').value.trim();
      const ingredients = document.getElementById('inventedDishIngredients').value.trim();

if (!name || !ingredients) {
        alert("يرجى ملء جميع الحقول");
        return;
      }

// Optionally, add the invented dish to your products or handle it as needed
      alert(`تم اختراع الوجبة: ${name} \nالمكونات: ${ingredients}`);
      
      // Reset the form
      document.getElementById('inventedDishName').value = '';
      document.getElementById('inventedDishIngredients').value = '';
      document.getElementById('inventionForm').style.display = 'none';
    }

loadProducts();
    renderProducts();
  </script>

</body>
</html>

Related Examples

Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

3.3k
Modern Responsive Product Table Design with TailwindCSS
This is a clean and responsive product listing table built with HTML and TailwindCSS. The table displays product images, names, unit prices, quantities, and total costs in a structured format. It adapts to different screen sizes by enabling horizontal scrolling on smaller devices. The design is minimal yet functional, making it ideal for e-commerce websites, order summaries, and invoice pages. Let me know if you need any refinements!

Author:
SHARIFUL ISLAM

5 months ago

839
Table
Table with image and status with pagination buttons

Author:
Abhiraj

6 months ago

1.5k
Table for user management
It shows a table of users with their names, email, and role. The table also has two buttons for each row: one to save changes made to the user's details and another to delete the user.

Author:
I.P. Leroy

2 years ago

18k
Nutrition facts table
Show Nutrient contents with a stripped table

Author:
Kofi Osei

2 years ago

12.7k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

272
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

2 months ago

234
Simple table with border

Author:
Kairi Greene

2 years ago

11.8k
Table
tables

Author:
Aman kumar

1 year ago

4.1k
Table with progress column

Author:
Sophia Baker

2 years ago

11.7k
Stripped table with tailwind css

Author:
Task Master

2 years ago

14.7k
Table
tables

Author:
Aman kumar

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components