Login - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html> <head> <title>Ứng dụng quản lý</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { font family: 'Roboto', sans serif; margin: 0; padding: 0; background: linear gradient(135deg, #4facfe, #00f2fe); height: 100vh; display: flex; justify content: center; align items: center; } .container { max width: 400px; width: 100%; background: white; padding: 30px; border radius: 10px; box shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } h2 { text align: center; margin bottom: 20px; color: #333; font weight: bold; } .form group { margin bottom: 20px; display: flex; flex direction: column; } label { display: block; font size: 14px; margin bottom: 8px; color: #555; } input { width: 100%; padding: 10px; font size: 14px; border: 1px solid #ddd; border radius: 5px; box shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } input:focus { border color: #4facfe; outline: none; box shadow: 0 0 5px rgba(79, 172, 254, 0.5); } .button { width: 100%; padding: 10px; background: linear gradient(135deg, #4facfe, #00f2fe); color: white; font size: 16px; font weight: bold; text transform: uppercase; border: none; border radius: 5px; cursor: pointer; transition: all 0.3s ease; } .button:hover { background: linear gradient(135deg, #00f2fe, #4facfe); box shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .error { text align: center; color: red; font size: 14px; margin top: 10px; } .login footer { text align: center; margin top: 20px; font size: 12px; color: #777; } .login footer a { color: #4facfe; text decoration: none; font weight: bold; } .login footer a:hover { text decoration: underline; } /* Ẩn các phần khi chưa hiển thị */ .hidden { display: none; } .giao dien tong quan{ max width: 1300px; margin: auto; background: #fff; padding: 20px; border radius: 10px; box shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } /* Tiêu đề Dashboard */ .dashboard title { text align: center; font size: 24px; color: #333; font weight: bold; margin bottom: 20px; } /* Khu vực các nút hành động */ .dashboard actions { display: flex; justify content: space between; margin bottom: 20px; } .button { flex: 1; padding: 10px; font size: 14px; font weight: bold; text transform: uppercase; border: none; border radius: 5px; cursor: pointer; transition: background 0.3s ease, box shadow 0.3s ease; margin: 0 5px; } .button them don hang { background: linear gradient(135deg, #4facfe, #00f2fe); color: white; } .button them don hang:hover { background: linear gradient(135deg, #00f2fe, #4facfe); box shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } .button dang xuat { background: linear gradient(135deg, #ff6b6b, #f94d4d); color: white; } .button dang xuat:hover { background: linear gradient(135deg, #f94d4d, #ff6b6b); box shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } .dashboard table { width: 100%; /* Bảng chiếm toàn bộ chiều rộng container */ border collapse: collapse; /* Loại bỏ khoảng cách giữa các ô */ margin top: 20px; font size: 12px; text align: left; table layout: fixed; /* Chiều rộng cột cố định */ } .table header { background color: #f4f4f4; color: #333; } .table header cell { padding: 10px; font weight: bold; text transform: capitalize; border bottom: 2px solid #ddd; white space: nowrap; overflow: hidden; text overflow: ellipsis; font size: 12px; /* Add this line */ } .table body .table row:nth child(odd) { background: #f9f9f9; } .table body .table row:nth child(even) { background: #ffffff; } .table body td { padding: 10px; border bottom: 1px solid #ddd; white space: nowrap; overflow: hidden; text overflow: ellipsis; font size: 11px; } /* Đảm bảo chữ không bị đè */ .clip text { word wrap: break word; white space: normal; } .add order page { max width: 800px; margin: auto; background: #fff; padding: 20px; border radius: 10px; box shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .add order title { text align: center; font size: 24px; color: #333; font weight: bold; margin bottom: 20px; } .add order form { display: flex; flex direction: column; gap: 15px; } .form label { font size: 14px; font weight: bold; margin bottom: 5px; color: #555; } .form input, .form select { width: 100%; padding: 10px; font size: 14px; border: 1px solid #ddd; border radius: 5px; box shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .form input:focus, .form select:focus { border color: #4facfe; outline: none; box shadow: 0px 0px 5px rgba(79, 172, 254, 0.5); } .form actions { display: flex; justify content: space between; gap: 10px; } .save button { background: linear gradient(135deg, #4facfe, #00f2fe); color: white; } .save button:hover { background: linear gradient(135deg, #00f2fe, #4facfe); box shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } .back button { background: linear gradient(135deg, #ff6b6b, #f94d4d); color: white; } .back button:hover { background: linear gradient(135deg, #f94d4d, #ff6b6b); box shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } .login page { max width: 400px; margin: auto; background: #fff; padding: 30px; border radius: 10px; box shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } .login title { text align: center; font size: 24px; color: #333; font weight: bold; margin bottom: 20px; } .login form { display: flex; flex direction: column; gap: 15px; } .form input { width: 97.5%; padding: 10px; font size: 14px; border: 1px solid #ddd; border radius: 5px; box shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .form input:focus { border color: #4facfe; outline: none; box shadow: 0px 0px 5px rgba(79, 172, 254, 0.5); } .login button { width: 100%; padding: 10px; font size: 16px; font weight: bold; text transform: uppercase; color: white; background: linear gradient(135deg, #4facfe, #00f2fe); border: none; border radius: 5px; cursor: pointer; transition: background 0.3s ease, box shadow 0.3s ease; } .login button:hover { background: linear gradient(135deg, #00f2fe, #4facfe); box shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } .login error { text align: center; color: red; font size: 14px; margin top: 10px; } .forgot password { font size: 12px; } .forgot password link { color: #4facfe; text decoration: none; font weight: bold; } .forgot password link:hover { text decoration: underline; } .user info { text align: center; margin bottom: 20px; font size: 16px; font weight: bold; color: #4facfe; } .user name { display: inline block; padding: 10px 15px; background: #e8f7ff; border radius: 20px; box shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); color: #007acc; } .cost summary container { display: flex; gap: 20px; margin: 15px 0; } .total cost summary { flex: 0 0 auto; padding: 10px 20px; background: linear gradient(135deg, #4facfe, #00f2fe); border radius: 8px; color: white; display: flex; align items: center; gap: 10px; } .cost label { font size: 14px; font weight: 500; } .cost value { font size: 16px; font weight: bold; } .member cost summary { flex: 1; padding: 10px 20px; background: #f8f9fa; border radius: 8px; } .member cost list { display: flex; flex wrap: wrap; gap: 10px; } .member cost item { background: white; padding: 8px 15px; border radius: 6px; border: 1px solid #e0e0e0; display: flex; align items: center; gap: 10px; } .member name { font size: 13px; color: #555; } .member cost { font size: 14px; color: #4facfe; font weight: bold; } .export section { margin: 20px 0; display: flex; justify content: flex end; padding right: 20px; } .export button { background: linear gradient(135deg, #28a745, #20c997); color: white; padding: 8px 16px; border radius: 5px; font weight: 500; display: inline flex; align items: center; gap: 8px; font size: 14px; min width: 120px; justify content: center; } .export button:hover { background: linear gradient(135deg, #20c997, #28a745); box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); cursor: pointer; } .export icon { font size: 16px; } .search filter container { display: flex; gap: 15px; margin: 20px 0; align items: center; padding: 15px; background: #f8f9fa; border radius: 8px; } .search box { flex: 2; } .search input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border radius: 5px; font size: 12px; transition: all 0.3s ease; } .search input:focus { border color: #4facfe; outline: none; box shadow: 0 0 5px rgba(79, 172, 254, 0.5); } .filter box { flex: 1; } .filter select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border radius: 5px; font size: 12px; background color: white; cursor: pointer; } .filter date { width: 100%; padding: 7px 12px; border: 1px solid #ddd; border radius: 5px; font size: 12px; cursor: pointer; } .filter button { padding: 8px 20px; background: linear gradient(135deg, #4facfe, #00f2fe); color: white; border: none; border radius: 5px; font weight: 500; cursor: pointer; display: flex; align items: center; gap: 8px; transition: all 0.3s ease; } .filter button:hover { background: linear gradient(135deg, #00f2fe, #4facfe); box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .filter icon { font size: 12px; } </style> </head> <body> <div id="loginPage" class="container login page"> <h2 class="login title">Đăng Nhập</h2> <form class="login form"> <div class="form group"> <label for="username" class="form label">Tên đăng nhập</label> <input type="text" id="username" class="form input" placeholder="Nhập tên đăng nhập của bạn" /> </div> <div class="form group"> <label for="password" class="form label">Mật khẩu</label> <input type="password" id="password" class="form input" placeholder="Nhập mật khẩu của bạn" /> </div> <button type="button" class="button login button" onclick="login()">Đăng Nhập</button> <p id="loginError" class="error login error"></p> </form> <div class="login footer"> <p class="forgot password"> Quên mật khẩu? <a href="https://t.me/maropa_agency" class="forgot password link">Khôi phục ngay</a> </p> </div> </div> <div id="dashboardPage" class="container hidden giao dien tong quan"> <div class="user info"> <span id="usernameDisplay" class="user name">Xin chào, User</span> </div> <div class="cost summary container"> <div class="total cost summary"> <span class="cost label">Tổng Chi Phí:</span> <span id="totalCostDisplay" class="cost value">0 ₫</span> </div> <div id="memberCostSummary" class="member cost summary hidden"> <div id="memberCostList" class="member cost list"></div> </div> </div> <h2 class="dashboard title">Danh sách đơn hàng</h2> <div class="dashboard actions"> <button class="button button them don hang" onclick="showAddOrder()">Thêm đơn hàng</button> <button class="button button dang xuat" onclick="logout()">Đăng xuất</button> </div> <div class="search filter container"> <div class="search box"> <input type="text" id="searchOrderCode" class="search input" placeholder="Tìm kiếm theo Order Code..."> </div> <div class="filter box"> <select id="statusFilter" class="filter select"> <option value="">Chọn Status</option> </select> </div> <div class="filter box"> <select id="domainFilter" class="filter select"> <option value="">Chọn Domain</option> </select> </div> <div class="filter box"> <select id="paymentStatusFilter" class="filter select"> <option value="">Chọn Payment Status</option> </select> </div> <div class="filter box"> <input type="date" id="dateFilter" class="filter date"> </div> <button class="filter button" onclick="applyFilters()"> <span class="filter icon">🔍</span> Lọc </button> </div> <table class="dashboard table"> <thead class="table header"> <tr> <th class="table header cell">Domain</th> <th class="table header cell">Time</th> <th class="table header cell">Name</th> <th class="table header cell">Backlink Type</th> <th class="table header cell">Number</th> <th class="table header cell">File Order</th> <th class="table header cell">Status</th> <th class="table header cell">Report</th> <th class="table header cell">Cost</th> <th class="table header cell">Order Code</th> <th class="table header cell">Payment Status</th> </tr> </thead> <tbody class="table body" id="orderTableBody"></tbody> </table> <div class="export section"> <button class="button export button" onclick="exportToCSV()"> <span class="export icon">📊</span> Xuất Excel </button> </div> <div id="pagination" class="pagination"></div> </div> <div id="addOrderPage" class="container hidden add order page"> <h2 class="add order title">Thêm Đơn Hàng</h2> <form class="add order form"> <div class="form group"> <label for="domain" class="form label">Domain:</label> <input type="text" id="domain" class="form input" /> </div> <div class="form group"> <label for="backlinkType" class="form label">Backlink Type:</label> <select id="backlinkType" class="form select"> <option value="ENTB">ENTB</option> <option value="ENTA">ENTA</option> <option value="ENTC">ENTC</option> <option value="POD">POD</option> <option value="AMZ">AMZ</option> <option value="GGC">GGC</option> </select> </div> <! Thêm trường Number mới > <div class="form group"> <label for="orderNumber" class="form label">Number:</label> <input type="number" id="orderNumber" class="form input" min="1" /> </div> <div class="form group"> <label for="fileOrder" class="form label">File Order:</label> <input type="text" id="fileOrder" class="form input" /> </div> <div class="form actions"> <button type="button" class="button save button" onclick="saveOrder()">Lưu</button> <button type="button" class="button back button" onclick="goToDashboard()">Quay lại</button> </div> </form> </div>
