index.html - master - levchenko_ka/system

index.html
229 строк10 KB
levchenko_ka
Update: index.html
15 июл 2026, 17:44
15 июл 2026, 17:4436c0f9e
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Системы счисления: задания</title>
  <style>
    :root {
      --p: #FF5C8D; --s: #4ECDC4; --a: #FFD166;
      --def: #FFEBEE; --info: #E1F5FE; --ex: #FFFDE7; --sum: #D4EDDA;
    }
    body { font-family: sans-serif; margin: 0; background: #FFF9F4; color: #2D3436; overflow-x: hidden; }
    header { background: linear-gradient(135deg, var(--p), var(--s), var(--a)); color: white; padding: 2rem 1rem; text-align: center; }
    .container { max-width: 800px; margin: 2rem auto; padding: 0 1rem; position: relative; z-index: 10; }
    h2 { color: var(--p); border-bottom: 3px solid var(--a); display: inline-block; padding-bottom: 0.4rem; }
    
    .block-wrapper { margin-bottom: 1.2rem; }
    .block-title { display: block; font-weight: bold; color: var(--p); margin-bottom: 0.5rem; border-left: 4px solid var(--a); padding-left: 0.6rem; }
    .def-block { background: var(--def); border: 1px solid rgba(255,92,141,0.3); padding: 1rem; border-radius: 10px; }
    .info-block { background: var(--info); border: 1px solid rgba(78,205,196,0.3); padding: 1rem; border-radius: 10px; }
    .example-block { background: var(--ex); border: 2px dashed var(--s); padding: 1rem; font-family: monospace; color: #C0392B; }
    .summary-block { background: var(--sum); border: 1px solid #c3e6cb; padding: 1rem; margin-top: 0.8rem; font-weight: 600; color: #155724; }
    .summary-label { display: inline-block; background: #28a745; color: white; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; text-transform: uppercase; }

    .tasks { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
    @media (min-width: 700px) { .tasks { grid-template-columns: repeat(2, 1fr); } }
    .task-card { background: white; border: 1px solid #eee; padding: 1.2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
    input { width: 100%; padding: 0.7rem; border: 2px solid #f0f0f0; border-radius: 8px; box-sizing: border-box; margin-top: 0.5rem; }
    button { background: linear-gradient(45deg, var(--p), #FF3C7D); color: white; border: none; padding: 0.7rem 1.2rem; border-radius: 50px; cursor: pointer; width: 100%; margin-top: 0.6rem; }
    .feedback { margin-top: 0.6rem; font-weight: bold; }
    .success { color: #00B894; }
    .error { color: #FF6B6B; }

    /* Какашка летит прямо вперёд и остаётся в центре экрана — её хорошо видно */
    .poop-emoji {
      position: fixed;
      font-size: 4.5rem;       /* крупнее, чтобы точно было видно */
      pointer-events: none;
      z-index: 9999;
      animation: flyForward 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
      opacity: 1;
    }

    @keyframes flyForward {
      0% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
      }
      10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
      }
      30% {
        transform: translate(-45%, -45%) scale(1.3) rotate(-10deg);
      }
      60% {
        transform: translate(-30%, -30%) scale(1.4) rotate(20deg);
      }
      80% {
        transform: translate(-20%, -20%) scale(1.2) rotate(-20deg);
      }
      100% {
        /* В конце она «приземляется» чуть выше центра и остаётся заметной */
        transform: translate(-25%, -35%) scale(1.3) rotate(0deg);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Системы счисления 🚀</h1>
    <p>Практика и конспекты</p>
  </header>

  <div class="container">
    <!-- Раздел 1 -->
    <section>
      <h2>Что это такое?</h2>
      <div class="block-wrapper">
        <span class="block-title">Определение</span>
        <div class="def-block">
          <strong>Система счисления</strong> — способ записи чисел по правилам.
        </div>
      </div>
      <div class="block-wrapper">
        <span class="block-title">Пояснение</span>
        <div class="info-block">
          Десятичная (0–9) привычна; в информатике важны двоичная (2), восьмеричная (8), шестнадцатеричная (16).
        </div>
      </div>
      <div class="block-wrapper">
        <span class="block-title">Пример</span>
        <div class="example-block">
          13₁₀ = 1101₂ (1×8 + 1×4 + 0×2 + 1×1 = 13)
        </div>
      </div>
      <div class="block-wrapper">
        <div class="summary-block">
          <span class="summary-label">Конспект</span>
          Система счисления — правила записи. Важны: двоичная, восьмеричная, шестнадцатеричная.
        </div>
      </div>
    </section>

    <!-- Раздел 2 -->
    <section>
      <h2>Основные системы</h2>
      <div class="block-wrapper">
        <span class="block-title">Определения</span>
        <div class="def-block">
          <ul>
            <li><strong>Двоичная (2):</strong> 0 и 1 — база компьютеров.</li>
            <li><strong>Восьмеричная (8):</strong> цифры 0–7 — компакт для двоичных.</li>
            <li><strong>Шестнадцатеричная (16):</strong> 0–9 и A–F — удобно в программировании.</li>
          </ul>
        </div>
      </div>
      <div class="block-wrapper">
        <div class="summary-block">
          <span class="summary-label">Конспект</span>
          Двоичная — язык процессора; шестнадцатеричная — компактная запись.
        </div>
      </div>
    </section>

    <!-- Задания -->
    <section>
      <h2>Практические задания</h2>
      <div class="tasks">
        <!-- Задание 1 -->
        <div class="task-card">
          <h3>Задание 1: перевод в десятичную</h3>
          <p>Переведите 1010₂ в десятичную:</p>
          <input type="text" id="q1" placeholder="Ответ числом">
          <button onclick="checkQ1()">Проверить</button>
          <div id="f1" class="feedback"></div>
        </div>

        <!-- Задание 2 -->
        <div class="task-card">
          <h3>Задание 2: перевод в двоичную</h3>
          <p>Переведите 20₁₀ в двоичную:</p>
          <input type="text" id="q2" placeholder="Ответ (только 0 и 1)">
          <button onclick="checkQ2()">Проверить</button>
          <div id="f2" class="feedback"></div>
        </div>

        <!-- Задание 3 -->
        <div class="task-card">
          <h3>Задание 3: значение разряда</h3>
          <p>Чему равен вес позиции 2³?</p>
          <input type="text" id="q3" placeholder="Число">
          <button onclick="checkQ3()">Проверить</button>
          <div id="f3" class="feedback"></div>
        </div>

        <!-- Задание 4 -->
        <div class="task-card">
          <h3>Задание 4: шестнадцатеричная цифра</h3>
          <p>Какое десятичное значение у шестнадцатеричной цифры C?</p>
          <input type="text" id="q4" placeholder="Число">
          <button onclick="checkQ4()">Проверить</button>
          <div id="f4" class="feedback"></div>
        </div>
      </div>
    </section>
  </div>

  <script>
    function spawnPoop() {
      const el = document.createElement('div');
      el.className = 'poop-emoji';
      el.textContent = '💩';
      document.body.appendChild(el);
      setTimeout(() => el.remove(), 1200); // чуть дольше, чтобы успели заметить
    }

    function showFeedback(id, msg, isSuccess) {
      const el = document.getElementById(id);
      el.textContent = msg;
      el.className = 'feedback ' + (isSuccess ? 'success' : 'error');
    }

    function checkQ1() {
      const v = document.getElementById('q1').value.trim();
      if (v === '10') {
        showFeedback('f1', 'Верно! 1×8 + 0×4 + 1×2 + 0×1 = 10', true);
      } else {
        showFeedback('f1', 'Неверно. Попробуй ещё раз.', false);
        spawnPoop();
      }
    }

    function checkQ2() {
      const v = document.getElementById('q2').value.trim();
      // 20 -> 10100
      if (v === '10100') {
        showFeedback('f2', 'Отлично! 20 = 10100₂', true);
      } else {
        showFeedback('f2', 'Неверно. Дели на 2 и собирай остатки снизу.', false);
        spawnPoop();
      }
    }

    function checkQ3() {
      const v = document.getElementById('q3').value.trim();
      if (v === '8') {
        showFeedback('f3', 'Да! 2³ = 8', true);
      } else {
        showFeedback('f3', 'Неверно. 2×2×2 = ?', false);
        spawnPoop();
      }
    }

    function checkQ4() {
      const v = document.getElementById('q4').value.trim();
      if (v === '12') {
        showFeedback('f4', 'Точно! C = 12', true);
      } else {
        showFeedback('f4', 'Неверно. A=10, B=11, C=12…', false);
        spawnPoop();
      }
    }
  </script>
</body>
</html>