Первый код для примера

2024-05-15 09:36 Раздел 1
A balancing rock, also called balanced rock or precarious boulder, is a naturally occurring geological formation featuring a large rock or boulder, sometimes of substantial size, resting on other rocks, bedrock, or on glacial till. Some formations known by this name only appear to be balancing, but are in fact firmly connected to a base rock by a pedestal or stem.
No single scientific definition of the term exists, and it has been applied to a variety of rock features that fall into one of four general categories: - A glacial erratic is a boulder that was transported and deposited by glaciers or ice rafts to a resting place on soil, on bedrock, or on other boulders. It usually has a different lithology from the other rocks around it. Not all glacial erratics are balancing rocks; some are firmly seated on the ground. Some balancing erratics have come to be known as rocking stones, also known as logan rocks, logan stones, or logans, because they are so finely balanced that the application of just a small force may cause them to rock or sway. A good example of a rocking stone is the Logan Rock in Cornwall, England, United Kingdom; another is the Trembling Rock in Brittany, France. - A perched block, also known as a perched boulder or perched rock, is a large, detached rock fragment that most commonly was transported and deposited by a glacier to a resting place on glacial till, often on the side of a hill or slope. Some perched blocks were not produced by glacial action, but were the aftermath of a rock fall, landslide, or avalanche.
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Noto Sans', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    color: #222;
  }

  .calculator {
    width: 100%;
    max-width: 800px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 30px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  h1 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
  }

  h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
  }

  p.description {
    margin-bottom: 30px;
    color: #444;
    font-size: 16px;
    font-weight: 300;
  }

  .step {
    display: none;
  }

  .step.active {
    display: block;
  }

  /* Кнопки выбора */
  .options button {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 14px 18px;
    border: 1px solid #aad4f5;
    background-color: #e9f5ff;
    
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    color: #222;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  }

  .options button:hover {
    background-color: #bfe0f8;
    border-color: #aad4f5;
    box-shadow: 0 2px 6px rgba(0, 140, 255, 0.08);
    color: #222 !important;
    opacity: 1;

  }

  /* Картинка в ответе */
  .answer img {
    max-width: 400px;
    display: block;
    margin: 20px auto;
    border-radius: 12px;
  }

  /* Общий стиль кнопок */
  .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .actions button,
  .actions a,
  #monthly-btn {
    flex: 1;
    padding: 14px;
    border-radius: 12px;
    
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    height: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-family: 'Noto Sans', sans-serif;
    text-transform: none;
    letter-spacing: normal;
     display: flex;
  align-items: center;
  justify-content: center;
    
  }



  #monthly-btn:hover {
    background-color: #d3eef9;
  }


.primary {
  border: 1px solid #cceaf5;
  background-color: #e0f3fc;
    color: #004d66;                    
  border: 1px solid #e0e0dc;       /* деликатная граница */
  transition: background-color 0.2s ease, color 0.2s ease;
  text-align: center;
}

.primary:hover {
   background-color: #d3eef9;     /* чуть темнее при наведении */
  color: #222; 
  opacity: 1;
                    /* чуть более выразительный текст */
}

  /* Неакцентная кнопка — бежевый фон */
 .secondary {
  background-color: #f5f5f2;       /* мягкий светло-серый с бежевым оттенком */
  color: #444;                     /* приятный тёмно-серый текст */
  border: 1px solid #e0e0dc;       /* деликатная граница */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.secondary:hover {
  background-color: #ebeae6;       /* чуть темнее при наведении */
  color: #222; 
  opacity: 1;
                    /* чуть более выразительный текст */
}

.options button .descr {
  display: block;
  font-size: 14px;
  color: #777;
  margin-top: 4px;
  font-weight: 300;
}

.amount-options {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.amount-options button {
  width: 220px;
  height: 100px;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

/* Адаптивность для маленьких экранов */
@media (max-width: 600px) {
  .amount-options {
    justify-content: center;
  }

  .amount-options button {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 14px 0;
    font-size: 16px;
    border-radius: 10px;
  }
}



  @media (max-width: 600px) {
    .calculator {
      padding: 20px;
      min-height: auto;
    }
  }
</style>






</head>
<body>
  <div class="calculator">
    
    <p class="description">Помогать можно даже небольшими суммами. Узнайте, на что фонды могут потратить ваше пожертвование.</p>

    <div class="step step-1 active">
  <h2>Кому вы хотели бы помочь?</h2>
  <div class="options" id="step1-options">
    <button data-theme="orphansfamily">
      <strong>Дети-сироты и поддержка семей</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="adultsupport">
      <strong>Взрослые в трудных ситуациях</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="elderly">
      <strong>Пожилые люди</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="animals">
      <strong>Животные</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="environment">
      <strong>Экология и защита природы</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="socialissues">
      <strong>Сложные темы и уязвимые группы</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="culture">
      <strong>Культурное наследие</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="ngosupport">
      <strong>Поддержка работы НКО</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="childrenillness">
      <strong>Дети с тяжёлыми заболеваниями</strong>
      <span class="descr"></span>
    </button>
    <button data-theme="childrendisability">
      <strong>Дети с особенностями развития</strong>
      <span class="descr"></span>
    </button>
  </div>
</div>


    <div class="step step-2">
      <h2>Сколько вы готовы пожертвовать?</h2>
      
      <div class="options amount-options" id="step2-options">
  <button data-amount="100"><span>100 ₽</span></button>
  <button data-amount="300"><span>300 ₽</span></button>
  <button data-amount="1000"><span>1000 ₽</span></button>
</div>

    </div>

    <div class="step step-3">
     <h2 id="once-heading"></h2>
      <div class="answer">
        <p id="once-text"></p>
        <img id="once-img" src="" alt="">
      </div>
      <button class="primary" id="monthly-btn">А если жертвовать ежемесячно?</button>
    </div>

    <div class="step step-4">
     <h2 id="monthly-heading"></h2>
      <div class="answer">
        <p id="monthly-text"></p>
        <img id="monthly-img" src="" alt="">
      </div>
      <div class="actions">
        <a id="donate-link" class="primary" target="_blank">Хочу помочь</a>
        <button class="secondary" id="start-over">Выбрать, кому еще помочь</button>
      </div>
    </div>
  </div>




  <script>
document.addEventListener("DOMContentLoaded", function () {

  const data = {
  "childrenillness": {
    "descr": "Помощь детям с тяжёлыми заболеваниями",
    "url": "https://example.org/donate/childrenillness",
    "100_once_text": "Подгузники, питание, игрушки — всё, чтобы день стал легче. Даже супергероям нужна поддержка.",
    "300_once_text": "Набор заботы: лекарства, такси до больницы, пара улыбок в придачу. Маленьким бойцам — максимум комфорта.",
    "1000_once_text": "Сложное лечение требует простых вещей: любви, помощи и финансов. Чтобы родители думали не о счетах, а о детях.",
    "100_reg_text": "Регулярная поддержка — как зарядка для надежды. А у надежды, знаете ли, всегда мало батарейки.",
    "300_reg_text": "Когда помощь приходит вовремя, болезни сдаются. И мы за это платим любовью, а вы — регулярным переводом.",
    "1000_reg_text": "Финансовый экзоскелет для семьи, которая держится из последних сил. Вы — их поддержка каждый месяц.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "childrendisability": {
    "descr": "Поддержка детей с особенностями развития",
    "url": "https://example.org/donate/childrendisability",
    "100_once_text": "Пластилин, книжки, развивашки — всё, что помогает раскрыться. Особенные дети — просто особенные.",
    "300_once_text": "Помогаем говорить, двигаться, жить активнее. Путь длинный, но вы делаете первый шаг.",
    "1000_once_text": "Реабилитация — это не волшебство, а труд и ресурсы. Но с вашей помощью она работает.",
    "100_reg_text": "Каждый месяц — шанс. Шанс выучить новое слово или сделать первый шаг.",
    "300_reg_text": "Поддержка в ритме месяца. Как репетиции к спектаклю, где звезда — особенный ребёнок.",
    "1000_reg_text": "Финансовый костюм супергероя — чтобы ребёнок с особенностями чувствовал себя обычным.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "orphansfamily": {
    "descr": "Помощь детям-сиротам и семьям",
    "url": "https://example.org/donate/orphansfamily",
    "100_once_text": "Конфетка, книжка, забота — как домашнее тепло в маленькой упаковке.",
    "300_once_text": "Мир, где у ребёнка снова появляется 'мама' и 'папа', пусть и в виде волонтёров и психологов.",
    "1000_once_text": "Курс поддержки семьи или шаг к усыновлению. Вы — как добрый волшебник, только без бороды.",
    "100_reg_text": "Стабильная забота — как дом, в который возвращаешься. Даже если он ещё только строится.",
    "300_reg_text": "Регулярная поддержка — это когда не разово, а по-настоящему. Чтобы детство было с завтраками.",
    "1000_reg_text": "Финансовая подушка под детство, которому досталось не самое мягкое начало.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "adultsupport": {
    "descr": "Поддержка взрослых в трудной ситуации",
    "url": "https://example.org/donate/adultsupport",
    "100_once_text": "Чашка супа, носки, разговор. Иногда этого достаточно, чтобы продержаться.",
    "300_once_text": "Помогаем людям не потеряться в жизни. Потому что каждый заслуживает шанс.",
    "1000_once_text": "Юрист, психолог, новый старт. Бывает, одному просто не справиться.",
    "100_reg_text": "Вы — постоянная рука помощи. Чтобы человек мог выбраться, а не только выживать.",
    "300_reg_text": "Регулярная поддержка делает жизнь снова предсказуемой. В хорошем смысле.",
    "1000_reg_text": "Это уже не просто помощь. Это целая лестница из ямы.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "elderly": {
    "descr": "Забота о пожилых людях",
    "url": "https://example.org/donate/elderly",
    "100_once_text": "Чай, плед и звонок, чтобы спросили: как вы там? Тепло бывает не только от батареи.",
    "300_once_text": "Аптечка, прогулка, сиделка. Пожилым нужно внимание, не только таблетки.",
    "1000_once_text": "Чтобы старость была в радость, а не в списке дел у волонтёра.",
    "100_reg_text": "Каждый месяц — тёплая весточка. Пусть даже на другом конце провода.",
    "300_reg_text": "Стабильность — лучший подарок в возрасте. И вы его дарите.",
    "1000_reg_text": "Это как соцпакет, только с душой. И любовью.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "animals": {
    "descr": "Помощь животным",
    "url": "https://example.org/donate/animals",
    "100_once_text": "Коробка вкусняшек для кота. Котам в приютах тоже нужны эндорфины.",
    "300_once_text": "Проверка у ветеринара и новое лежбище. Мяу-сервис на уровне.",
    "1000_once_text": "Операция, стерилизация, реабилитация. Чтобы лапки снова бежали, а хвосты махали.",
    "100_reg_text": "Корм ежемесячно — стабильность в миске. Коты уважают предсказуемость.",
    "300_reg_text": "Пушистый абонемент на заботу. Тут вам и когтеточка, и прививка.",
    "1000_reg_text": "Вы, по сути, спонсируете кота. Он не знает, но уже благодарен.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },
  "environment": {
    "descr": "Озеленение и забота об экологии",
    "url": "https://example.org/donate/environment",
    "100_once_text": "Маленький саженец, большой шаг для планеты. Деревья умеют благодарить — кислородом.",
    "300_once_text": "Пакет семян, перчатки, и немного надежды на зелёное завтра. Урбанистам на радость.",
    "1000_once_text": "Лес не вырастет за день. Но за тысячу рублей — может начать.",
    "100_reg_text": "Каждый месяц — один зелёный плюсик в карму. Экологичный и красивый.",
    "300_reg_text": "Абонемент на посадку деревьев. Ваша личная фотосинтетическая армия.",
    "1000_reg_text": "Почти как мини-Гринпис. Только вы один, и это работает.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "socialissues": {
    "descr": "Работа с уязвимыми группами и правозащита",
    "url": "https://example.org/donate/socialissues",
    "100_once_text": "Печенье и юрист — странная, но нужная пара. Особенно если тебе есть, что защищать.",
    "300_once_text": "Когда у человека отняли голос, мы даём микрофон. И немного правозащиты.",
    "1000_once_text": "Большая защита для тех, у кого нет возможности защититься. Ваша помощь — их щит.",
    "100_reg_text": "Регулярная поддержка — как адвокат по подписке. Только с эмпатией.",
    "300_reg_text": "Каждый месяц — вы помогаете системе стать чуть более человечной.",
    "1000_reg_text": "Это уже не помощь — это маленькая революция. Со знаком плюс.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "culture": {
    "descr": "Сохранение культурного наследия",
    "url": "https://example.org/donate/culture",
    "100_once_text": "Поддержать реставрацию — всё равно что сказать 'спасибо' бабушке за варенье.",
    "300_once_text": "Купол, куплет или ковёр — культура держится не только на традициях, но и на донатах.",
    "1000_once_text": "Меценат XXI века. Без парика, но с банковской картой.",
    "100_reg_text": "Вы вносите ежемесячный вклад в красоту. Архитектурную и смысловую.",
    "300_reg_text": "Стабильный донат — как регулярный поход в музей. Только вы платите — и всё сохраняется.",
    "1000_reg_text": "Благодаря вам история не пылится. А сияет.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  },

  "ngosupport": {
    "descr": "Развитие работы НКО",
    "url": "https://example.org/donate/ngosupport",
    "100_once_text": "Чашка кофе координатору. Он не устал — он просто делает мир лучше.",
    "300_once_text": "Маркер, ноут и аренда. НКО тоже надо чем-то дышать.",
    "1000_once_text": "Поддержка целой команды, которая помогает другим. Вы — их опора.",
    "100_reg_text": "Каждый месяц — это зарплата тому, кто помогает десяткам.",
    "300_reg_text": "НКО работают не на волшебстве. Но с вами — почти.",
    "1000_reg_text": "Финансовый мотор третьего сектора. И вы его заправляете.",
    "100_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_once_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "100_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "300_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png",
    "1000_reg_img": "https://t-j.ru/media/100-derevev-min.el2yt7wmsuoq..png"
  }
};




  
  let currentTheme = '';
let currentAmount = '';

document.querySelectorAll('#step1-options button').forEach(btn => {
  const theme = btn.dataset.theme;
  const descr = data[theme]?.descr;
  if (descr) {
    btn.querySelector('.descr').textContent = descr;
  }
});


document.querySelectorAll('#step1-options button').forEach(btn => {
  btn.addEventListener('click', () => {
    currentTheme = btn.dataset.theme;
    showStep(2);
  });
});

document.querySelectorAll('#step2-options button').forEach(btn => {
  btn.addEventListener('click', () => {
    currentAmount = btn.dataset.amount;
    const d = data[currentTheme];

    // Обновляем заголовок и контент на шаге 3 (разово)
    document.getElementById('once-heading').textContent = `${currentAmount} ₽ —`;
    document.getElementById('once-text').textContent = d[`${currentAmount}_once_text`];
    document.getElementById('once-img').src = d[`${currentAmount}_once_img`];

    showStep(3);
  });
});

document.getElementById('monthly-btn').addEventListener('click', () => {
  const d = data[currentTheme];

  // Обновляем заголовок и контент на шаге 4 (ежемесячно)
  document.getElementById('monthly-heading').textContent = `${currentAmount} ₽ каждый месяц —`;
  document.getElementById('monthly-text').textContent = d[`${currentAmount}_reg_text`];
  document.getElementById('monthly-img').src = d[`${currentAmount}_reg_img`];
  document.getElementById('donate-link').href = d.url;

  showStep(4);
});

document.getElementById('start-over').addEventListener('click', () => {
  currentTheme = '';
  currentAmount = '';
  showStep(1);
});

function showStep(stepNum) {
  document.querySelectorAll('.step').forEach(step => step.classList.remove('active'));
  document.querySelector(`.step-${stepNum}`).classList.add('active');
}

});
</script>




</body>
</html>