HalpAnimal - patch - Nik1ta/Mdaa

HalpAnimal
223 строки16 KB
Nik1ta
create HalpAnimal
05 окт 2025, 18:29
05 окт 2025, 18:29f6a2831
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Помощь бездомным животным</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

    body {
            margin: 0;
                font-family: 'Roboto', sans-serif;
                    background: linear-gradient(135deg, #f0e3c8, #d9b88a);
                        color: #4a3c31;
    }

      header {
            background: #a05a2c;
                padding: 20px;
                    text-align: center;
                        color: #fff9f0;
                            box-shadow: 0 4px 8px rgba(160, 90, 44, 0.5);
                                position: relative;
      }

        header h1 {
                margin: 0;
                    font-weight: 700;
                        font-size: 2.5rem;
                            text-shadow: 2px 2px 4px #7a4a16;
        }

          /* Листья и деревья */
            .falling-leaves {
                    position: fixed;
                        top: 0;
                            left: 0;
                                width: 100%;
                                    height: 100%;
                                        pointer-events: none;
                                            z-index: 1;
            }

              .leaf {
                    position: absolute;
                        width: 40px;
                            height: 40px;
                                background: url('https://cdn-icons-png.flaticon.com/512/415/415809.png') no-repeat center/contain;
                                    opacity: 0.7;
                                        animation-name: fall;
                                            animation-timing-function: linear;
                                                animation-iteration-count: infinite;
              }

                @keyframes fall {
                        0% {
                                  transform: translateY(-50px) rotate(0deg);
                                        opacity: 0.8;
                        }
                            100% {
                                      transform: translateY(100vh) rotate(360deg);
                                            opacity: 0;
                            }
                }

                  main {
                        position: relative;
                            z-index: 2;
                                max-width: 900px;
                                    margin: 40px auto;
                                        background: #fff9f0cc;
                                            border-radius: 15px;
                                                padding: 30px;
                                                    box-shadow: 0 0 15px rgba(160, 90, 44, 0.3);
                  }

                    h2 {
                            color: #7a4a16;
                                font-weight: 700;
                                    margin-bottom: 15px;
                                        border-bottom: 2px solid #d9b88a;
                                            padding-bottom: 5px;
                    }

                      p {
                            line-height: 1.6;
                                margin-bottom: 20px;
                      }

                        .animals {
                                display: flex;
                                    gap: 20px;
                                        justify-content: center;
                                            flex-wrap: wrap;
                        }

                          .animal-card {
                                background: #d9b88a80;
                                    border-radius: 12px;
                                        width: 160px;
                                            padding: 15px;
                                                text-align: center;
                                                    box-shadow: inset 0 0 8px rgba(125, 85, 35, 0.3);
                          }

                            .animal-image {
                                    width: 100%;
                                        height: 140px;
                                            object-fit: contain;
                                                filter: grayscale(40%) contrast(80%) brightness(85%);
                                                    border-radius: 12px;
                                                        border: 2px solid #a05a2c;
                                                            background-color: #f9f1e7;
                            }

                              footer {
                                    text-align: center;
                                        padding: 15px;
                                            margin-top: 30px;
                                                color: #7a4a16cc;
                                                    font-size: 0.9rem;
                              }
                              </style>
                              </head>
                              <body>
                              <header>
                                <h1>Теплый Приют для Бездомных Животных</h1>
                                </header>

                                <div class="falling-leaves" aria-hidden="true"></div>

                                <main>
                                  <section>
                                      <h2>Наша миссия</h2>
                                          <p>Мы помогаем бездомным кошкам и собакам найти новый дом и заботливых хозяев. Осень — время тепла, когда даже самые неопрятные животные заслуживают уюта и любви.</p>
                                            </section>

                                              <section>
                                                  <h2>Наши подопечные</h2>
                                                      <div class="animals">
                                                            <div class="animal-card">
                                                                    <img src="https://i.imgur.com/8Um3ilH.png" alt="Неопрятный кот" class="animal-image" />
                                                                            <p><strong>Кот Буся</strong><br>Немного грязненький, но ласковый и игривый.</p>
                                                                                  </div>
                                                                                        <div class="animal-card">
                                                                                                <img src="https://i.imgur.com/n1H7AH6.png" alt="Неоп�
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                            }
                        }
                }
              }
            }
        }
      }
    }
    �ятный пёс" class="animal-image" />
            <p><strong>Пёс Шарик</strong><br>Пушистый друг, который нуждается в любви и чистке.</p>
                  </div>
                        <div class="animal-card">
                                <img src="https://i.imgur.com/F1VBAIU.png" alt="Неопрятный кот" class="animal-image" />
                                        <p><strong>Кот Мурзик</strong><br>Немного запуган, но очень преданный.</p>
                                              </div>
                                                    <div class="animal-card">
                                                            <img src="https://i.imgur.com/jpnw1Ei.png" alt="Неопрятный пёс" class="animal-image" />
                                                                    <p><strong>Пёс Рекс</strong><br>Активный и немного неопрятный, мечтает о доме.</p>
                                                                          </div>
                                                                              </div>
                                                                                </section>

                                                                                  <section>
                                                                                      <h2>Как помочь</h2>
                                                                                          <p>Вы можете помочь нам финансово, приносить корма, игрушки или стать волонтером. Каждая мелочь идет на благо животных.</p>
                                                                                              <ul>
                                                                                                    <li>Пожертвования: <strong>Рассчётный счёт 1234 5678 9101 1121</strong></li>
                                                                                                          <li>Контакты волонтёров: <a href="mailto:help@animal-shelter.ru">help@animal-shelter.ru</a></li>
                                                                                                                <li>Адрес приюта: г. Москва, ул. Добрая, д. 5</li>
                                                                                                                    </ul>
                                                                                                                      </section>
                                                                                                                      </main>

                                                                                                                      <footer>
                                                                                                                        © 2024 Теплый Приют — Помогаем с любовью в осенние дни
                                                                                                                        </footer>

                                                                                                                        <script>
                                                                                                                          // Скрипт для падающих листьев
                                                                                                                            const leavesContainer = document.querySelector('.falling-leaves');
                                                                                                                              const leafImages = [
                                                                                                                                    'https://cdn-icons-png.flaticon.com/512/415/415809.png',  // красный лист
                                                                                                                                        'https://cdn-icons-png.flaticon.com/512/415/415814.png',  // желтый лист
                                                                                                                                            'https://cdn-icons-png.flaticon.com/512/415/415799.png'   // оранжевый лист
                                                                                                                              ];

                                                                                                                                function createLeaf() {
                                                                                                                                        const leaf = document.createElement('div');
                                                                                                                                            leaf.classList.add('leaf');
                                                                                                                                                const size = Math.random() * 30 + 20;
                                                                                                                                                    leaf.style.width = `${size}px`;
                                                                                                                                                        leaf.style.height = `${size}px`;
                                                                                                                                                            leaf.style.left = Math.random() * window.innerWidth + 'px';
                                                                                                                                                                leaf.style.backgroundImage = `url('${leafImages[Math.floor(Math.random() * leafImages.length)]}')`;
                                                                                                                                                                    leaf.style.animationDuration = (Math.random() * 5 + 5) + 's';
                                                                                                                                                                        leavesContainer.appendChild(leaf);

                                                                                                                                                                            // Удаляем лист после анимации
                                                                                                                                                                                setTimeout(() => {
                                                                                                                                                                                          leaf.remove();
                                                                                                                                                                                }, 10000);
                                                                                                                                }

                                                                                                                                  setInterval(createLeaf, 500);
                                                                                                                                  </script>
                                                                                                                                  </body>
                                                                                                                                  </html>
                                                                                                                                                                                })
                                                                                                                                }
                                                                                                                              ]