Spaces:

iWedmak
/

undefined

Running

File size: 25,265 Bytes

<!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">
        <!-- Header -->
        <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>
        <!-- Hero Section -->
        <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>
        <!-- Features -->
        <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>
        <!-- Menu 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>
        <!-- Calculator 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>

        <!-- CTA 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>
<!-- Footer -->
        <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>&copy; 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; // 50 рублей за км
                    const autismTax = basePrice * 0.15; // 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'
                }
            }
        });

        // Wait for DOM to be fully loaded before mounting
        document.addEventListener('DOMContentLoaded', function() {
            app.mount('#q-app');
        });
</script>
</body>
</html>