VAZAI ☆ CHÀO MỪNG NGÀY THÀNH LẬP MẶT TRẬN DÂN TỘC GIẢI PHÓNG MIỀN NAM VIỆT NAM (MTDTGPMNVN) 20.12.1960-2025
☆ DeepSeek - Đề Xuất Tự Động Hóa ''Điền'' Ngày Kỉ Niệm
DeepSeek AI - Chatbot Assistant (R1 Model)
import
React, { useState, useEffect, useMemo } from 'react';
import
{
Calendar as CalendarIcon,
History,
Heart,
ChevronLeft,
ChevronRight,
Info,
Users,
Star,
Zap,
Moon,
Sun,
Clock,
MapPin,
Globe,
Fingerprint
}
from 'lucide-react';
//
--- Lunar & Timezone Logic (Fixed GMT+7) ---
const
getLunarData = (day, month, year) => {
let lunarDay, lunarMonth, dayCanChi,
monthCanChi, yearCanChi;
if (year === 2025 && month === 11
&& day === 20) {
lunarDay = 1;
lunarMonth = 11;
dayCanChi = "Quý Hợi";
monthCanChi = "Mậu Tý";
yearCanChi = "Ất Tỵ";
} else {
lunarDay = (day + 3) % 30 || 1;
lunarMonth = month === 0 ? 12 : month;
const thienCan = ["Giáp", "Ất",
"Bính", "Đinh", "Mậu", "Kỷ",
"Canh", "Tân", "Nhâm", "Quý"];
const diaChi = ["Tý", "Sửu",
"Dần", "Mão", "Thìn", "Tỵ", "Ngọ",
"Mùi", "Thân", "Dậu", "Tuất", "Hợi"];
yearCanChi = `${thienCan[(year + 6) % 10]}
${diaChi[(year + 8) % 12]}`;
dayCanChi = `${thienCan[(day + month * 3) %
10]} ${diaChi[(day + 7) % 12]}`;
monthCanChi = "Mậu Tý";
}
return {
lunarDay,
lunarMonth,
yearCanChi,
monthCanChi,
dayCanChi,
tietKhi: "Đông Chí",
hoangDao: ["Sửu",
"Thìn", "Tỵ", "Mùi", "Tuất", "Hợi"]
};
};
const
historicalEvents = [
{ day: 22, month: 12, title: "Ngày thành
lập QĐND Việt Nam", year: 1944, type: "vn" },
{ day: 20, month: 12, title: "Thành lập
Mặt trận Dân tộc Giải phóng Miền Nam", year: 1960, type: "vn" },
{ day: 20, month: 12, title: "Ngày Quốc
tế Đoàn kết Loài người", year: "Hàng năm", type:
"intl" },
{ day: 1, month: 1, title: "Tết Dương Lịch",
year: 2026, type: "intl" }
];
const
vazaiAnniversaries = [
{
day: 20,
month: 12,
title: "Kỷ niệm DeepSeek x CG
VAZAI",
description: "Cột mốc hoàn thành hệ thống
Lịch AI Pro",
vcode: "DS-VZ-201225",
type: "project"
}
];
const
App = () => {
const [now, setNow] = useState(new Date());
const [currentDate, setCurrentDate] =
useState(new Date(2025, 11, 1));
const [selectedDay, setSelectedDay] =
useState(20);
useEffect(() => {
const timer = setInterval(() =>
setNow(new Date()), 1000);
return () => clearInterval(timer);
}, []);
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const monthDays = useMemo(() => {
const totalDays = new Date(year, month + 1,
0).getDate();
const offset = new Date(year, month,
1).getDay();
const days = [];
for (let i = 0; i < offset; i++)
days.push({ day: null });
for (let d = 1; d <= totalDays; d++) {
const isHistorical =
historicalEvents.some(e => e.day === d && e.month === (month + 1));
const isVazai = vazaiAnniversaries.some(e
=> e.day === d && e.month === (month + 1));
const isToday = d === now.getDate() && month === now.getMonth()
&& year === now.getFullYear();
days.push({ day: d,
isHistorical, isVazai, isToday, lunar: getLunarData(d, month, year) });
}
return days;
}, [year, month, now]);
const selectedData = useMemo(()
=> {
const d = selectedDay;
const history =
historicalEvents.filter(e => e.day === d && e.month === (month +
1));
const vazai =
vazaiAnniversaries.filter(e => e.day === d && e.month === (month +
1));
return { history, vazai,
lunar: getLunarData(d, month, year) };
}, [selectedDay, month, year]);
return (
<div
className="min-h-screen bg-[#050505] text-slate-300 font-sans
selection:bg-blue-500/30">
{/* Timezone Indicator */}
<div
className="bg-indigo-600 text-white text-[10px] font-black uppercase
tracking-[0.3em] py-2 px-4 flex justify-between items-center shadow-lg
shadow-indigo-900/20">
<div
className="flex items-center gap-2">
<MapPin size={12}
/>
<span>Hà Nội, Việt
Nam [UTC+7]</span>
</div>
<div className="flex
items-center gap-2">
<Clock size={12}
/>
<span>{now.toLocaleTimeString('vi-VN')}</span>
</div>
</div>
<div
className="max-w-7xl mx-auto p-4 md:p-8 grid grid-cols-1 lg:grid-cols-12
gap-8">
{/* Left Column: Calendar
Control */}
<div
className="lg:col-span-8 space-y-6">
<header
className="flex flex-col md:flex-row justify-between items-end
gap-4">
<div>
<div
className="flex items-center gap-2 mb-1">
<div className="w-2 h-2
rounded-full bg-blue-500 animate-pulse"></div>
<span
className="text-blue-500 font-black text-[10px] uppercase
tracking-widest">Hệ thống VAZAI v3.2 PRO</span>
</div>
<h1
className="text-4xl font-black text-white italic tracking-tighter
uppercase">
LỊCH AZ AI
<span className="text-blue-500">2025</span>
</h1>
</div>
<div
className="flex items-center bg-slate-900/80 rounded-2xl p-1 border
border-white/5 backdrop-blur-md">
<button
onClick={() => setCurrentDate(new Date(year, month - 1, 1))}
className="p-3 hover:bg-slate-800 rounded-xl transition-all text-slate-400
hover:text-white">
<ChevronLeft
size={20} />
</button>
<div
className="px-6 text-center">
<div
className="text-[10px] font-black text-blue-500 uppercase">Tháng
{month + 1}</div>
<div
className="text-xl font-black text-white">{year}</div>
</div>
<button
onClick={() => setCurrentDate(new Date(year, month + 1, 1))}
className="p-3 hover:bg-slate-800 rounded-xl transition-all text-slate-400
hover:text-white">
<ChevronRight
size={20} />
</button>
</div>
</header>
<div className="bg-slate-900/30 border border-white/5
rounded-[2.5rem] p-8 backdrop-blur-xl shadow-2xl relative
overflow-hidden">
<div
className="grid grid-cols-7 mb-6">
{['CN', 'T2', 'T3',
'T4', 'T5', 'T6', 'T7'].map((d, i) => (
<div key={d}
className={`text-center text-[11px] font-black uppercase tracking-widest ${i
=== 0 ? 'text-red-500' : 'text-slate-600'}`}>
{d}
</div>
))}
</div>
<div
className="grid grid-cols-7 gap-4">
{monthDays.map((item, idx) => (
<div
key={idx}
onClick={()
=> item.day && setSelectedDay(item.day)}
className={`
relative
aspect-square rounded-[1.5rem] flex flex-col items-center justify-center
cursor-pointer transition-all border group
${!item.day ?
'opacity-0 pointer-events-none' : 'hover:scale-105'}
${item.isToday
? 'ring-2 ring-blue-500 ring-offset-4 ring-offset-[#050505]' : ''}
${item.day ===
selectedDay ? 'bg-blue-600 border-blue-400 text-white shadow-2xl
shadow-blue-500/20' : 'bg-slate-800/20 border-white/5
hover:border-blue-500/40'}
`}
>
{item.day
&& (
<>
<div
className={`text-2xl font-black ${item.day === selectedDay ? 'text-white' :
(idx % 7 === 0 ? 'text-red-500' : 'text-slate-100')}`}>
{item.day}
</div>
<div
className={`text-[10px] font-bold ${item.day === selectedDay ? 'text-blue-100'
: 'text-slate-500'}`}>
{item.lunar.lunarDay}
</div>
<div
className="absolute top-2 right-2 flex flex-col gap-1">
{item.isVazai && <div className="w-2 h-2 rounded-full
bg-pink-500" />}
{item.isHistorical && <div className="w-2 h-2
rounded-full bg-emerald-500" />}
</div>
</>
)}
</div>
))}
</div>
</div>
</div>
{/* Right Column: Focus
& Details */}
<div
className="lg:col-span-4 space-y-6">
<div
className="bg-gradient-to-br from-slate-900 to-black border
border-white/10 rounded-[3rem] p-8 shadow-3xl text-center relative
overflow-hidden">
<div
className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500
to-emerald-500"></div>
<div
className="text-xs font-black text-blue-500 uppercase tracking-[0.4em]
mb-4">Daily Focus</div>
<div
className="text-8xl font-black text-white tracking-tighter
mb-2">{selectedDay}</div>
<div
className="text-sm font-bold text-slate-500 uppercase mb-8
italic">
Thứ Bảy | 12/2025
</div>
<div className="grid grid-cols-2 gap-3 mb-8">
<div
className="bg-white/5 p-4 rounded-[2rem] border border-white/5">
<div
className="text-[9px] font-black text-slate-500 uppercase mb-1 flex
items-center justify-center gap-1">
<Moon
size={10} /> Âm Lịch
</div>
<div
className="text-3xl font-black
text-white">{selectedData.lunar.lunarDay}</div>
<div
className="text-[9px] font-bold text-blue-400 uppercase
tracking-tighter">Tháng {selectedData.lunar.lunarMonth}</div>
</div>
<div
className="bg-white/5 p-4 rounded-[2rem] border border-white/5">
<div
className="text-[9px] font-black text-slate-500 uppercase mb-1">
Can Chi
</div>
<div
className="text-[10px] font-black text-white uppercase leading-tight
space-y-0.5 opacity-90">
<div
className="tracking-tighter">{selectedData.lunar.dayCanChi}</div>
<div className="tracking-tighter
opacity-60 text-[9px]">{selectedData.lunar.monthCanChi}</div>
<div
className="tracking-tighter opacity-60
text-[9px]">{selectedData.lunar.yearCanChi}</div>
</div>
Không có nhận xét nào:
Đăng nhận xét