index.html - master - dikfer/web-app

index.html
99 строк4 KB
dikfer
update file
07 мар 2025, 16:46
07 мар 2025, 16:4670b4559
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="index, follow" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
  <title>
    Приложение для оценки личности - Узнайте свой тип личности |
    Личностный тест
  </title>
  <meta name="description" content="Пройдите наш бесплатный тест на оценку личности, чтобы определить свой уникальный тип личности. Получите подробную информацию о вашем социальном поведении, стиле принятия решений и эмоциональных особенностях." />

  <meta name="keywords" content="психологический тест, личностный тест, оценка личности, тип личности, альтернатива Майерса-Бриггса, тест на эмоциональный интеллект, тест на самопознание, оценка карьеры" />

  
  <link rel="apple-touch-icon" sizes="180x180" href="/media/personality-ico.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/media/personality-ico.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/media/personality-ico.png" />

  <meta name="author" content="Тест личности" />
  
  <link rel="canonical" href="https://web-app-p7mb.onrender.com/" />
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Quiz",
    "name": "Тест на оценку личности",
    "description": "Комплексная оценка личности, оценивающая социальное поведение, модели принятия решений и эмоциональный интеллект",
    "url": "https://web-app-p7mb.onrender.com/",
    "typicalAgeRange": "16-99",
    "educationalUse": "self-assessment",
    "assesses": "Личностные черты, стиль принятия решений, социальное поведение",
    "numberOfQuestions": 20,
    "image": "https://web-app-p7mb.onrender.com/media/personality-test-site-image.png",
    "author": {
      "@type": "Organization",
      "name": "Оценка личности"
    }
  }
  </script>

  <link rel="preload" href="/styling.css" as="style" />
  <link rel="preload" href="/script.js" as="script" />
  <link rel="stylesheet" href="/styling.css" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
</head>

<body>
  <div class="container">
    <!-- Welcome Screen -->
    <div class="screen welcome-screen active">
      <div class="hero-orb"></div>
      <h1 class="dynamic-gradient">
        Узнайте свой тип личности <br />Психологический тест
      </h1>
      <button class="neo-btn start-btn" style="margin-top: 3rem">
        Начать тест ➔
      </button>
    </div>

    <!-- Test Screen -->
    <div class="screen test-screen">
      <div class="progress-container">
        <div class="progress-ring">
          <svg width="80" height="80">
            <circle class="progress-circle" cx="40" cy="40" r="36" />
          </svg>
          <span class="progress-percent">0%</span>
        </div>
      </div>
      <div class="question-card">
        <h2 class="question-text"></h2>
        <div class="options-grid"></div>
      </div>
    </div>

    <!-- Results Screen -->
    <div class="screen results-screen">
      <div class="chart-container">
        <canvas id="personality-chart"></canvas>
      </div>
      <div class="personality-badge">
        <h3 class="type-title"></h3>
        <p class="type-description"></p>
      </div>
      <div class="result-actions">
        <button class="neo-btn retake-btn">Повторить тест</button>
      </div>
    </div>
  </div>
  <script src="/script.js"></script>
</body>

</html>