visual/src/TestShowcase.tsx - comb - obuxxxov/CodeForge

visual/src/TestShowcase.tsx
232 строки8 KB
ObliInSe
start
18 авг 2025, 00:31
18 авг 2025, 00:310671f4e
import React from 'react';

const TestShowcase: React.FC = () => {
  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e40af 100%)',
      padding: '40px 20px',
      color: '#E6F1FF'
    }}>
      <div style={{
        maxWidth: 1200,
        margin: '0 auto'
      }}>
        <h1 style={{
          textAlign: 'center',
          fontSize: 36,
          fontWeight: 700,
          marginBottom: 40,
          background: 'linear-gradient(135deg, #69EBD0, #a855f7)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          backgroundClip: 'text'
        }}>
          ✨ Улучшения системы тестирования
        </h1>
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(500px, 1fr))',
          gap: 32,
          marginBottom: 40
        }}>
          {/* Код блок улучшения */}
          <div style={{
            background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 214, 160, 0.05))',
            border: '2px solid rgba(168, 85, 247, 0.3)',
            borderRadius: 20,
            padding: 32,
            backdropFilter: 'blur(20px)'
          }}>
            <h2 style={{ 
              margin: '0 0 24px 0', 
              color: '#69EBD0',
              fontSize: 24,
              display: 'flex',
              alignItems: 'center',
              gap: 12
            }}>
              💻 Улучшенный блок кода
            </h2>
            
            <div style={{
              background: 'rgba(0,0,0,0.4)',
              borderRadius: 12,
              padding: 20,
              marginBottom: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)',
              position: 'relative'
            }}>
              {/* Заголовок с языком */}
              <div style={{
                position: 'absolute',
                top: 8,
                right: 12,
                background: 'rgba(105, 235, 208, 0.2)',
                borderRadius: 6,
                padding: '2px 8px',
                fontSize: 11,
                fontWeight: 600,
                color: '#69EBD0',
                textTransform: 'uppercase'
              }}>
                PYTHON
              </div>
              
              <pre style={{
                margin: 0,
                color: '#E6F1FF',
                fontSize: 14,
                fontFamily: 'Monaco, Consolas, "Liberation Mono", monospace',
                lineHeight: 1.6,
                textAlign: 'left',
                whiteSpace: 'pre-wrap'
              }}>
                <code>{`def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(5))`}</code>
              </pre>
            </div>
            
            <div style={{
              background: 'rgba(105, 235, 208, 0.1)',
              border: '1px solid rgba(105, 235, 208, 0.3)',
              borderRadius: 8,
              padding: 16,
              fontSize: 14
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>✨ Что улучшено:</h4>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>🎯 <strong>Выравнивание по левому краю</strong> - код читается естественно</li>
                <li>🏷️ <strong>Бейдж языка программирования</strong> - сразу понятно, что это Python</li>
                <li>📏 <strong>Правильные отступы</strong> - сохраняется форматирование</li>
                <li>🎨 <strong>Улучшенный контраст</strong> - лучше читаемость</li>
              </ul>
            </div>
          </div>


        </div>

        {/* Общие улучшения */}
        <div style={{
          background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 214, 160, 0.05))',
          border: '2px solid rgba(168, 85, 247, 0.3)',
          borderRadius: 20,
          padding: 32,
          textAlign: 'center',
          backdropFilter: 'blur(20px)'
        }}>
          <h2 style={{
            margin: '0 0 32px 0',
            fontSize: 28,
            fontWeight: 600,
            background: 'linear-gradient(135deg, #69EBD0, #a855f7)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text'
          }}>
            🚀 Дополнительные улучшения UX
          </h2>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 24,
            marginTop: 32
          }}>
            <div style={{
              background: 'rgba(0,0,0,0.2)',
              borderRadius: 12,
              padding: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)'
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>
                🎨 Визуальная иерархия
              </h4>
              <p style={{ margin: 0, fontSize: 14, opacity: 0.9 }}>
                Четкое разделение элементов по цветам, размерам и типографике
              </p>
            </div>
            
            <div style={{
              background: 'rgba(0,0,0,0.2)',
              borderRadius: 12,
              padding: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)'
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>
                ⚡ Мгновенная обратная связь
              </h4>
              <p style={{ margin: 0, fontSize: 14, opacity: 0.9 }}>
                Анимации, подсветка и звуковая обратная связь при взаимодействии
              </p>
            </div>
            
            <div style={{
              background: 'rgba(0,0,0,0.2)',
              borderRadius: 12,
              padding: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)'
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>
                🎯 Интуитивное управление
              </h4>
              <p style={{ margin: 0, fontSize: 14, opacity: 0.9 }}>
                Простые жесты клика для сложных операций сопоставления
              </p>
            </div>
            
            <div style={{
              background: 'rgba(0,0,0,0.2)',
              borderRadius: 12,
              padding: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)'
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>
                🔧 Доступность
              </h4>
              <p style={{ margin: 0, fontSize: 14, opacity: 0.9 }}>
                Высокий контраст, читаемые шрифты, понятные иконки
              </p>
            </div>
            
            <div style={{
              background: 'rgba(0,0,0,0.2)',
              borderRadius: 12,
              padding: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)'
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>
                📱 Responsive дизайн
              </h4>
              <p style={{ margin: 0, fontSize: 14, opacity: 0.9 }}>
                Работает на всех устройствах - от телефона до широкого экрана
              </p>
            </div>
            
            <div style={{
              background: 'rgba(0,0,0,0.2)',
              borderRadius: 12,
              padding: 20,
              border: '1px solid rgba(105, 235, 208, 0.3)'
            }}>
              <h4 style={{ margin: '0 0 12px 0', color: '#69EBD0' }}>
                ⏱️ Контроль времени
              </h4>
              <p style={{ margin: 0, fontSize: 14, opacity: 0.9 }}>
                Прогресс-бар, счетчики вопросов, оптимизация для быстрого ответа
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TestShowcase;