Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit 38495ff0 authored by 65160256's avatar 65160256
Browse files

Initial commit

parents
Branches
No related tags found
No related merge requests found
Showing
with 2179 additions and 0 deletions
/node_modules/
.env
\ No newline at end of file
app.js 0 → 100644
const express = require('express');
const session = require('express-session');
const app = express();
const bodyParser = require('body-parser');
const path = require('path');
const dotenv = require('dotenv');
const routes = require('./routes/index');
dotenv.config();
// ใช้ session
app.use(session({
secret: 'your_secret_key',
resave: false,
saveUninitialized: true,
cookie: { secure: false } // ใช้ false สำหรับการพัฒนาในเครื่อง
}));
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
const mysql = require('mysql2');
require('dotenv').config();
const pool = mysql.createPool({
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME
});
module.exports = pool.promise();
const bcrypt = require('bcrypt');
const db = require('../config/db'); // เชื่อมต่อฐานข้อมูล
// ฟังก์ชันการลงทะเบียนผู้ใช้
exports.registerUser = async (req, res) => {
const { username, password } = req.body;
try {
// เข้ารหัสรหัสผ่านก่อนที่จะบันทึก
const hashedPassword = await bcrypt.hash(password, 10);
// บันทึกผู้ใช้ใหม่ในฐานข้อมูล
await db.execute('INSERT INTO users (username, password) VALUES (?, ?)', [username, hashedPassword]);
res.status(201).send('User registered successfully');
} catch (err) {
console.error(err);
res.status(500).send('Error registering user');
}
};
// ฟังก์ชันการเข้าสู่ระบบ
exports.loginUser = async (req, res) => {
const { username, password } = req.body;
try {
// ค้นหาผู้ใช้จากฐานข้อมูล
const [rows] = await db.execute('SELECT * FROM users WHERE username = ?', [username]);
if (rows.length === 0) {
return res.status(400).send('Invalid username or password');
}
const user = rows[0];
// ตรวจสอบรหัสผ่านที่ผู้ใช้กรอกกับรหัสผ่านที่เก็บในฐานข้อมูล
const match = await bcrypt.compare(password, user.password);
if (!match) {
return res.status(400).send('Invalid username or password');
}
// หากการเข้าสู่ระบบสำเร็จ เก็บข้อมูลผู้ใช้ใน session
req.session.user = user; // ใช้ session เพื่อเก็บข้อมูลผู้ใช้
res.redirect('/'); // หรือ redirect ไปยังหน้าอื่นๆ ที่ต้องการ
} catch (err) {
console.error(err);
res.status(500).send('Error logging in');
}
};
const db = require('../config/db'); // เชื่อมต่อกับฐานข้อมูล
// ฟังก์ชันบันทึกแบรนด์ใหม่
exports.createBrand = (req, res) => {
const { name } = req.body;
// ตรวจสอบข้อมูล
if (!name) {
return res.status(400).send('Brand name is required');
}
// คำสั่ง SQL สำหรับเพิ่มข้อมูลแบรนด์
const query = 'INSERT INTO brands (name) VALUES (?)';
// ใช้ mysql2 เพื่อบันทึกข้อมูล
db.execute(query, [name])
.then(([results, fields]) => {
res.redirect('/brand-list'); // ไปที่หน้ารายการแบรนด์
})
.catch((err) => {
console.error(err);
res.status(500).send('Error creating brand');
});
};
// ฟังก์ชันแสดงฟอร์มการสร้างแบรนด์
exports.createBrandForm = (req, res) => {
res.render('create-brand', {
title: 'Create Brand'
});
};
// ฟังก์ชันแสดงรายชื่อแบรนด์
exports.getBrandList = (req, res) => {
const query = 'SELECT * FROM brands';
db.execute(query)
.then(([rows, fields]) => {
res.render('brand-list', {
title: 'Brand List',
brands: rows,
});
})
.catch((err) => {
console.error(err);
res.status(500).send('Error retrieving brand list');
});
};
// ฟังก์ชันแสดงฟอร์มการแก้ไขแบรนด์
exports.editBrandForm = (req, res) => {
const brandId = req.params.id;
// คำสั่ง SQL เพื่อดึงข้อมูลแบรนด์
const query = 'SELECT * FROM brands WHERE id = ?';
db.execute(query, [brandId])
.then(([rows, fields]) => {
if (rows.length === 0) {
return res.status(404).send('Brand not found');
}
res.render('edit-brand', {
title: 'Edit Brand',
brand: rows[0],
});
})
.catch((err) => {
console.error(err);
res.status(500).send('Error retrieving brand');
});
};
// ฟังก์ชันอัปเดตข้อมูลแบรนด์
exports.updateBrand = (req, res) => {
const { name } = req.body;
const brandId = req.params.id;
// คำสั่ง SQL สำหรับอัปเดตแบรนด์
const query = 'UPDATE brands SET name = ? WHERE id = ?';
db.execute(query, [name, brandId])
.then(([results, fields]) => {
res.redirect('/brand-list'); // ไปที่หน้ารายการแบรนด์
})
.catch((err) => {
console.error(err);
res.status(500).send('Error updating brand');
});
};
// ฟังก์ชันลบแบรนด์
exports.deleteBrand = (req, res) => {
const brandId = req.params.id;
// คำสั่ง SQL สำหรับลบข้อมูลแบรนด์
const query = 'DELETE FROM brands WHERE id = ?';
db.execute(query, [brandId])
.then(([results, fields]) => {
res.redirect('/brand-list'); // ไปที่หน้ารายการแบรนด์
})
.catch((err) => {
console.error(err);
res.status(500).send('Error deleting brand');
});
};
\ No newline at end of file
const db = require('../config/db'); // เชื่อมต่อกับฐานข้อมูล
// ฟังก์ชั่นเพื่อแสดงฟอร์มการสร้างหมวดหมู่
exports.createCategoryForm = (req, res) => {
res.render('create-category', {
title: 'Create New Category',
});
};
// ฟังก์ชั่นเพื่อบันทึกหมวดหมู่ใหม่ลงในฐานข้อมูล
exports.createCategory = (req, res) => {
const { name } = req.body; // รับข้อมูลจากฟอร์ม
// ตรวจสอบว่าไม่มีค่าหมวดหมู่ซ้ำ
if (!name) {
return res.status(400).send('Category name is required');
}
// คำสั่ง SQL สำหรับเพิ่มหมวดหมู่
const query = 'INSERT INTO categories (name) VALUES (?)';
// ใช้ mysql2 เพื่อส่งคำสั่ง SQL
db.execute(query, [name])
.then(([results, fields]) => {
// ถ้าบันทึกสำเร็จ, redirect ไปยังหน้าหมวดหมู่ทั้งหมด
res.redirect('/');
})
.catch((err) => {
console.error(err);
res.status(500).send('Error creating category');
});
};
// ฟังก์ชั่นเพื่อแสดงรายการหมวดหมู่สินค้า
exports.getCategoryList = (req, res) => {
const query = 'SELECT * FROM categories';
db.execute(query)
.then(([categories, fields]) => {
res.render('category-list', {
title: 'Category List',
categories: categories,
});
})
.catch((err) => {
console.error(err);
res.status(500).send('Error retrieving categories');
});
};
// ฟังก์ชันสำหรับแสดงฟอร์มการแก้ไขหมวดหมู่
exports.editCategoryForm = (req, res) => {
const categoryId = req.params.id;
const query = 'SELECT * FROM categories WHERE id = ?';
db.execute(query, [categoryId])
.then(([category, fields]) => {
res.render('edit-category', {
title: 'Edit Category',
category: category[0],
});
})
.catch((err) => {
console.error(err);
res.status(500).send('Error retrieving category');
});
};
// ฟังก์ชันสำหรับอัปเดตหมวดหมู่
exports.updateCategory = (req, res) => {
const categoryId = req.params.id;
const { name } = req.body;
const query = 'UPDATE categories SET name = ? WHERE id = ?';
db.execute(query, [name, categoryId])
.then(([results, fields]) => {
res.redirect('/category-list');
})
.catch((err) => {
console.error(err);
res.status(500).send('Error updating category');
});
};
// ฟังก์ชันสำหรับลบหมวดหมู่
exports.deleteCategory = (req, res) => {
const categoryId = req.params.id;
const query = 'DELETE FROM categories WHERE id = ?';
db.execute(query, [categoryId])
.then(([results, fields]) => {
res.redirect('/category-list');
})
.catch((err) => {
console.error(err);
res.status(500).send('Error deleting category');
});
};
\ No newline at end of file
const productModel = require('../models/product');
const db = require('../config/db');
// ฟังก์ชันการแสดงฟอร์มการสร้างสินค้า
// ฟังก์ชันการแสดงฟอร์มการสร้างสินค้า
// ฟังก์ชันการแสดงฟอร์มการสร้างสินค้า
exports.createProductForm = async (req, res) => {
try {
// ดึงข้อมูลหมวดหมู่, แบรนด์, และผู้จัดจำหน่าย
const [categories] = await db.execute('SELECT * FROM categories');
const [brands] = await db.execute('SELECT * FROM brands');
const [suppliers] = await db.execute('SELECT * FROM suppliers');
// ส่งข้อมูลไปยังหน้า create-product.ejs
res.render('create-product', {
categories, // ส่งข้อมูลหมวดหมู่
brands, // ส่งข้อมูลแบรนด์
suppliers // ส่งข้อมูลผู้จัดจำหน่าย
});
} catch (err) {
console.error(err);
res.status(500).send('Error fetching data');
}
};
// สร้างสินค้าใหม่
// ฟังก์ชันการสร้างสินค้า
// ฟังก์ชันการสร้างสินค้าใหม่พร้อมการตรวจสอบข้อมูล
// ฟังก์ชันสำหรับการสร้างสินค้าใหม่
exports.createProduct = async (req, res) => {
const { name, quantity, categoryId, supplierId, brandId } = req.body; // รับข้อมูลจากฟอร์ม
try {
// เพิ่มสินค้าลงในฐานข้อมูล
await db.execute(
'INSERT INTO products (name, quantity, category_id, supplier_id, brand_id) VALUES (?, ?, ?, ?, ?)',
[name, quantity, categoryId, supplierId, brandId]
);
// หลังจากสร้างสินค้าเสร็จ, redirect ไปที่หน้ารายการสินค้า
res.redirect('/');
} catch (err) {
console.error(err);
res.status(500).send('Error creating product');
}
};
// แสดงข้อมูลสินค้าทั้งหมด
exports.getProducts = async (req, res) => {
try {
const [rows] = await productModel.getProducts();
res.render('index', { products: rows });
} catch (err) {
console.error(err);
res.status(500).send('Error fetching products');
}
};
// ฟังก์ชันการอัปเดตข้อมูลสินค้า (ชื่อ, หมวดหมู่, แบรนด์)
exports.updateProduct = async (req, res) => {
const { id, name, quantity, categoryId, supplierId, brandId } = req.body; // รับข้อมูลจากฟอร์ม
try {
// อัปเดตข้อมูลสินค้าทั้งหมด
await db.execute(
'UPDATE products SET name = ?, quantity = ?, category_id = ?, supplier_id = ?, brand_id = ? WHERE id = ?',
[name, quantity, categoryId, supplierId, brandId, id]
);
// หลังจากอัปเดตสินค้าเสร็จ, redirect ไปที่หน้ารายการสินค้า
res.redirect('/');
} catch (err) {
console.error(err);
res.status(500).send('Error updating product');
}
};
// ลบข้อมูลสินค้า
exports.deleteProduct = async (req, res) => {
const { id } = req.params;
try {
await productModel.deleteProduct(id);
res.redirect('/');
} catch (err) {
console.error(err);
res.status(500).send('Error deleting product');
}
};
// ฟังก์ชันการแสดงสินค้าพร้อมการกรองและการเรียงลำดับ
// ฟังก์ชันการแสดงสินค้าพร้อมการกรองและการเรียงลำดับ
exports.searchProduct = async (req, res) => {
const searchTerm = req.query.search || ''; // รับคำค้นหาจาก query parameter
const categoryFilter = req.query.category || ''; // รับหมวดหมู่สินค้าจาก query parameter
const brandFilter = req.query.brand || ''; // รับแบรนด์สินค้าจาก query parameter
const sort = req.query.sort || 'id ASC'; // เรียงลำดับตาม ID เป็นค่าเริ่มต้น
try {
let query = 'SELECT products.id, products.name, products.quantity, categories.name AS category, brands.name AS brand, suppliers.name AS supplier FROM products ';
query += 'JOIN categories ON products.category_id = categories.id ';
query += 'JOIN brands ON products.brand_id = brands.id ';
query += 'JOIN suppliers ON products.supplier_id = suppliers.id WHERE products.name LIKE ?';
// ตัวแปรที่ใช้ในการส่งค่าให้คำสั่ง SQL
const params = [`%${searchTerm}%`];
// เพิ่มเงื่อนไขการกรองหมวดหมู่สินค้า
if (categoryFilter) {
query += ' AND categories.id = ?';
params.push(categoryFilter);
}
// เพิ่มเงื่อนไขการกรองแบรนด์
if (brandFilter) {
query += ' AND brands.id = ?';
params.push(brandFilter);
}
// เพิ่มการเรียงลำดับ
query += ` ORDER BY ${sort}`;
// ดึงข้อมูลสินค้าจากฐานข้อมูล
const [rows] = await db.execute(query, params);
// ดึงข้อมูลหมวดหมู่สินค้า, แบรนด์, ผู้จัดจำหน่าย
const [categories] = await db.execute('SELECT * FROM categories');
const [brands] = await db.execute('SELECT * FROM brands');
const [suppliers] = await db.execute('SELECT * FROM suppliers');
res.render('index', {
products: rows, // ส่งข้อมูลสินค้าที่ดึงมาจากฐานข้อมูล
categories, // ส่งข้อมูลหมวดหมู่สินค้า
brands, // ส่งข้อมูลแบรนด์
suppliers, // ส่งข้อมูลผู้จัดจำหน่าย
searchTerm,
categoryFilter,
brandFilter,
sort
});
} catch (err) {
console.error(err);
res.status(500).send('Error fetching products');
}
};
// แสดงฟอร์มแก้ไขสินค้า
// ฟังก์ชันการแสดงฟอร์มการแก้ไขสินค้า
exports.editProductForm = async (req, res) => {
const { id } = req.params;
try {
// ดึงข้อมูลสินค้าจากฐานข้อมูล
const [product] = await db.execute('SELECT * FROM products WHERE id = ?', [id]);
// ดึงข้อมูลหมวดหมู่สินค้า
const [categories] = await db.execute('SELECT * FROM categories');
// ดึงข้อมูลผู้จัดจำหน่าย (suppliers)
const [suppliers] = await db.execute('SELECT * FROM suppliers');
// ดึงข้อมูลแบรนด์ (brands)
const [brands] = await db.execute('SELECT * FROM brands');
// ส่งข้อมูลไปยัง view (edit.ejs)
res.render('edit', {
product: product[0], // ข้อมูลสินค้าที่ต้องการแก้ไข
categories: categories, // ข้อมูลหมวดหมู่สินค้า
suppliers: suppliers, // ข้อมูลผู้จัดจำหน่าย
brands: brands // ข้อมูลแบรนด์
});
} catch (err) {
console.error(err);
res.status(500).send('Error fetching product or related data');
}
};
// ฟังก์ชันการอัปเดตสินค้า
exports.updateProductQuantity = async (req, res) => {
const { id, quantity } = req.body; // รับ id และ quantity จากฟอร์ม
try {
// อัปเดตเฉพาะจำนวนสินค้าที่ได้รับจากฟอร์ม
await db.execute('UPDATE products SET quantity = ? WHERE id = ?', [quantity, id]);
// หลังจากอัปเดตเสร็จ, redirect ไปที่หน้ารายการสินค้า
res.redirect('/');
} catch (err) {
console.error(err);
res.status(500).send('Error updating product quantity');
}
};
// ฟังก์ชันการลบหมวดหมู่
exports.deleteCategory = async (req, res) => {
const { id } = req.params;
try {
// ตรวจสอบว่าไม่มีสินค้าติดต่อกับหมวดหมู่นี้
const [checkProducts] = await db.execute('SELECT * FROM products WHERE category_id = ?', [id]);
if (checkProducts.length > 0) {
return res.status(400).send('Cannot delete category because there are products associated with it');
}
// ลบหมวดหมู่
await db.execute('DELETE FROM categories WHERE id = ?', [id]);
// Redirect ไปที่หน้าแสดงหมวดหมู่
res.redirect('/');
} catch (err) {
console.error(err);
res.status(500).send('Error deleting category');
}
};
const db = require('../config/db'); // เชื่อมต่อกับฐานข้อมูล
// ฟังก์ชันแสดงฟอร์มการเพิ่มผู้จัดจำหน่าย
exports.createSupplierForm = (req, res) => {
res.render('create-supplier', {
title: 'Create New Supplier',
});
};
// ฟังก์ชันบันทึกข้อมูลผู้จัดจำหน่ายใหม่
exports.createSupplier = (req, res) => {
const { name, address, phone, email } = req.body; // รับข้อมูลจากฟอร์ม
// ตรวจสอบข้อมูล
if (!name || !address || !phone || !email) {
return res.status(400).send('All fields are required');
}
// คำสั่ง SQL สำหรับเพิ่มข้อมูลผู้จัดจำหน่าย
const query = 'INSERT INTO suppliers (name, address, phone, email) VALUES (?, ?, ?, ?)';
// ใช้ mysql2 เพื่อบันทึกข้อมูล
db.execute(query, [name, address, phone, email])
.then(([results, fields]) => {
res.redirect('/supplier-list'); // ไปที่หน้ารายการผู้จัดจำหน่าย
})
.catch((err) => {
console.error(err);
res.status(500).send('Error creating supplier');
});
};
// ฟังก์ชันเพื่อดึงข้อมูลผู้จัดจำหน่ายทั้งหมดจากฐานข้อมูล
exports.getSupplierList = (req, res) => {
const query = 'SELECT * FROM suppliers';
db.execute(query)
.then(([suppliers, fields]) => {
res.render('supplier-list', {
title: 'Supplier List',
suppliers: suppliers,
});
})
.catch((err) => {
console.error(err);
res.status(500).send('Error retrieving suppliers');
});
};
// ฟังก์ชันแสดงฟอร์มการแก้ไข
exports.editSupplierForm = (req, res) => {
const supplierId = req.params.id;
// คำสั่ง SQL เพื่อดึงข้อมูลผู้จัดจำหน่ายตาม ID
const query = 'SELECT * FROM suppliers WHERE id = ?';
db.execute(query, [supplierId])
.then(([rows, fields]) => {
if (rows.length === 0) {
return res.status(404).send('Supplier not found');
}
res.render('edit-supplier', {
title: 'Edit Supplier',
supplier: rows[0], // ส่งข้อมูลผู้จัดจำหน่ายไปยังหน้า
});
})
.catch((err) => {
console.error(err);
res.status(500).send('Error retrieving supplier');
});
};
// ฟังก์ชันอัปเดตข้อมูลผู้จัดจำหน่าย
exports.updateSupplier = (req, res) => {
const { name, address, phone, email } = req.body;
const supplierId = req.params.id;
// คำสั่ง SQL สำหรับอัปเดตข้อมูลผู้จัดจำหน่าย
const query = 'UPDATE suppliers SET name = ?, address = ?, phone = ?, email = ? WHERE id = ?';
db.execute(query, [name, address, phone, email, supplierId])
.then(([results, fields]) => {
res.redirect('/supplier-list'); // ไปที่หน้ารายการผู้จัดจำหน่าย
})
.catch((err) => {
console.error(err);
res.status(500).send('Error updating supplier');
});
};
// ฟังก์ชันลบข้อมูลผู้จัดจำหน่าย
exports.deleteSupplier = (req, res) => {
const supplierId = req.params.id;
// คำสั่ง SQL สำหรับลบผู้จัดจำหน่ายตาม ID
const query = 'DELETE FROM suppliers WHERE id = ?';
db.execute(query, [supplierId])
.then(([results, fields]) => {
res.redirect('/supplier-list'); // ไปที่หน้ารายการผู้จัดจำหน่าย
})
.catch((err) => {
console.error(err);
res.status(500).send('Error deleting supplier');
});
};
// Middleware สำหรับตรวจสอบการเข้าสู่ระบบ
function isAuthenticated(req, res, next) {
if (req.session && req.session.user) {
return next(); // ถ้าผู้ใช้เข้าสู่ระบบแล้ว ให้ไปยังหน้าถัดไป
}
res.redirect('/login'); // ถ้าไม่ได้เข้าสู่ระบบ จะถูกส่งไปยังหน้า login
}
module.exports = isAuthenticated;
\ No newline at end of file
const db = require('../config/db');
// สร้างข้อมูลสินค้า
exports.createProduct = (name, quantity, categoryId) => {
return db.execute(
'INSERT INTO products (name, quantity, category_id) VALUES (?, ?, ?)',
[name, quantity, categoryId]
);
};
// แก้ไขข้อมูลสินค้า
exports.updateProduct = (id, name, quantity, categoryId) => {
return db.execute(
'UPDATE products SET name = ?, quantity = ?, category_id = ? WHERE id = ?',
[name, quantity, categoryId, id]
);
};
// ลบข้อมูลสินค้า
exports.deleteProduct = (id) => {
return db.execute('DELETE FROM products WHERE id = ?', [id]);
};
// แสดงผลข้อมูลสินค้า
exports.getProducts = () => {
return db.execute(
'SELECT products.id, products.name, products.quantity, categories.name AS category FROM products JOIN categories ON products.category_id = categories.id'
);
};
// ค้นหาสินค้าตามชื่อ
exports.searchProducts = (searchTerm) => {
return db.execute(
'SELECT products.id, products.name, products.quantity, categories.name AS category FROM products JOIN categories ON products.category_id = categories.id WHERE products.name LIKE ?',
[`%${searchTerm}%`] // การค้นหาตามชื่อสินค้าที่มีคำค้นหาตรงกับที่อยู่ในฐานข้อมูล
);
};
// ดึงข้อมูลสินค้าตาม id
exports.getProductById = (id) => {
return db.execute(
'SELECT * FROM products WHERE id = ?',
[id]
);
};
// ดึงรายการหมวดหมู่
exports.getCategories = () => {
return db.execute(
'SELECT * FROM categories'
);
};
// อัพเดตข้อมูลสินค้า
exports.updateProduct = (id, name, quantity, categoryId) => {
return db.execute(
'UPDATE products SET name = ?, quantity = ?, category_id = ? WHERE id = ?',
[name, quantity, categoryId, id]
);
};
This diff is collapsed.
{
"name": "stock-management",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"bcrypt": "^5.1.1",
"bcryptjs": "^3.0.2",
"body-parser": "^1.20.3",
"dotenv": "^16.4.7",
"ejs": "^3.1.10",
"express": "^4.21.2",
"express-session": "^1.18.1",
"mysql2": "^3.14.0"
}
}
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff;
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s ease;
}
.navbar-links a:hover {
background-color: #2980b9;
text-decoration: none;
transform: scale(1.05);
}
/* รายการแบรนด์ */
.brand-list-container {
max-width: 900px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.brand-list-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
/* ปุ่มสร้างแบรนด์ */
.create-brand-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
display: block;
margin-bottom: 20px;
text-align: center;
transition: background-color 0.3s ease;
}
.create-brand-btn:hover {
background-color: #218838;
}
/* ตารางแสดงข้อมูลแบรนด์ */
.brand-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.brand-table th,
.brand-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.brand-table th {
background-color: #007bff;
color: white;
}
.brand-table td {
background-color: #f9f9f9;
}
/* การจัดวางปุ่ม Edit และ Delete */
.action-buttons {
display: flex;
gap: 10px; /* เพิ่มช่องว่างระหว่างปุ่ม */
}
.edit-btn,
.delete-btn {
padding: 6px 12px;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.edit-btn {
background-color: #007bff;
}
.edit-btn:hover {
background-color: #0056b3;
}
.delete-btn {
background-color: #dc3545;
}
.delete-btn:hover {
background-color: #c82333;
}
/* Responsive Design */
@media (max-width: 768px) {
.brand-list-container {
padding: 20px;
}
.brand-table {
font-size: 14px;
}
.create-brand-btn {
width: 100%;
}
}
/* ป๊อปอัพการยืนยันการลบ */
#deletePopup {
display: none; /* ซ่อนป๊อปอัพเริ่มต้น */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* พื้นหลังโปร่งแสง */
justify-content: center;
align-items: center;
z-index: 9999;
}
/* ป๊อปอัพที่อยู่ตรงกลาง */
#deletePopup .popup-content {
background-color: #fff;
padding: 30px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 400px;
max-width: 90%; /* ทำให้ป๊อปอัพมีขนาดย่อได้บนหน้าจอเล็ก */
}
#deletePopup .popup-content h3 {
margin-bottom: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
}
#deletePopup .popup-content p {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
#deletePopup .popup-content button {
padding: 12px 20px;
margin: 10px;
background-color: #dc3545; /* สีแดงสำหรับปุ่มยืนยันการลบ */
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
#deletePopup .popup-content button:hover {
background-color: #c82333; /* สีแดงเข้มเมื่อ hover */
transform: scale(1.05); /* ขยายขนาดเมื่อ hover */
}
#deletePopup .popup-content .cancel-btn {
background-color: #6c757d; /* สีเทาสำหรับปุ่มยกเลิก */
}
#deletePopup .popup-content .cancel-btn:hover {
background-color: #5a6268; /* สีเทาเข้มเมื่อ hover */
}
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff; /* ใช้สีฟ้าเข้มสำหรับ navbar */
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* เพิ่มเงา */
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s ease;
}
.navbar-links a:hover {
background-color: #2980b9;
text-decoration: none;
transform: scale(1.05);
}
/* การจัดวางปุ่มย้อนกลับ */
.back-btn-container {
text-align: left;
margin-bottom: 20px; /* ระยะห่างจากด้านบน */
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
display: inline-block;
transition: background-color 0.3s ease;
}
.back-btn:hover {
background-color: #5a6268;
}
/* ฟอร์มการเพิ่มหมวดหมู่สินค้า */
.category-list-container {
max-width: 900px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
}
.category-list-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
.create-category-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
display: block;
margin-bottom: 20px;
text-align: center;
transition: background-color 0.3s ease;
}
.create-category-btn:hover {
background-color: #218838;
}
/* ตารางแสดงหมวดหมู่ */
.category-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.category-table th,
.category-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.category-table th {
background-color: #007bff;
color: white;
}
.category-table td {
background-color: #f9f9f9;
}
/* ปุ่มแก้ไขและลบ */
.edit-btn,
.delete-btn {
padding: 6px 12px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
margin: 5px;
transition: background-color 0.3s ease;
}
.edit-btn:hover {
background-color: #0056b3;
}
.delete-btn {
background-color: #dc3545;
}
.delete-btn:hover {
background-color: #c82333;
}
/* Responsive Design */
@media (max-width: 768px) {
.category-list-container {
padding: 20px;
}
.category-table {
font-size: 14px;
}
.create-category-btn {
width: 100%;
}
}
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff;
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s ease;
}
.navbar-links a:hover {
background-color: #2980b9;
text-decoration: none;
transform: scale(1.05);
}
/* ฟอร์มการเพิ่มแบรนด์ */
.create-brand-container {
max-width: 900px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.create-brand-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
/* กรอบสำหรับช่องกรอกข้อมูล */
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #495057;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f9f9f9;
}
.form-group input:focus {
outline: none;
border-color: #007bff;
background-color: #fff;
}
.required {
color: red;
font-weight: bold;
}
.form-actions {
display: flex;
justify-content: space-between;
}
.submit-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #218838;
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.back-btn:hover {
background-color: #5a6268;
}
/* Responsive Design */
@media (max-width: 768px) {
.create-brand-container {
padding: 20px;
}
.form-group input {
width: 100%;
}
.submit-btn,
.back-btn {
width: 48%;
}
}
\ No newline at end of file
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9; /* ใช้สีพื้นหลังที่ดูสะอาดและเรียบง่าย */
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff; /* ใช้สีฟ้าเข้มเพื่อให้ดูเป็นทางการ */
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* เพิ่มเงาให้ navbar */
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px; /* ทำให้มุมโค้ง */
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase; /* โลโก้เป็นตัวพิมพ์ใหญ่ทั้งหมด */
letter-spacing: 1.5px; /* เพิ่มการเว้นระยะระหว่างตัวอักษร */
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px; /* เพิ่มระยะห่างระหว่างเมนู */
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500; /* ทำให้ตัวอักษรหนาขึ้น */
transition: background-color 0.3s, transform 0.3s ease; /* เพิ่มการเปลี่ยนแปลงเมื่อโฮเวอร์ */
}
.navbar-links a:hover {
background-color: #2980b9; /* เปลี่ยนสีเมื่อโฮเวอร์ */
text-decoration: none;
transform: scale(1.05); /* ขยายขนาดของลิงก์เมื่อโฮเวอร์ */
}
/* ฟอร์มการเพิ่มหมวดหมู่สินค้า */
.create-category-container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ฟอร์ม */
}
.create-category-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #495057;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f9f9f9;
}
.form-group input:focus {
outline: none;
border-color: #007bff;
background-color: #fff;
}
.required {
color: red;
font-weight: bold;
}
.form-actions {
display: flex;
justify-content: space-between;
}
.submit-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #218838;
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.back-btn:hover {
background-color: #5a6268;
}
@media (max-width: 768px) {
.create-category-container {
padding: 20px;
}
.form-group input {
width: 100%;
}
.submit-btn,
.back-btn {
width: 48%;
}
}
\ No newline at end of file
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff;
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s ease;
}
.navbar-links a:hover {
background-color: #2980b9;
text-decoration: none;
transform: scale(1.05);
}
/* ฟอร์มการเพิ่มผู้จัดจำหน่าย */
.create-supplier-container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.create-supplier-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #495057;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f9f9f9;
}
.form-group input:focus {
outline: none;
border-color: #007bff;
background-color: #fff;
}
.required {
color: red;
font-weight: bold;
}
.form-actions {
display: flex;
justify-content: space-between;
}
.submit-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #218838;
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.back-btn:hover {
background-color: #5a6268;
}
@media (max-width: 768px) {
.create-supplier-container {
padding: 20px;
}
.form-group input {
width: 100%;
}
.submit-btn,
.back-btn {
width: 48%;
}
}
\ No newline at end of file
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9; /* ใช้สีพื้นหลังที่ดูสะอาดและเรียบง่าย */
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background: linear-gradient(90deg, #2c3e50, #34495e); /* สร้างการไล่สีเพื่อความสวยงาม */
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* เพิ่มเงาเพื่อทำให้ navbar ดูเด่น */
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px; /* เพิ่มมุมโค้งให้ navbar */
transition: background-color 0.3s ease; /* เพิ่มการเปลี่ยนสีพื้นหลังอย่างลื่นไหล */
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto; /* ทำให้ navbar อยู่กลางหน้า */
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase; /* โลโก้เป็นตัวพิมพ์ใหญ่ทั้งหมด */
letter-spacing: 1.5px; /* เพิ่มการเว้นระยะระหว่างตัวอักษร */
transition: transform 0.3s ease; /* ทำให้โลโก้ขยายเมื่อโฮเวอร์ */
}
.logo:hover {
transform: scale(1.1); /* ขยายขนาดโลโก้เมื่อโฮเวอร์ */
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500; /* ทำให้ตัวอักษรหนาขึ้น */
transition: background-color 0.3s, transform 0.3s ease; /* เพิ่มการเปลี่ยนแปลงเมื่อโฮเวอร์ */
}
.navbar-links a:hover {
background-color: #2980b9; /* เปลี่ยนสีพื้นหลังเมื่อโฮเวอร์ */
text-decoration: none;
transform: scale(1.05); /* ขยายขนาดของลิงก์เมื่อโฮเวอร์ */
}
/* ฟอร์มการสร้างสินค้า */
.create-product-container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ฟอร์ม */
}
.create-product-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #495057;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f9f9f9;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #007bff;
background-color: #fff;
}
.required {
color: red;
font-weight: bold;
}
.form-actions {
display: flex;
justify-content: space-between;
}
.submit-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #218838;
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.back-btn:hover {
background-color: #5a6268;
}
@media (max-width: 768px) {
.create-product-container {
padding: 20px;
}
.form-group input,
.form-group select {
width: 100%;
}
.submit-btn,
.back-btn {
width: 48%;
}
.navbar-container {
flex-direction: column;
align-items: flex-start;
}
.navbar-links {
width: 100%;
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
}
.navbar-links li {
margin: 10px 0;
}
.logo {
margin-bottom: 15px;
}
}
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff;
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s ease;
}
.navbar-links a:hover {
background-color: #2980b9;
text-decoration: none;
transform: scale(1.05);
}
/* ฟอร์มการแก้ไขแบรนด์ */
.edit-brand-container {
max-width: 900px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.edit-brand-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
/* กรอบสำหรับช่องกรอกข้อมูล */
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #495057;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f9f9f9;
}
.form-group input:focus {
outline: none;
border-color: #007bff;
background-color: #fff;
}
.required {
color: red;
font-weight: bold;
}
.form-actions {
display: flex;
justify-content: space-between;
}
.submit-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #218838;
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.back-btn:hover {
background-color: #5a6268;
}
/* Responsive Design */
@media (max-width: 768px) {
.edit-brand-container {
padding: 20px;
}
.form-group input {
width: 100%;
}
.submit-btn,
.back-btn {
width: 48%;
}
}
\ No newline at end of file
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic body and background */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f6f9;
color: #333;
line-height: 1.6;
}
/* Navbar styling */
.navbar {
background-color: #007bff; /* ใช้สีฟ้าเข้มสำหรับ navbar */
color: white;
padding: 15px 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* เพิ่มเงา */
position: sticky;
top: 0;
z-index: 1000;
border-radius: 10px; /* ทำให้มุมโค้ง */
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo {
font-size: 28px;
font-weight: bold;
color: white;
text-decoration: none;
text-transform: uppercase; /* โลโก้เป็นตัวพิมพ์ใหญ่ทั้งหมด */
letter-spacing: 1.5px;
}
.navbar-links {
list-style: none;
display: flex;
margin: 0;
}
.navbar-links li {
margin-left: 25px;
}
.navbar-links a {
color: white;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 5px;
font-weight: 500;
transition: background-color 0.3s, transform 0.3s ease;
}
.navbar-links a:hover {
background-color: #2980b9;
text-decoration: none;
transform: scale(1.05);
}
/* ฟอร์มการแก้ไขหมวดหมู่สินค้า */
.edit-category-container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
}
.edit-category-container h1 {
text-align: center;
font-size: 28px;
color: #343a40;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-size: 16px;
color: #495057;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 16px;
background-color: #f9f9f9;
}
.form-group input:focus {
outline: none;
border-color: #007bff;
background-color: #fff;
}
.required {
color: red;
font-weight: bold;
}
.form-actions {
display: flex;
justify-content: space-between;
}
.submit-btn {
padding: 12px 25px;
background-color: #28a745;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #218838;
}
.back-btn {
padding: 12px 25px;
background-color: #6c757d;
color: white;
text-decoration: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
.back-btn:hover {
background-color: #5a6268;
}
@media (max-width: 768px) {
.edit-category-container {
padding: 20px;
}
.form-group input {
width: 100%;
}
.submit-btn,
.back-btn {
width: 48%;
}
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment