Create spoller.html

spoller.html

@@ -0,0 +1,309 @@
+<style>
+  .spoiler-wrapper {
+    margin: 20px 0;
+    position: relative;
+  }
+  
+  .spoiler-divider {
+    height: 1px;
+    background-color: #ddd;
+    margin: 10px 0;
+  }
+  
+  .spoiler1-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 12px 16px;
+    background-color: #f5f5f5;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: background-color 0.3s;
+    margin: 10px 0;
+    gap: 8px;
+  }
+  
+  .spoiler1-button:hover {
+    background-color: #e0e0e0;
+  }
+  
+  .spoiler1-content {
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    display: none;
+    margin-top: -4px; /* Подтягиваем вплотную к кнопке */
+  }
+  
+  .arrow {
+    flex-shrink: 0;
+    transition: transform 0.3s;
+  }
+  
+  /* Десктопная версия (кнопка перед контентом) */
+  @media (min-width: 768px) {
+    .spoiler-desktop {
+      display: block;
+    }
+    .spoiler-mobile {
+      display: none;
+    }
+    .spoiler1-content {
+      margin-left: 0;
+    }
+  }
+  
+  /* Мобильная версия (кнопка после контентом) */
+  @media (max-width: 767px) {
+    .spoiler-desktop {
+      display: none;
+    }
+    .spoiler-mobile {
+      display: flex;
+      flex-direction: column;
+    }
+    .spoiler-mobile .spoiler1-content {
+      order: 2;
+      border-top: 1px solid #ddd;
+      border-radius: 0 0 4px 4px;
+      margin-top: -4px;
+    }
+    .spoiler-mobile .spoiler1-button {
+      order: 1;
+      border-radius: 4px 4px 0 0;
+      margin-bottom: 0;
+    }
+  }
+</style>
+
+<div class="spoiler-divider"></div>
+
+<!-- Десктопная версия (кнопка сверху) -->
+<div class="spoiler-wrapper spoiler-desktop">
+  <button class="spoiler1-button" onclick="toggleSpoiler(this, 'desktop')" id="spoiler1ButtonDesktop">
+    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
+    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
+    </svg>
+  </button>
+  <div class="spoiler1-content" id="spoiler1ContentDesktop">
+    <p>Это правильный ответ. Он будет скрыт до нажатия на кнопку.</p>
+    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
+  </div>
+</div>
+
+<!-- Мобильная версия (кнопка снизу) -->
+<div class="spoiler-wrapper spoiler-mobile">
+  <button class="spoiler1-button" onclick="toggleSpoiler(this, 'mobile')" id="spoiler1ButtonMobile">
+    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
+    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
+    </svg>
+  </button>
+  <div class="spoiler1-content" id="spoiler1ContentMobile">
+    <p>Это правильный ответ. Он будет скрыт до нажатия на кнопку.</p>
+    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
+  </div>
+</div>
+
+<div class="spoiler-divider"></div>
+
+<script>
+  function toggleSpoiler(button, version) {
+    const isExpanded = button.classList.toggle('active');
+    const textSpan = button.querySelector('.spoiler-text');
+    const arrow = button.querySelector('.arrow');
+    
+    textSpan.textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
+    arrow.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+    
+    if (version === 'desktop') {
+      const content = document.getElementById('spoiler1ContentDesktop');
+      content.style.display = isExpanded ? 'block' : 'none';
+      
+      // Синхронизация для мобильной версии
+      const mobileButton = document.getElementById('spoiler1ButtonMobile');
+      if (mobileButton) {
+        mobileButton.classList.toggle('active', isExpanded);
+        mobileButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
+        mobileButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+        document.getElementById('spoiler1ContentMobile').style.display = isExpanded ? 'block' : 'none';
+      }
+    } else {
+      const content = document.getElementById('spoiler1ContentMobile');
+      content.style.display = isExpanded ? 'block' : 'none';
+      
+      // Синхронизация для десктопной версии
+      const desktopButton = document.getElementById('spoiler1ButtonDesktop');
+      if (desktopButton) {
+        desktopButton.classList.toggle('active', isExpanded);
+        desktopButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
+        desktopButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+        document.getElementById('spoiler1ContentDesktop').style.display = isExpanded ? 'block' : 'none';
+      }
+    }
+  }
+</script>
+
+
+
+<style>
+  /* Стили остаются точно такими же, их можно не дублировать */
+  .spoiler-wrapper {
+    margin: 20px 0;
+    position: relative;
+  }
+  
+  .spoiler-divider {
+    height: 1px;
+    background-color: #ddd;
+    margin: 10px 0;
+  }
+  
+  .spoiler2-button {  /* Изменено spoiler1 на spoiler2 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 12px 16px;
+    background-color: #f5f5f5;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    transition: background-color 0.3s;
+    margin: 10px 0;
+    gap: 8px;
+  }
+  
+  .spoiler2-button:hover {  /* Изменено spoiler1 на spoiler2 */
+    background-color: #e0e0e0;
+  }
+  
+  .spoiler2-content {  /* Изменено spoiler1 на spoiler2 */
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    display: none;
+    margin-top: -4px;
+  }
+  
+  .arrow {
+    flex-shrink: 0;
+    transition: transform 0.3s;
+  }
+  
+  /* Десктопная версия */
+  @media (min-width: 768px) {
+    .spoiler-desktop {
+      display: block;
+    }
+    .spoiler-mobile {
+      display: none;
+    }
+    .spoiler2-content {  /* Изменено spoiler1 на spoiler2 */
+      margin-left: 0;
+    }
+  }
+  
+  /* Мобильная версия */
+  @media (max-width: 767px) {
+    .spoiler-desktop {
+      display: none;
+    }
+    .spoiler-mobile {
+      display: flex;
+      flex-direction: column;
+    }
+    .spoiler-mobile .spoiler2-content {  /* Изменено spoiler1 на spoiler2 */
+      order: 2;
+      border-top: 1px solid #ddd;
+      border-radius: 0 0 4px 4px;
+      margin-top: -4px;
+    }
+    .spoiler-mobile .spoiler2-button {  /* Изменено spoiler1 на spoiler2 */
+      order: 1;
+      border-radius: 4px 4px 0 0;
+      margin-bottom: 0;
+    }
+  }
+</style>
+
+<div class="spoiler-divider"></div>
+
+<!-- Десктопная версия второго спойлера -->
+<div class="spoiler-wrapper spoiler-desktop">
+  <button class="spoiler2-button" onclick="toggleSpoiler2(this, 'desktop')" id="spoiler2ButtonDesktop">
+    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
+    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
+    </svg>
+  </button>
+  <div class="spoiler2-content" id="spoiler2ContentDesktop">
+    <p>Это содержимое второго спойлера. Он будет скрыт до нажатия на кнопку.</p>
+    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
+  </div>
+</div>
+
+<!-- Мобильная версия второго спойлера -->
+<div class="spoiler-wrapper spoiler-mobile">
+  <button class="spoiler2-button" onclick="toggleSpoiler2(this, 'mobile')" id="spoiler2ButtonMobile">
+    <span class="spoiler-text">УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ</span>
+    <svg class="arrow" width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+      <path fill="none" stroke="#000000" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" d="M 3.642857 10.552631 L 8.31203 16 L 12.981202 10.552631 M 8.31203 15.221805 L 8.31203 1.214286"></path>
+    </svg>
+  </button>
+  <div class="spoiler2-content" id="spoiler2ContentMobile">
+    <p>Это содержимое второго спойлера. Он будет скрыт до нажатия на кнопку.</p>
+    <p>Может содержать любой HTML-код: таблицы, изображения, списки и т.д.</p>
+  </div>
+</div>
+
+<div class="spoiler-divider"></div>
+
+<script>
+  // Функция для второго спойлера (изменено toggleSpoiler на toggleSpoiler2)
+  function toggleSpoiler2(button, version) {
+    const isExpanded = button.classList.toggle('active');
+    const textSpan = button.querySelector('.spoiler-text');
+    const arrow = button.querySelector('.arrow');
+    
+    textSpan.textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
+    arrow.style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+    
+    if (version === 'desktop') {
+      const content = document.getElementById('spoiler2ContentDesktop');  // Изменено 1 на 2
+      content.style.display = isExpanded ? 'block' : 'none';
+      
+      // Синхронизация для мобильной версии
+      const mobileButton = document.getElementById('spoiler2ButtonMobile');  // Изменено 1 на 2
+      if (mobileButton) {
+        mobileButton.classList.toggle('active', isExpanded);
+        mobileButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
+        mobileButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+        document.getElementById('spoiler2ContentMobile').style.display = isExpanded ? 'block' : 'none';  // Изменено 1 на 2
+      }
+    } else {
+      const content = document.getElementById('spoiler2ContentMobile');  // Изменено 1 на 2
+      content.style.display = isExpanded ? 'block' : 'none';
+      
+      // Синхронизация для десктопной версии
+      const desktopButton = document.getElementById('spoiler2ButtonDesktop');  // Изменено 1 на 2
+      if (desktopButton) {
+        desktopButton.classList.toggle('active', isExpanded);
+        desktopButton.querySelector('.spoiler-text').textContent = isExpanded ? 'СВЕРНУТЬ' : 'УЗНАТЬ ПРАВИЛЬНЫЙ ОТВЕТ';
+        desktopButton.querySelector('.arrow').style.transform = isExpanded ? 'rotate(180deg)' : 'rotate(0)';
+        document.getElementById('spoiler2ContentDesktop').style.display = isExpanded ? 'block' : 'none';  // Изменено 1 на 2
+      }
+    }
+  }
+</script>