sync colors
This commit is contained in:
parent
73f0910d91
commit
41085f3c01
2 changed files with 141 additions and 126 deletions
|
|
@ -4,15 +4,17 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
return (
|
||||
<>
|
||||
<style>{`
|
||||
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');
|
||||
|
||||
:root {
|
||||
--bg-body: #0f1114;
|
||||
--bg-card: #1a1d23;
|
||||
--bg-toc: #23272e;
|
||||
--text-main: #e3e6eb;
|
||||
--text-muted: #9ba3af;
|
||||
--accent-blue: #4da3ff;
|
||||
--accent-purple: #bb86fc;
|
||||
--border-color: #30363d;
|
||||
--bg-body: #0a0a0a;
|
||||
--bg-card: #0d0d22;
|
||||
--bg-toc: #080818;
|
||||
--text-main: #cccccc;
|
||||
--text-muted: #888888;
|
||||
--accent-blue: #00FFFF;
|
||||
--accent-purple: #FF00FF;
|
||||
--border-color: rgba(0,255,255,0.2);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -21,7 +23,7 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
}
|
||||
|
||||
.wiki-wrapper {
|
||||
font-family: 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
|
|
@ -34,37 +36,43 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
|
||||
.wiki-container {
|
||||
background-color: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid rgba(0,255,255,0.15);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||
box-shadow: 0 0 40px rgba(0,255,255,0.08);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: #00FFFF;
|
||||
border-bottom: 1px solid rgba(0,255,255,0.2);
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0;
|
||||
text-shadow: 0 0 20px rgba(0,255,255,0.3);
|
||||
font-family: 'Orbitron', monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
color: var(--accent-blue);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
color: #00FFFF;
|
||||
border-bottom: 1px solid rgba(0,255,255,0.2);
|
||||
margin-top: 2em;
|
||||
text-shadow: 0 0 10px rgba(0,255,255,0.2);
|
||||
font-family: 'Orbitron', monospace;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
color: var(--accent-blue);
|
||||
color: #00FF41;
|
||||
margin-top: 1.5em;
|
||||
font-family: 'Orbitron', monospace;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-blue);
|
||||
color: #00FFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -77,11 +85,12 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
float: right;
|
||||
width: 300px;
|
||||
background-color: var(--bg-toc);
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid rgba(0,255,255,0.2);
|
||||
border-radius: 8px;
|
||||
margin: 0 0 20px 20px;
|
||||
padding: 10px;
|
||||
font-size: 0.9em;
|
||||
box-shadow: 0 0 15px rgba(0,255,255,0.05);
|
||||
}
|
||||
|
||||
.infobox img {
|
||||
|
|
@ -131,7 +140,7 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
max-height: 500px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid rgba(0,255,255,0.2);
|
||||
}
|
||||
|
||||
.full-width-img figcaption {
|
||||
|
|
@ -146,11 +155,12 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
/* Оглавление */
|
||||
.toc {
|
||||
background-color: var(--bg-toc);
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid rgba(0,255,255,0.2);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 10px rgba(0,255,255,0.05);
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
|
|
@ -166,7 +176,7 @@ const CyberSecurityArticle: React.FC = () => {
|
|||
/* Источники */
|
||||
.sources {
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-top: 1px solid rgba(0,255,255,0.2);
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -310,7 +310,7 @@ const QUESTIONS_BASICS: Question[] = [
|
|||
const styles: Record<string, React.CSSProperties> = {
|
||||
container: {
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#0f172a',
|
||||
backgroundColor: '#0a0a0a',
|
||||
padding: '20px',
|
||||
fontFamily: 'system-ui, -apple-system, sans-serif',
|
||||
display: 'flex',
|
||||
|
|
@ -318,56 +318,59 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
alignItems: 'center'
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#1e293b',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #334155',
|
||||
backgroundColor: '#0d0d22',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(0,255,255,0.2)',
|
||||
maxWidth: '600px',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
|
||||
boxShadow: '0 0 30px rgba(0,255,255,0.1)'
|
||||
},
|
||||
menu: {
|
||||
textAlign: 'center',
|
||||
padding: '40px'
|
||||
},
|
||||
menuTitle: {
|
||||
color: '#60a5fa',
|
||||
color: '#00FFFF',
|
||||
fontSize: '32px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px'
|
||||
marginBottom: '16px',
|
||||
fontFamily: "'Orbitron', monospace"
|
||||
},
|
||||
menuSubtitle: {
|
||||
color: '#94a3b8',
|
||||
color: '#888',
|
||||
marginBottom: '40px',
|
||||
fontSize: '16px'
|
||||
fontSize: '16px',
|
||||
fontFamily: "'Share Tech Mono', monospace"
|
||||
},
|
||||
menuButton: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
padding: '20px',
|
||||
marginBottom: '16px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid #475569',
|
||||
backgroundColor: '#334155',
|
||||
color: '#f8fafc',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(0,255,255,0.3)',
|
||||
backgroundColor: '#0a0a1a',
|
||||
color: '#ccc',
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s',
|
||||
textAlign: 'left',
|
||||
position: 'relative'
|
||||
position: 'relative',
|
||||
fontFamily: "'Orbitron', monospace"
|
||||
},
|
||||
menuButtonCompleted: {
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.1)'
|
||||
borderColor: '#00FF41',
|
||||
backgroundColor: 'rgba(0,255,65,0.05)'
|
||||
},
|
||||
completedBadge: {
|
||||
position: 'absolute',
|
||||
right: '20px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
backgroundColor: '#22c55e',
|
||||
color: 'white',
|
||||
backgroundColor: '#00FF41',
|
||||
color: '#000',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
|
|
@ -375,46 +378,49 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '18px',
|
||||
boxShadow: '0 2px 8px rgba(34, 197, 94, 0.4)'
|
||||
boxShadow: '0 2px 8px rgba(0,255,65,0.4)'
|
||||
},
|
||||
header: {
|
||||
padding: '24px',
|
||||
borderBottom: '1px solid #334155',
|
||||
backgroundColor: '#1e293b'
|
||||
borderBottom: '1px solid rgba(0,255,255,0.15)',
|
||||
backgroundColor: '#0d0d22'
|
||||
},
|
||||
progressBar: {
|
||||
height: '4px',
|
||||
backgroundColor: '#334155',
|
||||
backgroundColor: 'rgba(0,255,255,0.1)',
|
||||
borderRadius: '2px',
|
||||
marginBottom: '16px',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
backgroundColor: '#3b82f6',
|
||||
backgroundColor: '#00FFFF',
|
||||
transition: 'width 0.3s ease'
|
||||
},
|
||||
meta: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
color: '#94a3b8',
|
||||
color: '#888',
|
||||
fontSize: '14px',
|
||||
marginBottom: '8px'
|
||||
marginBottom: '8px',
|
||||
fontFamily: "'Share Tech Mono', monospace"
|
||||
},
|
||||
title: {
|
||||
color: '#60a5fa',
|
||||
color: '#00FFFF',
|
||||
fontSize: '20px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '8px'
|
||||
marginBottom: '8px',
|
||||
fontFamily: "'Orbitron', monospace"
|
||||
},
|
||||
scenario: {
|
||||
color: '#e2e8f0',
|
||||
color: '#ccc',
|
||||
fontSize: '16px',
|
||||
lineHeight: '1.5',
|
||||
whiteSpace: 'pre-line'
|
||||
whiteSpace: 'pre-line',
|
||||
fontFamily: "'Share Tech Mono', monospace"
|
||||
},
|
||||
hint: {
|
||||
color: '#94a3b8',
|
||||
color: '#888',
|
||||
fontSize: '13px',
|
||||
marginBottom: '12px',
|
||||
fontStyle: 'italic'
|
||||
|
|
@ -427,10 +433,10 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
},
|
||||
option: {
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid #475569',
|
||||
backgroundColor: '#334155',
|
||||
color: '#f1f5f9',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(0,255,255,0.2)',
|
||||
backgroundColor: '#0a0a1a',
|
||||
color: '#ccc',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
|
@ -440,16 +446,16 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
fontSize: '15px'
|
||||
},
|
||||
optionSelected: {
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#2563eb'
|
||||
borderColor: '#FF00FF',
|
||||
backgroundColor: 'rgba(255,0,255,0.1)'
|
||||
},
|
||||
optionCorrect: {
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: '#16a34a'
|
||||
borderColor: '#00FF41',
|
||||
backgroundColor: 'rgba(0,255,65,0.12)'
|
||||
},
|
||||
optionWrong: {
|
||||
borderColor: '#ef4444',
|
||||
backgroundColor: '#dc2626'
|
||||
borderColor: '#FF0040',
|
||||
backgroundColor: 'rgba(255,0,64,0.12)'
|
||||
},
|
||||
optionDisabled: {
|
||||
opacity: 0.6,
|
||||
|
|
@ -459,7 +465,8 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
width: '28px',
|
||||
height: '28px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
backgroundColor: 'rgba(0,255,255,0.1)',
|
||||
color: '#00FFFF',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
|
@ -469,14 +476,14 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
},
|
||||
explanation: {
|
||||
padding: '24px',
|
||||
borderTop: '1px solid #334155',
|
||||
backgroundColor: 'rgba(0,0,0,0.2)'
|
||||
borderTop: '1px solid rgba(0,255,255,0.15)',
|
||||
backgroundColor: 'rgba(0,0,0,0.3)'
|
||||
},
|
||||
explanationCorrect: {
|
||||
backgroundColor: 'rgba(22, 163, 74, 0.1)'
|
||||
backgroundColor: 'rgba(0,255,65,0.08)'
|
||||
},
|
||||
explanationWrong: {
|
||||
backgroundColor: 'rgba(220, 38, 38, 0.1)'
|
||||
backgroundColor: 'rgba(255,0,64,0.08)'
|
||||
},
|
||||
resultTitle: {
|
||||
fontWeight: 'bold',
|
||||
|
|
@ -487,9 +494,10 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
gap: '8px'
|
||||
},
|
||||
explanationText: {
|
||||
color: '#cbd5e1',
|
||||
color: '#aaa',
|
||||
lineHeight: '1.6',
|
||||
marginBottom: '12px'
|
||||
marginBottom: '12px',
|
||||
fontFamily: "'Share Tech Mono', monospace"
|
||||
},
|
||||
tags: {
|
||||
display: 'flex',
|
||||
|
|
@ -498,52 +506,57 @@ const styles: Record<string, React.CSSProperties> = {
|
|||
marginBottom: '16px'
|
||||
},
|
||||
tag: {
|
||||
backgroundColor: '#475569',
|
||||
color: '#cbd5e1',
|
||||
backgroundColor: 'rgba(0,255,255,0.08)',
|
||||
color: '#00FFFF',
|
||||
padding: '4px 10px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '12px',
|
||||
fontFamily: 'monospace'
|
||||
fontFamily: 'monospace',
|
||||
border: '1px solid rgba(0,255,255,0.3)'
|
||||
},
|
||||
analysis: {
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '13px',
|
||||
color: '#94a3b8',
|
||||
color: '#888',
|
||||
marginBottom: '16px'
|
||||
},
|
||||
button: {
|
||||
width: '100%',
|
||||
padding: '14px',
|
||||
borderRadius: '10px',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
backgroundColor: '#3b82f6',
|
||||
color: 'white',
|
||||
backgroundColor: '#00FFFF',
|
||||
color: '#000',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.2s'
|
||||
transition: 'background 0.2s',
|
||||
fontFamily: "'Orbitron', monospace"
|
||||
},
|
||||
buttonDisabled: {
|
||||
backgroundColor: '#475569',
|
||||
backgroundColor: 'rgba(0,255,255,0.1)',
|
||||
color: '#444',
|
||||
cursor: 'not-allowed'
|
||||
},
|
||||
backButton: {
|
||||
marginTop: '20px',
|
||||
padding: '10px 20px',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid #475569',
|
||||
color: '#94a3b8',
|
||||
border: '1px solid rgba(0,255,255,0.3)',
|
||||
color: '#888',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px'
|
||||
fontSize: '14px',
|
||||
fontFamily: "'Orbitron', monospace"
|
||||
},
|
||||
completionStatus: {
|
||||
marginTop: '8px',
|
||||
fontSize: '14px',
|
||||
color: '#22c55e',
|
||||
fontWeight: 'bold'
|
||||
color: '#00FF41',
|
||||
fontWeight: 'bold',
|
||||
fontFamily: "'Share Tech Mono', monospace"
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -576,12 +589,12 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
|
|||
|
||||
{isPerfect && (
|
||||
<div style={{
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.2)',
|
||||
border: '2px solid #22c55e',
|
||||
backgroundColor: 'rgba(0,255,65,0.1)',
|
||||
border: '1px solid #00FF41',
|
||||
borderRadius: '12px',
|
||||
padding: '12px',
|
||||
marginBottom: '20px',
|
||||
color: '#4ade80',
|
||||
color: '#00FF41',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
✓ Все ответы правильные!
|
||||
|
|
@ -591,13 +604,13 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
|
|||
<div style={{
|
||||
fontSize: '56px',
|
||||
fontWeight: 'bold',
|
||||
color: '#60a5fa',
|
||||
color: '#00FFFF',
|
||||
marginBottom: '8px'
|
||||
}}>
|
||||
{percent}%
|
||||
</div>
|
||||
|
||||
<div style={{ color: '#94a3b8', marginBottom: '32px' }}>
|
||||
<div style={{ color: '#888', marginBottom: '32px' }}>
|
||||
Правильно: {score} из {questions.length}
|
||||
</div>
|
||||
|
||||
|
|
@ -638,15 +651,7 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
|
|||
|
||||
<button
|
||||
onClick={onBack}
|
||||
style={{
|
||||
padding: '14px',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #475569',
|
||||
backgroundColor: 'transparent',
|
||||
color: '#94a3b8',
|
||||
fontSize: '16px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
style={styles.backButton}
|
||||
>
|
||||
← В главное меню
|
||||
</button>
|
||||
|
|
@ -737,7 +742,7 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
|
|||
<div style={styles.card}>
|
||||
<div style={styles.header}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<span style={{ color: '#60a5fa', fontWeight: 'bold' }}>{title}</span>
|
||||
<span style={{ color: '#00FFFF', fontWeight: 'bold' }}>{title}</span>
|
||||
<button onClick={onBack} style={{ ...styles.backButton, margin: 0 }}>✕</button>
|
||||
</div>
|
||||
<div style={styles.progressBar}>
|
||||
|
|
@ -778,7 +783,7 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
|
|||
}}>
|
||||
<div style={{
|
||||
...styles.resultTitle,
|
||||
color: isCorrect ? '#4ade80' : '#f87171'
|
||||
color: isCorrect ? '#00FF41' : '#FF0040'
|
||||
}}>
|
||||
<span>{isCorrect ? '✅' : '❌'}</span>
|
||||
<span>{isCorrect ? 'Правильно!' : 'Ошибка'}</span>
|
||||
|
|
@ -866,7 +871,7 @@ const MainMenu: React.FC<MainMenuProps> = ({ onSelect, completedTests }) => {
|
|||
style={{
|
||||
...styles.menuButton,
|
||||
...(isCompleted ? styles.menuButtonCompleted : {}),
|
||||
...(isHovered && !isCompleted ? { borderColor: test.color, transform: 'translateY(-2px)' } : {})
|
||||
...(isHovered && !isCompleted ? { borderColor: test.color || '#00FFFF', transform: 'translateY(-2px)' } : {})
|
||||
}}
|
||||
onMouseEnter={() => setHovered(index)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
|
|
@ -879,7 +884,7 @@ const MainMenu: React.FC<MainMenuProps> = ({ onSelect, completedTests }) => {
|
|||
<span>{test.title}</span>
|
||||
{isCompleted && <span style={{ color: '#22c55e' }}>✓</span>}
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: '#94a3b8', marginTop: '4px', fontWeight: 'normal' }}>
|
||||
<div style={{ fontSize: '13px', color: '#888', marginTop: '4px', fontWeight: 'normal' }}>
|
||||
{test.desc}
|
||||
</div>
|
||||
{isCompleted && (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue