158 lines
6.9 KiB
HTML
158 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thông tin cá nhâ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">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="account.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Thông tin cá nhân</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="form-container">
|
|
<div class="card">
|
|
<!-- Profile Picture -->
|
|
<div class="profile-avatar-section">
|
|
<div class="profile-avatar">
|
|
<img src="https://placehold.co/100x100/005B9A/FFFFFF/png?text=HMH" alt="Avatar" id="avatarImage">
|
|
<button class="avatar-edit-btn" onclick="changeAvatar()">
|
|
<i class="fas fa-camera"></i>
|
|
</button>
|
|
</div>
|
|
<input type="file" id="avatarInput" style="display: none;" accept="image/*">
|
|
</div>
|
|
|
|
<form id="profileForm">
|
|
<!-- Full Name -->
|
|
<div class="form-group">
|
|
<label class="form-label">Họ và tên *</label>
|
|
<input type="text" class="form-input" value="Hoàng Minh Hiệp" required>
|
|
</div>
|
|
|
|
<!-- Phone -->
|
|
<div class="form-group">
|
|
<label class="form-label">Số điện thoại *</label>
|
|
<input type="tel" class="form-input" value="0347302911" required>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input type="email" class="form-input" value="hoanghiep@example.com">
|
|
</div>
|
|
|
|
<!-- Birth Date -->
|
|
<div class="form-group">
|
|
<label class="form-label">Ngày sinh</label>
|
|
<input type="date" class="form-input" value="1985-03-15">
|
|
</div>
|
|
|
|
<!-- Gender -->
|
|
<div class="form-group">
|
|
<label class="form-label">Giới tính</label>
|
|
<select class="form-select">
|
|
<option value="">Chọn giới tính</option>
|
|
<option value="male" selected>Nam</option>
|
|
<option value="female">Nữ</option>
|
|
<option value="other">Khác</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- ID Number -->
|
|
<div class="form-group">
|
|
<label class="form-label">Số CMND/CCCD</label>
|
|
<input type="text" class="form-input" value="123456789012">
|
|
</div>
|
|
|
|
<!-- ID MST -->
|
|
<div class="form-group">
|
|
<label class="form-label">Mã số thuế</label>
|
|
<input type="text" class="form-input" value="0359837618">
|
|
</div>
|
|
|
|
|
|
<!-- Company -->
|
|
<div class="form-group">
|
|
<label class="form-label">Công ty</label>
|
|
<input type="text" class="form-input" value="Công ty TNHH Xây dựng ABC">
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div class="form-group">
|
|
<label class="form-label">Địa chỉ</label>
|
|
<input type="text" class="form-input" value="123 Man Thiện, Thủ Đức, Hồ Chí Minh">
|
|
</div>
|
|
|
|
<!-- Position -->
|
|
<div class="form-group">
|
|
<label class="form-label">Chức vụ</label>
|
|
<select class="form-select">
|
|
<option value="">Chọn chức vụ</option>
|
|
<option value="contractor" selected>Thầu thợ</option>
|
|
<option value="architect">Kiến trúc sư</option>
|
|
<option value="dealer">Đại lý phân phối</option>
|
|
<option value="broker">Môi giới</option>
|
|
<option value="other">Khác</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Experience -->
|
|
<div class="form-group">
|
|
<label class="form-label">Kinh nghiệm (năm)</label>
|
|
<input type="number" class="form-input" value="10" min="0">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="history.back()">
|
|
Hủy bỏ
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" onclick="saveProfile()">
|
|
<i class="fas fa-save"></i>
|
|
Lưu thay đổi
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function changeAvatar() {
|
|
document.getElementById('avatarInput').click();
|
|
}
|
|
|
|
document.getElementById('avatarInput').addEventListener('change', function(e) {
|
|
if (e.target.files && e.target.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
document.getElementById('avatarImage').src = e.target.result;
|
|
};
|
|
reader.readAsDataURL(e.target.files[0]);
|
|
}
|
|
});
|
|
|
|
function saveProfile() {
|
|
const form = document.getElementById('profileForm');
|
|
if (form.checkValidity()) {
|
|
alert('Thông tin đã được cập nhật thành công!');
|
|
window.location.href = 'account.html';
|
|
} else {
|
|
form.reportValidity();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |