PageSourceSearch

https://grannysbar.ru/

html grannysbar.ru collected 2026-10-04 09:33:11 UTC 121,608 bytes, 3,986 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ru">
3<head>
4    <title>Лучший Коктейльный бар ресторан - Grannys Бар Тюмень</title>
5    <meta charset="utf-8">
6    <meta name="description" content="">
7    <meta name="keywords" content="">
8    <meta name="author" content="reloadteam.ru">
9    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
10
11    <link rel="apple-touch-icon" sizes="180x180"
12          href="/site/templates/default/imgs_default/favicon/apple-touch-icon.png">
13    <link rel="icon" type="image/png" sizes="32x32"
14          href="/site/templates/default/imgs_default/favicon/favicon-32x32.png">
15    <link rel="icon" type="image/png" sizes="16x16"
16          href="/site/templates/default/imgs_default/favicon/favicon-16x16.png">
17    <link rel="manifest" href="/site/templates/default/imgs_default/favicon/site.webmanifest">
18    <link rel="mask-icon" href="/site/templates/default/imgs_default/favicon/safari-pinned-tab.svg" color="#5bbad5">
19    <meta name="msapplication-TileColor" content="#da532c">
20    <meta name="theme-color" content="#ffffff">
21
22        <meta property="og:title" content="Лучший Коктейльный бар ресторан - Grannys Бар Тюмень">
23    <meta property="og:description" content="">
24    <meta property="og:url" content="https://grannysbar.ru/">
25    <meta property="og:image" content="">
26
27                <meta name="yandex-verification" content="">
28        <meta name="yandex-verification" content="7b63c563dea56a36" />
29
30
31    
32	<!--CSS-->
33	<link rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/cache/css-top-26699664cda514842dd3754bf9f2686a.css?1790762419'>
34    
35	<!--JS-->
36	
36<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery/3.5.1/jquery-3.5.1.min.js'></script>
36
37	
37<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery-dimodal/jquery.dimodal.js'></script>
37
38	
38<script type='text/javascript' src='https://grannysbar.ru/core/plugins/vue/vue/3.2.47/vue.global.prod.js'></script>
38
39	
39<script type='text/javascript' src='https://grannysbar.ru/core/plugins/vue/naiveui/2.34.3/index.js?v=5'></script>
39
40	
40<script type='text/javascript' src='https://grannysbar.ru/site/plugins/@types/lodash/lodash.js'></script>
40
41	
41<script type='text/javascript' src='https://grannysbar.ru/site/plugins/vue-screen-utils/index.js'></script>
41
42	
42<script type='text/javascript' src='https://grannysbar.ru/site/plugins/@popperjs/core/popper.min.js'></script>
42
43	
43<script type='text/javascript' src='https://grannysbar.ru/site/plugins/v-calendar/index.js'></script>
43
44	
44<script type='text/javascript' src='																																																																																																																																																																																				'></script>
44
45            
45<script>
46        $(function () {
47                        new reloadteamFooter({
48                date: 2005,
49                text: "Reload Team",
50                borderTop: '1px solid #1d120b',
51                background: '',
52                color: '#fff',
53                height: '40px',
54                svg_color_1: '#fff',
55                svg_color_2: '#FF4824',
56                addClass: ''
57            });
58        })
59    </script>
59
60    
60<script>
61        let naiveLocaleRu = naive.createLocale(naive.ruRU)
62        let naiveLocaleDateRu = naive.createLocale(naive.dateRuRU)
63
64        const app = Vue.createApp({
65            data:() => ({
66                isMobile: window.innerWidth < 1000,
67                page: "",
68                burgerMenu: window.innerWidth < 1000,
69                burgerMenuOpened: false,
70                sideWindow: "booking",
71                sideWindowPrevious: null,
72                sideWindowShortType: window.innerWidth < 1250,
73                booking: {
74                    stage: "date",
75                    date: null,
76                    form: {},
77                    event: {
78                        title: "",
79                        text: "",
80                        img: ""
81                    }
82                },
83                monthNews: {},
84                currentMonthNews: [],
85                calendarAttrs: [
86                    {
87                        key: 'today',
88                        dot: {
89                            style: {
90                                backgroundColor: "var(--green)",
91                                "clip-path": "circle(30.0% at 50% 50%)"
92                            }
93                        },
94                        dates: new Date(),
95                    },
96                    {
97                        key: 'selectedDay',
98                        highlight: "var(--yellow1)",
99                        dates: null,
100                    }
101                ],
102                dateRu: naiveLocaleDateRu,
103                sideWindowHashNames: ['menu', 'services', 'guest']
104            }),
105            watch: {
106                "booking.stage"() {
107                    this.burgerMenu = this.checkBurgerMenu()
108                },
109                "booking.date"() {
110                    this.getEvent()
111                },
112                page() {
113                    this.sideWindowShortType = this.checkSideWindowShortType()
114                    this.burgerMenu = this.checkBurgerMenu()
115                },
116                sideWindow() {
117                    this.burgerMenu = this.checkBurgerMenu()
118                }
119            },
120            created() {
121                window.addEventListener('resize', () => {
122                    this.isMobile = window.innerWidth < 1000
123                    this.sideWindowShortType = this.checkSideWindowShortType()
124                    this.burgerMenu = this.checkBurgerMenu()
125                });
126                window.addEventListener('hashchange', () => {
127                    this.applySideWindowFromHash(true)
128                });
129                window.addEventListener('popstate', () => {
130                    this.applySideWindowFromHash(true)
131                });
132            },
133            mounted() {
134                this.sideWindowShortType = this.checkSideWindowShortType()
135                this.burgerMenu = this.checkBurgerMenu()
136                this.applySideWindowFromHash(false)
137            },
138            methods: {
139                applySideWindowFromHash(forceClose = false) {
140                    const hash = (window.location.hash || '').replace(/^#/, '')
141                    if (this.sideWindowHashNames.includes(hash)) {
142                        this.sideWindow = hash
143                    } else if (forceClose || this.sideWindowHashNames.includes(this.sideWindow)) {
144                        this.sideWindow = 'booking'
145                    }
146                },
147                openSideWindow(name) {
148                    this.sideWindow = name
149                    if (this.sideWindowHashNames.includes(name)) {
150                        window.history.pushState({}, '', '/#' + name)
151                    } else if (name === 'booking' && window.location.hash) {
152                        window.history.pushState({}, '', '/')
153                    }
154                },
155                checkBurgerMenu() {
156                    this.burgerMenuOpened = false
157
158                    return window.innerWidth < 1000 ||
159                        (!this.sideWindowShortType &&
160                            this.booking.stage !== "date" &&
161                            this.booking.stage !== "success" &&
162                            this.sideWindow === "booking"
163                        ) ||
164                        this.page === "contacts"
165                },
166                checkSideWindowShortType() {
167                    return window.innerWidth < 1250 ||
168                        this.page === "about-granny"
169                },
170                getEvent() {
171                    if (!this.$root.booking.date) {
172                        return
173                    }
174
175                    const this2 = this;
176                    $.ajax({
177                        data: {
178                            act: 'news-by-date',
179                            date: this2.$root.booking.date
180                        },
181                        success: function(data){
182                            if (data.news) {
183                                this2.$root.booking.event = Object.assign({}, this2.$root.booking.event, data.news[0]);
184                                this2.$root.booking.stage = "day"
185                            } else {
186                                this2.$root.booking.event.text = "На данную дату не запланировано событий"
187                                this2.$root.booking.event.title = ""
188                                this2.$root.booking.event.img = ""
189
190                                this2.$root.booking.stage = "day" // Поменять на booking если надо включить бронирование дат без эвентов на сайте
191                            }
192                        }
193                    });
194                },
195                async getMonthNews(firstDay, lastDay, monthId) {
196                    if (!firstDay && !lastDay && !monthId) {
197                        return
198                    }
199
200                    const this2 = this;
201                    return $.ajax({
202                        method: "post",
203                        dataType: 'json',
204                        data: {
205                            act: 'news-by-month',
206                            start_date: firstDay,
207                            end_date: lastDay,
208                        },
209                        success: function(data){
210                            if (data.news) {
211                                this2.$root.monthNews[monthId] = data.news
212                            } else {
213                                this2.$root.monthNews[monthId] = []
214                            }
215                        }
216                    });
217                },
218                convertDate(dateString, showTime = false, showDate = true, showSeconds = false) {
219                    if (!!!Date.parse(dateString)) {
220                        return ""
221                    }
222                    let dateTime = new Date(Date.parse(dateString))
223                    let date = dateTime.toLocaleDateString("ru-RU")
224                    let time = dateTime.toLocaleTimeString("ru-RU")
225                    let result = []
226                    if (showDate) {
227                        result.push(date)
228                    }
229                    if (showTime && time != "00:00:00") {
230                        if (showSeconds) {
231                            result.push(time)
232                        } else {
233                            result.push(time.substr(0, 5))
234                        }
235                    }
236
237                    return result.join(" ")
238                },
239            }
240        });
241
242
243        app.use(naive);
244
245        app.use(VCalendar.setupCalendar, {})
246        app.component('VCalendar', VCalendar.Calendar)
247    </script>
247
248    
248<script src="https://grannysbar.ru/site/plugins/input-mask/inputMask.js"></script>
248
249    <!-- Yandex.Metrika counter -->
250    
250<script type="text/javascript" >
vendor: 455 bytes, lines 250-257
250
251        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
252            m[i].l=1*new Date();
253            for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
254            k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
255        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
256
257        ym(
25723266615
vendor: 154 bytes, lines 257-263
257, "init", {
258            clickmap:true,
259            trackLinks:true,
260            accurateTrackBounce:true,
261            webvisor:true
262        });
263    
263</script>
263
264    <noscript><div><img src="https://mc.yandex.ru/watch/23266615" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
265
266</head>
267<body>
268
269<!--
269<script src='//app.restoplace.cc/widget.js?h=ae7ee4d757aea4fcb0b1' async></script>
269-->
270<!--
270<script>window.fsPromoterConfig = {"zone": "ru", "language": "ru", "chain_id": 7105};</script>
270-->
271<!--
271<script src="https://fs.me/pr/init.js" async></script>
271-->
272<script>
273    var yaParams = {ip: "181.215.65.70"};
274    var msgr_phone = '';
275        </script>
275
276
277<script>
278
279app.component('vue-page-index', {
280  props: {
281    data: {
282      type: [Array, Object],
283      default: () => {
284        return typeof(page_data) !== 'undefined' ? page_data : {}
285      }
286    },
287  },
288  data: () => ({
289    message2: 'test1',
290    test: {
291      status: false
292    }
293  }),
294  beforeCreate() {
295    if (!this.$root.isMobile && (page_tab === "menu" || page_tab === "services" || page_tab === "deposit" || page_tab === "booking" || page_tab === "guest")) {
296      this.$root.page = ""
297      window.history.pushState({}, "", '/');
298    } else {
299      this.$root.page = page_tab
300    }
301  },
302  watch: {},
303  computed: {
304  },
305  methods: {
306    changePage(page) {
307      this.$root.page = page
308    }
309  },
310  template: `
311    <n-config-provider class="main__container" :date-locale="$root.dateRu">
312      <n-tabs v-model:value="$root.page" animated>
313        <n-tab-pane name="" tab="index">
314          <MainPage
315            @toMenu="changePage('menu')"
316            @toServices="changePage('services')"
317            @toAboutGranny="changePage('about-granny')"
318            @toContacts="changePage('contacts')"
319            @toBooking="changePage('booking')"
320            @toDeposit="changePage('deposit')"
321            @toGuest="changePage('guest')"
322          >
323          </MainPage>
324        </n-tab-pane>
325        <n-tab-pane name="about-granny" tab="about-granny">
326          <AboutGrannyPage
327            @toMain="changePage('')"
328            @toOurTeam="changePage('our-team')"
329            @toGallery="changePage('gallery')"
330          ></AboutGrannyPage>
331        </n-tab-pane>
332        <n-tab-pane name="menu" tab="menu">
333          <MenuPage @toMain="changePage('')"></MenuPage>
334        </n-tab-pane>
335        <n-tab-pane name="services" tab="services">
336          <ServicesPage @toMain="changePage('')"></ServicesPage>
337        </n-tab-pane>
338        <n-tab-pane name="contacts" tab="contacts">
339          <ContactPage
340            @toMain="changePage('')"
341            @toBooking="changePage('booking')"
342            @toAboutGranny="changePage('about-granny')"
343          ></ContactPage>
344        </n-tab-pane>
345        <n-tab-pane name="booking" tab="booking">
346          <BookingPage @toMain="changePage('')"></BookingPage>
347        </n-tab-pane>
348        <n-tab-pane name="guest" tab="guest">
349          <GuestPage @toMain="changePage('')"></GuestPage>
350        </n-tab-pane>
351        <n-tab-pane name="our-team" tab="our-team">
352          <OurTeamPage @toAboutGranny="changePage('about-granny')"></OurTeamPage>
353        </n-tab-pane>
354        <n-tab-pane name="deposit" tab="deposit">
355          <DepositPage @toMain="changePage('')"></DepositPage>
356        </n-tab-pane>
357        <n-tab-pane name="gallery" tab="gallery">
358          <GalleryPage @toAboutGranny="changePage('about-granny')"></GalleryPage>
359        </n-tab-pane>
360      </n-tabs>
361    </n-config-provider>`
362})
363</script>
363
364
365<style>
366body {
367  overflow-x: hidden;
368  overflow-y: hidden;
369}
370</style>
370<script>
371app.component('ContactPage', {
372  data: () => ({}),
373  mounted() {
374    this.$root.sideWindow = "contacts"
375  },
376  watch: {},
377  computed: {},
378  methods: {
379    goBack(){
380      this.$emit('toMain')
381      window.history.pushState({}, "", '/');
382    },
383    goBooking(){
384      this.$emit('toBooking')
385      window.history.pushState({}, "", '/booking');
386    },
387    goAboutGranny(){
388      this.$emit('toAboutGranny')
389      window.history.pushState({}, "", '/about-granny');
390    }
391  },
392  template: `
393    <div class="page__wrapper contacts">
394      <template v-if="$root.isMobile">
395        <div class="title__wrapper">
396          <div class="circle-button" @click="goBack">
397            ❮
398          </div>
399          Контакты
400        </div>
401        <div class="second-title">
402          Здесь живут настоящие коктейли
403        </div>
404
405        <div
406          style="
407            width: 100%;
408            height: 302px;
409            border-radius: 16px;
410            overflow: hidden;
411            -webkit-filter: contrast(80%) invert(100%) sepia(80%) hue-rotate(180deg);
412          "
413        >
414          <component
415              is="script"
416              src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A33b8713f64e3baaa897e5b7a5b0b49c49b337979e4b4b0d33c4d9d1509b7f11b&amp;lang=ru_RU&amp;scroll=true"
417              async
418              style="border-radius: 16px"
419          >
420          </component>
421        </div>
422
423        <div class="main-text" style="margin-top: 20px">
424          г. Тюмень, ул. Мельникайте, д. 98
425        </div>
426        <a class="main-text custom-link" href="tel:+73452673131" style="margin-top: 20px; font-size: 19px;">
427          +7 (3452) 67-31-31
428        </a>
429
430        <div class="buttons__container">
431          <a href="https://686682.restoplace.ws/" target="_blank" class="round-button yellow small">Бронь столика</a>
432          <a href="https://tyumen.hh.ru/employer/5297574" target="_blank" class="round-button small">Вакансии</a>
433        </div>
434
435        <div class="contacts__wrapper">
436          <a class="contacts__item" href="tel:+73452673131" target="_blank">
437            <n-image src="/site/templates/default/imgs/contacts/local-phone.svg" width="32" preview-disabled/>
438          </a>
439          <div class="contacts__divider"></div>
440          <a class="contacts__item" href="mailto:[email protected]" target="_blank">
441            <n-image src="/site/templates/default/imgs/contacts/mail-outline.svg" width="32" preview-disabled/>
442          </a>
443          <div class="contacts__divider"></div>
444          <a class="contacts__item" href="https://t.me/dobryebary" target="_blank">
445            <n-image src="/site/templates/default/imgs/contacts/tg-outline.svg" width="32" preview-disabled/>
446          </a>
447          <div class="contacts__divider"></div>
448          <a class="contacts__item" href="https://instagram.com/grannysbar" target="_blank">
449            <n-image src="/site/templates/default/imgs/contacts/insta-outline.svg" width="32" preview-disabled/>
450          </a>
451          <div class="contacts__divider"></div>
452          <a class="contacts__item" href="https://vk.ru/grannys" target="_blank">
453            <n-image src="/site/templates/default/imgs/contacts/vk-outline.svg" width="32" preview-disabled/>
454          </a>
455          <div class="contacts__divider"></div>
456          <a class="contacts__item" href="https://play.google.com/store/apps/details?id=ru.foodsoul.c7105" target="_blank">
457            <n-image src="/site/templates/default/imgs/contacts/play-market-outline.svg" width="32" preview-disabled/>
458          </a>
459          <div class="contacts__divider"></div>
460          <a class="contacts__item" href="https://apps.apple.com/us/app/grannys-bar-тюмень/id1632922614?uo=4" target="_blank">
461            <n-image src="/site/templates/default/imgs/contacts/app-store-outline.svg" width="32" preview-disabled/>
462          </a>
463        </div>
464      </template>
465
466      <template v-else>
467        <div class="main__wrapper">
468          <div
469            style="
470              width: 100%;
471              height: 100%;
472              border-radius: 36px;
473              overflow: hidden;
474              -webkit-filter: contrast(80%) invert(100%) sepia(80%) hue-rotate(180deg);
475            "
476          >
477            <component
478                is="script"
479                src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A33b8713f64e3baaa897e5b7a5b0b49c49b337979e4b4b0d33c4d9d1509b7f11b&amp;lang=ru_RU&amp;scroll=true"
480                async
481                style="border-radius: 16px"
482            >
483            </component>
484          </div>
485
486          <DesktopMenu @toAboutGranny="goAboutGranny"/>
487          <SideWindow home-image/>
488        </div>
489      </template>
490    </div>`
491})
492
493</script>
493
494
495<style>
496.page__wrapper.contacts {
497  background-image: url("/site/templates/default/imgs/mobile-background3.webp");
498  display: flex;
499  flex-direction: column;
500  padding: 24px 16px;
501}
502
503.buttons__container {
504  display: flex;
505  gap: 16px;
506  margin-top: 28px;
507}
508
509.contacts__wrapper {
510  margin-top: 20px;
511  height: 72px;
512  display: flex;
513  justify-content: space-between;
514  gap: 10px;
515  padding: 14px;
516  border-radius: 16px;
517  background: rgba(255, 255, 255, 0.1);
518}
519
520.contacts__wrapper.short {
521  border-radius: 34px;
522  height: 66px;
523  width: 360px;
524  justify-content: center;
525  align-items: center;
526  gap: 40px;
527  padding: 0;
528  position: relative;
529  z-index: 1;
530}
531
532.contacts__item {
533  display: flex;
534  align-items: center;
535  justify-content: center;
536  flex-direction: column;
537  gap: 8px;
538  width: 100%;
539}
540
541.contacts__item.short {
542  width: fit-content;
543}
544
545.contacts__divider {
546  width: 1px;
547  height: 100%;
548  background: var(--brown3);
549}
550
551@media screen and (min-width: 1000px) {
552  .page__wrapper.contacts {
553    background-image: url("/site/templates/default/imgs/desktop-background3.webp");
554    background-size: cover;
555    padding: 0;
556    flex-direction: row;
557    justify-content: start;
558  }
559
560  .page__wrapper.contacts .main__wrapper {
561    padding: 0;
562  }
563}
564</style>
564<script>
565
566app.component('MainPage', {
567  data: () => ({
568    tab: page_tab,
569  }),
570  mounted() {
571    this.$root.applySideWindowFromHash(true)
572  },
573  watch: {},
574  computed: {
575    mainWrapperClass() {
576      return {
577        'page__wrapper': true,
578        'main': true,
579        'booking-active': this.$root.sideWindow === 'booking'
580      }
581    }
582  },
583  methods: {
584    goMenu(){
585      this.$emit('toMenu')
586      window.history.pushState({}, "", '/menu');
587    },
588    goServices(){
589      this.$emit('toServices')
590      window.history.pushState({}, "", '/services');
591    },
592    goAboutGranny(){
593      this.$emit('toAboutGranny')
594      window.history.pushState({}, "", '/about-granny');
595    },
596    goContacts(){
597      this.$emit('toContacts')
598      window.history.pushState({}, "", '/contacts');
599    },
600    goBooking(){
601      this.$emit('toBooking')
602      window.history.pushState({}, "", '/booking');
603    },
604    goDeposit(){
605      this.$emit('toDeposit')
606      window.history.pushState({}, "", '/deposit');
607    },
608    goGuest(){
609      this.$emit('toGuest')
610      window.history.pushState({}, "", '/guest');
611    },
612    goStart() {
613      this.$root.sideWindow = "booking"
614      this.$root.sideWindowPrevious = null
615      this.$root.booking.stage = "date"
616      this.$root.booking.date = null
617    },
618    handleBookingClick() {
619      reachGoal("sendreserve")
620    }
621  },
622  template: `
623    <div  :class="mainWrapperClass">
624      <template v-if="$root.isMobile">
625        <div class="top__wrapper">
626          <div class="nav-button__wrapper">
627            <div class="nav-button" @click="goAboutGranny">
628              <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" height="37" preview-disabled/>
629              О бабуле
630            </div>
631            <div class="nav-button" @click="goMenu">
632              <n-image src="/site/templates/default/imgs/nav_button/menu.svg" width="38" height="37" preview-disabled/>
633              Меню
634            </div>
635            <a style="color: var(--yellow1)" href="https://dostavka.grannysbar.ru/" target="_blank" class="nav-button">
636              <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" height="37" preview-disabled/>
637              Доставка
638            </a>
639            <div class="nav-button" @click="goServices">
640              <n-image src="/site/templates/default/imgs/nav_button/services.svg" width="38" height="37" preview-disabled/>
641              Услуги
642            </div>
643            <div class="nav-button" @click="goContacts">
644              <n-image src="/site/templates/default/imgs/nav_button/contacts.svg" width="38" height="37" preview-disabled/>
645              Контакты
646            </div>
647            <div class="nav-button" @click="goGuest">
648              <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" height="37" preview-disabled/>
649              Тайный гость
650            </div>
651            <a style="color: var(--yellow1)" href="https://db-c.ru" target="_blank" class="nav-button">
652              <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" height="37" preview-disabled/>
653              Кейтеринг
654            </a>
655          </div>
656          <div class="image__wrapper">
657              <n-image src="/site/templates/default/imgs/granny-logo.png" width="170" height="110" preview-disabled/>
658              <n-image src="/site/templates/default/imgs/cocktail-mobile.png" width="200" height="333" preview-disabled style="z-index: 1;margin-left: 10px;"/>
659              <n-image class="cocktail-reflection" src="/site/templates/default/imgs/cocktail-mobile.png" width="200" preview-disabled/>
660              <n-image class="bubbles" src="/site/templates/default/imgs/bubbles.gif" width="80" preview-disabled/>
661          </div>
662<!--          <n-image class="orange" src="/site/templates/default/imgs/orange.webp" width="136" preview-disabled/>-->
663        </div>
664
665        <div style="display: flex; flex-direction: column; align-items: center">
666          <div class="buttons__wrapper">
667            <a href="https://686682.restoplace.ws/" target="_blank" class="round-button yellow small" style="width: 260px" @click="handleBookingClick">
667Бронь столика</a>
668<!--            <div class="round-button small" @click="goDeposit" style="width: 160px">Внести депозит</div>-->
669          </div>
670
671          <div class="contacts__wrapper short">
672            <a class="contacts__item short" href="tel:+73452673131" target="_blank">
673              <n-image src="/site/templates/default/imgs/contacts/local-phone.svg" width="26" preview-disabled/>
674            </a>
675            <a class="contacts__item short" href="https://max.ru/join/LMr7qIsvX4pnPsY3rbxvx7VGj7poJnHyPLEgj8YnfKo" target="_blank">
676              <n-image src="/site/templates/default/imgs/contacts/max_logo.svg?v=2" width="26" preview-disabled/>
677            </a>
678            <a class="contacts__item short" href="https://t.me/dobryebary" target="_blank">
679              <n-image src="/site/templates/default/imgs/contacts/tg-outline.svg?v=2" width="26" preview-disabled/>
680            </a>
681            <a class="contacts__item short" href="https://play.google.com/store/apps/details?id=ru.foodsoul.c7105" target="_blank">
682              <n-image src="/site/templates/default/imgs/contacts/play-market-outline.svg" width="26" preview-disabled/>
683            </a>
684            <a class="contacts__item short" href="https://apps.apple.com/us/app/grannys-bar-тюмень/id1632922614?uo=4" target="_blank">
685              <n-image src="/site/templates/default/imgs/contacts/app-store-outline.svg" width="32" preview-disabled/>
686            </a>
687          </div>
688        </div>
689      </template>
690      <template v-else>
691        <div class="main__wrapper">
692          <div class="main__header">
693            <n-image
694              class="desktop-logo"
695              src="/site/templates/default/imgs/granny-logo.png"
696              preview-disabled
697              style="cursor: pointer"
698              @click="goStart"
699            />
700            <div>
701              <h1>Лучший бар в России</h1>
702              <div class="main-text">
703                по версии
704                <a class="custom-link" target="_blank" href="http://mbscup.com/">mbscup.com</a>
705              </div>
706            </div>
707          </div>
708          <DesktopMenu @toAboutGranny="goAboutGranny" @toContacts="goContacts"/>
709          <SideWindow/>
710        </div>
711      </template>
712    </div>
713  `
714})
715</script>
715
716
717<style scoped>
718.booking-active .desktop-menu {
719  right: 30px;
720}
721.page__wrapper.main {
722  background-image: url("/site/templates/default/imgs/mobile-background.webp?v=7");
723  display: flex;
724  flex-direction: column;
725  justify-content: center;
726}
727
728.main__header {
729  display: flex;
730  align-items: center;
731  gap: 65px;
732  height: 130px;
733  color: var(--yellow3);
734}
735.main__header h1{
736  font-size: 50px;
737  font-family: "KarloCham";
738  letter-spacing: 0.05em;
739  line-height: 120%;
740  color: var(--yellow3);
741}
742
743.desktop-logo {
744  height: 130px;
745}
746
747.top__wrapper {
748  position: relative;
749  display: flex;
750  flex-direction: row-reverse;
751  justify-content: space-between;
752  gap: 32px;
753  width: 100%;
754  z-index: 1;
755}
756
757.image__wrapper {
758  position: relative;
759  display: flex;
760  flex-direction: column;
761  justify-content: space-between;
762  width: 200px;
763  height: 100%;
764  margin-left: 20px;
765}
766
767.cocktail-reflection {
768  position: absolute;
769  transform: scale(1, -1);
770  opacity: 0.1;
771  bottom: -260px;
772  left: 10px;
773  z-index: 0;
774}
775
776.bubbles {
777  position: absolute;
778  top: 125px;
779  left: 40px;
780  z-index: 1;
781  opacity: 70%;
782}
783
784.orange {
785  position: absolute;
786  bottom: -30px;
787  left: 125px;
788  z-index: 0;
789}
790
791.nav-button__wrapper {
792  display: flex;
793  flex-direction: column;
794  justify-content: space-between;
795  padding-top: 16px;
796  gap: 16px;
797  width: 64px;
798  color: var(--yellow1);
799  text-transform: uppercase;
800}
801
802.nav-button {
803  display: flex;
804  flex-direction: column;
805  align-items: center;
806  gap: 8px;
807  white-space: nowrap;
808}
809
810.buttons__wrapper {
811  position: relative;
812  padding-top: 20px;
813  z-index: 1;
814  display: flex;
815  align-items: center;
816  justify-content: center;
817  gap: 16px;
818}
819
820@media screen and (max-height: 700px) {
821  .buttons__wrapper {
822    padding-top: 20px;
823  }
824}
825
826@media screen and (min-width: 1000px) {
827  .page__wrapper.main {
828    background-image: url("/site/templates/default/imgs/desktop-background2.webp");
829    background-size: cover;
830    padding: 0;
831    flex-direction: row;
832    justify-content: start;
833  }
834}
835
836@media screen and (max-width: 1180px) {
837  .main__header {
838    gap: 20px;
839  }
840  .desktop-logo {
841    height: 100px;
842  }
843  .main__header h1{
844    font-size: 40px;
845  }
846}
847</style>
847<script>
848app.component('MenuPage', {
849  data: () => ({}),
850  mounted() {},
851  watch: {},
852  computed: {},
853  methods: {
854    goBack(){
855      this.$emit('toMain')
856      window.history.pushState({}, "", '/');
857    }
858  },
859  template: `
860    <div class="page__wrapper menu">
861      <div class="title__wrapper">
862        <div class="circle-button" @click="goBack">
863          ❮
864        </div>
865        Меню
866      </div>
867
868      <MenuList/>
869    </div>
870  `
871})
872
873</script>
873
874
875<style scoped>
876.page__wrapper.menu {
877  background-image: url("/site/templates/default/imgs/mobile-background2.webp");
878  display: flex;
879  flex-direction: column;
880  padding: 24px 16px;
881}
882</style>
882<script>
883app.component('ServicesPage', {
884  data: () => ({}),
885  mounted() {},
886  watch: {},
887  computed: {},
888  methods: {
889    goBack(){
890      this.$emit('toMain')
891      window.history.pushState({}, "", '/');
892    }
893  },
894  template: `
895    <div class="page__wrapper menu">
896      <div class="title__wrapper">
897        <div class="circle-button" @click="goBack">
898          ❮
899        </div>
900        Услуги
901      </div>
902
903      <ServicesList/>
904    </div>
905  `
906})
907
908</script>
908
909
910<style scoped>
911.page__wrapper.menu {
912  background-image: url("/site/templates/default/imgs/mobile-background2.webp");
913  display: flex;
914  flex-direction: column;
915  padding: 24px 16px;
916}
917</style>
917<script>
918app.component('AboutGrannyPage', {
919  data: () => ({
920    awardsList: [
921      {
922        image: "/site/templates/default/imgs/awards/mbscup.png",
923        title: "Лучший бар в России"
924      },
925      {
926        image: "/site/templates/default/imgs/awards/bartenders-team-cup.png",
927        title: "Нас рекомендует<br>Bartenders team cup 2014"
928      },
929      {
930        image: "/site/templates/default/imgs/awards/restaraunt-guru.png",
931        title: "Самое креативное заведение<br>Restaraunt guru 2020"
932      },
933      {
934        image: "/site/templates/default/imgs/awards/elderly-day.png",
935        title: "Внушительный вклад в<br>социально значимый проект"
936      },
937      {
938        image: "/site/templates/default/imgs/awards/visittyumen.png",
939        title: "Visit Tyumen",
940        href: "https://visittyumen.ru/"
941      }
942    ],
943    mediaCount: 0,
944    showAwardModal: false,
945    currentAward: 0
946  }),
947  mounted() {
948    this.mediaCount = this.computedMediaCount()
949
950    window.addEventListener('resize', () => {
951      this.mediaCount = this.computedMediaCount()
952    });
953
954    this.$root.sideWindow = "booking"
955  },
956  watch: {},
957  computed: {},
958  methods: {
959    goBack(){
960      this.$emit('toMain')
961      window.history.pushState({}, "", '/');
962    },
963    goOurTeam(){
964      this.$emit('toOurTeam')
965      window.history.pushState({}, "", '/about-granny/our-team');
966    },
967    goGallery(){
968      this.$emit('toGallery')
969      window.history.pushState({}, "", '/about-granny/gallery');
970    },
971    computedMediaCount() {
972      let count = 0
973
974      if (window.innerWidth < 1100) {
975        count = 4
976      } else if (window.innerWidth < 1200) {
977        count = 3
978      } else {
979        count = 4
980      }
981
982      return count
983    },
984    openAwardModal(index) {
985      this.showAwardModal = true
986      this.currentAward = index
987    }
988  },
989  template: `
990    <div
991      :class="
992        {
993          'page__wrapper about-granny': true,
994          'main__wrapper': !$root.isMobile,
995        }
996      "
997    >
998      <div class="title__wrapper">
999        <div v-if="$root.isMobile" class="circle-button" @click="goBack">
1000          ❮
1001        </div>
1002        О бабуле
1003      </div>
1004
1005      <template v-if="$root.isMobile">
1006        <div class="second-title">Лучший коктейльный бар Granny's
1007        </div>
1008        <n-carousel
1009          slides-per-view="auto"
1010          :space-between="20"
1011          :show-dots="false"
1012          autoplay
1013          interval="3000"
1014          draggable
1015          style="height: 80px; overflow: visible"
1016        >
1017          <n-carousel-item v-for="(award, index) in awardsList" class="award__wrapper">
1018            <template v-if="award.href">
1019              <a :href="award.href" target="_blank" class="award__link">
1020                <n-image :src="award.image" width="70" object-fit="contain" preview-disabled/>
1021              </a>
1022            </template>
1023            <template v-else>
1024              <n-image :src="award.image" width="70" object-fit="contain" preview-disabled
1025                       @click="openAwardModal(index)"/>
1026            </template>
1027          </n-carousel-item>
1028        </n-carousel>
1029
1030        <n-modal v-model:show="showAwardModal" style="background: var(--yellow2); border-radius: 16px">
1031          <div class="award-modal__wrapper">
1032            <n-image :src="awardsList[currentAward].image" width="140" preview-disabled/>
1033            <div v-html="awardsList[currentAward].title"></div>
1034          </div>
1035        </n-modal>
1036
1037        <div class="main-text" style="margin-top: 20px">
1038          Granny's Bar - первый настоящий коктейльный бар в Тюмени. "Granny" - в переводе означает "бабуля". Это
1039          уникальное место, в котором воплощены усилия профессионалов ресторанного бизнеса Тюмени.
1040          <br><br>
1041          В Granny's бар собраны лучшие забытые рецептуры коктейлей, а также современные напитки, домашние наливки и
1042          фирменные ратафии.
1043          <br><br>
1044          Зайдя в Granny's Вы почувствуйте поистине домашнюю атмосферу, сможете попробовать уникальные напитки и
1045          коктейли, а также проверить свою печень и получить в награду настоящий золотой значок "Запасная печень". А для
1046          тех кто любит вкусно и много поесть - разнообразнейшее меню на любой вкус!!!
1047          <br><br>
1048          Много заботы и веселья - только GRANNY'S BAR&COCKTAILS и только настоящие
1049          коктейли!
1050        </div>
1051      </template>
1052      <template v-else>
1053        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px">
1054          <a href="/">
1055            <n-image
1056              src="/site/templates/default/imgs/granny-logo-circle.png"
1057              width="120"
1058              preview-disabled
1059              class="desktop-awards__granny"
1060            />
1061          </a>
1062
1063          <n-carousel
1064            slides-per-view="auto"
1065            :space-between="12"
1066            :show-dots="false"
1067            autoplay
1068            interval="3000"
1069            draggable
1070          >
1071            <n-carousel-item v-for="(award, index) in awardsList" class="award__wrapper">
1072              <template v-if="award.href">
1073                <a :href="award.href" target="_blank" class="award__link">
1074                  <n-image :src="award.image" width="70" preview-disabled @click="openAwardModal(index)"/>
1075                  <div
1076                    v-if="!$root.isMobile"
1077                    class="main-text"
1078                    style="text-align: center; margin-top: 8px; font-size: 10px"
1079                    v-html="award.title">
1080                  </div>
1081                </a>
1082              </template>
1083              <template v-else>
1084                <n-image :src="award.image" width="70" preview-disabled @click="openAwardModal(index)"/>
1085                <div
1086                  v-if="!$root.isMobile"
1087                  class="main-text"
1088                  style="text-align: center; margin-top: 8px; font-size: 10px"
1089                  v-html="award.title">
1090                </div>
1091              </template>
1092            </n-carousel-item>
1093          </n-carousel>
1094        </div>
1095
1096        <div class="main-text">
1097          Granny's Bar - первый настоящий коктейльный бар в Тюмени. "Granny" - в переводе означает "бабуля". Это
1098          уникальное место, в котором воплощены усилия профессионалов ресторанного бизнеса Тюмени.
1099          <br><br>
1100          В Granny's бар собраны лучшие забытые рецептуры коктейлей, а также современные напитки, домашние наливки и
1101          фирменные ратафии.
1102          <br><br>
1103          Зайдя в Granny's Вы почувствуйте поистине домашнюю атмосферу, сможете попробовать уникальные напитки и
1104          коктейли, а также проверить свою печень и получить в награду настоящий золотой значок "Запасная печень". А для
1105          тех кто любит вкусно и много поесть - разнообразнейшее меню на любой вкус!!!
1106          <br><br>
1107          Много заботы и веселья - только GRANNY'S BAR&COCKTAILS и только настоящие
1108          коктейли!
1109        </div>
1110      </template>
1111
1112      <div class="media-info__wrapper">
1113        <div class="media__wrapper">
1114          <div
1115            v-for="(item, index) in mediaCount - 1"
1116            class="media__item"
1117            style="cursor: pointer;"
1118            @click="goGallery"
1119          >
1120            <img
1121              :src="'/site/templates/default/imgs/about_grannys/about-granny-foto' + (index + 1) + '.png?v=3'"
1122              alt=""
1123              style="width: 100%; height: 100%; object-fit: cover"
1124            />
1125          </div>
1126          <div
1127            class="media__item button"
1128            style="background-image: url('/site/templates/default/imgs/about_grannys/about-granny-foto5.png')"
1129            @click="goGallery"
1130          >
1131            <div class="media__item_button">
1132              <i class="fa fa-chevron-right"/>
1133            </div>
1134          </div>
1135        </div>
1136
1137        <div class="information__wrapper">
1138          <div class="information__item" style="justify-content: center; gap: 16px;">
1139            <a href="https://2gis.ru/tyumen/firm/1830115630117872?m=65.570296%2C57.140876%2F16" target="_blank">
1140              <n-image src="/site/templates/default/imgs/2gis-logo.png" width="38" preview-disabled/>
1141            </a>
1142            <a href="https://yandex.ru/maps/org/grennis_bar/1153021368/?ll=65.570206%2C57.140719&z=17.03"
1143               target="_blank">
1144              <n-image src="/site/templates/default/imgs/yandex-logo.png" width="38" preview-disabled/>
1145            </a>
1146          </div>
1147          <div class="information__divider"></div>
1148          <a href="https://bar-tm.ru/" target="_blank" class="information__item">
1149            <n-image src="/site/templates/default/imgs/kind-bars.jpeg" width="38" preview-disabled/>
1150            Наши проекты
1151          </a>
1152          <div class="information__divider"></div>
1153          <div class="information__item" @click="goOurTeam">
1154            <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" preview-disabled/>
1155            Наша команда
1156          </div>
1157        </div>
1158      </div>
1159
1160      <template v-if="!$root.isMobile">
1161        <SideWindow home-image/>
1162        <DesktopMenu/>
1163      </template>
1164    </div>`
1165})
1166</script>
1166
1167
1168<style scoped>
1169.page__wrapper.about-granny {
1170  background-image: url("/site/templates/default/imgs/mobile-background3.webp");
1171  display: flex;
1172  flex-direction: column;
1173  padding: 24px 16px;
1174}
1175
1176.desktop-awards__wrapper {
1177  margin-bottom: 20px;
1178  height: 140px;
1179}
1180
1181.desktop-awards__granny {
1182  min-width: 120px;
1183  margin-right: 20px;
1184}
1185
1186.award__wrapper {
1187  display: flex;
1188  flex-direction: column;
1189  justify-content: center;
1190  align-items: center;
1191  background: rgba(255, 255, 255, 0.1);
1192  border-radius: 16px;
1193  height: 80px;
1194  width: 100%;
1195  max-width: 110px;
1196  transition: width 0.15s;
1197}
1198
1199.media-info__wrapper {
1200  margin-top: 20px;
1201  display: flex;
1202  flex-direction: column;
1203  gap: 20px;
1204}
1205
1206.media__wrapper {
1207  display: flex;
1208  gap: 12px;
1209  justify-content: space-between;
1210}
1211
1212.media__item {
1213  height: 100px;
1214  width: 100px;
1215  border-radius: 30px;
1216  overflow: hidden;
1217}
1218
1219.media__item.button {
1220  background-size: cover;
1221  background-repeat: no-repeat;
1222}
1223
1224.media__item_button {
1225  display: flex;
1226  align-items: center;
1227  justify-content: center;
1228  height: 100%;
1229  width: 100%;
1230  color: var(--yellow3);
1231  font-size: 40px;
1232  backdrop-filter: grayscale(1);
1233  transition: color 0.15s;
1234}
1235
1236.media__item_button:hover {
1237  cursor: pointer;
1238  color: var(--yellow1);
1239}
1240
1241.information__wrapper {
1242  height: 100px;
1243  display: flex;
1244  justify-content: space-between;
1245  gap: 10px;
1246  padding: 14px;
1247  border-radius: 16px;
1248  background: rgba(255, 255, 255, 0.2);
1249  z-index: 5;
1250}
1251
1252.information__item {
1253  display: flex;
1254  align-items: center;
1255  justify-content: space-between;
1256  flex-direction: column;
1257  gap: 8px;
1258  width: 100%;
1259  font-size: 12px;
1260  font-weight: 600;
1261  line-height: 14px;
1262  text-align: center;
1263  color: #fff;
1264  font-family: "Roboto";
1265  transition: color 0.15s;
1266}
1267
1268.information__item:hover {
1269  cursor: pointer;
1270  color: var(--yellow1);
1271}
1272
1273.information__divider {
1274  width: 1px;
1275  height: 100%;
1276  background: var(--brown3);
1277}
1278
1279.award-modal__wrapper {
1280  padding: 30px;
1281  gap: 24px;
1282  display: flex;
1283  flex-direction: column;
1284  justify-content: center;
1285  align-items: center;
1286  text-align: center;
1287  font-family: "Roboto";
1288  font-weight: 600;
1289  font-size: 20px;
1290  color: var(--brown3);
1291}
1292
1293.award__link {
1294  text-decoration: none;
1295  color:var(--yellow3);
1296  display: flex;
1297  flex-direction: column;
1298  justify-content: center;
1299  align-items: center;
1300  height: 140px;
1301  width: 100%;
1302  max-width: 165px;
1303}
1304
1305@media screen and (min-width: 1000px) {
1306  .page__wrapper.about-granny {
1307    background-image: url("/site/templates/default/imgs/desktop-background3.webp");
1308    background-size: cover;
1309    justify-content: start;
1310  }
1311
1312  .page__wrapper.about-granny.main__wrapper {
1313    padding: 50px 570px 30px 50px;
1314  }
1315
1316  .award__wrapper {
1317    max-width: 196px;
1318    height: 140px;
1319  }
1320
1321  .media-info__wrapper {
1322    margin-top: 20px;
1323    flex-direction: row;
1324    gap: 12px;
1325    justify-content: space-between;
1326  }
1327}
1328
1329@media screen and (max-width: 1180px) {
1330  .desktop-awards__granny {
1331    display: none;
1332  }
1333}
1334
1335@media screen and (min-width: 1180px) {
1336  .media-info__wrapper {
1337    margin-top: 30px;
1338  }
1339
1340  .desktop-awards__wrapper {
1341    margin-bottom: 30px;
1342  }
1343}
1344</style>
1344<script>
1345app.component('BookingPage', {
1346  data: () => ({
1347    hallsList: [
1348      {
1349        label: "Дедушкина канцелярия",
1350        value: "grandfather",
1351        isSelected: false,
1352      },
1353      {
1354        label: "Бабушкин будуар",
1355        value: "granny",
1356        isSelected: false,
1357      },
1358      {
1359        label: "Летняя веранда",
1360        value: "summer",
1361        isSelected: false,
1362      }
1363    ],
1364    hallPath: ""
1365  }),
1366  mounted() {},
1367  watch: {},
1368  computed: {},
1369  methods: {
1370    goBack(){
1371      this.$emit('toMain')
1372      window.history.pushState({}, "", '/');
1373    },
1374    changePage(page) {
1375      this.$root.booking.stage = page
1376    },
1377    goBackFromBooking() {
1378      if (!this.$root.booking.event.title) {
1379        this.$root.booking.stage = "date"
1380      } else {
1381        this.$root.booking.stage = "day"
1382      }
1383    },
1384    changeHallPath(path) {
1385      this.hallPath = path
1386    }
1387  },
1388  template: `
1389    <div
1390      :class="{
1391        'page__wrapper': true,
1392        'booking': true
1393      }"
1394    >
1395    <component
1396      v-if="$root.page"
1397      is="script"
1398      src="/site/templates/default/components/blocks/index/scripts/difbackForm.js"
1399      async
1400    >
1401    </component>
1402
1403      <template v-if="$root.booking.stage === 'date'">
1404        <div class="title__wrapper">
1405          <div class="circle-button" @click="goBack">
1406            ❮
1407          </div>
1408          Выбор даты
1409        </div>
1410        <div class="second-title" style="margin-bottom: 16px;">
1411          Бронь столика, афиша
1412        </div>
1413
1414        <div class="calendar__wrapper">
1415          <CalendarWithEvents/>
1416        </div>
1417      </template>
1418
1419      <template v-if="$root.booking.stage === 'day'">
1420        <div class="title__wrapper">
1421          <div class="circle-button" @click="changePage('date')">
1422            ❮
1423          </div>
1424          В этот день {{  $root.convertDate($root.booking.date) }}
1425        </div>
1426        <div v-if="$root.booking.event.title" class="second-title">
1427          {{$root.booking.event.title}}
1428        </div>
1429
1430        <img
1431          v-if="$root.booking.event.img"
1432          :src="$root.booking.event.img"
1433          style="width: 250px; min-height: 150px; border-radius: 16px; border: 1px solid var(--yellow1); margin-bottom: 20px; object-fit: cover"
1434        />
1435
1436        <div class="booking-description__container">
1437          <div class="main-text" v-html="$root.booking.event.text" style="margin-bottom: 20px"></div>
1438        </div>
1439<!--    Событие бронирования -    @click="changePage('booking')"-->
1440        <a href="https://686682.restoplace.ws/" target="_blank" class="round-button yellow">
1441          Перейти к бронированию
1442        </a>
1443        <div class="main-text" style="margin-top: 10px; text-align: center">
1444          БРОНЬ, СХЕМА ЗАЛА
1445        </div>
1446      </template>
1447
1448      <div v-show="$root.booking.stage === 'booking'">
1449        <div class="title__wrapper">
1450          <div class="circle-button" @click="goBackFromBooking">
1451            ❮
1452          </div>
1453          Бронь столика
1454        </div>
1455
1456        <BookingForm @toScheme="changePage('scheme')"/>
1457      </div>
1458
1459      <template v-if="$root.booking.stage === 'scheme'">
1460        <div class="title__wrapper">
1461          <div class="circle-button" @click="changePage('booking')">
1462            ❮
1463          </div>
1464          Схема залов
1465        </div>
1466
1467        <HallsScheme @toGallery="changePage('gallery')" @changeHallPath="changeHallPath"/>
1468      </template>
1469
1470      <template v-if="$root.booking.stage === 'gallery'">
1471        <div class="title__wrapper">
1472          <div class="circle-button" @click="changePage('scheme')">
1473            ❮
1474          </div>
1475          Фото зала
1476        </div>
1477
1478        <HallsGallery :images-path="hallPath"/>
1479      </template>
1480    </div>
1481  `
1482})
1483
1484</script>
1484
1485
1486<style scoped>
1487.page__wrapper.booking {
1488  background-image: url("/site/templates/default/imgs/mobile-background2.webp");
1489  display: flex;
1490  flex-direction: column;
1491  padding: 24px 16px;
1492}
1493
1494.calendar__wrapper {
1495  display: flex;
1496  justify-content: center;
1497  padding: 16px 0px;
1498  border-radius: 24px;
1499  background: var(--yellow3);
1500}
1501
1502.booking-info__item {
1503  text-align: center;
1504  padding: 8px 0;
1505  font-family: "Roboto";
1506  font-size: 12px;
1507  color: var(--yellow3);
1508}
1509.booking-info__item.glowing {
1510  background: linear-gradient(90deg, rgba(34, 88, 78, 32%) 0%, rgba(34, 88, 78, 40%) 10%, rgba(34, 88, 78, 40%), rgba(34, 88, 78, 32%) 100%);
1511  box-shadow: 0px 0px 20px 10px rgba(34, 88, 78, 40%);
1512}
1513
1514.booking-info__divider {
1515  width: 100%;
1516  height: 1px;
1517  background: var(--yellow3);
1518}
1519
1520.booking-description__container {
1521  overflow-y: scroll;
1522  margin-bottom:  20px;
1523}
1524
1525.booking-description__container::-webkit-scrollbar {
1526  width: 4px;
1527}
1528.booking-description__container::-webkit-scrollbar-track {
1529  background: transparent;
1530}
1531.booking-description__container::-webkit-scrollbar-thumb {
1532  background: var(--yellow2);
1533}
1534.booking-description__container::-webkit-scrollbar-thumb:hover {
1535  background: var(--yellow1);
1536}
1537.booking-description__container::-webkit-scrollbar-corner {
1538  background: var(--yellow3);
1539}
1540
1541@media screen and (min-width: 1000px) {
1542  .page__wrapper.booking {
1543    background-image: url("/site/templates/default/imgs/desktop-background3.webp");
1544    max-width: 1300px;
1545    margin: 0 auto;
1546    padding: 64px;
1547  }
1548
1549  .booking-info__item {
1550    color: var(--brown3);
1551    font-size: 16px;
1552  }
1553  .booking-info__divider {
1554    background: var(--brown3);
1555  }
1556
1557  .page__wrapper.booking.gallery {
1558    flex-direction: row;
1559    gap:36px
1560  }
1561}
1562</style>
1562<script>
1563app.component('GuestPage', {
1564  data: () => ({}),
1565  mounted() {
1566    $(function () {
1567      $('.guest-form__wrapper').diFBack({
1568        secCode: 677649,
1569        agreePosition: 'send_before',
1570      }).bind('afterSend.diFBack', function (event, params) {
1571        $('.guest-button').hide();
1572        $('.guest-description').hide();
1573        $('.end-guest-button').css("display", "flex");
1574      });
1575    })
1576  },
1577  watch: {},
1578  computed: {},
1579  methods: {
1580    goBack(){
1581      this.$emit('toMain')
1582      window.history.pushState({}, "", '/');
1583    }
1584  },
1585  template: `
1586    <div class="page__wrapper guest">
1587      <div class="title__wrapper">
1588        <div class="circle-button" @click="goBack">
1589          ❮
1590        </div>
1591        Тайный гость
1592      </div>
1593      <div class="main-text" style="margin-bottom: 16px;">
1594        Проведи проверку в любимом баре по нашему чек-листу, и если всё будет сделано правильно, мы компенпенсируем твою покупку баллами на карту лояльности. Заполняй анкету и жди тайного письма с инструкциями!
1595      </div>
1596
1597      <GuestForm/>
1598    </div>`
1599})
1600
1601</script>
1601
1602
1603<style>
1604.page__wrapper.guest {
1605  background-image: url("/site/templates/default/imgs/mobile-background3.webp");
1606  display: flex;
1607  flex-direction: column;
1608  padding: 24px 16px;
1609}
1610</style>
1610<script>
1611app.component('OurTeamPage', {
1612  data: () => ({
1613  }),
1614  mounted() {
1615
1616  },
1617  watch: {},
1618  computed: {},
1619  methods: {
1620    goAboutGranny() {
1621      this.$emit('toAboutGranny')
1622      window.history.pushState({}, "", '/about-granny');
1623    }
1624  },
1625  template: `
1626    <div
1627      :class="
1628        {
1629          'page__wrapper our-team': true,
1630          'main__wrapper': !$root.isMobile,
1631        }
1632      "
1633    >
1634      <div class="title__wrapper">
1635        <div v-if="$root.isMobile" class="circle-button" @click="goAboutGranny">
1636          ❮
1637        </div>
1638        Наша команда
1639      </div>
1640
1641      <div v-if="!$root.isMobile" class="second-title" style="display: flex; gap: 16px; align-items: center;">
1642        <div class="circle-button" @click="goAboutGranny">
1643          ❮
1644        </div>
1645        О бабуле
1646      </div>
1647      <div class="ourteam__container">
1648        <div class="ourteam__item">
1649          <div class="ourteam__image babincev"></div>
1650          <div class="ourteam__text">
1651            <h5 class="ourteam__text_title">Николай Бабинцев</h5>
1652            <p class="ourteam__text_description">Идейный вдохновитель и руководитель группы компаний Bar Service</p>
1653          </div>
1654        </div>
1655        <div class="ourteam__item">
1656          <div class="ourteam__image senukova"></div>
1657          <div class="ourteam__text">
1658            <h5 class="ourteam__text_title">Евгения Сенюкова</h5>
1659            <p class="ourteam__text_description">Генеральный директор</p>
1660          </div>
1661        </div>
1662        <div class="ourteam__item">
1663          <div class="ourteam__image rudakova"></div>
1664          <div class="ourteam__text">
1665            <h5 class="ourteam__text_title">Наталья Рудакова</h5>
1666            <p class="ourteam__text_description">Операционный директор</p>
1667          </div>
1668        </div>
1669<!--        <div class="ourteam__item">-->
1670<!--          <div class="ourteam__image klimeckaya"></div>-->
1671<!--          <div class="ourteam__text">-->
1672<!--            <h5 class="ourteam__text_title">Анастасия Климецкая</h5>-->
1673<!--            <p class="ourteam__text_description">Тренинг-менеджер</p>-->
1674<!--          </div>-->
1675<!--        </div>-->
1676        <div class="ourteam__item">
1677          <div class="ourteam__image brizgalov"></div>
1678          <div class="ourteam__text">
1679            <h5 class="ourteam__text_title">Антон Брызгалов</h5>
1680            <p class="ourteam__text_description">Руководитель барного заготовочного цеха</p>
1681          </div>
1682        </div>
1683      </div>
1684    </div>
1685  `
1686})
1687
1688</script>
1688
1689<style scoped>
1690.page__wrapper.our-team {
1691  background-image: url("/site/templates/default/imgs/mobile-background2.webp");
1692}
1693
1694.ourteam__container {
1695  display: flex;
1696  flex-direction: column;
1697  gap: 16px;
1698  height: 100%;
1699}
1700
1701.ourteam__item {
1702  display: flex;
1703  gap: 10px;
1704}
1705
1706.ourteam__image {
1707  border: 1px solid #F3A14A;
1708  border-radius: 16px;
1709  width: 90px;
1710  min-width: 90px;
1711  height: 90px;
1712  background-size: cover;
1713}
1714
1715.ourteam__image.babincev {
1716  background-image: url("/site/templates/default/imgs/ourteam/Babincev-mob.jpg?v=2.png");
1717}
1718.ourteam__image.senukova {
1719  background-image: url("/site/templates/default/imgs/ourteam/Senukova-mob.jpg?v=2.png");
1720}
1721.ourteam__image.klimeckaya {
1722  background-image: url("/site/templates/default/imgs/ourteam/Klimeckaya-mob.jpg?v=2.png");
1723}
1724.ourteam__image.rudakova {
1725  background-image: url("/site/templates/default/imgs/ourteam/rudakova.jpg?v=2.png");
1726  background-position: center;
1727}
1728.ourteam__image.brizgalov {
1729  background-image: url("/site/templates/default/imgs/ourteam/brizgalov.jpg?v=2.png");
1730  background-position: center;
1731}
1732.ourteam__image.kukshina {
1733  background-image: url("/site/templates/default/imgs/ourteam/Kukshina-mob.jpg?v=2.png");
1734}
1735.ourteam__image.poletaev {
1736  background-image: url("/site/templates/default/imgs/ourteam/Poletaev-mob.png?v=2.png");
1737}
1738
1739.ourteam__text {
1740  color: #FEEDC2;
1741  font-family: 'Roboto Condensed';
1742}
1743
1744.ourteam__text_title {
1745  text-transform: uppercase;
1746  font-size: 14px;
1747  font-weight: 700;
1748  line-height: 24px;
1749}
1750
1751.ourteam__text_description {
1752  font-size: 12px;
1753  font-weight: 400;
1754  line-height: 21px;
1755}
1756@media screen and (min-width: 1000px) {
1757  .ourteam__container {
1758    flex-direction: row;
1759    gap: 36px;
1760  }
1761
1762  .ourteam__item {
1763    flex-direction: column;
1764    width: 100%;
1765    height: 100%;
1766  }
1767
1768  .ourteam__text {
1769    height: 90px;
1770  }
1771
1772  .ourteam__image {
1773    width: 100%;
1774    height: 100%;
1775  }
1776  .ourteam__image.babincev {
1777    background-image: url("/site/templates/default/imgs/ourteam/Babincev-desktop.png?v=2.png");
1778  }
1779  .ourteam__image.senukova {
1780    background-image: url("/site/templates/default/imgs/ourteam/Senukova-desktop.png?v=2.png");
1781  }
1782  .ourteam__image.klimeckaya {
1783    background-image: url("/site/templates/default/imgs/ourteam/Klimeckaya-desktop.png?v=2.png");
1784  }
1785  .ourteam__image.kukshina {
1786    background-image: url("/site/templates/default/imgs/ourteam/Kukshina-desktop.png?v=2.png");
1787  }
1788  .ourteam__image.poletaev {
1789    background-image: url("/site/templates/default/imgs/ourteam/Poletaev-desktop.png?v=2.png");
1790  }
1791
1792  .page__wrapper.our-team.main__wrapper {
1793    background-image: url("/site/templates/default/imgs/desktop-background3.webp");
1794    background-size: cover;
1795    padding: 50px 50px 30px 50px;
1796    justify-content: start;
1797  }
1798}
1799</style>
1799<script>
1800app.component('DepositPage', {
1801  data: () => ({}),
1802  mounted() {},
1803  watch: {},
1804  computed: {},
1805  methods: {
1806    goBack(){
1807      this.$emit('toMain')
1808      window.history.pushState({}, "", '/');
1809    }
1810  },
1811  template: `
1812    <div class="page__wrapper deposit">
1813      <div class="title__wrapper">
1814        <div class="circle-button" @click="goBack">
1815          ❮
1816        </div>
1817        Депозит
1818      </div>
1819      <div class="main-text">
1820        Переходите к оплате только если внесение депозита согласовано с менеджером бара Granny's Bar. <br><br>В случае отмены бронирования, депозит возвращается баллами на карту лояльности
1821      </div>
1822
1823      <DepositList/>
1824    </div>`
1825})
1826
1827</script>
1827
1828
1829<style>
1830.page__wrapper.deposit {
1831  background-image: url("/site/templates/default/imgs/mobile-background3.webp");
1832  display: flex;
1833  flex-direction: column;
1834  padding: 24px 16px;
1835}
1836
1837.deposit-sum__container {
1838  display: flex;
1839  flex-direction: column;
1840  gap: 16px;
1841  width: 100%;
1842  margin-top: 20px;
1843}
1844
1845.deposit-sum__container a {
1846  color: inherit;
1847}
1848</style>
1848<script>
1849app.component('GalleryPage', {
1850  data: () => ({
1851    sectionsList: children_sections,
1852    currentSection: 0,
1853    imagesList: [],
1854    video: "",
1855    currentImage: 0,
1856    loadingImages: true
1857  }),
1858  mounted() {
1859    this.changeSectionsId()
1860    this.getImage()
1861  },
1862  watch: {},
1863  computed: {},
1864  methods: {
1865    goAboutGranny() {
1866      this.$emit('toAboutGranny')
1867      window.history.pushState({}, "", '/about-granny');
1868    },
1869    changeCurrentImage(index) {
1870      this.currentImage = index
1871    },
1872    changeCurrentSection(index) {
1873      this.currentSection = index
1874      this.getImage()
1875    },
1876    changeSectionsId() {
1877      for (let i = 0;i < this.sectionsList.length;i++) {
1878          this.sectionsList[i].id = i
1879      }
1880    },
1881    getImage() {
1882      const this2 = this;
1883      this.loadingImages = true
1884      this.imagesList = []
1885      this.video = ""
1886
1887      $.ajax({
1888        url: this2.sectionsList[this2.currentSection].path,
1889        method: 'post',
1890        dataType: 'json',
1891        data: {
1892          act: 'gallery-json-images',
1893        },
1894        success: function(data){
1895          this2.imagesList = data.images
1896          this2.video = data.video
1897          this2.currentImage = 0
1898          this2.loadingImages = false
1899        }
1900      });
1901    }
1902  },
1903  template: `
1904    <div class="page__wrapper gallery">
1905      <div class="galleries__nav-bar">
1906        <div v-if="!$root.isMobile" class="title__wrapper">
1907          Галерея
1908        </div>
1909        <div class="second-title" style="display: flex; gap: 16px; align-items: center;">
1910          <div class="circle-button" @click="goAboutGranny">
1911            ❮
1912          </div>
1913          <div v-if="!$root.isMobile">О бабуле</div>
1914          <div v-else>Галерея</div>
1915        </div>
1916
1917        <n-carousel
1918          v-if="!$root.isMobile"
1919          slides-per-view="auto"
1920          :space-between="20"
1921          :show-dots="false"
1922          draggable
1923          mousewheel
1924          :loop="false"
1925          direction="vertical"
1926          style="height: 100%; max-height: calc(100% - 162px)"
1927        >
1928          <n-carousel-item
1929            v-for="(section, index) in sectionsList"
1930            :class="{
1931              'galleries-list__item': true,
1932              'selected': index === currentSection
1933            }"
1934            @click="changeCurrentSection(index)"
1935            v-html="section.shortname"
1936          >
1937          </n-carousel-item>
1938        </n-carousel>
1939      </div>
1940
1941      <n-select
1942        v-if="$root.isMobile"
1943        v-model:value="currentSection"
1944        :options="sectionsList"
1945        label-field="shortname"
1946        value-field="id"
1947        class="custom-input"
1948        size="large"
1949        placeholder="Выберите зал"
1950        style="margin-bottom: 20px; min-height: 40px"
1951        @update:value="changeCurrentSection(currentSection)"
1952      />
1953
1954      <div class="galleries__media-wrapper">
1955        <div v-if="loadingImages" class="galleries__media-view">
1956          <n-skeleton style="width: 100%;height: 100%; opacity: 20%" />
1957        </div>
1958        <template v-else>
1959          <iframe
1960              v-if="video"
1961              class="gallery__video_full"
1962              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
1963              allowfullscreen=""
1964              frameborder="0"
1965              :src="video"
1966              title="YouTube video player"
1967          >
1968            <!--cke_bookmark_127S--><!--cke_bookmark_127E--><!--cke_bookmark_127S--><!--cke_bookmark_127E-->
1969          </iframe>
1970        <n-carousel
1971          v-else
1972          class="galleries__media-view"
1973          :show-dots="false"
1974          show-arrow
1975          :current-index="currentImage"
1976          @update:current-index="changeCurrentImage"
1977        >
1978          <template #arrow="{ prev, next }">
1979            <div style="display: flex; gap: 10px; position: absolute; bottom: 25px; right: 25px;">
1980              <div class="circle-button small" @click="prev">
1981                ❮
1982              </div>
1983              <div class="circle-button small" @click="next">
1984                ❯
1985              </div>
1986            </div>
1987          </template>
1988
1989          <n-carousel-item v-for="image in imagesList">
1990            <img class="gallery__image" :src="image.src" :alt="image.alt"/>
1991          </n-carousel-item>
1992        </n-carousel>
1993        </template>
1994
1995        <n-carousel
1996          slides-per-view="auto"
1997          :space-between="12"
1998          :show-dots="false"
1999          draggable
2000          :loop="false"
2001          style="height: 75px; margin-top: 30px"
2002        >
2003          <n-carousel-item
2004            v-if="loadingImages"
2005            v-for="item in 10"
2006            class="galleries__media-view_item"
2007          >
2008            <n-skeleton v-if="loadingImages" style="height: 100%; width: 100%; opacity: 20%" />
2009          </n-carousel-item>
2010
2011          <n-carousel-item
2012            v-else
2013            v-for="(image, index) in imagesList"
2014            :class="{
2015              'galleries__media-view_item': true,
2016              'selected': index === currentImage
2017            }"
2018            @click="changeCurrentImage(index)"
2019          >
2020            <img class="gallery__image" :src="image.thumb" :alt="image.alt"/>
2021          </n-carousel-item>
2022        </n-carousel>
2023      </div>
2024    </div>
2025  `
2026})
2027
2028</script>
2028
2029
2030<style scoped>
2031.page__wrapper.gallery {
2032  background-image: url("/site/templates/default/imgs/desktop-background3.webp");
2033  background-size: cover;
2034  display: flex;
2035  flex-direction: row;
2036  padding: 50px 50px 30px 50px;
2037  gap: 50px;
2038  -moz-user-select: none;
2039  user-select: none;
2040}
2041
2042.galleries__nav-bar {
2043  flex: 0 0 25%;
2044  overflow: hidden;
2045}
2046
2047.galleries-list__item {
2048  display: flex;
2049  justify-content: center;
2050  align-items: center;
2051  padding: 25px;
2052  text-align: center;
2053  width: 100% !important;
2054  height: 110px !important;
2055  background: rgba(255, 255, 255, 0.1);
2056  border-radius: 16px;
2057  font-family: 'Roboto';
2058  font-style: normal;
2059  font-weight: 400;
2060  font-size: 20px;
2061  line-height: 90%;
2062  color: var(--yellow3);
2063  transition: background 0.15s, color 0.15s;
2064}
2065
2066.galleries-list__item:hover:not(.selected) {
2067  cursor: pointer;
2068  color: var(--yellow1);
2069}
2070
2071.galleries-list__item.selected {
2072  background: rgba(243, 190, 114, 0.4);
2073  pointer-events: none;
2074}
2075
2076.galleries__media-wrapper {
2077  width: 100%;
2078}
2079
2080.galleries__media-view {
2081  height: 536px;
2082  border-radius: 20px;
2083  outline: 1px solid var(--yellow3);
2084  overflow: hidden;
2085}
2086
2087.galleries__media-view_list {
2088    display: flex;
2089    gap: 12px;
2090    flex-wrap: wrap;
2091    width: 100%;
2092    overflow-y: scroll;
2093    margin-top: 20px;
2094}
2095
2096.galleries__media-view_list::-webkit-scrollbar {
2097    width: 4px;
2098}
2099.galleries__media-view_list::-webkit-scrollbar-track {
2100    background: transparent;
2101}
2102.galleries__media-view_list::-webkit-scrollbar-thumb {
2103    background: var(--yellow2);
2104}
2105.galleries__media-view_list::-webkit-scrollbar-thumb:hover {
2106    background: var(--yellow1);
2107}
2108.galleries__media-view_list::-webkit-scrollbar-corner {
2109    background: transparent;
2110}
2111
2112.galleries__media-view_item {
2113  height: 75px !important;
2114  width: 75px !important;
2115  border-radius: 16px;
2116  border: 1px solid var(--yellow3);
2117  transition: border 0.15s;
2118  overflow: hidden;
2119  flex: 1 1 auto;
2120}
2121
2122.galleries__media-view_item:hover {
2123  border: 1px solid var(--yellow1);
2124  cursor: pointer;
2125}
2126
2127.galleries__media-view_item.selected {
2128  filter: grayscale(1);
2129  pointer-events: none;
2130}
2131
2132.gallery__image {
2133  width: 100%;
2134  height: 100%;
2135  object-fit: cover;
2136}
2137
2138.gallery__video_full {
2139  width: 100%;
2140  background: transparent;
2141  margin: 0 auto;
2142  height: 100%;
2143  max-height: 420px;
2144  border-radius: 16px;
2145  outline: 1px solid var(--yellow3);
2146}
2147
2148@media screen and (max-width: 1000px) {
2149    .page__wrapper.gallery {
2150        flex-direction: column;
2151        gap: 0;
2152        padding: 16px;
2153        background-image: url("/site/templates/default/imgs/mobile-background3.webp");
2154    }
2155
2156    .galleries__nav-bar {
2157        flex: 0 0 auto;
2158    }
2159
2160    .galleries__media-view {
2161        height: 350px;
2162    }
2163
2164    .galleries__media-wrapper {
2165        min-height: 350px;
2166    }
2167}
2168</style>
2168<script>
2169app.component('Calendar', {
2170  data: () => ({}),
2171  mounted() {},
2172  watch: {},
2173  computed: {},
2174  methods: {
2175    dateDisabled(dt) {
2176      const date = new Date(dt)
2177      const dateNow = new Date()
2178      return date < dateNow.setDate(dateNow.getDate() - 1)
2179    }
2180  },
2181  template: `
2182    <n-date-picker
2183      v-model:formatted-value="$root.booking.date"
2184      value-format="yyyy-MM-dd"
2185      :is-date-disabled="dateDisabled"
2186      panel
2187      type="date"
2188      :first-day-of-week="0"
2189      style="width: 300px"
2190    />
2191  `
2192})
2193
2194</script>
2194
2195
2196<style scoped>
2197.n-date-panel-calendar {
2198  width: 300px;
2199  padding: 0px !important;
2200  background: var(--yellow3) !important;
2201}
2202
2203.n-date-panel-actions {
2204  display: none !important;
2205}
2206
2207.n-date-panel-month {
2208  background: var(--yellow1);
2209  padding: 15px !important;
2210  border-radius: 30px;
2211  height: 48px !important;
2212  margin-bottom: 32px;
2213}
2214
2215.n-date-panel-month__month-year {
2216  pointer-events: none;
2217}
2218
2219.n-date-panel-month__prev,
2220.n-date-panel-month__next {
2221  color: #000 !important;
2222}
2223
2224.n-date-panel-month__fast-prev,
2225.n-date-panel-month__fast-next {
2226  visibility: hidden;
2227}
2228
2229.n-date-panel-date.n-date-panel-date--excluded {
2230  color: var(--yellow2) !important;
2231}
2232.n-date-panel-date.n-date-panel-date--selected {
2233  color: var(--yellow3) !important;
2234}
2235.n-date-panel-date.n-date-panel-date--selected .n-date-panel-date__sup{
2236  background-color: transparent !important;
2237}
2238.n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--selected::after {
2239  background-color: var(--brown1) !important;
2240  border-radius: 20px !important;
2241}
2242.n-date-panel .n-date-panel-dates .n-date-panel-date::after {
2243  border-radius: 20px !important;
2244  left: 50%;
2245  top: 50%;
2246  transform: translate(-50%, -50%);
2247  padding: 18px;
2248}
2249.n-date-panel .n-date-panel-weekdays {
2250  border-bottom: 1px solid var(--brown3);
2251}
2252
2253.n-date-panel-date, .n-date-panel-weekdays__day {
2254  color: var(--brown1) !important;
2255  border-radius: 20px !important;
2256}
2257
2258.n-date-panel-date__sup {
2259  background-color: var(--yellow1) !important;
2260}
2261.n-date-panel .n-date-panel-dates .n-date-panel-date:not(.n-date-panel-date--disabled):not(.n-date-panel-date--selected):hover {
2262  content: '{{$root.booking.event.title}}' !important;
2263  background-color: var(--yellow1);
2264  border-radius: 20px !important;
2265transform: scale(1.5);
2266  font-size: 9px;
2267}
2268
2269.n-date-panel-month__text,
2270.n-date-panel-weekdays__day,
2271.n-date-panel-date {
2272  font-family: "Roboto";
2273  font-weight: 400;
2274}
2275
2276.n-date-panel-date--disabled {
2277  opacity: 0.5;
2278}
2279</style>
2279<script>
2280app.component('CalendarWithEvents', {
2281    data: () => ({}),
2282    mounted() {},
2283    watch: {},
2284    computed: {},
2285    methods: {
2286        changeDay(day, event) {
2287            this.$root.calendarAttrs[1].dates = day.date
2288            this.$root.booking.date = day.id
2289        },
2290        async changePage(page) {
2291            let pageId = page[0].id
2292
2293            if (this.$root.monthNews[pageId]) {
2294                return
2295            }
2296            let startDate = page[0].days[0].id
2297            let endDate = page[0].days[page[0].days.length - 1].id
2298            await this.$root.getMonthNews(startDate,endDate, pageId)
2299
2300            if (!this.$root.currentMonthNews.length) {
2301                this.$root.currentMonthNews = this.$root.monthNews[pageId]
2302            }
2303
2304            this.showEvents(pageId)
2305        },
2306        showEvents(monthId) {
2307            this.$root.monthNews[monthId].map(news => {
2308                if (new Date(news.time * 1000) < Date.now()) {
2309                    return
2310                }
2311                this.$root.calendarAttrs.push({
2312                    key: 'news-' + news.id,
2313                    dot: {
2314                        style: {
2315                            backgroundColor: "var(--yellow1)",
2316                            "clip-path": "polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)"
2317                        }
2318                    },
2319                    dates: new Date(news.time * 1000),
2320                    popover: {
2321                        label: news.title
2322                    },
2323                    customData: news
2324                })
2325            })
2326        },
2327        changeEvent(date) {
2328            this.$root.calendarAttrs[1].dates = date
2329            this.$root.booking.date = date.toLocaleDateString('ru-RU')
2330        }
2331    },
2332    template: `
2333      <div class="calendar-with-events__container">
2334        <div style="display: flex; justify-content: center">
2335          <VCalendar
2336            :attributes="$root.calendarAttrs"
2337            :min-date="new Date()"
2338            :disabled-dates="[
2339              {
2340                start: new Date(2023, 11, 31),
2341                end: new Date(2023, 11, 31)
2342              }
2343            ]"
2344            borderless
2345            @dayclick="changeDay"
2346            @update:pages="changePage"
2347          >
2348            <template #day-popover="{ attributes }">
2349              <div
2350                  v-for="{ key, customData } in attributes"
2351                  :key="key"
2352              >
2353                <div style="text-align:center; font-family: 'Montserrat'">{{ customData.title }}</div>
2354                <img
2355                    v-if="customData.img"
2356                    :src="customData.img"
2357                    class="popover-image"
2358                    alt=""
2359                />
2360                <div class="popover-description" v-html="customData.text"></div>
2361              </div>
2362            </template>
2363          </VCalendar>
2364        </div>
2365        <div class="events__container">
2366          <div class="side-window__main_header-title" style="margin-bottom: 10px;">Ближайшие события</div>
2367          <n-carousel
2368            v-if="$root.currentMonthNews && $root.currentMonthNews.length"
2369            slides-per-view="auto"
2370            :space-between="12"
2371            :show-dots="false"
2372            draggable
2373            autoplay
2374            loop
2375            style="height: fit-content"
2376          >
2377            <template v-for="(item, index) in $root.currentMonthNews">
2378              <n-carousel-item
2379                v-if="new Date(item.time * 1000) > Date.now()"
2380                class="events__item"
2381                @click="changeEvent(new Date(item.time * 1000))"
2382              >
2383                <img class="events__item-image" :src="item.img" alt=""/>
2384                <div class="events__item-date">{{  (new Date(item.time * 1000)).toLocaleDateString('ru-RU') }}</div>
2385                <div class="events__item-title">{{ item.title }}</div>
2386              </n-carousel-item>
2387            </template>
2388          </n-carousel>
2389        </div>
2390      </div>
2391  `
2392})
2393
2394</script>
2394
2395
2396<style scoped>
2397.vc-week:last-child {
2398  display: none;
2399}
2400.calendar-with-events__container {
2401  width: 100%;
2402  height: fit-content;
2403}
2404
2405.popover-image {
2406  border-radius: 10px;
2407  margin-top: 10px;
2408}
2409
2410.popover-description {
2411  font-size: 12px !important;
2412  line-height: 16px !important;
2413  font-family: "Roboto" !important;
2414  max-width: 250px;
2415}
2416
2417.popover-description p {
2418  font-size: 12px !important;
2419  line-height: 16px !important;
2420  font-family: "Roboto" !important;
2421}
2422
2423.events__container {
2424  padding-left: 20px;
2425}
2426
2427.events__item {
2428  height: fit-content !important;
2429  width: 95px !important;
2430  cursor: pointer;
2431}
2432
2433.events__item-image {
2434  height: 72px !important;
2435  width: 95px !important;
2436  object-fit: cover;
2437  border-radius: 16px;
2438  transition: border 0.15s;
2439  overflow: hidden;
2440  flex: 1 1 auto;
2441}
2442
2443.events__item-date {
2444  font-family: "Roboto";
2445  color: #656565;
2446  font-size: 12px;
2447  margin-top: 4px;
2448}
2449
2450.events__item-title {
2451  font-family: "Roboto";
2452  color: var(--brown3);
2453  overflow: hidden;
2454  display: -webkit-box;
2455  -webkit-box-orient: vertical;
2456  -webkit-line-clamp: 2;
2457  white-space: pre-wrap;
2458}
2459</style>
2459<script>
2460app.component('BookingForm', {
2461  data: () => ({
2462    phone: "",
2463    time: "",
2464    first: null,
2465    firstValidate: true
2466  }),
2467  mounted() {
2468  },
2469  watch: {},
2470  computed: {},
2471  methods: {
2472    changeFirst(val) {
2473      this.first = val
2474    },
2475    goScheme() {
2476      this.$emit("toScheme")
2477    },
2478    checkFirstValidate() {
2479      if (this.first === null) {
2480        this.firstValidate = false
2481      }
2482    },
2483    goBack() {
2484      this.$root.page = ""
2485      this.$root.sideWindow = "booking"
2486      this.$root.sideWindowPrevious = null
2487      this.$root.booking.stage = "date"
2488      window.history.pushState({}, "", '/');
2489    },
2490    changeSideWindow(window) {
2491      this.$root.sideWindow = window
2492    }
2493  },
2494  template: `
2495    <div class="booking-form__wrapper diFBack-form">
2496    <div v-if="$root.isMobile" class="booking-form__info">
2497      <div class="main-text" style="line-height: 24px;">
2498        <b>Дата:</b> {{ $root.convertDate($root.booking.date) }}
2499        <template v-show="$root.booking.event.title">
2500          <br>
2501          <b>В этот день:</b> {{ $root.booking.event.title }}
2502        </template>
2503      </div>
2504
2505      <div class="round-button yellow small" @click="goScheme" style="width: fit-content">
2506        Схема залов
2507      </div>
2508    </div>
2509
2510    <div class="field" data-title="Дата" data-required="1" style="display: none;">
2511      <input class="c-form-date" type="text" :value="$root.booking.date" style="">
2512    </div>
2513
2514    <n-input class="custom-input field" data-title="Имя" data-required="1" placeholder="Ваше имя" size="large" round/>
2515    <MaskedInput
2516      class="field"
2517      data-title="Телефон" 
2518      data-required="1"
2519      data-validate="phone"
2520      :mask="'+7 (###) ###-##-##'"
2521      placeholder="Телефон"
2522    />
2523    <MaskedInput
2524      :mask="'##:##'"
2525      class="field"
2526      placeholder="Время"
2527      data-title="Время" data-required="1"
2528    />
2529    <MaskedInput
2530      :mask="'##'"
2531      class="field"
2532      placeholder="Количество гостей"
2533      data-title="Количество гостей" data-required="1"
2534    />
2535    <n-input class="custom-input field" data-title="Повод посещения" data-required="1" placeholder="Повод" size="large"
2536             round/>
2537
2538    <div style="display: none" class="field" data-title="Первый раз у нас?" data-required="1">
2539      <label for="yes_no_radio" style="margin-bottom: 0px; font-size: 19px;">Вы первый раз у нас в
2540        гостях?</label>
2541      <div style="display: flex; align-items: center; margin-top: 6px;">
2542        <p style="margin-right: 20px">
2543          <input style="margin-right: 8px" type="radio" name="yes_no" value="Да" :checked="first === 1">Да</input>
2544        </p>
2545        <p>
2546          <input style="margin-right: 8px" type="radio" value="Нет" name="yes_no" :checked="first === 0">Нет</input>
2547        </p>
2548      </div>
2549    </div>
2550    <div style="display: flex; gap: 16px; align-items: center">
2551      <div :class="[$root.isMobile ? 'main-text': 'side-window__main_header-description']">В первый раз у нас в
2552        гостях?
2553      </div>
2554      <div
2555        :class="{
2556            'custom-radio': true,
2557            selected: first === 1,
2558            error: !firstValidate
2559          }"
2560        @click="changeFirst(1)"
2561      >
2562        Да
2563      </div>
2564      <div
2565        :class="{
2566            'custom-radio': true,
2567            selected: first === 0,
2568            error: !firstValidate
2569          }"
2570        @click="changeFirst(0)"
2571      >
2572        Нет
2573      </div>
2574    </div>
2575
2576    <div class="round-button yellow reserve-button send" @click="checkFirstValidate">Забронировать</div>
2577    </div>
2578    <div v-if="!$root.isMobile" class="custom-link" style="text-align:center; margin-top: 8px;" @click="changeSideWindow('scheme')">
2579      Схемы залов
2580    </div>
2581    <div class="round-button yellow end-booking-button" @click="goBack" style="display: none">ОК</div>
2582
2583  `
2584})
2585
2586</script>
2586
2587
2588
2589
2590<style scoped>
2591.booking-form__wrapper {
2592  display: flex;
2593  flex-direction: column;
2594  align-items: center;
2595  gap: 16px;
2596}
2597
2598.booking-form__info {
2599  display: flex;
2600  justify-content: space-between;
2601  align-items: center;
2602  padding: 16px;
2603  width: 100%;
2604  background: rgba(255, 255, 255, 0.1);
2605  border-radius: 24px;
2606}
2607</style>
2607<script>
2608app.component('GuestForm', {
2609  props: {},
2610  data: () => ({
2611    phone: "",
2612    time: "",
2613    first: null,
2614    firstValidate: true
2615  }),
2616  mounted() {
2617  },
2618  watch: {},
2619  computed: {},
2620  methods: {
2621    goBack() {
2622      this.$root.page = ""
2623      this.$root.sideWindow = "booking"
2624      this.$root.sideWindowPrevious = null
2625      this.$root.booking.stage = "date"
2626      window.history.pushState({}, "", '/');
2627    }
2628  },
2629  template: `
2630    <div class="guest-form__wrapper diFBack-form">
2631      <n-input
2632        class="custom-input field"
2633        data-title="ФИО"
2634        data-required="1"
2635        placeholder="Ваше ФИО"
2636        size="large"
2637        round
2638      />
2639      <MaskedInput
2640        class="field"
2641        data-title="Телефон"
2642        data-required="1"
2643        data-validate="phone"
2644        :mask="'+7 (###) ###-##-##'"
2645        placeholder="Телефон"
2646      />
2647      <MaskedInput
2648        :mask="'##'"
2649        class="field"
2650        placeholder="Возраст"
2651        data-title="Возраст" data-required="1"
2652      />
2653      <n-input
2654        class="custom-input field"
2655        data-title="Email"
2656        data-required="1"
2657        data-validate="email"
2658        placeholder="Почта"
2659        size="large"
2660        round
2661      />
2662
2663      <div class="round-button yellow guest-button send">Отправить</div>
2664    </div>
2665    <div class="end-guest-button" style="display: none;width: 100%">
2666      <div class="round-button yellow" @click="goBack">ОК</div>
2667    </div>
2668  `
2669})
2670
2671</script>
2671
2672
2673<style scoped>
2674.guest-form__wrapper {
2675  display: flex;
2676  flex-direction: column;
2677  align-items: center;
2678  gap: 14px;
2679}
2680
2681.end-guest-button {
2682  justify-content: center;
2683}
2684</style>
2684<script>
2685app.component('MaskedInput', {
2686  props: {
2687    value: [String, Number],
2688    mask: {
2689      type: [String, Array],
2690      required: true
2691    },
2692    masked: {
2693      type: Boolean,
2694      default: false
2695    },
2696    placeholder: {
2697      type: String,
2698      default: ""
2699    },
2700    disabled: {
2701      type: Boolean,
2702      default: false
2703    }
2704  },
2705  data: () => ({
2706    display: this.value,
2707    lastValue: null,
2708    resultText: "",
2709    arr: []
2710  }),
2711  mounted() {},
2712  watch: {
2713    value(val) {
2714      if (val !== this.lastValue) {
2715        this.display = val
2716      }
2717
2718    },
2719    masked() {
2720      this.refresh(this.display)
2721    }
2722  },
2723  computed: {},
2724  methods: {
2725    refresh(value) {
2726      this.display = value
2727      if (value[4] == 8 || value[4] == 7){
2728        this.resultText = this.display;
2729        this.arr = this.resultText.split('')
2730        this.arr.splice(4, 1);
2731        this.resultText = this.arr.join('');
2732        this.display = this.resultText
2733      }
2734
2735      if (this.display !== this.lastValue) {
2736        this.lastValue = this.display
2737        this.$emit("update:value", this.display)
2738      }
2739    }
2740  },
2741  template: `
2742    <n-input
2743      v-mask="mask"
2744      :value="display"
2745      class="custom-input"
2746      size="large"
2747      round
2748      :disabled="disabled"
2749      :placeholder="placeholder"
2750      @input="refresh"
2751    />
2752  `
2753})
2754
2755</script>
2755
2756
2757
2758
2759<style scoped>
2760</style>
2760<script>
2761app.component('HallsScheme', {
2762  data: () => ({
2763    hallsList: [
2764      {
2765        label: "Дедушкина канцелярия",
2766        value: 0
2767      },
2768      {
2769        label: "Бабушкин будуар",
2770        value: 1
2771      },
2772      {
2773        label: "Летняя веранда",
2774        value: 2
2775      }
2776    ],
2777    currentHall: 0,
2778
2779    galleryPaths: [
2780      "/about-granny/gallery/dedulina_koncelyaria/",
2781      "/about-granny/gallery/babulin_buduar/",
2782      "/about-granny/gallery/summer-terrace/"
2783    ],
2784
2785    imagesList: [
2786      "/site/templates/default/imgs/schemes/grandfather-office.png?v=2",
2787      "/site/templates/default/imgs/schemes/granny-boudoir.png?v=2",
2788      "/site/templates/default/imgs/schemes/summer-terrace2.png?v=2"
2789    ]
2790  }),
2791  mounted() {},
2792  watch: {},
2793  computed: {},
2794  methods: {
2795    toGallery() {
2796      this.$emit('toGallery')
2797      this.$emit("changeHallPath", this.galleryPaths[this.currentHall])
2798    }
2799  },
2800  template: `
2801    <div>
2802      <n-select
2803        v-model:value="currentHall"
2804        :options="hallsList"
2805        class="custom-input"
2806        size="large"
2807        placeholder="Выберите зал"
2808        style="margin-bottom: 20px"
2809      />
2810      <div class="scheme__wrapper" style="margin-bottom: 20px">
2811        <n-image
2812          :src="imagesList[currentHall]"
2813          :height="$root.isMobile ? 360 : 400"
2814          preview-disabled
2815          style="z-index: 1;"
2816        />
2817      </div>
2818
2819      <div v-if="$root.isMobile" class="round-button yellow" @click="toGallery">
2820        Смотреть фото зала
2821      </div>
2822    </div>
2823  `
2824})
2825
2826</script>
2826
2827
2828<style scoped>
2829.scheme__wrapper {
2830  display: flex;
2831  justify-content: center;
2832  background: var(--yellow3);
2833  border-radius: 24px;
2834  padding: 20px 0;
2835}
2836
2837@media screen and (min-width: 1000px) {
2838    .scheme__wrapper {
2839        padding: 0;
2840    }
2841}
2842</style>
2842<script>
2843app.component('HallsGallery', {
2844  props: {
2845    imagesPath: {
2846      type: String,
2847      default: ''
2848    }
2849  },
2850  data: () => ({
2851    imagesList: [],
2852    currentImage: 0,
2853    loadingImages: true
2854  }),
2855  mounted() {
2856    this.getImage()
2857  },
2858  watch: {},
2859  computed: {},
2860  methods: {
2861    changeCurrentImage(index) {
2862      this.currentImage = index
2863    },
2864    getImage() {
2865      const this2 = this;
2866      this.loadingImages = true
2867      this.imagesList = []
2868
2869      $.ajax({
2870        url: this2.imagesPath,
2871        method: 'post',
2872        data: {
2873          act: 'gallery-json-images',
2874        },
2875        success: function(data){
2876          this2.imagesList = data.images
2877          this2.currentImage = 0
2878          this2.loadingImages = false
2879        }
2880      });
2881    }
2882  },
2883  template: `
2884    <div>
2885      <div v-if="loadingImages" class="current-image__wrapper">
2886        <n-skeleton style="width: 100%;height: 100%; opacity: 20%" />
2887      </div>
2888      <n-carousel
2889        v-else
2890        class="current-image__wrapper"
2891        :show-dots="false"
2892        show-arrow
2893        :current-index="currentImage"
2894        @update:current-index="changeCurrentImage"
2895      >
2896        <template #arrow="{ prev, next }">
2897          <div style="display: flex; gap: 10px; position: absolute; bottom: 25px; right: 25px;">
2898            <div class="circle-button small" @click="prev">
2899              ❮
2900            </div>
2901            <div class="circle-button small" @click="next">
2902              ❯
2903            </div>
2904          </div>
2905        </template>
2906        <n-carousel-item v-for="image in imagesList">
2907          <img class="carousel-img" :src="image.src" :alt="image.alt"/>
2908        </n-carousel-item>
2909      </n-carousel>
2910
2911      <div class="image-list__container">
2912        <div v-if="loadingImages" v-for="item in 10" class="image-list__item">
2913          <n-skeleton style="height: 100%; width: 100%; opacity: 20%" />
2914        </div>
2915
2916        <div
2917          v-else
2918          v-for="(image, index) in imagesList"
2919          class="image-list__item"
2920          :class="{
2921            'image-list__item': true,
2922            'selected': index === currentImage
2923          }"
2924          @click="changeCurrentImage(index)"
2925        >
2926          <img class="carousel-img" :src="image.src" :alt="image.alt"/>
2927        </div>
2928      </div>
2929    </div>
2930  `
2931})
2932
2933</script>
2933
2934
2935<style scoped>
2936.current-image__wrapper {
2937  width: 100%;
2938  height: 200px;
2939  margin-bottom: 20px;
2940  outline: 1px solid var(--yellow1);
2941  border-radius: 16px;
2942}
2943
2944.image-list__container {
2945  display: flex;
2946  justify-content: space-between;
2947  flex-wrap: wrap;
2948  gap: 12px;
2949}
2950
2951.image-list__item {
2952  width: 70px;
2953  height: 70px;
2954  border: 1px solid var(--yellow1);
2955  border-radius: 16px;
2956}
2957
2958.image-list__item.selected {
2959  filter: grayscale(1);
2960  pointer-events: none;
2961}
2962
2963.carousel-img {
2964  width: 100%;
2965  height: 100%;
2966  object-fit: cover;
2967  border-radius: 16px;
2968}
2969</style>
2969<script>
2970app.component('SideWindow', {
2971  props: {
2972    hideHeader: {
2973      type: Boolean,
2974      default: false
2975    },
2976    homeImage: {
2977      type: Boolean,
2978      default: false
2979    }
2980  },
2981  data: () => ({}),
2982  mounted() {},
2983  watch: {},
2984  computed: {},
2985  methods: {
2986    changeSideWindow(window) {
2987      this.$root.openSideWindow(window)
2988    },
2989    goBack() {
2990      if (this.$root.page === "contacts") {
2991        this.$root.sideWindow = "contacts"
2992        if (window.location.hash) {
2993          window.history.pushState({}, "", '/contacts')
2994        }
2995      } else {
2996        this.$root.openSideWindow('booking')
2997      }
2998    },
2999    goHome() {
3000      this.$root.page = ""
3001      this.$root.booking.stage = "date"
3002      this.$root.openSideWindow('booking')
3003    },
3004    changeBookingStage(stage) {
3005      if (!this.$root.booking.event.title && stage === "day") {
3006        this.$root.booking.stage = "date"
3007      } else {
3008        this.$root.booking.stage = stage
3009      }
3010    },
3011    handleBookingClick() {
3012      reachGoal("sendreserve")
3013    }
3014  },
3015  template: `
3016    <div>
3017      <div v-if="$root.sideWindow !== 'booking'" class="side-window__wrapper">
3018        <component
3019          is="script"
3020          src="/site/templates/default/components/blocks/index/scripts/difbackForm.js"
3021          async
3022        >
3023        </component>
3024        <div class="side-window__header">
3025          <template v-if="!hideHeader">
3026            <n-image
3027              class="leaves"
3028              src="/site/templates/default/imgs/leaves.png"
3029              width="170"
3030              preview-disabled
3031            />
3032            <n-image
3033              v-if="!homeImage"
3034              class="granny-foto"
3035              src="/site/templates/default/imgs/granny-foto.png"
3036              width="170"
3037              preview-disabled
3038            />
3039            <n-image
3040              v-else
3041              class="granny-logo-foto"
3042              src="/site/templates/default/imgs/granny-logo.png"
3043              height="130"
3044              preview-disabled
3045              @click="goHome"
3046            />
3047
3048          </template>
3049        </div>
3050        <div class="side-window__main">
3051          <template v-if="$root.sideWindow === 'deposit'">
3052            <div class="side-window__main_header">
3053              <div class="side-window__main_header-title">
3054                <div class="circle-button" @click="goBack">
3055                  ❮
3056                </div>
3057                Депозит
3058              </div>
3059
3060              <div class="side-window__main_header-description">
3061                Переходите к оплате только если внесение депозита согласовано с менеджером бара Granny's Bar. В случае
3062                отмены бронирования, депозит возвращается баллами на карту лояльности
3063              </div>
3064
3065              <DepositList/>
3066            </div>
3067
3068          </template>
3069
3070          <template v-if="$root.sideWindow === 'menu'">
3071            <div class="side-window__main_header">
3072              <div class="side-window__main_header-title">
3073                <div class="circle-button" @click="goBack">
3074                  ❮
3075                </div>
3076                Меню
3077              </div>
3078
3079              <MenuList/>
3080            </div>
3081          </template>
3082
3083          <template v-if="$root.sideWindow === 'services'">
3084            <div class="side-window__main_header">
3085              <div class="side-window__main_header-title">
3086                <div class="circle-button" @click="goBack">
3087                  ❮
3088                </div>
3089                Услуги
3090              </div>
3091
3092              <ServicesList/>
3093            </div>
3094          </template>
3095
3096          <template v-if="$root.sideWindow === 'contacts'">
3097            <div class="side-window__main_header">
3098              <div class="side-window__main_header-title">
3099                <div class="circle-button" @click="goHome">
3100                  ❮
3101                </div>
3102                Контакты бабули
3103              </div>
3104
3105              <div class="side-window__main_header_second-title">
3106                Бабулин адрес
3107              </div>
3108              <div class="side-window__contacts_row">
3109                <n-image src="/site/templates/default/imgs/contacts/geop
3109osition-circle.svg" width="40"
3110                         preview-disabled/>
3111                г. Тюмень, ул. Мельникайте, д. 98
3112              </div>
3113
3114              <div class="side-window__main_header_second-title">
3115                Звоните бабуле по телефону
3116              </div>
3117              <a class="side-window__contacts_row phone" href="tel:+73452673131" target="_blank">
3118                <n-image src="/site/templates/default/imgs/contacts/phone-circle.svg" width="40" preview-disabled/>
3119                +7 (3452) 67-31-31
3120              </a>
3121
3122              <div style="background: var(--brown3);height: 2px; margin: 30px 0;"></div>
3123              <div class="side-window__contacts_row">
3124                <a class="side-window__contacts_icon" href="mailto:[email protected]" target="_blank">
3125                  <n-image src="/site/templates/default/imgs/contacts/mail-circle.svg" width="40" preview-disabled/>
3126                </a>
3127                <a class="side-window__contacts_icon" href="https://vk.ru/grannys" target="_blank">
3128                  <n-image src="/site/templates/default/imgs/contacts/vk-circle.svg" width="40" preview-disabled/>
3129                </a>
3130                <a class="side-window__contacts_icon" href="https://t.me/dobryebary" target="_blank">
3131                  <n-image src="/site/templates/default/imgs/contacts/tg-circle.svg" width="40" preview-disabled/>
3132                </a>
3133                <a class="side-window__contacts_icon" href="https://instagram.com/grannysbar" target="_blank">
3134                  <n-image src="/site/templates/default/imgs/contacts/instagram-circle.svg" width="40"
3135                           preview-disabled/>
3136                </a>
3137                <a class="side-window__contacts_icon"
3138                   href="https://play.google.com/store/apps/details?id=ru.foodsoul.c7105&pli=1" target="_blank">
3139                  <n-image src="/site/templates/default/imgs/contacts/play-market-circle.svg" width="40"
3140                           preview-disabled/>
3141                </a>
3142                <a class="side-window__contacts_icon"
3143                   href="https://apps.apple.com/us/app/grannys-bar-%D1%82%D1%8E%D0%BC%D0%B5%D0%BD%D1%8C/id1632922614?uo=4"
3144                   target="_blank">
3145                  <n-image src="/site/templates/default/imgs/contacts/app-store-circle.svg" width="40"
3146                           preview-disabled/>
3147                </a>
3148              </div>
3149
3150              <div class="round-button yellow" @click="changeSideWindow('booking')">Бронь столика</div>
3151              <a href="https://tyumen.hh.ru/employer/5297574" target="_blank" class="round-button yellow2"
3152                 style="margin-top: 16px;">Вакансии</a>
3153            </div>
3154          </template>
3155
3156          <div v-show="$root.sideWindow === 'booking'" class="side-window_booking__container">
3157            <div
3158              v-if="$root.booking.stage === 'date' || (!$root.sideWindowShortType && $root.booking.stage !== 'success')"
3159              class="side-window_booking__container_page"
3160            >
3161              <div class="side-window__main_header">
3162                <div class="side-window__main_header-title">
3163                  <div v-if="$root.page === 'contacts'" class="circle-button" @click="goBack">
3164                    ❮
3165                  </div>
3166                  Бронь столика, афиша
3167                </div>
3168              </div>
3169
3170              <CalendarWithEvents/>
3171            </div>
3172
3173            <div
3174              v-if="($root.booking.stage === 'day' || ($root.booking.stage === 'booking' && !$root.sideWindowShortType))"
3175              class="side-window_booking__container_page"
3176            >
3177              <div
3178                class="side-window__main_header"
3179                style="
3180                height: 100%;
3181                padding: 30px 20px;
3182                display: flex;
3183                flex-direction: column;
3184                justify-content: space-between;
3185              "
3186              >
3187                <div>
3188                  <div class="side-window__main_header-title">
3189                    <div v-if="$root.sideWindowShortType" class="circle-button" @click="changeBookingStage('date')">
3190                      ❮
3191                    </div>
3192                    <span class="custom__title">В этот день {{ $root.booking.date }}</span>
3193                  </div>
3194
3195                  <div v-if="$root.booking.event.title" class="side-window__main_header-title">
3196                    {{ $root.booking.event.title }}
3197                  </div>
3198
3199                  <div class="side-window__main_header-description__container">
3200                    <div class="side-window__main_header-description" v-html="$root.booking.event.text"></div>
3201
3202                    <n-image
3203                      v-if="$root.booking.event.img"
3204                      :src="$root.booking.event.img"
3205                      preview-disabled
3206                      style="height: 160px; border-radius: 16px; border: 1px solid var(--yellow1);"
3207                    />
3208                  </div>
3209                </div>
3210
3211                <div v-if="$root.booking.stage === 'day' || $root.sideWindowShortType">
3212                  <!--        Бронирование на сайте        @click="changeBookingStage('booking')"-->
3213                  <a href="https://686682.restoplace.ws/" target="_blank" class="round-button yellow">
3214                    Перейти к бронированию
3215                  </a>
3216                </div>
3217              </div>
3218            </div>
3219
3220            <div
3221              v-show="$root.booking.stage === 'booking'"
3222              class="side-window_booking__container_page"
3223            >
3224              <div class="side-window__main_header">
3225                <div class="side-window__main_header-title">
3226                  <div v-if="$root.sideWindowShortType" class="circle-button" @click="changeBookingStage('day')">
3227                    ❮
3228                  </div>
3229                  Бронирование
3230                </div>
3231
3232                <BookingForm/>
3233              </div>
3234
3235            </div>
3236          </div>
3237
3238          <template v-if="$root.sideWindow === 'scheme'">
3239            <div class="side-window__main_header">
3240              <div class="side-window__main_header-title">
3241                <div class="circle-button" @click="changeSideWindow('booking')">
3242                  ❮
3243                </div>
3244                Схемы залов
3245              </div>
3246
3247              <HallsScheme/>
3248            </div>
3249          </template>
3250
3251          <div v-show="$root.sideWindow === 'guest'" class="side-window__main_header">
3252            <div class="side-window__main_header-title">
3253              <div class="circle-button" @click="changeSideWindow('booking')">
3254                ❮
3255              </div>
3256              Тайный гость
3257            </div>
3258
3259            <div class="side-window__main_header-description guest-description" style="margin-bottom: 16px;">
3260              Проведи проверку в любимом баре по нашему чек-листу, и если всё будет сделано правильно, мы
3261              компенпенсируем твою покупку баллами на карту лояльности. Заполняй анкету и жди тайного письма с
3262              инструкциями!
3263            </div>
3264
3265            <GuestForm/>
3266          </div>
3267        </div>
3268      </div>
3269      <div class="without-booking" v-else>
3270        <n-image
3271          src="/site/templates/default/imgs/granny-large-foto.png"
3272          class="granny-large-foto"
3273          width="702"
3274          preview-disabled
3275        />
3276        <n-image
3277          class="leaves"
3278          src="/site/templates/default/imgs/leaves.png"
3279          width="240"
3280          preview-disabled
3281        />
3282        <a class="circle-container-w" href="https://686682.restoplace.ws/" target="_blank" @click="handleBookingClick">
3283          <div class="circle-container">
3284            <img src="/site/templates/default/imgs/granny-logo-circle.png" alt="Картинка" class="circle-img">
3285
3286            <svg viewBox="0 0 120 120" class="circle-text rotating">
3287              <defs>
3288                <!-- Радиус 60px: внешний круг -->
3289                <path id="circlePath" d="M 60,60 m -60, 0 a 60,60 0 1,1 120,0 a 60,60 0 1,1 -120,0" />
3290              </defs>
3291              <text font-size="16" fill="#feedc2" font-family="sans-serif">
3292                <textPath href="#circlePath" startOffset="50%" text-anchor="middle">
3293                  Забронировать столик • Забронировать столик •
3294                </textPath>
3295              </text>
3296            </svg>
3297          </div>
3298
3299        </a>
3300      </div>
3301    </div>
3302  `
3303})
3304
3305</script>
3305
3306
3307<style scoped>
3308.side-window__wrapper {
3309  min-width: 370px;
3310  max-width: 370px;
3311  position: absolute;
3312  right: 0px;
3313  bottom: 0px;
3314  height: 100%;
3315}
3316
3317.side-window__header {
3318  height: calc(100% - 570px);
3319  position: relative;
3320  overflow: hidden;
3321}
3322
3323.leaves {
3324  position: absolute;
3325  rotate: 9deg;
3326  bottom: -4px;
3327}
3328
3329.granny-foto {
3330  position: absolute;
3331  bottom: 0px;
3332  right: 70px;
3333}
3334
3335.granny-large-foto {
3336  z-index: 2;
3337  position: absolute;
3338  bottom: 90px;
3339  right: 0;
3340}
3341
3342.without-booking .leaves {
3343  bottom: 340px;
3344  right: 336px;
3345}
3346
3347
3348.granny-logo-foto {
3349  position: absolute;
3350  bottom: 30px;
3351  right: 70px;
3352  cursor: pointer;
3353}
3354
3355.side-window__main {
3356  position: relative;
3357  margin-left: 35px;
3358  height: 570px;
3359  background: var(--yellow3);
3360  border-radius: 36px 0 36px 0;
3361}
3362
3363.side-window__main_header {
3364  padding: 30px 20px 0 20px;
3365}
3366
3367.side-window__main_header-title {
3368  font-family: "Roboto";
3369  font-weight: 600;
3370  font-size: 20px;
3371  color: var(--brown3);
3372  margin-bottom: 16px;
3373  display: flex;
3374  align-items: center;
3375  gap: 16px;
3376}
3377
3378.side-window__main_header-description, .side-window__main_header-description p {
3379  font-family: "Roboto";
3380  font-size: 12px;
3381  line-height: 20px;
3382  color: var(--brown3);
3383}
3384
3385.side-window__main_header-description__container {
3386  overflow-y: scroll;
3387  max-height: 350px;
3388}
3389
3390.side-window__main_header-description__container::-webkit-scrollbar {
3391  width: 4px;
3392}
3393.side-window__main_header-description__container::-webkit-scrollbar-track {
3394  background: var(--yellow3);
3395}
3396.side-window__main_header-description__container::-webkit-scrollbar-thumb {
3397  background: var(--yellow2);
3398}
3399.side-window__main_header-description__container::-webkit-scrollbar-thumb:hover {
3400  background: var(--yellow1);
3401}
3402.side-window__main_header-description__container::-webkit-scrollbar-corner {
3403  background: var(--yellow3);
3404}
3405
3406.custom__title {
3407  font-size: 14px; color: var(--yellow1); font-weight: 400;
3408}
3409
3410@media screen and (max-width: 1000px) {
3411  .side-window__main_header-description {
3412    color: var(--yellow3);
3413  }
3414}
3415
3416.side-window__main_header_second-title {
3417  font-family: "Roboto";
3418  font-size: 16px;
3419  font-weight: 600;
3420  color: var(--brown3);
3421}
3422
3423.side-window_booking__container {
3424  display: flex;
3425  position: absolute;
3426  right: 0px;
3427  height: 570px;
3428  background: var(--yellow3);
3429  border-radius: 36px 0 36px 0;
3430}
3431
3432.side-window_booking__container_page {
3433  width: 335px;
3434}
3435
3436.side-window__contacts_row {
3437  display: flex;
3438  gap: 8px;
3439  margin: 20px 0;
3440  font-family: "Roboto";
3441  font-size: 12px;
3442  align-items: center;
3443  color: var(--brown3);
3444}
3445.side-window__contacts_row:hover {
3446  color: var(--brown3);
3447}
3448
3449.side-window__contacts_row .n-image {
3450  border-radius: 22px;
3451  transition: background 0.15s;
3452}
3453.side-window__contacts_row.phone {
3454  transition: color 0.15s;
3455}
3456.side-window__contacts_row.phone:hover {
3457  color: var(--yellow1);
3458}
3459.side-window__contacts_row.phone:hover .n-image {
3460  background: var(--yellow2);
3461}
3462
3463.side-window__contacts_icon {
3464  height: 40px;
3465  border-radius: 50%;
3466  transition: background 0.15s;
3467}
3468.side-window__contacts_icon:hover {
3469  background: var(--yellow2);
3470}
3471
3472.circle-container-w {
3473  position: absolute;
3474  bottom: 128px;
3475  right: 106px;
3476  z-index: 4;
3477}
3478
3479.circle-container-w:hover .circle-img {
3480  transform: scale(1.2);
3481}
3482.circle-container {
3483  position: relative;
3484  width: 120px;
3485  height: 120px;
3486}
3487
3488.circle-img {
3489  width: 80px;
3490  height: 80px;
3491  border-radius: 50%;
3492  object-fit: cover;
3493  position: absolute;
3494  top: 20px; /* центрируем внутри 120x120 */
3495  left: 20px;
3496  z-index: 1;
3497  transition: all .2s linear;
3498}
3499
3500.circle-text {
3501  color: var(--yellow3);
3502  position: absolute;
3503  top: 0;
3504  left: 0;
3505  width: 120px;
3506  height: 120px;
3507  z-index: 2;
3508  pointer-events: none;
3509  overflow: inherit;
3510}
3511
3512.rotating {
3513  animation: spin-reverse 15s linear infinite;
3514  transform-origin: center center;
3515}
3516
3517@keyframes spin-reverse {
3518  from {
3519    transform: rotate(0deg);
3520  }
3521  to {
3522    transform: rotate(-360deg); /* против часовой */
3523  }
3524}
3525</style>
3525<script>
3526app.component('DesktopMenu', {
3527  props: {
3528    shortType: {
3529      type: Boolean,
3530      default: false
3531    }
3532  },
3533  data: () => ({}),
3534  mounted() {},
3535  watch: {},
3536  computed: {},
3537  methods: {
3538    openBurgerMenu() {
3539      this.$root.burgerMenuOpened = !this.$root.burgerMenuOpened
3540    },
3541    changeSideWindow(window) {
3542      this.$root.openSideWindow(window)
3543    },
3544    changePage(page){
3545      this.$root.page = page
3546      window.history.pushState({}, "", '/' + page)
3547    },
3548    goContacts(){
3549      this.$root.sideWindow = "contacts"
3550      this.changePage("contacts")
3551    }
3552  },
3553  template: `
3554    <div class="desktop-menu">
3555      <div
3556        :class="{
3557          'burger-menu': true,
3558          'opened': $root.burgerMenuOpened
3559        }"
3560      >
3561        <div class="burger-menu__item" @click="changePage('about-granny')">
3562          <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" preview-disabled/>
3563          <div class="burger-menu__item_text">О бабуле</div>
3564        </div>
3565        <div class="burger-menu__item" @click="changeSideWindow('menu')">
3566          <n-image src="/site/templates/default/imgs/nav_button/menu.svg" width="38" preview-disabled/>
3567          <div class="burger-menu__item_text">Меню</div>
3568        </div>
3569        <a href="https://dostavka.grannysbar.ru/" target="_blank" class="burger-menu__item">
3570          <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" preview-disabled/>
3571          <div class="burger-menu__item_text">Доставка</div>
3572        </a>
3573        <div class="burger-menu__item" @click="changeSideWindow('services')">
3574          <n-image src="/site/templates/default/imgs/nav_button/services.svg" width="38" preview-disabled/>
3575          <div class="burger-menu__item_text">Услуги</div>
3576        </div>
3577        <div class="burger-menu__item" @click="goContacts">
3578          <n-image src="/site/templates/default/imgs/nav_button/contacts.svg" width="38" preview-disabled/>
3579          <div class="burger-menu__item_text">Контакты</div>
3580        </div>
3581<!--        <div class="burger-menu__item" @click="changeSideWindow('deposit')">-->
3582<!--          <n-image src="/site/templates/default/imgs/nav_button/deposit.svg" width="38" preview-disabled/>-->
3583<!--          <div class="burger-menu__item_text">Депозит</div>-->
3584<!--        </div>-->
3585        <div class="burger-menu__item" @click="changeSideWindow('guest')">
3586          <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" preview-disabled/>
3587          <div class="burger-menu__item_text">Тайный гость </div>
3588        </div>
3589        <a href="https://db-c.ru" target="_blank" class="burger-menu__item">
3590          <n-image src="/site/templates/default/imgs/nav_button/about-granny.svg" width="38" preview-disabled/>
3591          <div class="burger-menu__item_text">Кейтеринг</div>
3592        </a>
3593      </div>
3594
3595      <div
3596        :class="{
3597          'horizontal-buttons__container': true,
3598          'burger': $root.burgerMenu,
3599        }"
3600      >
3601        <template v-if="!$root.burgerMenu">
3602          <div class="horizontal-button" @click="changePage('about-granny')">О бабуле</div>
3603          <div class="horizontal-buttons__divider"></div>
3604          <div class="horizontal-button" @click="changeSideWindow('menu')">Меню</div>
3605          <div class="horizontal-buttons__divider"></div>
3606          <a href="https://dostavka.grannysbar.ru/" target="_blank" class="horizontal-button">Доставка</a>
3607          <div class="horizontal-buttons__divider"></div>
3608          <div class="horizontal-button" @click="changeSideWindow('services')">Услуги</div>
3609          <div class="horizontal-buttons__divider"></div>
3610          <div class="horizontal-button" @click="goContacts">Контакты</div>
3611          <div class="horizontal-buttons__divider"></div>
3612<!--          <div class="horizontal-button" @click="changeSideWindow('deposit')">Депозит</div>-->
3613<!--          <div class="horizontal-buttons__divider"></div>-->
3614          <div class="horizontal-buttons__divider"></div>
3615          <div class="horizontal-button" @click="changeSideWindow('guest')">Тайный гость</div>
3616          <div class="horizontal-buttons__divider"></div>
3617          <a href="https://db-c.ru" target="_blank" class="horizontal-button">Кейтеринг</a>
3618        </template>
3619        <template v-else>
3620          <div class="open-burger-button" @click="openBurgerMenu">
3621            <i class="fa fa-bars"/>
3622          </div>
3623        </template>
3624      </div>
3625    </div>
3626  `
3627})
3628
3629</script>
3629
3630
3631<style scoped>
3632.desktop-menu {
3633  position: absolute;
3634  bottom: 30px;
3635  right: 350px;
3636  left: 30px;
3637}
3638.horizontal-buttons__container {
3639  position: relative;
3640  z-index: 3;
3641  background: linear-gradient(0deg, rgba(102, 53, 21, 0.6), rgba(102, 53, 21, 0.6)), url("/site/templates/default/imgs/planks-texture.png");
3642  background-repeat: no-repeat;
3643  background-size: 105%;
3644  background-position-x: 10%;
3645  mix-blend-mode: normal;
3646  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
3647  border-radius: 36px 0px;
3648  height: 70px;
3649  width: 100%;
3650  display: flex;
3651  transition: width 0.15s;
3652  overflow: hidden;
3653}
3654
3655.horizontal-buttons__container.burger {
3656  width: 90px;
3657}
3658
3659.horizontal-button {
3660  width: 100%;
3661  display: flex;
3662  justify-content: center;
3663  align-items: center;
3664  color: var(--yellow3);
3665  font-family: "Roboto";
3666  font-weight: 500;
3667  font-size: 15px;
3668  white-space: nowrap;
3669  transition: color 0.15s, background 0.15s;
3670}
3671.horizontal-button:hover {
3672  cursor: pointer;
3673  color: var(--yellow1);
3674  background: rgba(0,0,0, 0.15);
3675}
3676
3677.horizontal-buttons__divider {
3678  height: 100%;
3679  width: 2px;
3680  background: var(--brown2);
3681}
3682
3683.open-burger-button {
3684  width: 90px;
3685  display: flex;
3686  justify-content: center;
3687  align-items: center;
3688  color: var(--yellow3);
3689  font-size: 40px;
3690}
3691.open-burger-button:hover {
3692  cursor: pointer;
3693  color: var(--yellow1);
3694}
3695
3696.burger-menu {
3697  display: flex;
3698  flex-direction: column;
3699  gap: 24px;
3700  margin-left: 27px;
3701  margin-bottom: 30px;
3702  overflow: hidden;
3703  opacity: 0;
3704  height: 0px;
3705  width: 170px;
3706  transition: opacity 0.2s, height 0.15s;
3707}
3708
3709.burger-menu.opened {
3710  opacity: 1;
3711  height: 420px;
3712}
3713
3714.burger-menu__item {
3715  display: flex;
3716  gap: 16px;
3717  cursor: pointer;
3718}
3719
3720.burger-menu__item_text {
3721  font-family: "KarloCham";
3722  color: var(--brown3);
3723  background: var(--yellow3);
3724  border-radius:  0 16px;
3725  padding: 0px 10px;
3726  transition: color 0.15s;
3727}
3728
3729.burger-menu__item:hover .burger-menu__item_text{
3730  color: var(--yellow1);
3731}
3732</style>
3732<script>
3733app.component('DepositList', {
3734  data: () => ({
3735    url: null,
3736    currentSum: null,
3737    list: [
3738      {
3739        url: 'https://yookassa.ru/my/i/Zsw4lz91FBGn/l',
3740        sum: '3 000'
3741      },
3742      {
3743        url: 'https://yookassa.ru/my/i/Zsw4uI1w3j1b/l',
3744        sum: '5 000'
3745      },
3746      {
3747        url: 'https://yookassa.ru/my/i/Zsw4zbiIN9eB/l',
3748        sum: '7 000'
3749      },
3750      {
3751        url: 'https://yookassa.ru/my/i/Zsw4617-fG1u/l',
3752        sum: '10 000'
3753      },
3754      {
3755        url: 'https://yookassa.ru/my/i/Zsw5BhYt5WYh/l',
3756        sum: '15 000'
3757      }
3758    ]
3759  }),
3760  mounted() {},
3761  watch: {},
3762  computed: {},
3763  methods: {
3764    changeDeposit(url, index){
3765      this.url = url
3766      this.currentSum = index
3767    }
3768  },
3769  template: `
3770    <div class="deposit-sum__container">
3771      <div
3772        v-for="(item, index) in list"
3773        :class="{
3774          'round-button sum': true,
3775          'selected': currentSum === index
3776        }"
3777        @click="changeDeposit(item.url, index)">
3778        {{item.sum}} ₽
3779      </div>
3780
3781      <a
3782        v-if="url"
3783        class="round-button yellow"
3784        :href="url"
3785        target="_blank"
3786        style="margin-top: 10px;"
3787      >
3788        Внести депозит
3789      </a>
3790    </div>`
3791})
3792
3793</script>
3793
3794
3795<style>
3796.deposit-sum__container {
3797  display: flex;
3798  flex-direction: column;
3799  gap: 16px;
3800  width: 100%;
3801  margin-top: 20px;
3802}
3803.round-button.sum.selected {
3804  background: var(--yellow1);
3805  pointer-events: none;
3806  outline: 1px solid var(--brown3);
3807  outline-offset: -1px;
3808  color: var(--brown3);
3809}
3810</style>
3810<script>
3811app.component('MenuList', {
3812  data: () => ({
3813    list: [
3814      {
3815        title: "Кухня",
3816        image: "/site/templates/default/imgs/nav_button/kitchen.svg",
3817        url: "https://grannysbar.ru/site/templates/default/imgs/menu/food.jpg?v=21"
3818      },
3819      {
3820        title: "Карта бара",
3821        image: "/site/templates/default/imgs/nav_button/bar-map.svg",
3822        url: "https://grannysbar.ru/site/templates/default/imgs/menu/drink.jpg?v=25"
3823      },
3824      {
3825        title: "Доставка",
3826        image: "/site/templates/default/imgs/nav_button/delivery.svg",
3827        url: "https://dostavka.grannysbar.ru/"
3828      }
3829    ]
3830  }),
3831  mounted() {},
3832  watch: {},
3833  computed: {},
3834  methods: {},
3835  template: `
3836    <div v-if="$root.isMobile" class="card-button__wrapper">
3837      <a
3838        v-for="(item, index) in list"
3839        :href="item.url"
3840        target="_blank"
3841        :class="['card-button', index === 0 ? 'blue-glow' : 'orange-glow']"
3842      >
3843        <n-image :src="item.image" width="68" preview-disabled/>
3844        {{ item.title }}
3845      </a>
3846    </div>
3847
3848    <div v-else>
3849      <template v-for="(item, index) in list">
3850        <a
3851          :href="item.url"
3852          target="_blank"
3853          class="desktop-menu__button"
3854        >
3855          <n-image class="desktop-menu__button_image" :src="item.image" preview-disabled/>
3856          {{ item.title }}
3857        </a>
3858        <div v-if="index + 1 !== list.length" class="desktop-menu__button_divider"></div>
3859      </template>
3860    </div>
3861  `
3862})
3863
3864</script>
3864
3865
3866<style scoped>
3867
3868</style>
3868<script>
3869app.component('ServicesList', {
3870  data: () => ({
3871    list: [
3872      {
3873        title: "Выездной бар",
3874        image: "/site/templates/default/imgs/nav_button/offsite-bar.svg",
3875        url: "https://bar-tm.ru/viezdnoy-bar/"
3876      },
3877      {
3878        title: "Учебный центр",
3879        image: "/site/templates/default/imgs/nav_button/training-center.svg",
3880        url: "https://bar-tm.ru/uchebniy-tsentr/"
3881      },
3882      {
3883        title: "Пищевой лёд",
3884        image: "/site/templates/default/imgs/nav_button/nutrition-ice.svg",
3885        url: "http://ice-tm.ru"
3886      },
3887      {
3888        title: "Заготовочный цех",
3889        image: "/site/templates/default/imgs/nav_button/offsite-bar.svg",
3890        url: "https://bar-tm.ru/uslugi/#zagotovki"
3891      }
3892    ]
3893  }),
3894  mounted() {},
3895  watch: {},
3896  computed: {},
3897  methods: {},
3898  template: `
3899    <div v-if="$root.isMobile" class="card-button__wrapper">
3900      <a
3901        v-for="(item, index) in list"
3902        :href="item.url"
3903        target="_blank"
3904        :class="['card-button', index === 0 ? 'blue-glow' : 'orange-glow']"
3905      >
3906        <n-image :src="item.image" width="68" preview-disabled/>
3907        {{ item.title }}
3908      </a>
3909    </div>
3910
3911    <div v-else>
3912      <template v-for="(item, index) in list">
3913        <a
3914          :href="item.url"
3915          target="_blank"
3916          class="desktop-menu__button"
3917        >
3918          <n-image class="desktop-menu__button_image" :src="item.image" preview-disabled/>
3919          {{ item.title }}
3920        </a>
3921        <div v-if="index + 1 !== list.length" class="desktop-menu__button_divider"></div>
3922      </template>
3923    </div>
3924  `
3925})
3926
3927</script>
3927
3928
3929<style scoped>
3930
3931</style>
3932
3933  <div id="app"> <!--APP-->
3934
3935      	        
3936  
3936<script>
3937	let children_sections = [{"id":25,"shortname":"\"\u0414\u0435\u0434\u0443\u0448\u043a\u0438\u043d\u0430 \u043a\u0430\u043d\u0446\u0435\u043b\u044f\u0440\u0438\u044f\"","path":"\/about-granny\/gallery\/dedulina_koncelyaria\/"},{"id":26,"shortname":"\"\u0411\u0430\u0431\u0443\u043b\u0438\u043d \u0431\u0443\u0434\u0443\u0430\u0440\"","path":"\/about-granny\/gallery\/babulin_buduar\/"},{"id":1049,"shortname":"\u041b\u0435\u0442\u043d\u044f\u044f \u0432\u0435\u0440\u0430\u043d\u0434\u0430","path":"\/about-granny\/gallery\/summer-terrace\/"},{"id":1051,"shortname":"\u041d\u0430\u0448\u0430 \u0430\u0442\u043c\u043e\u0441\u0444\u0435\u0440\u0430","path":"\/about-granny\/gallery\/nasha-atmosfera\/"}];
3938	let page_data = {"id":"1","shortname":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f","name":""};
3939	let page_tab = page_data.name;
3940
3941</script>
3941
3942<vue-page-index></vue-page-index>
3943
3944
3945
3946
3947
3948
3949
3950
3951
3952
3953</div> <!--/APP-->
3954<script>app.mount('#app')</script>
3954
3955		<div>
3956			
3957	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/fonts/KarloCham/stylesheet.css'>
3958	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/fonts/PartitaDeco/stylesheet.css'>
3959	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/fonts/Montserrat/stylesheet.css'>
3960	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/fonts/roboto/roboto.css'>
3961	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/fonts/roboto-condensed/roboto-condensed.css'>
3962	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/fonts/fontawesome470/font-awesome.min.css'>
3963	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/core/plugins/reloadteam/reloadteam.css?v=2'>
3964	<link async rel='StyleSheet' type='text/css' href='https://grannysbar.ru/site/cache/css-a6353d9f3957e3b85b21cd42d222e372.css?1790862906'>
3965			
3966	<!--JS-->
3967	
3967<script type='text/javascript' src='https://api-maps.yandex.ru/2.1/?load=package.standard&apikey=&lang=ru_RU' defer></script>
3967
3968	
3968<script type='text/javascript' src='https://grannysbar.ru/core/plugins/imask/6.0.5/imask.min.js' defer></script>
3968
3969	
3969<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery-growl/jquery.growl.min.js' defer></script>
3969
3970	
3970<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery-diadm/jquery.diadm.js?v=2' defer></script>
3970
3971	
3971<script type='text/javascript' src='https://grannysbar.ru/core/plugins/1asite-disclaimer/jquery.disclaimer.js?v=4' defer></script>
3971
3972	
3972<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery-form/jquery.form.min.js' defer></script>
3972
3973	
3973<script type='text/javascript' src='https://grannysbar.ru/core/plugins/core.js' defer></script>
3973
3974	
3974<script type='text/javascript' src='https://grannysbar.ru/core/plugins/search.js' defer></script>
3974
3975	
3975<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery-fromTo/jquery.fromTo.min.js' defer></script>
3975
3976	
3976<script type='text/javascript' src='https://grannysbar.ru/core/plugins/ecommerce.min.js' defer></script>
3976
3977	
3977<script type='text/javascript' src='https://grannysbar.ru/core/plugins/cart.js' defer></script>
3977
3978	
3978<script type='text/javascript' src='https://grannysbar.ru/site/templates/default/site.js' defer></script>
3978
3979	
3979<script type='text/javascript' src='https://grannysbar.ru/site/plugins/lazysizes/lazysizes.min.js' defer></script>
3979
3980	
3980<script type='text/javascript' src='https://grannysbar.ru/core/plugins/jquery.cookie.js' defer></script>
3980
3981	
3981<script type='text/javascript' src='https://grannysbar.ru/core/plugins/reloadteam/reloadteam.js' defer></script>
3981
3982		</div>
3983
3984        
3985		  </body>
3986</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.