tag document.addEventListener('DOMContentLoaded', function(event) { // modal box const boxBackgroundColor = '#FFF'; // string, ex. '#FFF'; const boxFont = ''; // string, ex. 'Helvetica, Arial, sans-serif;'; const boxMaxWidth = '380px'; // defaults to 370px, string, ex. '370px'; const boxFontColor = ''; // string, ex. '#000'; // image const includeImage = true; // boolean, ex. true (no quotes around true or false) const imageUrl = 'https://www.lucillesbbq.com/sites/default/files/2021-07/lucy-homepage-promo-convenience2_0.jpg'; const imageAltTxt = 'burger'; // string, ex. 'burger'; const imageMaxHeight = '180px;'; // string, ex. '180px'; // headline const headline = '$0 Delivery'; const headlineFontSize = '48px'; // string, ex. '64px'; const headlineMobileFontSize = '42px'; // string, ex. '56px'; const headlineUppercase = false; // boolean, ex. true (no quotes around true or false) const headlineFont = '"gin", serif'; // string (defaults to box setting if empty), ex. '"Brixton Lead Vector", sans-serif;'; const headlineFontColor = '#000'; // string, ex. '#000'; const headlineFontWeight = ''; // string, ex. '700'; // sub headline const subheadline = 'Now through June 5th'; const subheadlineFontSize = '16px'; // string, ex. '16px'; const subheadlineMobileFontSize = '16px'; // string, ex. '14px'; const subheadlineUppercase = false; // boolean, ex. true (no quotes around true or false) const subheadlineFont = ''; // string (defaults to box setting if empty), ex. '"Brixton Lead Vector", sans-serif;'; const subheadlineFontColor = ''; // string, ex. '#000'; const subheadlineFontWeight = ''; // string, ex. '400'; // cta buttons const singleButton = false; const doubleBtnOneTxt = 'Delivery'; // string, ex. 'Delivery'; const doubleBtnTwoTxt = 'Pickup'; // string, ex. 'Pickup'; const singleBtnTxt = 'Order Now'; // string, ex. 'Order Now'; const doubleBtnOneUrl = 'https://lucillesbbq.olo.com/'; // string, ex. 'https://order.example.com/'; const doubleBtnTwoUrl = 'https://lucillesbbq.olo.com/'; // string, ex. 'https://order.example.com/'; const singleBtnUrl = ''; // string, ex. 'https://order.example.com/'; const btnFontSize = '22px'; // string, ex. '16px'; const btnUppercase = true; // boolean, ex. true (no quotes around true or false) const btnFont = '"Knockout 48 A", "Knockout 48 B"'; const btnFontColor = '#FFF'; // string, ex. '#FFF'; const btnFontWeight = '400'; // string, ex. '400'; const btnBackgroundColor = '#588c8e'; // string, .ex '#b11b1e'; const btnBorderColor = '#588c8e'; // string, .ex '#b11b1e'; const btnPadding = '7px 20px;'; // string, ex. 10px 22px; const btnHoverFontColor = '#FFF'; // string, ex. '#FFF'; const btnHoverBackgroundColor = '#76270c'; // string, .ex '#769ca3'; // disclaimer const disclaimer = false; // false if there is no disclaimer, boolean, ex. true (no quotes around true or false) const disclaimerTxt = '*This is my disclaimer, a very very very very very very very very very long disclaimer'; // string, ex. 'This is my disclaimer'; const disclaimerFontSize = '10px'; // string, ex. '7px'; // single day reoccuring const isSingleDayReoccuring = false; // false if always on, boolean, ex. true (no quotes around true or false) const daysForSingleDayReoccuring = ['tuesday']; // must be in an array [], values can be 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', string, ex. ['sunday'];, ex. ['sunday','monday']; // start and end dates const startDate = '08-01-2025'; // leave as '' if no start date, string, ex. '05-22-2022'; const endDate = '08-31-2025'; // leave as '' if no end date, string, ex. '05-27-2022'; // create style element const style = document.createElement('style'); // add CSS styles style.innerHTML = ` .dwmodal { z-index: 100000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; } .dwmodal-box { z-index: 1000; position: absolute; top: 40%; left: 50%; text-align: center; transform: translate(-50%, -50%); ${headlineFontColor ? `color: ${headlineFontColor};` : ''} ${boxFont ? `font-family: ${boxFont};` : ''} ${boxBackgroundColor ? `background-color: ${boxBackgroundColor};` : ''} ${includeImage ? 'padding: 0 0 30px 0;' : 'padding: 25px 0 30px 0;' } width: 85%; ${boxMaxWidth ? `max-width: ${boxMaxWidth};` : 'max-width: 370px;'} border-radius: 10px; /*background-image: linear-gradient(-86deg,#ececec 0,#fff 100%),linear-gradient(14deg,#000 0,#fff 100%);*/ /*background-image: url(/wp-content/uploads/2016/08/halftone_white.jpg)!important; background-position: 50%;*/ /*background-size: cover;*/ } .dwmodal-image { max-height: ${imageMaxHeight}; width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; object-fit: cover; /*object-position: 0% 90%;*/ } .dwmodal-close-button { ${includeImage ? 'filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(91deg) brightness(101%) contrast(103%);' : ''} position: fixed; right: 10px; top: 10px; width: 25px; text-align: center; cursor: pointer; padding-top: 3px; } .dwmodal-headline { margin: 15px 2px 0 2px; line-height: 1.1; color: #000; ${headlineFontSize ? `font-size: ${headlineFontSize};` : ''} ${headlineFontColor ? `color: ${headlineFontColor};` : ''} ${headlineFont ? `font-family: ${headlineFont};` : ''} ${headlineUppercase ? 'text-transform: uppercase;' : ''} ${headlineFontWeight ? `font-weight: ${headlineFontWeight};` : ''} letter-spacing: 0px; padding-bottom: 0px; } .dwmodal-subheadline { margin: 5px 5px 25px 5px; ${subheadlineFontSize ? `font-size: ${subheadlineFontSize};` : ''} ${subheadlineFontColor ? `color: ${subheadlineFontColor};` : ''} ${subheadlineFont ? `font-family: ${subheadlineFont};` : ''} ${subheadlineUppercase ? 'text-transform: uppercase;' : ''} ${subheadlineFontWeight ? `font-weight: ${subheadlineFontWeight};` : ''} /*letter-spacing: 1px;*/ /*text-transform: uppercase;*/ } .dwmodal-order-btn { /*width: 150px;*/ /*min-height: 40px;*/ border-radius: 0px; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; ${btnFontSize ? `font-size: ${btnFontSize};` : ''} ${btnFontColor ? `color: ${btnFontColor};` : ''} ${btnFont ? `font-family: ${btnFont};` : ''} ${btnUppercase ? 'text-transform: uppercase;' : ''} ${btnFontWeight ? `font-weight: ${btnFontWeight};` : ''} ${btnBackgroundColor ? `background-color: ${btnBackgroundColor};` : ''} ${btnBorderColor ? `border-color: ${btnBorderColor};` : ''} ${btnPadding ? `padding: ${btnPadding};` : ''} text-decoration: none; line-height: 1.2; letter-spacing: 1px; box-shadow: 0px 3px 10px rgb(0 0 0 / 16%); } .dwmodal-order-btn:hover, .dwmodal-order-btn:active, .dwmodal-order-btn:visited { text-decoration: none; } .dwmodal-order-btn:hover { ${btnHoverFontColor ? `color: ${btnHoverFontColor};` : ''} ${btnHoverBackgroundColor ? `background-color: ${btnHoverBackgroundColor};` : ''} } .dwmodal-first-btn { margin-right: 7px; } .dwmodal-disclaimer { margin: 25px 15px -20px 15px; text-align: left; } .dwmodal-disclaimer p { ${disclaimerFontSize ? `font-size: ${disclaimerFontSize};` : ''} line-height: 1.2; } .dwmodal-wrapper { display: flex; justify-content: center; } .dwmodal-show-modal { opacity: 1; visibility: visible; transform: scale(1.0); } @media only screen and (max-width: 600px) { .dwmodal-headline { ${headlineMobileFontSize ? `font-size: ${headlineMobileFontSize};` : ''} } .dwmodal-subheadline { ${subheadlineMobileFontSize ? `font-size: ${subheadlineMobileFontSize};` : ''} } } `; // append the style to the DOM in
section document.head.appendChild(style); // time checks for single day reoccuring, start date, end date var inDayRange = false; var inTimeRange = false; const now = new Date(); if (isSingleDayReoccuring && daysForSingleDayReoccuring) { const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']; var singleDayReoccuringDayIndexes = []; daysForSingleDayReoccuring.forEach((element) => { console.log(element); singleDayReoccuringDayIndexes.push(days.indexOf(element.toLowerCase())); }); const dateDay = now.getDay(); if (singleDayReoccuringDayIndexes.includes(dateDay)) { inDayRange = true; } else { inDayRange = false; } } else { inDayRange = true; } if (startDate && !endDate) { const startDateDateTime = new Date(startDate); if (now > startDateDateTime) { inTimeRange = true; } else { inTimeRange = false; } } else if (startDate && endDate) { const startDateDateTime = new Date(startDate); const endDateDateTime = new Date(endDate + ' 23:59:00'); if (now > startDateDateTime && now < endDateDateTime) { inTimeRange = true; } else { inTimeRange = false; } } else if (!startDate && endDate) { const endDateDateTime = new Date(endDate + ' 23:59:00'); if (now < endDateDateTime) { inTimeRange = true; } else { inTimeRange = false; } } else if (!startDate && !endDate) { inTimeRange = true; } var body = document.getElementsByTagName("BODY")[0]; body.insertAdjacentHTML('afterbegin', `${headline}
${subheadline}
${disclaimer ? `${disclaimerTxt}