API tools faq
paste
Advertisement
Psychokiller1888

header

Psychokiller1888
Dec 16th, 2022 (edited)
557
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 24.43 KB | None | 0 0
raw download clone embed print report
  1. <script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/a87da3e94636d38bfcdbb6508/623186071f51a7863d7ed4f75.js");</script><script crossOrigin="anonymous" src="https://kit.fontawesome.com/9c2dfaf190.js"></script>
  2. <script type="text/javascript">
  3.     window.isMobileDevice = function () {
  4.         let i = !1;
  5.         let a;
  6.         return (
  7.             (a = navigator.userAgent || navigator.vendor || window.opera),
  8.             (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
  9.                     a
  10.                 ) ||
  11.                 /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
  12.                     a.substr(0, 4)
  13.                 )) &&
  14.             (i = !0),
  15.                 i
  16.         );
  17.     };
  18.     // load website language
  19.     window.displayLang = function () {
  20.         let match = window.location.pathname.match('\\/(fr|de|en)$|\\/(fr|de|en)\\/')
  21.         if (match) {
  22.             return match[1] || match[2]
  23.         } else {
  24.             return 'fr'
  25.         }
  26.     }
  27. </script>
  28. <script type="text/javascript">
  29.  
  30.     const availabilitiesCalendar_rooms = {
  31.         '22': 'https://www.bel-air.swiss/ical-room/b40db1fe-3d02-4736-90d0-e2e459a1e9b9.ics',
  32.         '23': 'https://www.bel-air.swiss/ical-room/11bb48f4-09b9-4a89-a36c-f6daf5354e0b.ics',
  33.         '24': 'https://www.bel-air.swiss/ical-room/1b94c78d-0d4c-4a12-8eb7-e26d447ad6ab.ics',
  34.         '25': 'https://www.bel-air.swiss/ical-room/68efb774-ca57-4bee-98e9-49c277960770.ics',
  35.         '26': 'https://www.bel-air.swiss/ical-room/3b92c50f-308d-476e-8a4c-f13571d20608.ics',
  36.         '27': 'https://www.bel-air.swiss/ical-room/858dd925-9d8e-4d54-bbe0-61d249fb0c6a.ics',
  37.         '29': 'https://www.bel-air.swiss/ical-room/af5e8e22-4c0b-466f-b9e8-f4b2907dcd01.ics',
  38.         '30': 'https://www.bel-air.swiss/ical-room/32b72197-e31d-4095-8446-28eb44e29162.ics'
  39.     }
  40.  
  41.     const availabilitiesCalendar_monthNames = {
  42.         'fr': {
  43.             0: 'janvier',
  44.             1: 'février',
  45.             2: 'mars',
  46.             3: 'avril',
  47.             4: 'mai',
  48.             5: 'juin',
  49.             6: 'juillet',
  50.             7: 'août',
  51.             8: 'septembre',
  52.             9: 'octobre',
  53.             10: 'novembre',
  54.             11: 'décembre'
  55.         },
  56.         'de': {
  57.             0: 'Januar',
  58.             1: 'Februar',
  59.             2: 'März',
  60.             3: 'April',
  61.             4: 'Mai',
  62.             5: 'Juni',
  63.             6: 'Juli',
  64.             7: 'August',
  65.             8: 'September',
  66.             9: 'Oktober',
  67.             10: 'November',
  68.             11: 'Dezember'
  69.         },
  70.         'en': {
  71.             0: 'january',
  72.             1: 'february',
  73.             2: 'march',
  74.             3: 'april',
  75.             4: 'may',
  76.             5: 'june',
  77.             6: 'july',
  78.             7: 'august',
  79.             8: 'september',
  80.             9: 'october',
  81.             10: 'november',
  82.             11: 'december'
  83.         }
  84.     }
  85.  
  86.     const availabilitiesCalendar_translations = {
  87.         'fr': {
  88.             'available': 'Disponible',
  89.             'notAvailable': 'Indisponible'
  90.         },
  91.         'de': {
  92.             'available': 'Verfügbar',
  93.             'notAvailable': 'Nicht verfügbar'
  94.         },
  95.         'en': {
  96.             'available': 'Available',
  97.             'notAvailable': 'Not available'
  98.         }
  99.     }
  100.  
  101.     let myRoom, availabilitiesCalendar_numberOfMonthToDisplay
  102.  
  103.     const sleep = (ms) => {
  104.         return new Promise(res => setTimeout(res, ms))
  105.     }
  106.  
  107.     const getDaysArray = (start, end) => {
  108.         let arr, dt
  109.         for (arr = [], dt = new Date(start); dt <= end; dt.setDate(dt.getDate() + 1)) {
  110.             let date = new Date(dt)
  111.             let formatted = date.toISOString().split('T')[0].replaceAll('-', '').toString()
  112.             arr.push(formatted)
  113.         }
  114.         return arr
  115.     }
  116.  
  117.     window['availabilitiesCalendar_rooms'] = {}
  118.     window['availabilitiesCalendar_rooms']['all'] = []
  119.  
  120.     async function getCalendar(uri) {
  121.         let response = await fetch(uri)
  122.         if (response.ok) {
  123.             return response.text()
  124.         } else {
  125.             return -1
  126.         }
  127.     }
  128.  
  129.     const fetchRooms = async () => {
  130.         for (const [roomName, icsLink] of Object.entries(availabilitiesCalendar_rooms)) {
  131.             if (myRoom !== 'all' && myRoom !== roomName) {
  132.                 continue
  133.             }
  134.  
  135.             let retries = 3
  136.             for (let i = 0; i < retries; i++) {
  137.                 let ret = await getCalendar(icsLink)
  138.                 if (ret !== -1) {
  139.                     window['availabilitiesCalendar_rooms'][roomName] = ret
  140.                     break
  141.                 }
  142.                 window['availabilitiesCalendar_rooms'][roomName] = -1
  143.                 await sleep(500)
  144.             }
  145.         }
  146.     }
  147.  
  148.     const fetchCalendar = function () {
  149.         document.querySelector('#legendAvailable').innerHTML += availabilitiesCalendar_translations[window.displayLang()]['available']
  150.         document.querySelector('#legendUnavailable').innerHTML += availabilitiesCalendar_translations[window.displayLang()]['notAvailable']
  151.         fetchRooms().then(() => {
  152.             if (window['availabilitiesCalendar_rooms'][myRoom] === -1) {
  153.                 console.error(`Error fetching availabilities for room ${myRoom}`)
  154.                 return
  155.             }
  156.  
  157.             const now = new Date()
  158.             let thisYear = now.getFullYear()
  159.             const thisMonth = now.getMonth()
  160.             const thisDayDate = now.getDate()
  161.  
  162.             let endYear = thisYear
  163.             let endMonth = thisMonth
  164.  
  165.             if (thisMonth + availabilitiesCalendar_numberOfMonthToDisplay > 11) {
  166.                 endYear += 1
  167.                 endMonth = thisMonth + availabilitiesCalendar_numberOfMonthToDisplay - 13
  168.             }
  169.  
  170.             // The logic here is to build a arrays of possible dates, for every room and remove the ones unavailable then merge the arrays
  171.             let daylist = getDaysArray(new Date(thisYear, thisMonth, thisDayDate, 10), new Date(endYear, endMonth, 31, 10))
  172.  
  173.             let availabilities = {}
  174.             for (const [roomName, data] of Object.entries(window['availabilitiesCalendar_rooms'])) {
  175.                 if (roomName === 'all') {
  176.                     continue
  177.                 }
  178.                 availabilities[roomName] = daylist
  179.                 let matches = data.matchAll(/DTSTART:(?<start>[0-9]*).*\r\nDTEND:(?<end>[0-9]*)/gm)
  180.                 let unavailableDays = []
  181.                 for (let match of matches) {
  182.                     unavailableDays = unavailableDays.concat(getDaysArray(
  183.                         new Date(`${match.groups['start'].substr(0, 4)}-${match.groups['start'].substr(4, 2)}-${match.groups['start'].substr(6, 2)}, 10:00`),
  184.                         new Date(`${match.groups['end'].substr(0, 4)}-${match.groups['end'].substr(4, 2)}-${match.groups['end'].substr(6, 2)}, 10:00`)
  185.                     ))
  186.                     unavailableDays.pop()
  187.                 }
  188.                 window['availabilitiesCalendar_rooms'][roomName] = availabilities[roomName].filter(x => !unavailableDays.includes(x))
  189.                 window['availabilitiesCalendar_rooms']['all'] = window['availabilitiesCalendar_rooms']['all'].concat(window['availabilitiesCalendar_rooms'][roomName].filter(x => !window['availabilitiesCalendar_rooms']['all'].includes(x)))
  190.             }
  191.  
  192.             const container = document.querySelector('#calendar')
  193.  
  194.             document.querySelector('#calendar_spinner').remove()
  195.  
  196.             for (let i = 0; i < availabilitiesCalendar_numberOfMonthToDisplay; i++) {
  197.                 let month = thisMonth + i
  198.                 if (month > 11) {
  199.                     month -= 12
  200.                     thisYear = now.getFullYear() + 1
  201.                 }
  202.  
  203.                 let date = new Date(thisYear, month, 1)
  204.                 let firstDay = date.getDay() - 1
  205.                 if (firstDay < 0) {
  206.                     firstDay = 6
  207.                 }
  208.                 const daysInMonth = new Date(thisYear, month + 1, 0).getDate()
  209.  
  210.                 let calendarMonthTitle = document.createElement('div')
  211.                 calendarMonthTitle.classList.add('calendar_month_title')
  212.                 calendarMonthTitle.innerText = availabilitiesCalendar_monthNames[window.displayLang()][month]
  213.  
  214.                 let calendarMonth = document.createElement('div')
  215.                 calendarMonth.classList.add('calendar_month')
  216.                 calendarMonth.append(calendarMonthTitle)
  217.  
  218.                 let calendarMonthWeek
  219.                 let dayDate = 0
  220.                 for (let j = 0; j < 42; j++) {
  221.                     if (j === 0 || j % 7 === 0) {
  222.                         calendarMonthWeek = document.createElement('div')
  223.                         calendarMonthWeek.classList.add('calendar_month_week')
  224.                         calendarMonth.append(calendarMonthWeek)
  225.                     }
  226.                     let calendarMonthDay = document.createElement('div')
  227.                     calendarMonthDay.classList.add('calendar_month_day')
  228.  
  229.                     if (j >= firstDay && dayDate < daysInMonth) {
  230.                         dayDate++
  231.  
  232.                         let symbol = document.createElement('i')
  233.                         let date = new Date(Date.UTC(thisYear, month, dayDate))
  234.                         let formatted = date.toISOString().split('T')[0].toString()
  235.                         calendarMonthDay.title = formatted.toString()
  236.  
  237.                         formatted = formatted.replaceAll('-', '')
  238.  
  239.                         if (month === thisMonth && dayDate < thisDayDate) {
  240.                             symbol.classList.add('fa-solid')
  241.                             symbol.classList.add('fa-period')
  242.                         } else if (!window['availabilitiesCalendar_rooms'][myRoom].includes(formatted)) {
  243.                             symbol.classList.add('fa-light')
  244.                             symbol.classList.add('fa-ban')
  245.                             symbol.classList.add('fa-rotate-90')
  246.                         } else {
  247.                             symbol.classList.add('fa-solid')
  248.                             symbol.classList.add('fa-circle')
  249.                         }
  250.                         calendarMonthDay.append(symbol)
  251.                     }
  252.                     calendarMonthWeek.append(calendarMonthDay)
  253.                 }
  254.  
  255.                 container.append(calendarMonth)
  256.             }
  257.         })
  258.     }
  259.  
  260.     const initCalendar = function () {
  261.         const mainContainer = document.querySelector('#calendar_container')
  262.         if (!mainContainer) return
  263.         myRoom = mainContainer.dataset.room
  264.         availabilitiesCalendar_numberOfMonthToDisplay = mainContainer.dataset.months
  265.         fetchCalendar()
  266.     }
  267. </script>
  268.  
  269. <script type="text/javascript">
  270.     /*
  271.     Displays a dynamic open hour table.
  272.     Fill in timetable with the days you are open. Make sure there's no entry for the days you are closed
  273.     Add your opening hours for every day, follow the existing format. You can add as many time ranges per day as you wish
  274.     This widget is dynamic and supports i18n
  275.  
  276.     Uses global script to load document.lang as the website current display language
  277.  
  278.     Example:
  279.     '11:30 - 15:00',
  280.     '18:00 - 22:00'
  281.  
  282.     @copyright MIT - Laurent Chervet
  283.      */
  284.     let displayHorizontal = true
  285.  
  286.     window.displayTimetable = function () {
  287.         const timetableTimetable = {
  288.             1: [ // Monday
  289.             ],
  290.             2: [ // Tuesday
  291.             ],
  292.             3: [ // Wednesday
  293.             ],
  294.             4: [ // Thursday
  295.             ],
  296.             5: [ // Friday
  297.             ],
  298.             6: [ // Saturday
  299.             ],
  300.             0: [ // Sunday
  301.             ]
  302.         }
  303.  
  304.         const timetableSpecialClosures = {
  305.             '20230517': {
  306.                 'fr': 'Ascension',
  307.                 'de': 'Auffahrt',
  308.                 'en': 'Assumption'
  309.             }
  310.         }
  311.  
  312.         const timetableSpecialOpenings = {
  313.             '20230518': {
  314.                 'fr': {
  315.                     'name': 'Ascension',
  316.                     'times': [
  317.                         '08:00 - 23:00'
  318.                     ]
  319.                 },
  320.                 'en': {
  321.                     'name': 'Assumption',
  322.                     'times': [
  323.                         '08:00 - 23:00'
  324.                     ]
  325.                 },
  326.                 'de': {
  327.                     'name': 'Auffahrt',
  328.                     'times': [
  329.                         '08:00 - 23:00'
  330.                     ]
  331.                 },
  332.             }
  333.         }
  334.  
  335.         const timetableWeekdays = {
  336.             0: {
  337.                 'fr': 'dimanche',
  338.                 'de': 'sonntag',
  339.                 'en': 'sunday'
  340.             },
  341.             1: {
  342.                 'fr': 'lundi',
  343.                 'de': 'montag',
  344.                 'en': 'monday'
  345.             },
  346.             2: {
  347.                 'fr': 'mardi',
  348.                 'de': 'dienstag',
  349.                 'en': 'tuesday'
  350.             },
  351.             3: {
  352.                 'fr': 'mercredi',
  353.                 'de': 'mittwoch',
  354.                 'en': 'wednesday'
  355.             },
  356.             4: {
  357.                 'fr': 'jeudi',
  358.                 'de': 'donnerstag',
  359.                 'en': 'thursday'
  360.             },
  361.             5: {
  362.                 'fr': 'vendredi',
  363.                 'de': 'freitag',
  364.                 'en': 'friday'
  365.             },
  366.             6: {
  367.                 'fr': 'samedi',
  368.                 'de': 'samstag',
  369.                 'en': 'saturday'
  370.             }
  371.         }
  372.  
  373.         const timetableStrings = {
  374.             'closed': {
  375.                 'fr': 'fermé',
  376.                 'de': 'geschlossen',
  377.                 'en': 'closed'
  378.             },
  379.             'open': {
  380.                 'fr': 'ouvert',
  381.                 'de': 'offen',
  382.                 'en': 'open'
  383.             },
  384.             'nextOpening': {
  385.                 'fr': 'ouvre dans % minutes',
  386.                 'de': 'öffnet in % minuten',
  387.                 'en': 'opens in % minutes'
  388.             },
  389.             'nextOpeningAbout': {
  390.                 'fr': 'ouvre dans environ % heure(s)',
  391.                 'de': 'öffnet in ca. % Stund(en) ',
  392.                 'en': 'opens in about % hour(s)'
  393.             }
  394.         }
  395.  
  396.         const date = new Date()
  397.         const today = date.getDay()
  398.         const formattedDate = `${date.getFullYear()}${date.getMonth() - 1} ${date.getDate()}`
  399.  
  400.         let lang = 'fr'
  401.         if ('displayLang' in window) {
  402.             lang = window.displayLang() || 'fr'
  403.         }
  404.  
  405.         if (window.isMobileDevice() && displayHorizontal) {
  406.             displayHorizontal = false
  407.         }
  408.  
  409.         if (displayHorizontal) {
  410.             document.getElementById('timetableContainer').classList.add('horizontal')
  411.             document.getElementById('timetable_wrapper').classList.add('horizontal')
  412.             document.getElementById('chevron').classList.add('fa-chevrons-right')
  413.         } else {
  414.             document.getElementById('timetableContainer').classList.add('vertical')
  415.             document.getElementById('timetable_wrapper').classList.add('vertical')
  416.             document.getElementById('chevron').classList.add('fa-chevrons-down')
  417.         }
  418.  
  419.         document.getElementById('state_open').innerHTML = `<p><i class="fa-duotone fa-clock fa-fw"></i></p><p>${timetableStrings['open'][lang]}</p>`
  420.         document.getElementById('state_closed').innerHTML = `<p><i class="fa-duotone fa-user-clock fa-fw"></i></p><p>${timetableStrings['closed'][lang]}</p><p id="nextOpening"></p>`
  421.  
  422.         Object.keys(timetableWeekdays).forEach(key => {
  423.             let el = document.querySelector(`#${timetableWeekdays[key]['en']}`)
  424.  
  425.             if (key in timetableTimetable) {
  426.                 let newEl = document.createElement('div')
  427.                 newEl.classList.add('weekdayName')
  428.                 newEl.innerHTML = timetableWeekdays[key][lang]
  429.                 el.appendChild(newEl)
  430.  
  431.                 if (timetableTimetable[key].length > 0) {
  432.                     timetableTimetable[key].forEach(time => {
  433.                         newEl = document.createElement('div')
  434.                         newEl.classList.add('time')
  435.                         newEl.innerHTML = time
  436.                         el.appendChild(newEl)
  437.                     })
  438.                 } else {
  439.                     newEl = document.createElement('div')
  440.                     newEl.classList.add('closed')
  441.                     newEl.innerHTML = timetableStrings['closed'][lang]
  442.                     el.appendChild(newEl)
  443.                 }
  444.             } else {
  445.                 el.remove()
  446.             }
  447.         })
  448.  
  449.         if (today in timetableTimetable && timetableTimetable[today].length > 0) {
  450.             let open = true
  451.             let nextOpenings = []
  452.             if (formattedDate in timetableSpecialClosures) {
  453.                 open = false
  454.             } else {
  455.                 const rangeNow = parseInt(`${date.getHours()}${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}`)
  456.                 for (const time of timetableTimetable[today]) {
  457.                     let match = time.match('([\\d]{2}):([\\d]{2}) - ([\\d]{2}):([\\d]{2})')
  458.                     if (match) {
  459.                         let rangeStart = parseInt(`${match[1]}${match[2]}`)
  460.                         let rangeEnd = parseInt(`${match[3]}${match[4]}`)
  461.                         let tmp = rangeStart - rangeNow
  462.                         if (tmp > 0) {
  463.                             nextOpenings.push(rangeStart)
  464.                         }
  465.  
  466.                         open = !(rangeNow < rangeStart || rangeNow >= rangeEnd)
  467.                         if (open) {
  468.                             break
  469.                         }
  470.                     }
  471.                 }
  472.             }
  473.  
  474.             if (open) {
  475.                 document.getElementById('state_open').style.display = 'block'
  476.                 document.getElementById('state_closed').style.display = 'none'
  477.             } else {
  478.                 document.getElementById('state_open').style.display = 'none'
  479.                 document.getElementById('state_closed').style.display = 'block'
  480.  
  481.                 let hours = date.getHours()
  482.                 let minutes = date.getMinutes()
  483.  
  484.                 let nextOpening = Math.min(...nextOpenings)
  485.                 let nextOpeningHours
  486.                 let nextOpeningMinutes = parseInt(nextOpening.toString().slice(-2))
  487.                 if (nextOpening >= 1000) {
  488.                     nextOpeningHours = parseInt(nextOpening.toString().slice(0, 2))
  489.                 } else {
  490.                     nextOpeningHours = parseInt(nextOpening.toString().slice(0, 1))
  491.                 }
  492.  
  493.                 minutes = ((nextOpeningHours * 60) + nextOpeningMinutes) - ((hours * 60) + minutes)
  494.  
  495.                 if (minutes > 120) {
  496.                     hours = Math.round(minutes / 60)
  497.                     document.getElementById('nextOpening').innerHTML = timetableStrings['nextOpeningAbout'][lang].replace('%', hours.toString())
  498.                 } else {
  499.                     document.getElementById('nextOpening').innerHTML = timetableStrings['nextOpening'][lang].replace('%', minutes.toString())
  500.                 }
  501.             }
  502.         } else {
  503.             document.getElementById('state_open').style.display = 'none'
  504.             document.getElementById('state_closed').style.display = 'block'
  505.         }
  506.  
  507.         document.getElementById(timetableWeekdays[today]['en']).classList.remove('folded')
  508.         document.getElementById(timetableWeekdays[today]['en']).classList.add('unfolded')
  509.  
  510.         document.getElementById('folder').addEventListener('click', function () {
  511.             let element = document.querySelector('.folded')
  512.             if (element) {
  513.                 document.querySelectorAll('.folded').forEach(el => {
  514.                     el.classList.remove('folded')
  515.                     el.classList.add('unfolded')
  516.                 })
  517.  
  518.                 if (displayHorizontal) {
  519.                     document.getElementById('chevron').classList.remove('fa-chevrons-right')
  520.                     document.getElementById('chevron').classList.add('fa-chevrons-left')
  521.  
  522.                     document.getElementById('timetableContainer').classList.remove('timetableFolded')
  523.                     document.getElementById('timetableContainer').classList.add('timetableUnfolded')
  524.                     document.getElementById('timetableContainer').style.width = `${130 + Object.keys(timetableTimetable).length * 210}px`
  525.                 } else {
  526.                     document.getElementById('chevron').classList.remove('fa-chevrons-down')
  527.                     document.getElementById('chevron').classList.add('fa-chevrons-up')
  528.                 }
  529.  
  530.             } else {
  531.                 document.querySelectorAll('.unfolded').forEach(el => {
  532.                     if (el.id !== timetableWeekdays[today]['en']) {
  533.                         el.classList.remove('unfolded')
  534.                         el.classList.add('folded')
  535.                     }
  536.                 })
  537.                 if (displayHorizontal) {
  538.                     document.getElementById('chevron').classList.remove('fa-chevrons-left')
  539.                     document.getElementById('chevron').classList.add('fa-chevrons-right')
  540.  
  541.                     document.getElementById('timetableContainer').classList.remove('timetableUnfolded')
  542.                     document.getElementById('timetableContainer').classList.add('timetableFolded')
  543.                     document.getElementById('timetableContainer').style.width = '420px'
  544.                 } else {
  545.                     document.getElementById('chevron').classList.remove('fa-chevrons-up')
  546.                     document.getElementById('chevron').classList.add('fa-chevrons-down')
  547.                 }
  548.             }
  549.         })
  550.     }
  551.     const initTimetable = function () {
  552.         let mainContainer = document.querySelector('#timetableContainer')
  553.         if (!mainContainer) return
  554.         displayHorizontal = mainContainer.dataset.horizontal === '1'
  555.         window.displayTimetable()
  556.     }
  557. </script>
  558.  
  559. <style>
  560.     body {
  561.         background-color: #272727;
  562.         margin: 0 auto;
  563.         padding: 0;
  564.         color: white;
  565.     }
  566.  
  567.     #mobileOverlay {
  568.         position: fixed;
  569.         top: 0;
  570.         bottom: 0;
  571.         width: 100%;
  572.         margin: 0;
  573.         padding: 0;
  574.         z-index: 9999;
  575.         background-color: rgba(0, 0, 0, 0.75);
  576.         display: none;
  577.         align-content: center;
  578.     }
  579.  
  580.     #mobileOverlay_open {
  581.         display: none;
  582.     }
  583.  
  584.     .mobileOverlay_icon {
  585.         position: fixed;
  586.         bottom: 0.5em;
  587.         right: 0.5em;
  588.         cursor: pointer;
  589.         font-size: 3em;
  590.         color: black;
  591.         display: none;
  592.         width: 2.1em;
  593.         height: 2.1em;
  594.         min-height: 2.1em;
  595.         max-height: 2.1em;
  596.         justify-content: center;
  597.         align-content: center;
  598.         align-items: center;
  599.         justify-items: center;
  600.         background-color: white;
  601.         border-radius: 5em;
  602.         transition: right .5s;
  603.         z-index: 9998;
  604.         -webkit-box-shadow: 0 0 40px 4px rgba(97, 97, 97, 0.54);
  605.         box-shadow: 0 0 40px 4px rgba(97, 97, 97, 0.54);
  606.     }
  607.  
  608.     .mobileOverlay_icon:hover {
  609.         color: grey;
  610.     }
  611.  
  612.     .mobileOverlay_scrolling {
  613.         right: -300px;
  614.         transition: right .5s;
  615.     }
  616.  
  617.     .mobileOverlay_mainContainer {
  618.         width: 30em;
  619.         margin: auto;
  620.         display: flex;
  621.         flex-wrap: wrap;
  622.         align-content: center;
  623.         justify-content: center;
  624.     }
  625.  
  626.     .mobileOverlay_container {
  627.         min-width: 10em;
  628.         height: 10em;
  629.         margin: 10px;
  630.         background-color: white;
  631.         display: none;
  632.         flex-wrap: wrap;
  633.         cursor: pointer;
  634.         align-content: center;
  635.         justify-content: center;
  636.         color: black;
  637.     }
  638.  
  639.     .facebook {
  640.         color: white;
  641.         background-color: #4267B2;
  642.     }
  643.  
  644.     .twitter {
  645.         background-color: #1DA1F2;
  646.         color: white;
  647.     }
  648.  
  649.     .instagram {
  650.         color: white;
  651.         background-color: #da3076;
  652.     }
  653.  
  654.     .linkedin {
  655.         color: white;
  656.         background-color: #2867B2;
  657.     }
  658.  
  659.     .gmap {
  660.         color: #DB4437;
  661.     }
  662.  
  663.     #calendar_container {
  664.         font-family: Didact Gothic, sans-serif;
  665.         color: #ceb23b;
  666.         width: 90%;
  667.         margin: 0 auto;
  668.     }
  669.  
  670.     #calendar {
  671.         width: 100%;
  672.         margin: 0 auto;
  673.         display: flex;
  674.         flex-direction: row;
  675.         flex-wrap: nowrap;
  676.         overflow-x: auto;
  677.         justify-content: space-evenly;
  678.     }
  679.  
  680.     .red {
  681.         color: red;
  682.     }
  683.  
  684.     .white {
  685.         color: white;
  686.     }
  687.  
  688.     .orange {
  689.         color: #ceb23b;
  690.     }
  691.  
  692.     .calendar_month {
  693.         display: table;
  694.         margin: 10px;
  695.         border-collapse: collapse;
  696.         min-width: 125px;
  697.     }
  698.  
  699.     .calendar_month_title {
  700.         display: table-caption;
  701.         text-align: left;
  702.         font-size: 1em;
  703.         width: 100%;
  704.         height: 2em;
  705.         box-sizing: border-box;
  706.         padding: 5px 0 5px 0;
  707.         color: white;
  708.         text-transform: capitalize;
  709.     }
  710.  
  711.     .calendar_month_week {
  712.         display: table-row;
  713.         height: 15px;
  714.     }
  715.  
  716.     .calendar_month_day {
  717.         display: table-cell;
  718.         height: 28px;
  719.         width: 28px;
  720.         text-align: center;
  721.         vertical-align: middle;
  722.         font-size: 0.7em;
  723.     }
  724.  
  725.     #calendar_spinner {
  726.         width: 100%;
  727.         text-align: center;
  728.         padding: 15px;
  729.         box-sizing: border-box;
  730.     }
  731.  
  732.     #legendAvailable,
  733.     #legendUnavailable,
  734.     #calendar_spinner {
  735.         color: white;
  736.     }
  737.  
  738.     .booking_engine__background {
  739.         background-color: #272727;
  740.     }
  741. </style>
  742.  
  743. <style>
  744.     body {
  745.         background-color: black;
  746.     }
  747.     .timetableContainer {
  748.         display: flex;
  749.         justify-content: flex-start;
  750.         text-align: center;
  751.         margin: auto;
  752.         color: white;
  753.         overflow: hidden;
  754.     }
  755.     .timetableFolded {
  756.         width: 420px;
  757.         transition: 0.5s;
  758.         overflow-x: hidden;
  759.     }
  760.     .timetableUnfolded {
  761.         max-width: 95%;
  762.         transition: 1s;
  763.         overflow-x: auto;
  764.     }
  765.     .vertical {
  766.         flex-direction: column;
  767.     }
  768.     .horizontal {
  769.         flex-direction: row;
  770.     }
  771.     .time {
  772.         width: 100%;
  773.         text-align: center;
  774.         font-weight: normal;
  775.     }
  776.     .time:nth-child(2) {
  777.         margin-top: 1em;
  778.     }
  779.     .closed {
  780.         text-transform: capitalize;
  781.         margin-top: 1em;
  782.     }
  783.     #nextOpening {
  784.         font-size: 0.8em;
  785.         font-style: italic;
  786.         text-transform: none;
  787.     }
  788.     .state {
  789.         font-size: 1.2em;
  790.         font-weight: bold;
  791.         text-transform: capitalize;
  792.         box-sizing: border-box;
  793.         min-width: 190px;
  794.     }
  795.     .vertical .state {
  796.         border-top: 1px solid white;
  797.     }
  798.     .horizontal .state {
  799.         display: flex;
  800.         flex-direction: column;
  801.         justify-items: center;
  802.         justify-content: center;
  803.         border-top: none;
  804.     }
  805.     .horizontal .state,
  806.     .horizontal .weekday,
  807.     .horizontal .unfolded {
  808.         border-bottom: none;
  809.         border-right: 0.1em solid white;
  810.         width: 190px;
  811.     }
  812.     .vertical .state,
  813.     .vertical .weekday,
  814.     .vertical .unfolded {
  815.         border-right: none;
  816.         border-bottom: 0.1em solid white;
  817.         width: 190px;
  818.     }
  819.     .horizontal #timetable_wrapper {
  820.         display: flex;
  821.         flex-direction: row;
  822.         justify-items: flex-start;
  823.         justify-content: flex-start;
  824.         align-content: flex-start;
  825.         align-items: flex-start;
  826.         flex-grow: 0;
  827.     }
  828.     .weekday {
  829.         display: flex;
  830.         flex-direction: column;
  831.         text-align: center;
  832.         box-sizing: border-box;
  833.         flex-grow: 0;
  834.         height: 100%;
  835.     }
  836.     .horizontal .weekday {
  837.         justify-content: center;
  838.     }
  839.     .weekdayName {
  840.         font-size: 1.2em;
  841.         font-weight: bold;
  842.         text-transform: capitalize;
  843.     }
  844.     .folded {
  845.         opacity: 0;
  846.         margin: 0;
  847.         font-size: 0;
  848.         padding: 0;
  849.         transition: 0.5s;
  850.     }
  851.     .vertical .folded {
  852.         border-bottom: none;
  853.     }
  854.     .horizontal .folded {
  855.         width: 0;
  856.     }
  857.     .unfolded {
  858.         opacity: 1;
  859.         padding: 1em;
  860.         box-sizing: border-box;
  861.         transition: 1s;
  862.     }
  863.     .vertical .unfolded {
  864.         width: 190px;
  865.     }
  866.     .folder {
  867.         font-weight: bold;
  868.         cursor: pointer;
  869.         font-size: 1.5em;
  870.         display: flex;
  871.         flex-direction: column;
  872.         justify-content: center;
  873.         height: 100%;
  874.     }
  875.     .horizontal .folder {
  876.         display: flex;
  877.         flex-direction: column;
  878.         justify-content: center;
  879.         width: 40px;
  880.     }
  881.     .vertical .folder {
  882.         width: 190px;
  883.         margin-top: 10px;
  884.     }
  885.     .folder:hover {
  886.         font-weight: bolder;
  887.     }
  888. </style>
  889.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!