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

221

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

Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

3 months ago

933
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

13.1k
Datatable
Datatable example with datatable.js with search, sort, pagination

Author:
R.P Ketan

2 years ago

23.4k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

5 months ago

816
Tailwind CSS Datatable
Use this datatable component from Flowbite to power interactivity for table like pagination, search, sorting, and more: https://flowbite.com/docs/plugins/datatables/

Author:
Zoltán Szőgyényi

10 months ago

1.9k
Table

Author:
Anonymous

1 year ago

6.1k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

4 months ago

1.2k
Table
tables

Author:
Aman kumar

11 months ago

3.8k
Pricing Table

Author:
Akshay

2 years ago

10.3k
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

3.1k
Simple table with border

Author:
Kairi Greene

2 years ago

11.7k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

8 months ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components