410 lines
17 KiB
HTML
410 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Đăng ký tài khoản - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
.verification-section {
|
|
background: #f8fafc;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
animation: slideDown 0.3s ease-out;
|
|
}
|
|
|
|
.verification-header {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.verification-header h3 {
|
|
color: #2563eb;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-upload-area {
|
|
border: 2px dashed #cbd5e1;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
|
|
.file-upload-area:hover {
|
|
border-color: #2563eb;
|
|
background: #f0f9ff;
|
|
}
|
|
|
|
.file-upload-icon {
|
|
font-size: 32px;
|
|
color: #64748b;
|
|
margin-bottom: 12px;
|
|
display: block;
|
|
}
|
|
|
|
.file-upload-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.upload-title {
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.upload-subtitle {
|
|
font-size: 14px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.file-preview {
|
|
margin-top: 12px;
|
|
display: none;
|
|
}
|
|
|
|
.file-preview.show {
|
|
display: block;
|
|
}
|
|
|
|
.file-preview-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.file-preview-thumb {
|
|
width: 50px;
|
|
height: 50px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.file-preview-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.file-preview-name {
|
|
font-weight: 500;
|
|
color: #1e293b;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.file-preview-size {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="login.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Đăng ký tài khoản</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Welcome Message -->
|
|
<div class="text-center mb-4">
|
|
<h2>Tạo tài khoản mới</h2>
|
|
<p class="text-muted">Điền thông tin để bắt đầu</p>
|
|
</div>
|
|
|
|
<!-- Registration Form -->
|
|
<form action="register-pending.html" class="card" onsubmit="return validateForm()"">
|
|
<!-- Full Name -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="fullname">Họ và tên *</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-user icon"></i>
|
|
<input type="text" id="fullname" class="form-input" placeholder="Nhập họ và tên" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone Number -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="phone">Số điện thoại *</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-phone icon"></i>
|
|
<input type="tel" id="phone" class="form-input" placeholder="Nhập số điện thoại" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="email">Email *</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-envelope icon"></i>
|
|
<input type="email" id="email" class="form-input" placeholder="Nhập email" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Mật khẩu *</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-lock icon"></i>
|
|
<input type="password" id="password" class="form-input" placeholder="Tạo mật khẩu mới" required>
|
|
</div>
|
|
<p class="text-small text-muted mt-1">Mật khẩu tối thiểu 6 ký tự</p>
|
|
</div>
|
|
|
|
<!-- ID ĐVKD -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="DVKD">Mã ĐVKD *</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-briefcase icon"></i>
|
|
<input type="text" id="DVKD" class="form-input" placeholder="Nhập mã ĐVKD" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Role Selection -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="role">Vai trò *</label>
|
|
<select id="role" class="form-input form-select" required onchange="toggleVerification()">
|
|
<option value="">Chọn vai trò của bạn</option>
|
|
<option value="dealer">Đại lý hệ thống</option>
|
|
<option value="worker">Kiến trúc sư/ Thầu thợ</option>
|
|
<!--<option value="architect">Kiến trúc sư</option>-->
|
|
<option value="broker">Khách lẻ</option>
|
|
<option value="broker">Khác</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Verification Section for Architects/Workers -->
|
|
<div id="verificationSection" class="verification-section" style="display: none;">
|
|
<div class="verification-header">
|
|
<h3><i class="fas fa-shield-alt"></i> Thông tin xác thực</h3>
|
|
<p class="text-small text-muted">Thông tin này sẽ được dùng để xác minh tư cách chuyên môn của bạn</p>
|
|
</div>
|
|
|
|
<!-- ID Number -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="idNumber">Số CCCD/CMND</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-id-card icon"></i>
|
|
<input type="text" id="idNumber" class="form-input" placeholder="Nhập số CCCD/CMND" maxlength="12">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tax Code -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="taxCode">Mã số thuế cá nhân/Công ty</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-receipt icon"></i>
|
|
<input type="text" id="taxCode" class="form-input" placeholder="Nhập mã số thuế (không bắt buộc)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ID Card Upload -->
|
|
<div class="form-group">
|
|
<label class="form-label">Ảnh mặt trước CCCD/CMND</label>
|
|
<div class="file-upload-area" onclick="document.getElementById('idCardFile').click()">
|
|
<i class="fas fa-camera file-upload-icon"></i>
|
|
<div class="file-upload-text">
|
|
<span class="upload-title">Chụp ảnh hoặc chọn file</span>
|
|
<span class="upload-subtitle">JPG, PNG tối đa 5MB</span>
|
|
</div>
|
|
<input type="file" id="idCardFile" accept="image/*" style="display: none;" onchange="handleFileUpload(this, 'idCardPreview')">
|
|
</div>
|
|
<div id="idCardPreview" class="file-preview"></div>
|
|
</div>
|
|
|
|
<!-- Certificate Upload -->
|
|
<div class="form-group">
|
|
<label class="form-label">Ảnh chứng chỉ hành nghề hoặc GPKD</label>
|
|
<div class="file-upload-area" onclick="document.getElementById('certificateFile').click()">
|
|
<i class="fas fa-file-alt file-upload-icon"></i>
|
|
<div class="file-upload-text">
|
|
<span class="upload-title">Chụp ảnh hoặc chọn file</span>
|
|
<span class="upload-subtitle">JPG, PNG tối đa 5MB</span>
|
|
</div>
|
|
<input type="file" id="certificateFile" accept="image/*" style="display: none;" onchange="handleFileUpload(this, 'certificatePreview')">
|
|
</div>
|
|
<div id="certificatePreview" class="file-preview"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Company/Store Name -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="company">Tên công ty/Cửa hàng</label>
|
|
<div class="form-input-icon">
|
|
<i class="fas fa-building icon"></i>
|
|
<input type="text" id="company" class="form-input" placeholder="Nhập tên công ty (không bắt buộc)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Province/City -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="city">Tỉnh/Thành phố *</label>
|
|
<select id="city" class="form-input form-select" required>
|
|
<option value="">Chọn tỉnh/thành phố</option>
|
|
<option value="hanoi">Hà Nội</option>
|
|
<option value="hcm">TP. Hồ Chí Minh</option>
|
|
<option value="danang">Đà Nẵng</option>
|
|
<option value="haiphong">Hải Phòng</option>
|
|
<option value="cantho">Cần Thơ</option>
|
|
<option value="other">Khác</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Terms and Conditions -->
|
|
<div class="form-group">
|
|
<label style="display: flex; align-items: flex-start; cursor: pointer;">
|
|
<input type="checkbox" style="margin-right: 8px; margin-top: 2px;" required>
|
|
<span class="text-small">
|
|
Tôi đồng ý với
|
|
<a href="#" class="text-primary">Điều khoản sử dụng</a> và
|
|
<a href="#" class="text-primary">Chính sách bảo mật</a>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-block">
|
|
Đăng ký
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Login Link -->
|
|
<div class="text-center mt-3 mb-4">
|
|
<p class="text-small text-muted">
|
|
Đã có tài khoản?
|
|
<a href="login.html" class="text-primary" style="text-decoration: none; font-weight: 500;">
|
|
Đăng nhập
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleVerification() {
|
|
const role = document.getElementById('role').value;
|
|
const verificationSection = document.getElementById('verificationSection');
|
|
|
|
if (role === 'worker' || role === 'architect') {
|
|
verificationSection.style.display = 'block';
|
|
// Make verification fields required
|
|
document.getElementById('idNumber').required = true;
|
|
document.getElementById('idCardFile').required = true;
|
|
document.getElementById('certificateFile').required = true;
|
|
} else {
|
|
verificationSection.style.display = 'none';
|
|
// Make verification fields optional
|
|
document.getElementById('idNumber').required = false;
|
|
document.getElementById('idCardFile').required = false;
|
|
document.getElementById('certificateFile').required = false;
|
|
}
|
|
}
|
|
|
|
function handleFileUpload(input, previewId) {
|
|
const file = input.files[0];
|
|
const preview = document.getElementById(previewId);
|
|
|
|
if (file) {
|
|
// Validate file type
|
|
if (!file.type.startsWith('image/')) {
|
|
alert('Vui lòng chọn file hình ảnh (JPG, PNG)');
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
// Validate file size (5MB)
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
alert('File không được vượt quá 5MB');
|
|
input.value = '';
|
|
return;
|
|
}
|
|
|
|
// Show preview
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
preview.innerHTML = `
|
|
<div class="file-preview-item">
|
|
<img src="${e.target.result}" class="file-preview-thumb" alt="Preview">
|
|
<div class="file-preview-info">
|
|
<div class="file-preview-name">${file.name}</div>
|
|
<div class="file-preview-size">${formatFileSize(file.size)}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
preview.classList.add('show');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function validateForm() {
|
|
const role = document.getElementById('role').value;
|
|
|
|
if (role === 'worker' || role === 'architect') {
|
|
const idNumber = document.getElementById('idNumber').value;
|
|
const idCardFile = document.getElementById('idCardFile').files[0];
|
|
const certificateFile = document.getElementById('certificateFile').files[0];
|
|
|
|
if (!idNumber) {
|
|
alert('Vui lòng nhập số CCCD/CMND');
|
|
return false;
|
|
}
|
|
|
|
if (!idCardFile) {
|
|
alert('Vui lòng tải lên ảnh CCCD/CMND');
|
|
return false;
|
|
}
|
|
|
|
if (!certificateFile) {
|
|
alert('Vui lòng tải lên ảnh chứng chỉ hành nghề hoặc GPKD');
|
|
return false;
|
|
}
|
|
|
|
// For architect/worker roles, redirect to pending page
|
|
return true;
|
|
} else {
|
|
// For other roles, redirect to OTP page
|
|
document.querySelector('form').action = 'otp.html';
|
|
return true;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |