продолжай

index.html

@@ -204,7 +204,89 @@
                 </div>
             </div>
         </section>
-<!-- CTA 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;">
@@ -220,7 +302,7 @@
                 </div>
             </div>
         </section>
-        <!-- Footer -->
+<!-- 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">
@@ -289,6 +371,7 @@
                         name: 'ЩИ С АУТИЗМОМ',
                         description: 'Настоящие русские щи, томлёные 7 часов с особым вниманием к каждой капустине',
                         icon: 'local_cafe',
+                        price: 890,
                         hover: false
                     },
                     {
@@ -296,6 +379,7 @@
                         name: 'КАША ДРУИДОВ PRO',
                         description: 'Злаковая смесь, которую мы перебирали 3 часа под лупой. Каждое зёрнышко на месте!',
                         icon: 'psychology',
+                        price: 750,
                         hover: false
                     },
                     {
@@ -303,9 +387,31 @@
                         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;
                 };
@@ -313,13 +419,18 @@ const toggleMenu = () => {
                 onMounted(() => {
                     console.log('App mounted successfully');
                 });
-
                 return {
                     menuOpen,
                     menuItems,
+                    dishes,
+                    selectedDish,
+                    quantity,
+                    distance,
+                    totalPrice,
+                    calculateTotal,
                     toggleMenu
                 };
-            }
+}
         });
 
         app.use(Quasar, {