From 41085f3c0168408cc21d63da31c652a9e094ee30 Mon Sep 17 00:00:00 2001
From: koplenov <koplenov@gmail.com>
Date: Sun, 5 Apr 2026 05:47:03 +0300
Subject: [PATCH] sync colors

---
 src/components/CyberSecurityArticle.tsx |  96 +++++++------
 src/components/MyQuize.tsx              | 171 ++++++++++++------------
 2 files changed, 141 insertions(+), 126 deletions(-)

diff --git a/src/components/CyberSecurityArticle.tsx b/src/components/CyberSecurityArticle.tsx
index d266411..3e8ce65 100644
--- a/src/components/CyberSecurityArticle.tsx
+++ b/src/components/CyberSecurityArticle.tsx
@@ -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,42 +36,48 @@ 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); 
-          padding-bottom: 10px; 
+        h1 {
+          font-size: 2.5em;
+          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); 
-          margin-top: 2em; 
+
+        h2 {
+          font-size: 1.6em;
+          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); 
-          text-decoration: none; 
+
+        a {
+          color: #00FFFF;
+          text-decoration: none;
         }
-        
-        a:hover { 
-          text-decoration: underline; 
+
+        a:hover {
+          text-decoration: underline;
         }
 
         /* Инфобокс */
@@ -77,19 +85,20 @@ 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 {
           width: 100%;
           border-radius: 4px;
           display: block;
         }
-        
+
         .infobox-caption {
           text-align: center;
           padding-top: 8px;
@@ -107,12 +116,12 @@ const CyberSecurityArticle: React.FC = () => {
           float: right;
           border-radius: 4px;
         }
-        
-        .thumb img { 
-          width: 100%; 
-          display: block; 
+
+        .thumb img {
+          width: 100%;
+          display: block;
         }
-        
+
         .thumb-caption {
           font-size: 0.85em;
           padding: 5px;
@@ -125,13 +134,13 @@ const CyberSecurityArticle: React.FC = () => {
           margin: 30px 0;
           width: 100%;
         }
-        
+
         .full-width-img img {
           width: 100%;
           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;
         }
 
@@ -180,11 +190,11 @@ const CyberSecurityArticle: React.FC = () => {
           .wiki-container {
             padding: 20px;
           }
-          
+
           h1 {
             font-size: 1.8em;
           }
-          
+
           .infobox, .thumb {
             float: none;
             width: 100%;
diff --git a/src/components/MyQuize.tsx b/src/components/MyQuize.tsx
index 4b437d6..1262ff1 100644
--- a/src/components/MyQuize.tsx
+++ b/src/components/MyQuize.tsx
@@ -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"
   }
 };
 
@@ -573,31 +586,31 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
             <h2 style={{ color: '#f8fafc', marginBottom: '8px' }}>
               {title} — завершён!
             </h2>
-            
+
             {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'
               }}>
                 ✓ Все ответы правильные!
               </div>
             )}
-            
+
             <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>
 
@@ -636,17 +649,9 @@ const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplet
                 Пройти снова
               </button>
               
-              <button 
+              <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 && (