<title>TeenTask - GenZ Super App</title>
<style>
:root {
--primary: #6366f1; /* Indigo hiện đại */
--primary-hover: #4f46e5;
--secondary: #ec4899; /* Hồng Gen Z */
--bg-main: #f1f5f9;
--bg-card: #ffffff;
--text-dark: #0f172a;
--text-gray: #64748b;
--success: #10b981;
--warning: #f59e0b;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-main); color: var(--text-dark); -webkit-font-smoothing: antialiased; }
/* Navbar */
nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.logo { font-size: 24px; font-weight: 800; background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; color: transparent; }
.user-profile { display: flex; align-items: center; gap: 10px; background: #f8fafc; padding: 6px 12px; border-radius: 20px; border: 1px solid #e2e8f0; cursor: pointer; }
.user-avatar { width: 30px; height: 30px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; }
/* Sponsored Ad Section (Bịa thêm tính năng quảng cáo) */
.ad-banner { margin: 20px; border-radius: 16px; background: linear-gradient(135deg, #1e293b, #0f172a); color: white; padding: 20px; position: relative; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.ad-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.2); font-size: 11px; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; }
.ad-banner h3 { font-size: 18px; margin-bottom: 5px; color: #facc15; }
.ad-banner p { font-size: 13px; opacity: 0.9; margin-bottom: 15px; }
.ad-btn { background: white; color: var(--text-dark); border: none; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
/* App Layout Container */
.app-container { max-width: 800px; margin: 0 auto; padding-bottom: 80px; }
/* Custom Tabs */
.tabs { display: flex; margin: 0 20px 20px; background: #e2e8f0; border-radius: 12px; padding: 4px; }
.tab { flex: 1; text-align: center; padding: 10px 0; font-weight: 600; font-size: 14px; color: var(--text-gray); cursor: pointer; border-radius: 8px; transition: all 0.3s ease; }
.tab.active { background: white; color: var(--primary); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
/* Tab Content */
.tab-content { display: none; padding: 0 20px; animation: fadeIn 0.4s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Cards */
.card { background: var(--bg-card); border-radius: 20px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #f1f5f9; transition: transform 0.2s; }
.card:active { transform: scale(0.98); }
.card-header { display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center; }
.company { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.company img { width: 24px; height: 24px; border-radius: 4px; }
.wage { font-size: 18px; font-weight: 800; color: var(--success); }
.title { font-size: 18px; font-weight: 800; margin-bottom: 8px; line-height: 1.3; }
.desc { font-size: 14px; color: var(--text-gray); margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.tag { background: #eff6ff; color: var(--primary); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.action-btn { width: 100%; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 15px; cursor: pointer; border: none; transition: 0.3s; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: #fdf2f8; color: var(--secondary); border: 1px solid #fbcfe8; }
/* Interactive Modal (Popup form) */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index: 999; justify-content: center; align-items: flex-end; }
.modal.active { display: flex; animation: slideUp 0.3s ease-out forwards; }
.modal-content { background: white; width: 100%; max-width: 600px; border-radius: 24px 24px 0 0; padding: 30px 20px; text-align: left; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h2 { font-size: 20px; color: var(--text-dark); }
.close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--text-gray); }
/* Form Styles */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text-gray); }
.form-group input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; outline: none; }
.form-group input:focus { border-color: var(--primary); }
.warning-box { background: #fffbeb; border-left: 4px solid var(--warning); padding: 10px; font-size: 12px; color: #b45309; margin-bottom: 20px; border-radius: 4px; }
/* Success State */
.success-state { text-align: center; padding: 20px 0; display: none; }
.success-icon { font-size: 60px; margin-bottom: 10px; }
.success-state h3 { color: var(--success); margin-bottom: 10px; }
.success-state p { font-size: 14px; color: var(--text-gray); margin-bottom: 20px; }
</style>
<div class="app-container">
<nav>
<div class="logo">TeenTask</div>
<div class="user-profile">
<div class="user-avatar">GZ</div>
<span style="font-size: 13px; font-weight: 600;">Học sinh</span>
</div>
</nav>
<div class="ad-banner">
<span class="ad-badge">Tài trợ</span>
<h3>Đại tiệc khai trương Letefe ☕</h3>
<p>Tuyển gấp 5 bạn review đồ uống chi nhánh mới. Thưởng nóng 500k + Voucher uống miễn phí 1 tháng!</p>
<button class="ad-btn" onclick="openModal('KOL Khai trương Letefe')">Nhận ngay</button>
</div>
<div class="tabs">
<div class="tab active" onclick="switchTab('freelance', this)">💸 Việc Làm Tự Do</div>
<div class="tab" onclick="switchTab('shadowing', this)">🎓 Trải Nghiệm Thực Tế</div>
</div>
<div id="freelance" class="tab-content active">
<div class="card">
<div class="card-header">
<div class="company">🍣 Nhà hàng Yami Sushi</div>
<div class="wage">500.000đ</div>
</div>
<h3 class="title">Chụp ảnh Menu Omakase mới</h3>
<div class="tags"><span class="tag">Nhiếp ảnh</span><span class="tag">Cuối tuần</span></div>
<p class="desc">Cần 1 bạn đến quán setup ánh sáng và chụp 10 món sushi. Yêu cầu gửi kèm portfolio các ảnh món ăn đã từng chụp.</p>
<button class="action-btn btn-primary" onclick="openModal('Chụp ảnh Menu Yami')">Ứng tuyển công việc</button>
</div>
<div class="card">
<div class="card-header">
<div class="company">👗 Local Brand TheA</div>
<div class="wage">300.000đ</div>
</div>
<h3 class="title">Tìm Mẫu Ảnh (Lookbook) Nữ Cấp 3</h3>
<div class="tags"><span class="tag">Mẫu ảnh</span><span class="tag">Dễ thương</span></div>
<p class="desc">Chụp bộ ảnh BST tựu trường. Thời gian chụp 2 tiếng buổi sáng Chủ Nhật. Hỗ trợ trang điểm và trang phục.</p>
<button class="action-btn btn-primary" onclick="openModal('Mẫu ảnh Lookbook TheA')">Ứng tuyển công việc</button>
</div>
</div>
<div id="shadowing" class="tab-content">
<div class="card" style="border-top: 4px solid var(--secondary);">
<div class="card-header">
<div class="company">👨💼 Mentor: Bác Hoàng Hùng</div>
<div class="wage" style="color: var(--secondary); font-size: 15px;">Vé: 800.000đ</div>
</div>
<h3 class="title">Bám càng 1 ngày: Giám đốc Marketing Vingroup</h3>
<div class="tags"><span class="tag" style="color:var(--secondary); background:#fdf2f8;">Kinh tế</span><span class="tag" style="color:var(--secondary); background:#fdf2f8;">Marketing</span></div>
<p class="desc">Quan sát trực tiếp quy trình ra quyết định của C-Level. Tham gia 2 cuộc họp chiến lược và 1 buổi ăn trưa định hướng nghề nghiệp 1-1.</p>
<button class="action-btn btn-secondary" onclick="openModal('Bám càng GĐ Marketing')">Đăng ký mua suất</button>
</div>
<div class="card" style="border-top: 4px solid var(--secondary);">
<div class="card-header">
<div class="company">👩⚕️ Mentor: Cô Lan Phương</div>
<div class="wage" style="color: var(--secondary); font-size: 15px;">Vé: 500.000đ</div>
</div>
<h3 class="title">Trợ lý nghiên cứu: Giảng viên ĐH Y Dược</h3>
<div class="tags"><span class="tag" style="color:var(--secondary); background:#fdf2f8;">Y Khoa</span><span class="tag" style="color:var(--secondary); background:#fdf2f8;">Học thuật</span></div>
<p class="desc">Trải nghiệm 1 ngày làm việc tại phòng thí nghiệm. Hỗ trợ phân loại số liệu và học cách viết báo cáo khoa học (cực tốt cho CV du học).</p>
<button class="action-btn btn-secondary" onclick="openModal('Trợ lý Giảng viên Y Khoa')">Đăng ký mua suất</button>
</div>
</div>
</div>
<div class="modal" id="appModal">
<div class="modal-content">
<div id="formArea">
<div class="modal-header">
<h2>Nộp Hồ Sơ Đăng Ký</h2>
<button class="close-btn" onclick="closeModal()">✕</button>
</div>
<p style="font-size: 14px; margin-bottom: 15px; font-weight: 600; color: var(--primary);">Đang ứng tuyển: <span id="jobTitleDisplay">...</span></p>
<div class="warning-box">
⚠️ <b>Bảo vệ pháp lý:</b> TeenTask yêu cầu sự đồng thuận từ Phụ huynh đối với học sinh dưới 18 tuổi.
</div>
<div class="form-group">
<label>Link Portfolio/CV của bạn (Google Drive/Canva)</label>
<input type="text" placeholder="Dán link vào đây...">
</div>
<div class="form-group">
<label>Email Phụ Huynh (Bắt buộc)</label>
<input type="email" id="parentEmail" placeholder="Bố/Mẹ sẽ nhận được email xác nhận">
</div>
<button class="action-btn btn-primary" onclick="submitApplication()">Xác nhận & Gửi yêu cầu</button>
</div>
<div id="successArea" class="success-state">
<div class="success-icon">🎉</div>
<h3>Tuyệt vời! Đã gửi hồ sơ.</h3>
<p>Hệ thống TeenTask đã gửi một email xác nhận đến tài khoản của Phụ huynh. Ngay khi Phụ huynh bấm "Đồng ý", hồ sơ của bạn sẽ được chuyển đến Doanh nghiệp.</p>
<button class="action-btn btn-secondary" onclick="closeModal()">Quay lại Trang chủ</button>
</div>
</div>
</div>
<script>
// Logic chuyển Tab
function switchTab(tabId, element) {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
element.classList.add('active');
document.getElementById(tabId).classList.add('active');
}
// Logic Modal
const modal = document.getElementById('appModal');
const formArea = document.getElementById('formArea');
const successArea = document.getElementById('successArea');
const jobTitleDisplay = document.getElementById('jobTitleDisplay');
function openModal(jobTitle) {
jobTitleDisplay.innerText = jobTitle;
formArea.style.display = 'block';
successArea.style.display = 'none';
modal.classList.add('active');
}
function closeModal() {
modal.classList.remove('active');
}
function submitApplication() {
const emailInput = document.getElementById('parentEmail').value;
if(emailInput === '') {
alert('Vui lòng nhập Email của Phụ huynh để đảm bảo quy định an toàn!');
return;
}
// Giả lập hiệu ứng loading nhanh rồi chuyển sang trạng thái thành công
formArea.style.display = 'none';
successArea.style.display = 'block';
}
// Bấm ra ngoài vùng tối để đóng popup
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
}
</script>
