зеркало из
https://github.com/kodackx/disinformation-quest.git
synced 2025-10-28 20:34:15 +02:00
0.6.2 intro screen revamp and small expert note border change
Этот коммит содержится в:
Constantin Rusu
родитель
b6262dc20f
Коммит
2697c97eb3
4
package-lock.json
сгенерированный
4
package-lock.json
сгенерированный
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "vite_react_shadcn_ts",
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vite_react_shadcn_ts",
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@hookform/resolvers": "^3.9.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "vite_react_shadcn_ts",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@ -34,10 +34,10 @@
|
||||
);
|
||||
background-size: 20px 20px, 20px 20px, 4px 4px;
|
||||
padding: 1rem;
|
||||
border: 1px solid rgb(234 179 8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
box-shadow:
|
||||
0 0 20px rgba(234, 179, 8, 0.15),
|
||||
0 0 15px rgba(17, 24, 39, 0.4),
|
||||
inset 0 0 80px rgba(0, 0, 0, 0.7);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
@ -52,6 +52,22 @@
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.expert-memo::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 6px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(234, 179, 8, 0.85),
|
||||
rgba(234, 179, 8, 0.45)
|
||||
);
|
||||
border-radius: 2px 0 0 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.expert-memo {
|
||||
padding: 2rem;
|
||||
@ -65,6 +81,14 @@
|
||||
inset 0 0 80px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.expert-memo.alert::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(239, 68, 68, 0.9),
|
||||
rgba(239, 68, 68, 0.5)
|
||||
);
|
||||
}
|
||||
|
||||
.memo-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
padding-bottom: 1.25rem;
|
||||
|
||||
@ -318,93 +318,116 @@ const Index = () => {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
<GameBackground shouldStartAudio={shouldStartAudio} />
|
||||
<div className="relative min-h-screen bg-transparent flex items-center justify-center p-4">
|
||||
<div className="relative min-h-screen bg-transparent flex items-center justify-center px-4 py-8">
|
||||
{showIntroDialog && <IntroDialog onStartAudio={() => setShouldStartAudio(true)} />}
|
||||
<Card className="w-full md:max-w-5xl bg-black/50 text-white border-gray-700 transition-all duration-1000 animate-fade-in backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-4 p-4 md:p-6">
|
||||
<div className="flex justify-between items-center px-4">
|
||||
<Badge variant="outline" className="text-yellow-500 border-yellow-500">
|
||||
<Lock className="w-3 h-3 mr-1" />
|
||||
{t('mission.topSecret')}
|
||||
</Badge>
|
||||
<MuteButton />
|
||||
<Badge variant="outline" className="text-red-500 border-red-500">
|
||||
<AlertCircle className="w-3 h-3 mr-1" />
|
||||
{t('mission.classified')}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<CardTitle className="text-2xl md:text-3xl mb-2 relative z-10">
|
||||
{t('mission.title', { operationName })}
|
||||
</CardTitle>
|
||||
<div className="absolute -rotate-12 opacity-30 top-0 left-1/2 -translate-x-1/2 border-8 border-red-500 rounded w-full py-8 z-0">
|
||||
<span className="text-red-500 text-4xl font-bold absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
{t('mission.classified')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardDescription className="text-yellow-500 font-mono text-sm flex items-center justify-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
{t('mission.clearanceLevel')}
|
||||
<Shield className="w-4 h-4" />
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<div className="pb-4">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex justify-between items-center text-sm border-b border-gray-700 pb-3">
|
||||
<p className="font-mono text-yellow-500 font-semibold tracking-wider">{t('mission.directorate')}</p>
|
||||
</div>
|
||||
<div className="text-gray-300 font-mono text-sm space-y-1">
|
||||
<p>{t('mission.to', { agentNumber })}</p>
|
||||
<p>{t('mission.subject', { operationName })}</p>
|
||||
<p className="text-xs text-gray-500">Date: {new Date().toLocaleDateString('en-GB')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-gray-300 font-mono leading-relaxed space-y-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h2 className="text-yellow-500 font-mono text-sm">Briefing Audio</h2>
|
||||
<BriefingAudio
|
||||
stage="INTRO"
|
||||
audioRef={audioRef}
|
||||
className="bg-transparent hover:bg-black/40"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p>{t('mission.briefing.part1')}</p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="w-full max-w-6xl flex items-center"
|
||||
>
|
||||
<section className="relative w-full overflow-hidden rounded-3xl border border-yellow-500/20 bg-black/70 backdrop-blur-xl shadow-[0_40px_120px_rgba(0,0,0,0.45)]">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(234,179,8,0.14),transparent_65%)]" />
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-sky-500/10 opacity-60" />
|
||||
<div className="relative grid gap-6 p-6 md:p-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-wrap items-center gap-4 text-xs uppercase tracking-[0.4em] text-gray-300/80">
|
||||
<Badge variant="outline" className="border-yellow-500/40 text-yellow-400/90 bg-yellow-500/5">
|
||||
<Lock className="w-3 h-3 mr-2" />
|
||||
{t('mission.topSecret')}
|
||||
</Badge>
|
||||
<div className="flex-1" />
|
||||
<Badge variant="outline" className="border-red-500/50 text-red-400/90 bg-red-500/10">
|
||||
<AlertCircle className="w-3 h-3 mr-2" />
|
||||
{t('mission.classified')}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p>{t('mission.briefing.part2')}</p>
|
||||
<div className="space-y-1.5">
|
||||
<p className="font-mono text-xs uppercase tracking-[0.4em] text-yellow-500/80">
|
||||
{t('mission.directorate')}
|
||||
</p>
|
||||
<div className="flex flex-col gap-1.5 text-xs font-mono text-gray-300/90">
|
||||
<span>{t('mission.to', { agentNumber })}</span>
|
||||
<span>{t('mission.subject', { operationName })}</span>
|
||||
<span className="text-gray-500">
|
||||
{new Date().toLocaleDateString('en-GB')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<span className="font-mono text-sm uppercase tracking-[0.5em] text-white/60">
|
||||
{t('mission.clearanceLevel')}
|
||||
</span>
|
||||
<h1 className="text-2xl md:text-4xl lg:text-5xl font-semibold tracking-[0.28em] text-white uppercase leading-tight drop-shadow-[0_10px_35px_rgba(0,0,0,0.65)]">
|
||||
{t('mission.title', { operationName })}
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-yellow-400/80 font-mono text-sm uppercase tracking-[0.35em]">
|
||||
{t('mission.quote')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="pt-2 text-yellow-500 font-bold">{t('mission.briefing.warning')}</p>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
|
||||
<Button
|
||||
onClick={handleStartGame}
|
||||
className="group relative overflow-hidden bg-yellow-500 text-black px-12 py-6 text-base md:text-lg font-mono tracking-[0.18em] uppercase shadow-[0_20px_60px_rgba(234,179,8,0.35)] transition-transform duration-300 hover:-translate-y-1 whitespace-nowrap"
|
||||
>
|
||||
<span className="relative z-10 flex items-center gap-3">
|
||||
<ChevronRightIcon className="h-5 w-5" />
|
||||
{t('buttons.acceptMission')}
|
||||
</span>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-black/0 via-black/10 to-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
|
||||
</Button>
|
||||
<div className="flex justify-end sm:justify-start">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative overflow-hidden rounded-2xl border border-white/10 bg-black/40 shadow-[0_30px_90px_rgba(0,0,0,0.45)]">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-black/70 opacity-80" />
|
||||
<div className="relative p-6 md:p-7 space-y-4 font-mono text-sm leading-relaxed text-gray-200">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<h2 className="text-yellow-400/80 uppercase tracking-[0.4em] text-xs">
|
||||
{t('mission.briefingAudioLabel', 'Briefing Audio')}
|
||||
</h2>
|
||||
<BriefingAudio
|
||||
stage="INTRO"
|
||||
audioRef={audioRef}
|
||||
className="bg-black/30 border-yellow-500/40 text-yellow-500 hover:bg-yellow-500/10"
|
||||
/>
|
||||
<MuteButton />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-400/80 text-xs uppercase tracking-[0.4em]">
|
||||
<Shield className="w-4 h-4 text-yellow-500/80" />
|
||||
{t('mission.clearanceLevel')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 text-xs md:text-sm leading-relaxed">
|
||||
<p>{t('mission.briefing.part1')}</p>
|
||||
<p>{t('mission.briefing.part2')}</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-white/10">
|
||||
<p className="text-yellow-400 text-xs md:text-sm">
|
||||
{t('mission.briefing.warning')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-4">
|
||||
<p className="text-yellow-500 italic font-mono text-center mb-6 text-sm tracking-wider">
|
||||
{t('mission.quote')}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Button
|
||||
onClick={handleStartGame}
|
||||
className="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-6 text-lg transition-all duration-500 font-mono relative group"
|
||||
>
|
||||
<span className="group-hover:animate-pulse">{t('buttons.acceptMission')}</span>
|
||||
</Button>
|
||||
<p className="text-red-500 text-sm font-mono">
|
||||
{t('warnings.selfDestruct')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
</motion.div>
|
||||
<div className="absolute inset-x-0 bottom-4">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
export const VERSION = {
|
||||
current: '0.6.1',
|
||||
releaseDate: '2025-05-08',
|
||||
current: '0.6.2',
|
||||
releaseDate: '2025-05-09',
|
||||
changelog: {
|
||||
'0.6.2': [
|
||||
'Redesigned mission intro screen with streamlined layout and spacing',
|
||||
'Softened expert memo visuals by replacing the full yellow border with an accent bar',
|
||||
'Refined accept mission CTA arrangement with improved typography and language switcher placement',
|
||||
'Updated briefing text styling and metadata formatting for better readability'
|
||||
],
|
||||
'0.6.1': [
|
||||
'Added Romanian translation for real world examples content',
|
||||
'Improved real world examples UI with i18n support',
|
||||
|
||||
Загрузка…
x
Ссылка в новой задаче
Block a user