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&lang=ru_RU&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&lang=ru_RU&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.