| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ЩИ!ДА!КАША! - Аутистская Лесная Кухня Белки</title> |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.prod.css" rel="stylesheet"> |
| <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/quasar@2.12.0/dist/quasar.umd.prod.js"></script> |
| <style> |
| .font-display { font-family: 'Playfair Display', serif; } |
| .font-body { font-family: 'Inter', sans-serif; } |
| .hero-bg { |
| background: linear-gradient(rgba(139, 69, 19, 0.7), rgba(101, 67, 33, 0.7)), |
| url('http://static.photos/nature/1200x630/42'); |
| background-size: cover; |
| background-position: center; |
| } |
| .wood-texture { |
| background-image: url('http://static.photos/textures/1200x630/15'); |
| background-size: cover; |
| } |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 16px; |
| } |
| .max-w-2xl { |
| max-width: 42rem; |
| } |
| .animate-bounce-slow { |
| animation: bounce 3s infinite; |
| } |
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
| </style> |
| </head> |
| <body> |
| <div id="q-app"> |
| |
| <q-header elevated class="bg-white text-grey-9 shadow-5"> |
| <q-toolbar class="q-px-md"> |
| <q-toolbar-title class="flex items-center"> |
| <q-avatar size="40px" class="bg-red-8 text-white q-mr-sm animate-bounce-slow"> |
| <q-icon name="psychology" /> |
| </q-avatar> |
| <span class="font-display text-h6 text-weight-bold text-red-8">БЕЛКИНЫ ШТУКИ</span> |
| </q-toolbar-title> |
| <q-tabs v-if="$q.screen.gt.sm" inline-label active-color="red-8" indicator-color="red-8"> |
| <q-tab name="about" label="КТО МЫ ТАКИЕ" /> |
| <q-tab name="menu" label="ЧТО ЖРАТЬ БУДЕМ" /> |
| <q-tab name="calculator" label="СКОЛЬКО СВИСТИШЬ" /> |
| <q-tab name="reviews" label="ЧТО О НАС ТРЕЩАТ" /> |
| <q-tab name="contact" label="КАК ДОСТАТЬ" /> |
| </q-tabs> |
| <q-btn flat round dense icon="menu" class="lt-md" @click="toggleMenu" /> |
| </q-toolbar> |
| </q-header> |
| <q-drawer v-model="menuOpen" side="right" overlay bordered class="bg-yellow-1"> |
| <q-list padding class="text-red-8"> |
| <q-item clickable v-ripple class="q-mb-sm bg-yellow-2 rounded-borders"> |
| <q-item-section class="text-weight-bold">КТО МЫ ТАКИЕ</q-item-section> |
| </q-item> |
| <q-item clickable v-ripple class="q-mb-sm bg-yellow-2 rounded-borders"> |
| <q-item-section class="text-weight-bold">ЧТО ЖРАТЬ БУДЕМ</q-item-section> |
| </q-item> |
| <q-item clickable v-ripple class="q-mb-sm bg-yellow-2 rounded-borders"> |
| <q-item-section class="text-weight-bold">СКОЛЬКО СВИСТИШЬ</q-item-section> |
| </q-item> |
| <q-item clickable v-ripple class="q-mb-sm bg-yellow-2 rounded-borders"> |
| <q-item-section class="text-weight-bold">ЧТО О НАС ТРЕЩАТ</q-item-section> |
| </q-item> |
| <q-item clickable v-ripple class="q-mb-sm bg-yellow-2 rounded-borders"> |
| <q-item-section class="text-weight-bold">КАК ДОСТАТЬ</q-item-section> |
| </q-item> |
| </q-list> |
| </q-drawer> |
| |
| <section class="hero-bg min-h-screen flex items-center q-pt-xl" style="background: linear-gradient(rgba(220, 38, 38, 0.8), rgba(153, 27, 27, 0.9)), url('http://static.photos/abstract/1200x630/77'); background-size: cover; background-position: center;"> |
| <div class="container q-py-xl"> |
| <div class="max-w-2xl"> |
| <q-badge class="bg-yellow-300 text-red-800 q-px-md q-py-xs rounded-borders text-caption q-mb-lg animate-bounce"> |
| <q-icon name="auto_awesome" size="16px" class="q-mr-sm" /> |
| АУТИСТЫ С НОЖАМИ И СКОВОРОДАМИ В ЛЕСУ! |
| </q-badge> |
| |
| <h1 class="font-display text-h2 text-h1-md text-white q-mb-lg" style="text-shadow: 3px 3px 0px #dc2626;"> |
| ЩИ!ДА!КАША!<br> |
| <span class="text-yellow-300" style="text-shadow: 2px 2px 0px #b91c1c;">ИЛИ УМРИ С ГОЛОДУ!</span> |
| </h1> |
| |
| <p class="text-h6 text-yellow-100 q-mb-xl font-bold"> |
| КОНСЕРВЫ? СУХИЕ ПАЙКИ? ФУ!<br> |
| Наши аутичные повара готовят с особым перфекционизмом и полным игнором социальных норм.<br> |
| Мы накормим тебя так, что ты забудешь своё имя! |
| </p> |
| |
| <div class="row q-gutter-md"> |
| <q-btn color="red-800" text-color="white" size="lg" icon="local_fire_department" label="ВЫЗВАТЬ БЕЛОК" class="animate-pulse" /> |
| <q-btn outline color="yellow-300" text-color="yellow-300" size="lg" label="УВИДЕТЬ ЕДУ" /> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="q-py-xl bg-gradient-to-r from-red-50 to-yellow-50"> |
| <div class="container"> |
| <div class="text-center q-mb-xl"> |
| <h2 class="font-display text-h3 text-h2-md text-red-800 q-mb-md" style="text-shadow: 2px 2px 0px #fbbf24;"> |
| ПОЧЕМУ МЫ ЛУЧШИЕ? ДА ПОТОМУ ЧТО! |
| </h2> |
| <p class="text-h6 text-red-700 font-bold"> |
| МЫ НЕ ГОТОВИМ - МЫ ТВОРИМ ХАОС С ВКУСОМ! |
| </p> |
| </div> |
|
|
| <div class="row q-col-gutter-lg"> |
| <div class="col-12 col-md-4"> |
| <q-card class="text-center q-pa-lg bg-white bordered" style="border: 3px solid #dc2626;"> |
| <q-card-section> |
| <q-avatar size="64px" class="bg-red-800 text-yellow-300 q-mb-md animate-bounce-slow"> |
| <q-icon name="psychology" size="32px" /> |
| </q-avatar> |
| <h3 class="text-h5 text-weight-bold text-red-800 q-mb-md">АУТИСТЫ С КУХНЕЙ</h3> |
| <p class="text-red-700 font-bold"> |
| Наши повара не разговаривают - они готовят! |
| Каждое блюдо - результат 37 часов гиперфокуса и 14 перепроверок температуры. |
| </p> |
| </q-card-section> |
| </q-card> |
| </div> |
|
|
| <div class="col-12 col-md-4"> |
| <q-card class="text-center q-pa-lg bg-white bordered" style="border: 3px solid #dc2626;"> |
| <q-card-section> |
| <q-avatar size="64px" class="bg-red-800 text-yellow-300 q-mb-md animate-bounce-slow"> |
| <q-icon name="directions_run" size="32px" /> |
| </q-avatar> |
| <h3 class="text-h5 text-weight-bold text-red-800 q-mb-md">ПРИБЕЖИМ КУДА УГОДНО</h3> |
| <p class="text-red-700 font-bold"> |
| ВЫ В ЛЕСУ? В ПОЛЕ? НА КРЫШЕ МНОГОЭТАЖКИ? |
| Не важно! Мы найдём вас и накормим с таким энтузиазмом, что соседи позавидуют! |
| </p> |
| </q-card-section> |
| </q-card> |
| </div> |
|
|
| <div class="col-12 col-md-4"> |
| <q-card class="text-center q-pa-lg bg-white bordered" style="border: 3px solid #dc2626;"> |
| <q-card-section> |
| <q-avatar size="64px" class="bg-red-800 text-yellow-300 q-mb-md animate-bounce-slow"> |
| <q-icon name="celebration" size="32px" /> |
| </q-avatar> |
| <h3 class="text-h5 text-weight-bold text-red-800 q-mb-md">ДЛЯ СУМАСШЕДШИХ</h3> |
| <p class="text-red-700 font-bold"> |
| Ролевики, реконструкторы, безумные учёные, лесные отшельники - |
| мы понимаем вас лучше, чем ваши терапевты! |
| </p> |
| </q-card-section> |
| </q-card> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section class="q-py-xl" style="background: linear-gradient(45deg, #dc2626, #b91c1c, #991b1b);"> |
| <div class="container"> |
| <div class="text-center q-mb-xl"> |
| <h2 class="font-display text-h3 text-h2-md text-yellow-300 q-mb-md" style="text-shadow: 2px 2px 0px #991b1b;"> |
| ЧТО МОЖНО СЖРАТЬ |
| </h2> |
| <p class="text-h6 text-yellow-100 font-bold"> |
| ЕДА, ОТ КОТОРОЙ ВЗОРВЁТСЯ МОЗГ И УДОВЛЕТВОРИТСЯ ЖИВОТ! |
| </p> |
| </div> |
| <div class="row q-col-gutter-lg"> |
| <div class="col-12 col-md-6 col-lg-4" v-for="item in menuItems" :key="item.id"> |
| <q-card class="bg-yellow-50 rounded-borders shadow-10" style="transition: all 0.3s; cursor: pointer; border: 2px solid #dc2626;" |
| @mouseenter="item.hover = true" |
| @mouseleave="item.hover = false" |
| :style="{ transform: item.hover ? 'scale(1.05) rotate(2deg)' : 'scale(1)', boxShadow: item.hover ? '0 10px 25px rgba(220, 38, 38, 0.5)' : '0 4px 6px rgba(0,0,0,0.1)' }"> |
| <q-card-section class="q-pa-none"> |
| <div class="bg-red-800 rounded-borders q-pa-xl text-center"> |
| <q-icon :name="item.icon" size="64px" color="yellow-300" /> |
| </div> |
| </q-card-section> |
| |
| <q-card-section> |
| <h3 class="text-h5 text-weight-bold text-red-800 q-mb-sm">{{ item.name }}</h3> |
| <p class="text-red-700 font-bold q-mb-md">{{ item.description }}</p> |
| <div class="row items-center justify-center"> |
| <q-btn color="red-800" text-color="yellow-300" label="ХОЧУ СЕЙЧАС!" size="sm" class="font-bold" /> |
| </div> |
| </q-card-section> |
| </q-card> |
| </div> |
| </div> |
| <div class="text-center q-mt-xl"> |
| <q-btn color="yellow-300" text-color="red-800" size="lg" icon="calculate" label="УЗНАТЬ СКОЛЬКО ОТСВИСТИШЬ" class="font-bold" /> |
| </div> |
| </div> |
| </section> |
| |
| <section class="q-py-xl bg-gradient-to-r from-yellow-50 to-red-50"> |
| <div class="container"> |
| <div class="text-center q-mb-xl"> |
| <h2 class="font-display text-h3 text-h2-md text-red-800 q-mb-md" style="text-shadow: 2px 2px 0px #fbbf24;"> |
| СКОЛЬКО СВИСТИШЬ ЗА ЕДУ? |
| </h2> |
| <p class="text-h6 text-red-700 font-bold"> |
| УЗНАЙ, СКОЛЬКО ТЕБЕ ПРИДЁТСЯ ОТСВИСТЕТЬ ЗА НАШИ БЕЗУМНЫЕ БЛЮДА! |
| </p> |
| </div> |
|
|
| <div class="row justify-center"> |
| <div class="col-12 col-md-8 col-lg-6"> |
| <q-card class="bg-white q-pa-lg shadow-10 rounded-borders" style="border: 3px solid #dc2626;"> |
| <q-card-section> |
| <div class="q-mb-lg"> |
| <q-select |
| v-model="selectedDish" |
| :options="dishes" |
| label="ВЫБЕРИ БЛЮДО" |
| color="red-800" |
| bg-color="yellow-50" |
| filled |
| class="font-bold" |
| /> |
| </div> |
| |
| <div class="q-mb-lg"> |
| <q-input |
| v-model.number="quantity" |
| type="number" |
| label="СКОЛЬКО ПОРЦИЙ" |
| color="red-800" |
| bg-color="yellow-50" |
| filled |
| min="1" |
| max="100" |
| class="font-bold" |
| /> |
| </div> |
| |
| <div class="q-mb-lg"> |
| <q-input |
| v-model.number="distance" |
| type="number" |
| label="РАССТОЯНИЕ (км)" |
| color="red-800" |
| bg-color="yellow-50" |
| filled |
| min="1" |
| max="500" |
| class="font-bold" |
| /> |
| </div> |
|
|
| <div class="text-center q-mb-lg"> |
| <q-btn |
| color="red-800" |
| text-color="yellow-300" |
| size="lg" |
| label="ПОСЧИТАТЬ СВИСТ" |
| @click="calculateTotal" |
| class="font-bold animate-pulse" |
| /> |
| </div> |
|
|
| <div v-if="totalPrice" class="text-center"> |
| <h3 class="text-h4 text-weight-bold text-red-800 q-mb-sm"> |
| ИТОГО: {{ totalPrice }} ₽ |
| </h3> |
| <p class="text-red-700 font-bold"> |
| ПЛЮС БЕСПЛАТНЫЙ СТРИМ АУТИСТА ЗА РАБОТОЙ! |
| </p> |
| </div> |
| </q-card-section> |
| </q-card> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="q-py-xl" style="background: radial-gradient(circle, #fbbf24, #f59e0b, #d97706);"> |
| <div class="container text-center"> |
| <h2 class="font-display text-h3 text-h2-md text-red-800 q-mb-lg" style="text-shadow: 2px 2px 0px #fef3c7;"> |
| ГОТОВ К БЕЗУМИЮ ВКУСА? |
| </h2> |
| <p class="text-h6 text-red-800 font-bold q-mb-xl"> |
| ВЫЗЫВАЙ НАШИХ АУТИСТОВ С КУХНЕЙ И ПОЛУЧИ ВЗРЫВ ВКУСОВЫХ РЕЦЕПТОРОВ!<br> |
| ОБЫЧНЫЙ ПОХОД? НЕТ! ЭТО БУДЕТ ГАСТРОНОМИЧЕСКИЙ АПОКАЛИПСИС! |
| </p> |
| <div class="row justify-center q-gutter-md"> |
| <q-btn color="red-800" text-color="yellow-300" size="lg" icon="local_fire_department" label="СРОЧНО ВЫЗВАТЬ" class="font-bold animate-pulse" /> |
| <q-btn outline color="red-800" text-color="red-800" size="lg" label="НАПИСАТЬ В ТЕЛЕГРАМ" class="font-bold" /> |
| </div> |
| </div> |
| </section> |
| |
| <q-footer elevated class="bg-red-900 text-yellow-100"> |
| <div class="container q-pt-xl q-pb-lg"> |
| <div class="row q-col-gutter-xl"> |
| <div class="col-12 col-md-3"> |
| <div class="flex items-center q-mb-md"> |
| <q-avatar size="32px" class="bg-yellow-300 text-red-800 q-mr-sm animate-bounce-slow"> |
| <q-icon name="psychology" /> |
| </q-avatar> |
| <span class="font-display text-h6 text-weight-bold text-yellow-300">БЕЛКИНЫ ШТУКИ</span> |
| </div> |
| <p class="text-yellow-200 font-bold"> |
| АУТИСТЫ С КУХНЕЙ В ЛЕСУ!<br> |
| ГОТОВИМ С ОСОБЫМ ВНИМАНИЕМ К ДЕТАЛЯМ И ПОЛНЫМ ИГНОРОМ СОЦИАЛЬНЫХ НОРМ! |
| </p> |
| </div> |
| |
| <div class="col-12 col-md-3"> |
| <h4 class="text-weight-semibold q-mb-md text-yellow-300">КАК ДОСТАТЬ БЕЛКУ</h4> |
| <div class="column q-gutter-y-sm text-yellow-200 font-bold"> |
| <div class="flex items-center"> |
| <q-icon name="phone" size="16px" class="q-mr-sm" /> |
| <span>+7 (800) БЕЛКА-ЕДА</span> |
| </div> |
| <div class="flex items-center"> |
| <q-icon name="email" size="16px" class="q-mr-sm" /> |
| <span>autism@belka.cooking</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="col-12 col-md-3"> |
| <h4 class="text-weight-semibold q-mb-md text-yellow-300">МЫ В ИНТЕРНЕТАХ</h4> |
| <div class="row q-gutter-sm"> |
| <q-btn round color="yellow-300" text-color="red-800" icon="fab fa-instagram" /> |
| <q-btn round color="yellow-300" text-color="red-800" icon="fab fa-tiktok" /> |
| <q-btn round color="yellow-300" text-color="red-800" icon="telegram" /> |
| </div> |
| </div> |
| |
| <div class="col-12 col-md-3"> |
| <h4 class="text-weight-semibold q-mb-md text-yellow-300">ГДЕ МЫ ОРЁМ</h4> |
| <p class="text-yellow-200 font-bold"> |
| МОСКВА И ОКРЕСТНОСТИ<br> |
| ПРИЕДЕМ КУДА СКАЖЕШЬ!<br> |
| (В РАЗУМНЫХ ПРЕДЕЛАХ) |
| </p> |
| </div> |
| </div> |
| |
| <q-separator color="yellow-300" class="q-my-lg" /> |
| |
| <div class="text-center text-yellow-200 font-bold"> |
| <p>© 2024 БЕЛКИНЫ ШТУКИ. ВСЕ ПРАВА ЗАЩИЩЕНЫ, КАК И ВАШ ЖЕЛУДОК!</p> |
| </div> |
| </div> |
| </q-footer> |
| </div> |
| <script> |
| const { createApp, ref, onMounted } = Vue; |
| const app = createApp({ |
| setup() { |
| const menuOpen = ref(false); |
| const menuItems = ref([ |
| { |
| id: 1, |
| name: 'ЩИ С АУТИЗМОМ', |
| description: 'Настоящие русские щи, томлёные 7 часов с особым вниманием к каждой капустине', |
| icon: 'local_cafe', |
| price: 890, |
| hover: false |
| }, |
| { |
| id: 2, |
| name: 'КАША ДРУИДОВ PRO', |
| description: 'Злаковая смесь, которую мы перебирали 3 часа под лупой. Каждое зёрнышко на месте!', |
| icon: 'psychology', |
| price: 750, |
| hover: false |
| }, |
| { |
| id: 3, |
| name: 'КУРИЦА В ИСТЕРИКЕ', |
| description: 'Цыплёнок, запечённый до идеальной температуры 74.3°C с 14 проверками термометром', |
| icon: 'local_fire_department', |
| price: 1250, |
| hover: false |
| } |
| ]); |
| |
| const dishes = [ |
| { label: 'ЩИ С АУТИЗМОМ - 890 ₽', value: 890 }, |
| { label: 'КАША ДРУИДОВ PRO - 750 ₽', value: 750 }, |
| { label: 'КУРИЦА В ИСТЕРИКЕ - 1250 ₽', value: 1250 } |
| ]; |
| |
| const selectedDish = ref(null); |
| const quantity = ref(1); |
| const distance = ref(10); |
| const totalPrice = ref(0); |
| |
| const calculateTotal = () => { |
| if (!selectedDish.value) return; |
| |
| const basePrice = selectedDish.value.value * quantity.value; |
| const deliveryCost = distance.value * 50; |
| const autismTax = basePrice * 0.15; |
| |
| totalPrice.value = basePrice + deliveryCost + autismTax; |
| }; |
| const toggleMenu = () => { |
| menuOpen.value = !menuOpen.value; |
| }; |
| |
| onMounted(() => { |
| console.log('App mounted successfully'); |
| }); |
| return { |
| menuOpen, |
| menuItems, |
| dishes, |
| selectedDish, |
| quantity, |
| distance, |
| totalPrice, |
| calculateTotal, |
| toggleMenu |
| }; |
| } |
| }); |
| |
| app.use(Quasar, { |
| config: { |
| brand: { |
| primary: '#dc2626', |
| secondary: '#b91c1c', |
| accent: '#fbbf24', |
| dark: '#1f2937', |
| positive: '#10b981', |
| negative: '#ef4444', |
| info: '#3b82f6', |
| warning: '#f59e0b' |
| } |
| } |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| app.mount('#q-app'); |
| }); |
| </script> |
| </body> |
| </html> |
