1. Локальное кафе «Brunch&Beans» Краткое содержание Одностраничник с героя-блоком, меню, галереей блюд, формой бронирования и контактами. Дизайн и верстка Макет на Bootstrap 5 (Grid) или CSS Grid. Адаптивная шапка-меню с «гамбургером». Hero-секция: полноэкранный фон-изображение с наложением полупрозрачного градиента. Шрифты Заголовки: Playfair Display (Google Fonts). Тело текста: Roboto или Open Sans. Анимации Простые fade-in при скролле через AOS (Animate On Scroll). Плавная подложка при наведении на карточки меню (CSS transition). Цветовая палитра Элемент Цвет HEX Основной фон Кремовый #FFF8F0 Акцент Коричневый #6B4C3B Текст Тёмно-серый #4A4A4A Кнопки Тёплый оранжевый #FF8A65 Технические фичи Форма бронирования через HTML5-валидацию. Lazy-load для изображений. CSS-переменные для глобального стайлинга. - Follow Up Deployment
cb6b336
verified
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Brunch&Beans - Уютное кафе</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --cream: #FFF8F0; | |
| --brown: #6B4C3B; | |
| --gray: #4A4A4A; | |
| --orange: #FF8A65; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| color: var(--gray); | |
| background-color: var(--cream); | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .menu-item:hover .menu-overlay { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .menu-overlay { | |
| transition: all 0.3s ease; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .hero-overlay { | |
| background: linear-gradient(to bottom, rgba(107, 76, 59, 0.6), rgba(107, 76, 59, 0.3)); | |
| } | |
| .lazy { | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .lazy.loaded { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="overflow-x-hidden"> | |
| <!-- Header --> | |
| <header class="fixed w-full z-50 bg-[#FFF8F0] shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-[#6B4C3B]">Brunch<span class="text-[#FF8A65]">&</span>Beans</a> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Главная</a> | |
| <a href="#menu" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Меню</a> | |
| <a href="#gallery" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Галерея</a> | |
| <a href="#reservation" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Бронирование</a> | |
| <a href="#contact" class="text-[#6B4C3B] hover:text-[#FF8A65] transition">Контакты</a> | |
| </nav> | |
| <button id="mobile-menu-button" class="md:hidden text-[#6B4C3B]"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-[#FFF8F0] w-full px-4 pb-4"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#home" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Главная</a> | |
| <a href="#menu" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Меню</a> | |
| <a href="#gallery" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Галерея</a> | |
| <a href="#reservation" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Бронирование</a> | |
| <a href="#contact" class="text-[#6B4C3B] hover:text-[#FF8A65] transition py-2">Контакты</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative h-screen flex items-center justify-center"> | |
| <div class="absolute inset-0 hero-overlay"></div> | |
| <img | |
| src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Brunch&Beans интерьер" | |
| class="absolute w-full h-full object-cover lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| <div class="container mx-auto px-4 z-10 text-center text-white fade-in"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Brunch<span class="text-[#FF8A65]">&</span>Beans</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Уютное кафе с домашней атмосферой и вкуснейшими блюдами</p> | |
| <a href="#reservation" class="bg-[#FF8A65] hover:bg-[#e07a55] text-white px-8 py-3 rounded-full text-lg font-medium transition">Забронировать столик</a> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section id="menu" class="py-20 bg-[#FFF8F0]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Наше меню</h2> | |
| <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Breakfast --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img | |
| src="https://images.unsplash.com/photo-1551218808-94e220e084d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Завтраки" | |
| class="w-full h-full object-cover lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay"> | |
| <h3 class="text-white text-2xl font-bold">Завтраки</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between"> | |
| <span>Яичница с авокадо</span> | |
| <span class="text-[#FF8A65] font-medium">450₽</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Блинчики с ягодами</span> | |
| <span class="text-[#FF8A65] font-medium">380₽</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Гранола с йогуртом</span> | |
| <span class="text-[#FF8A65] font-medium">320₽</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Lunch --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img | |
| src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" | |
| alt="Обеды" | |
| class="w-full h-full object-cover lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay"> | |
| <h3 class="text-white text-2xl font-bold">Обеды</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between"> | |
| <span>Салат Цезарь</span> | |
| <span class="text-[#FF8A65] font-medium">520₽</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Паста Карбонара</span> | |
| <span class="text-[#FF8A65] font-medium">580₽</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Суп Том Ям</span> | |
| <span class="text-[#FF8A65] font-medium">490₽</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Drinks --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img | |
| src="https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Напитки" | |
| class="w-full h-full object-cover lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center menu-overlay"> | |
| <h3 class="text-white text-2xl font-bold">Напитки</h3> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between"> | |
| <span>Латте</span> | |
| <span class="text-[#FF8A65] font-medium">280₽</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Фреш апельсиновый</span> | |
| <span class="text-[#FF8A65] font-medium">350₽</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Лимонад домашний</span> | |
| <span class="text-[#FF8A65] font-medium">320₽</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block border-2 border-[#6B4C3B] text-[#6B4C3B] hover:bg-[#6B4C3B] hover:text-white px-6 py-2 rounded-full transition">Полное меню (PDF)</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Галерея</h2> | |
| <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> | |
| <img | |
| src="https://images.unsplash.com/photo-1517248135467-4bab7a99e9c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Интерьер кафе" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> | |
| <img | |
| src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Блюда кафе" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> | |
| <img | |
| src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" | |
| alt="Шеф-повар" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> | |
| <img | |
| src="https://images.unsplash.com/photo-1559847844-5315695dadae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1998&q=80" | |
| alt="Кофе" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> | |
| <img | |
| src="https://images.unsplash.com/photo-1466978913421-dad2ebd01d17?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Бранч" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> | |
| <img | |
| src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" | |
| alt="Десерты" | |
| class="w-full h-64 object-cover hover:scale-105 transition duration-500 lazy" | |
| loading="lazy" | |
| onload="this.classList.add('loaded')" | |
| > | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reservation Section --> | |
| <section id="reservation" class="py-20 bg-[#FFF8F0]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Бронирование столика</h2> | |
| <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-[#6B4C3B] p-8 text-white"> | |
| <h3 class="text-2xl font-bold mb-6">Часы работы</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex justify-between border-b border-[#8a6d5d] pb-2"> | |
| <span>Понедельник - Пятница</span> | |
| <span>8:00 - 22:00</span> | |
| </li> | |
| <li class="flex justify-between border-b border-[#8a6d5d] pb-2"> | |
| <span>Суббота</span> | |
| <span>9:00 - 23:00</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Воскресенье</span> | |
| <span>9:00 - 21:00</span> | |
| </li> | |
| </ul> | |
| <div class="mt-12"> | |
| <h3 class="text-2xl font-bold mb-4">Контакты</h3> | |
| <p class="mb-2"><i class="fas fa-phone-alt mr-2"></i> +7 (123) 456-78-90</p> | |
| <p><i class="fas fa-envelope mr-2"></i> hello@brunchbeans.ru</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <form id="reservation-form" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-[#6B4C3B] mb-1">Имя</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-[#6B4C3B] mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-[#6B4C3B] mb-1">Телефон</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]"> | |
| </div> | |
| <div> | |
| <label for="date" class="block text-[#6B4C3B] mb-1">Дата</label> | |
| <input type="date" id="date" name="date" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]"> | |
| </div> | |
| <div> | |
| <label for="time" class="block text-[#6B4C3B] mb-1">Время</label> | |
| <input type="time" id="time" name="time" required class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]"> | |
| </div> | |
| <div> | |
| <label for="guests" class="block text-[#6B4C3B] mb-1">Количество гостей</label> | |
| <select id="guests" name="guests" class="w-full px-4 py-2 border border-[#6B4C3B] rounded focus:outline-none focus:ring-2 focus:ring-[#FF8A65]"> | |
| <option value="1">1 человек</option> | |
| <option value="2">2 человека</option> | |
| <option value="3">3 человека</option> | |
| <option value="4">4 человека</option> | |
| <option value="5+">5+ человек</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-[#FF8A65] hover:bg-[#e07a55] text-white py-3 rounded font-medium transition">Забронировать</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-[#6B4C3B] mb-4">Как нас найти</h2> | |
| <div class="w-20 h-1 bg-[#FF8A65] mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-[#6B4C3B] mb-4">Наш адрес</h3> | |
| <p class="mb-6">г. Москва, ул. Кофейная, д. 42</p> | |
| <h3 class="text-2xl font-bold text-[#6B4C3B] mb-4">Социальные сети</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-telegram"></i></a> | |
| <a href="#" class="text-[#6B4C3B] hover:text-[#FF8A65] text-2xl"><i class="fab fa-vk"></i></a> | |
| </div> | |
| </div> | |
| <div class="h-80 rounded-lg overflow-hidden"> | |
| <iframe | |
| src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.3737899197454!2d37.618423315930474!3d55.75367698055287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a5a738fa419%3A0x7c347d506f52311f!2z0JrRgNCw0YHQvdCw0Y8g0JrQvtC70LvQtdC00LY!5e0!3m2!1sru!2sru!4v1688731234567!5m2!1sru!2sru" | |
| width="100%" | |
| height="100%" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy" | |
| referrerpolicy="no-referrer-when-downgrade" | |
| class="lazy" | |
| onload="this.classList.add('loaded')" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-[#6B4C3B] text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold text-white">Brunch<span class="text-[#FF8A65]">&</span>Beans</a> | |
| <p class="mt-2 text-sm">© 2023 Все права защищены</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-[#FF8A65] transition">Политика конфиденциальности</a> | |
| <a href="#" class="hover:text-[#FF8A65] transition">Условия использования</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Form submission | |
| document.getElementById('reservation-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Ваше бронирование принято! Мы свяжемся с вами для подтверждения.'); | |
| this.reset(); | |
| }); | |
| // Lazy loading images | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const lazyImages = [].slice.call(document.querySelectorAll('img.lazy')); | |
| if ('IntersectionObserver' in window) { | |
| let lazyImageObserver = new IntersectionObserver(function(entries, observer) { | |
| entries.forEach(function(entry) { | |
| if (entry.isIntersecting) { | |
| let lazyImage = entry.target; | |
| lazyImage.src = lazyImage.dataset.src; | |
| lazyImage.classList.add('loaded'); | |
| lazyImageObserver.unobserve(lazyImage); | |
| } | |
| }); | |
| }); | |
| lazyImages.forEach(function(lazyImage) { | |
| lazyImageObserver.observe(lazyImage); | |
| }); | |
| } | |
| }); | |
| // Simple scroll animation | |
| window.addEventListener('scroll', function() { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach(function(element) { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Axelnm/myssq1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |