EPL - Chat with EPL Staff

<!DOCTYPE html> <html lang="en" class=""> <head> <meta http-equiv="x-ua-compatible" content="IE=Edge" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script src="/JavaScript/jquery-ui-1.13.2.custom/jquery-ui.min.js"></script> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#009ddc"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-precomposed.png"> <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <meta name="msapplication-TileColor" content="#009ddc"> <meta name="msapplication-TileImage" content="/favicon-144.png"> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" /> <script type="module" crossorigin src="/dist/assets/main-s8InHR6Z.js"></script> <link rel="stylesheet" crossorigin href="/dist/assets/main-UBGzxtGb.css">  <script> // Handle apply form validation and datepickers for forms constructed with the cf_input tag. const validators = [] function setupForms(el = document) { const forms = el.querySelectorAll('form[data-validate]').forEach(function(form) { if (form.dataset.validate == 'false') return const validator = new Validator(form, {debug: false}) validators.push(validator) }) // TODO: Allow an attribute for specifying the date format and use that in flatpickr // - in validator class, add handling for date ranges. // - in validator class, add handling for date formats. // - here I can get those values and add them to the flatpickr options el.querySelectorAll('input[type="date"], input[data-type="date"]').forEach((input) => { let fpOptions = { dateFormat: 'Y-M-d', allowInput: true, } // If the input has a data-date-range attribute, add it to the flatpickr options if (input.dataset.dateRange) { if (input.dataset.dateRange == 'past') fpOptions.maxDate = 'today' else if (input.dataset.dateRange == 'future') fpOptions.minDate = 'today' } if (input.dataset.dateFormat) fpOptions.dateFormat = momentToFPFormat(input.dataset.dateFormat) if (input.dataset.fpOptions) { let fpOptionsData = JSON.parse(input.dataset.fpOptions) fpOptions = {...fpOptions, ...fpOptionsData} } flatpickr(input, fpOptions) }) // I can also use flatpickr as a time picker if I want. el.querySelectorAll('input[type="time"], [data-type="time"]').forEach((input) => { let fpOptions = { enableTime: true, noCalendar: true, dateFormat: 'h:i K', time_24hr: false, allowInput: true, } if (input.dataset.dateFormat) fpOptions.dateFormat = momentToFPFormat(input.dataset.dateFormat) if (input.dataset.fpOptions) { let fpOptionsData = JSON.parse(input.dataset.fpOptions) fpOptions = {...fpOptions, ...fpOptionsData} } flatpickr(input, fpOptions) }) /** Chosen is a library used on apps for fancy dropdowns but we don't typically use it on www2 // Instantiate chosen dropdowns of various kinds $(".chzn-select").chosen({ disable_search_threshold:10 }) // Class for dropdowns that start out hidden, otherwise they have 0 length $(".chzn-select-100").chosen({ disable_search_threshold:10, width:"100%" }) // Class for formBuilder so that hidden forms have a width $(".chzn-select-250px").chosen({ disable_search_threshold:10, width:"250px" }) // Class for dropdowns you want to be able to clear out $(".chzn-select-deselect").chosen({ allow_single_deselect:true, disable_search_threshold:10 }) $(".chzn-select-deselect-100").chosen({ allow_single_deselect:true, disable_search_threshold:10, width:"100%" }) // A customized mode of Chosen that allows duplicates $('.chzn-multi').chosen({ allow_duplicates:true, force_enabled:true }) // Add support for markdown in textareas with the class "markdown" if (typeof marked == 'function') { document.querySelectorAll('.markdown').forEach((el) => { el.innerHTML = marked(el.innerHTML) }) } */ } // end setupForms() document.addEventListener("DOMContentLoaded", function() { setupForms() }) </script> <title>EPL - Chat with EPL Staff</title> <script> // Set dark mode based on preference. Add the following condition to the // if statement to allow the page to detect the user's system theme // || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) if (localStorage.theme === 'dark') document.querySelector('html').classList.add('dark') else document.querySelector('html').classList.remove('dark') </script> </head> <body class="bg-stone-300 dark:bg-stone-800 dark:text-stone-100">  <header class="text-stone-700 dark:bg-stone-900 dark:text-stone-200 relative z-10 font-sans bg-white shadow" x-data="{ nav:false, search:false, query:'', searchTarget:'catalogue', searchAction:'https://epl.bibliocommons.com/search', eventsActionBase:'https://epl.bibliocommons.com/events/search/q=', updateEventsAction() { const opt = document.getElementById('eventsOption') opt.dataset.action = this.eventsActionBase+this.query this.updateAction() }, updateAction() { const sel = document.getElementById('searchOpt') searchAction = sel.options[sel.selectedIndex].dataset.action const searchForm = document.getElementById('searchForm') searchForm.action = searchAction } }">  <div class="dark:border-blue-400 border-b-[3px] border-blue-700"> <div class="xs:justify-end xs:px-4 flex justify-between max-w-screen-xl m-auto"> <a href="https://epl.bibliocommons.com/locations/" class="dark:text-blue-300 xs:p-3 hover:underline inline-flex items-center p-2 text-blue-700"> <i aria-hidden="true" class="icon-location"></i> <span>Hours<span class="hidden xs:!inline"> & Locations</span></span> </a>  <div x-data="{ open: false }" class="sm:relative"> <button @click="open = ! open" class="dark:text-blue-300 xs:p-3 hover:underline inline-flex items-center p-2 text-blue-700"> <i aria-hidden="true" class="icon-help-circled"></i> Help <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <div id="helpDropdown" x-show="open" @click.outside="open = false" style="display:none" class="w-72 dark:bg-stone-850 border-stone-200 dark:border-stone-750 absolute right-0 p-4 mt-1 bg-white border shadow-lg"> <div class="text-md font-bold">Search FAQs</div> <form action="https://www.epl.ca/"> <span class="sm:w-full inline-flex flex-grow my-2"> <input type="text" name="s" autocomplete="off" maxlength="1000" class="flex-grow w-full"> <input type="hidden" name="post_type" value="bccms_faq"> <button type="submit" class="hover:bg-blue-800 dark:bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 inline-flex items-center px-3 text-white bg-blue-700"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /> </svg> </button> </span> </form> <hr class="my-3"> <div class="space-y-1"> <div><a class="text-stone-700 dark:text-stone-200" href="http://help.bibliocommons.com/">Account & Catalogue Help</a></div> <div><a class="text-stone-700 dark:text-stone-200" href="https://www.epl.ca/borrowing-guide/">Borrowing Guide</a></div> <div><a class="text-stone-700 dark:text-stone-200" href="http://www2.epl.ca/ContactEPL">Contact EPL</a></div> <div><a class="text-stone-700 dark:text-stone-200" href="https://www2.epl.ca/chat/">Chat</a></div> </div> </div> </div>  <div x-data="{ open: false }" class="sm:relative"> <button @click="open = ! open" class="xs:p-3 hover:underline hover:bg-blue-800 dark:bg-blue-400 dark:hover:bg-blue-500 inline-flex items-center p-2 font-semibold text-white bg-blue-700"> <span class="sm:!inline hidden">Login / </span> My EPL <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <div id="myEplDropdown" x-show="open" @click.outside="open = false" style="display:none" class="w-72 dark:bg-stone-850 border-stone-200 dark:border-stone-750 absolute right-0 mt-1 bg-white border shadow-lg"> <div class="p-4"><a href="https://epl.bibliocommons.com/user/login" class="block p-1 w-full font-semibold text-center !text-white bg-lime-500 rounded shadow hover:bg-lime-600 hover:no-underline hover:text-white">Log In / Register</a></div> <div class="border-stone-200 dark:border-stone-750 p-4 border-t"> <a class="text-stone-700 dark:text-stone-200 block" href="https://epl.bibliocommons.com/dashboard/user_dashboard">My Library Dashboard</a> </div> <div class="border-stone-200 dark:border-stone-750 p-4 space-y-2 border-t"> <div class="text-base font-semibold uppercase">My Borrowing</div> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/checkedout">Checked Out</a> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/holds">On Hold</a> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/fines">Fees</a> </div> <div class="border-stone-200 dark:border-stone-750 p-4 space-y-2 border-t"> <div class="text-base font-semibold uppercase">My Collections</div> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/collection/show/my/library/for_later">For Later Shelf</a> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/collection/show/my/library/completed">Completed Shelf</a> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/collection/show/my/library/in_progress">In Progress Shelf</a> <a class="text-stone-700 dark:text-stone-200 block pl-3" href="https://epl.bibliocommons.com/lists/show/mine">Lists</a> </div> <div class="border-stone-200 dark:border-stone-750 p-4 border-t"> <a class="text-stone-700 dark:text-stone-200 block" href="https://epl.bibliocommons.com/user_profile/">My Profile</a> </div> <div class="border-stone-200 dark:border-stone-750 p-4 border-t"> <a class="text-stone-700 dark:text-stone-200 block" href="https://epl.bibliocommons.com/account">My Settings</a> <button class="link text-stone-700 dark:text-stone-200 block" type="button" onclick="toggleDarkMode()">Toggle Theme</button> </div> </div> </div> </div> </div>  <div class="flex flex-wrap items-center justify-between max-w-screen-xl px-4 py-3 m-auto">  <a href="https://www.epl.ca/"> <svg xmlns="http://www.w3.org/2000/svg" class="w-28 md:w-56 dark:text-white text-blue-700" viewBox="32 35 143 40"> <path fill="#FDBB30" d="M34.4 37.51h7.32v29.53H34.4z"/> <path fill="#7AC143" d="M45.42 37.51h7.32v29.53h-7.32z"/> <path fill="#E50E63" d="M56.44 37.51h7.32v29.53h-7.32z"/> <path fill="#7D4199" d="M67.46 37.51h7.32v29.53h-7.32z"/> <path fill="#009DDC" d="M78.48 37.51h7.32v29.53h-7.32z"/> <path fill="currentColor" d="M97.35 60.7c.11 2.55 1.36 3.72 3.6 3.72 1.62 0 2.93-1 3.19-1.9h3.55c-1.14 3.46-3.55 4.94-6.88 4.94-4.63 0-7.5-3.19-7.5-7.73 0-4.4 3.04-7.76 7.5-7.76 5 0 7.42 4.2 7.14 8.72h-10.6zm6.56-2.56c-.37-2.05-1.25-3.13-3.21-3.13-2.56 0-3.3 2-3.35 3.13h6.56zM110.33 52.37h3.83v1.87h.06a4.89 4.89 0 0 1 4.38-2.27c4.6 0 6.67 3.72 6.67 7.9 0 3.92-2.15 7.59-6.45 7.59a5.22 5.22 0 0 1-4.4-2.22h-.06v6.99h-4.03V52.37zm10.91 7.39c0-2.33-.94-4.75-3.52-4.75-2.65 0-3.5 2.36-3.5 4.75 0 2.38.91 4.66 3.52 4.66 2.65 0 3.5-2.28 3.5-4.66zM127.8 46.77h4.04v20.29h-4.04V46.77zM135.19 62.68h4.46v4.38h-4.46v-4.38zM152.92 57.54c-.26-1.65-1.31-2.53-2.99-2.53-2.58 0-3.43 2.62-3.43 4.77 0 2.1.82 4.64 3.35 4.64 1.87 0 2.95-1.2 3.21-2.99h3.9c-.52 3.9-3.22 6.03-7.08 6.03-4.43 0-7.42-3.13-7.42-7.53 0-4.58 2.73-7.96 7.5-7.96 3.47 0 6.65 1.82 6.9 5.57h-3.94zM159.05 56.89c.23-3.78 3.61-4.92 6.9-4.92 2.93 0 6.46.65 6.46 4.18v7.64c0 1.34.14 2.67.5 3.27h-4.08a5.96 5.96 0 0 1-.29-1.42c-1.28 1.33-3.15 1.82-4.94 1.82-2.79 0-5-1.4-5-4.4 0-3.33 2.5-4.13 5-4.47 2.47-.37 4.77-.28 4.77-1.93 0-1.73-1.2-1.99-2.61-1.99-1.54 0-2.53.63-2.67 2.22h-4.04zm9.32 2.98c-.68.6-2.1.62-3.35.85-1.25.26-2.39.68-2.39 2.16 0 1.5 1.17 1.88 2.47 1.88 3.16 0 3.27-2.5 3.27-3.38v-1.51z"/> </svg> </a> <div class="lg:w-48 flex justify-between flex-grow w-8 ml-4"> <button id="navToggle" class="sm:hidden"@click="nav = ! nav"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /> </svg> </button> <button id="searchToggle" class="xs:hidden"@click="search = ! search"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /> </svg> </button> </div> <div class="flex-grow xs:!block" x-show="search"> <form id="searchForm" class="sm:flex-nowrap flex flex-wrap items-center" action="https://epl.bibliocommons.com/search"> <label for="biblioSearch" class="md:block inline text-lg font-semibold"> Search<span class="hidden md:!inline"> the</span> </label> <select x-model="searchTarget" @change="updateAction()" aria-label="Search alternatives" class="m-2" data-dropup-auto="false" data-js="header_search_target" id="searchOpt" name="searchOpt"> <option value="catalogue" data-action="https://epl.bibliocommons.com/search" data-query-field="q">Catalogue</option> <option value="website" data-action="https://www.epl.ca" data-query-field="s">Website</option> <option value="faqs" data-action="https://www.epl.ca" data-query-field="s">FAQs</option> <option value="events" id="eventsOption" data-action="https://epl.bibliocommons.com/events/search/q=__QUERY__">Events</option> </select> <span x-show="searchTarget=='catalogue'" style="display:none;" class="font-semibold">by</span> <span x-show="searchTarget=='website'" style="display:none;" class="font-semibold">for</span> <select x-show="searchTarget=='catalogue'" aria-label="Search type" class="xs:m-2 my-2" data-js="search_type" name="t" > <option value="smart">Keyword</option> <option value="title">Title</option> <option value="author">Author</option> <option value="series">Series</option> <option value="subject">Subject</option> <option value="tag">Tag</option> <option value="userlist">List</option> <option value="user">User</option> </select> <select x-show="searchTarget=='website'" aria-label="Search within the website" class="xs:m-2 my-2" data-js="header_search_format" id="post_type" name="post_type" style="display:none;"> <option value="">All Content</option> <option value="bccms_faq">FAQs</option> <option value="bccms_news">News</option> <option value="post">Blog Posts</option> </select> <span class="sm:w-full inline-flex flex-grow my-2"> <input x-model="query" @input="updateEventsAction()" type="text" id="biblioSearch" name="q" autocomplete="off" maxlength="1000" class="sm:ml-2 flex-grow"> <input x-model="query" type="hidden" name="s"> <button type="submit" class="hover:bg-blue-800 dark:bg-blue-400 dark:hover:bg-blue-500 focus:outline-none focus:ring-2 inline-flex items-center px-3 text-white bg-blue-700"> <i aria-hidden="true" class="icon-search"></i> </button> </span> </form> <div class="w-full text-right"><a href="https://epl.bibliocommons.com/search" class="hover:underline text-stone-700 dark:text-stone-200 block text-sm">Advanced Search</a></div> </div> </div>  <div class="flex-wrap items-end m-auto space-x-1 max-w-screen-xl sm:px-2 sm:!flex" x-show="nav" @click.outside="nav = false">  <div x-data="{ open: false }" class=""> <button @click="open = ! open" type="button" :class="open ? 'bg-blue-700 dark:bg-blue-400 dark:bg-blue-400 text-white' : ''" class="sm:w-auto hover:bg-blue-700 dark:hover:bg-blue-400 hover:text-white inline-flex items-center w-full p-3 font-bold"> Browse <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <div x-show="open" @click.outside="open = false" style="display:none" class="inset-x-1 bg-stone-100 dark:bg-stone-850 border-stone-300 dark:border-stone-750 absolute flex-wrap p-4 border shadow-lg"> <div class="sm:flex sm:px-4 max-w-screen-xl m-auto"> <h2 class="hidden mr-8 text-2xl font-bold lg:!block">Browse</h2> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Format</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-audiobooks/">Audiobooks</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-books/">Books</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-movies/">Movies & TV</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-music/">Music</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-video-games/">Video Games</a> </div> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase hidden sm:!block"> </div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-eaudiobooks/">eAudiobooks</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-ebooks/">eBooks</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-streaming-movies/">Streaming Movies & TV</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/browse-newspapers-magazines/">Newspapers & Magazines</a> </div> <div class="sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Explore</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/explore/index/awards/">Award Winners</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/explore/index/best_sellers/">Bestsellers</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/epl-picks/">EPL Picks</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/explore/">Featured Content</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/explore/recent_arrivals">New & On Order</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/world-languages/">World Languages</a> </div> </div> </div> </div> <div x-data="{ open: false }" class=""> <button @click="open = ! open" type="button" :class="open ? 'bg-blue-700 dark:bg-blue-400 dark:bg-blue-400 text-white' : ''" class="sm:w-auto hover:bg-blue-700 dark:hover:bg-blue-400 hover:text-white inline-flex items-center w-full p-3 font-bold"> <i aria-hidden="true" class="icon-calendar mr-1"></i> What's On <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <div x-show="open" @click.outside="open = false" style="display:none" class="inset-x-1 bg-stone-100 dark:bg-stone-850 border-stone-300 dark:border-stone-750 absolute flex-wrap p-4 border shadow-lg"> <div class="sm:flex sm:px-4 max-w-screen-xl m-auto"> <h2 class="hidden mr-8 text-2xl font-bold lg:!block">What's On</h2> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Special Events</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/books2buy/">Books2Buy</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/book-clubs/">Book Clubs</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/gala/">Gala</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/speaker-series/">Forward Thinking Speaker Series</a> </div> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">View</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=branch_location_id:(EPLABB%20OR%20EPLCAL%20OR%20EPLCLV%20OR%20EPLCPL%20OR%20EPLCSD%20OR%20EPLHIG%20OR%20EPLHVY%20OR%20EPLIDY%20OR%20EPLJ(PL%20OR%20EPLLHL%20OR%20EPLLON%20OR%20EPLMCN%20OR%20EPLMEA%20OR%20EPLMLW%20OR%20EPLMNA%20OR%20EPLRIV%20OR%20EPLSPW%20OR%20EPLSTR%20OR%20EPLWHP%20OR%20EPLWMC%20OR%20EPLWOO)">In-Person Classes & Events</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=branch_location_id:(BC_VIRTUAL)">Online Classes & Events</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=program:(5be352e29b248635007ae988)">epl2go Literacy Vans Classes & Events</a> </div> <div class="sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Audience</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=audiences:(57daf6fbecaf7adc3091393f)">Adults</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=audiences:(57daf6fbecaf7adc30913939%20OR%2057daf6fbecaf7adc3091393a)">Kids 0–5</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=audiences:(57daf6fbecaf7adc3091393d%20OR%2057daf6fbecaf7adc3091393c)">Kids 6–12</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://epl.bibliocommons.com/events/search/fq=audiences:(57daf6fbecaf7adc3091393e)">Teens</a> </div> </div> </div> </div> <div x-data="{ open: false }" class=""> <button @click="open = ! open" type="button" :class="open ? 'bg-blue-700 dark:bg-blue-400 dark:bg-blue-400 text-white' : ''" class="sm:w-auto hover:bg-blue-700 dark:hover:bg-blue-400 hover:text-white inline-flex items-center w-full p-3 font-bold"> Digital Content <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <div x-show="open" @click.outside="open = false" style="display:none" class="inset-x-1 bg-stone-100 dark:bg-stone-850 border-stone-300 dark:border-stone-750 absolute flex-wrap p-4 border shadow-lg"> <div class="sm:flex sm:px-4 max-w-screen-xl m-auto"> <h2 class="hidden mr-8 text-2xl font-bold lg:!block">Digital Content</h2> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">View</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://d4804za1f1gw.cloudfront.net/wp-content/uploads/sites/18/2019/06/24103724/QuickStartGuide_DLI_June2019_V1_Proof.pdf">Getting Started Guide</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/">All Online Resources</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/kids-subject/a-z-kids/">Kids' Online Resources</a> </div> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Activity</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/teen-subject/learn">Learn</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/teen-subject/listen">Listen</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/teen-subject/read">Read</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/research">Research</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/teen-subject/watch">Watch</a> </div> <div class="sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Subject</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/arts">Arts & Literature</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/business">Business, Finance & Law</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/canadian-content/">Canadian Content</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/consumer-auto/">Consumer & Auto</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/genealogy">Genealogy & History</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/resources/research/">Reference & Research</a> </div> </div> </div> </div> <div x-data="{ open: false }" class=""> <button @click="open = ! open" type="button" :class="open ? 'bg-blue-700 dark:bg-blue-400 dark:bg-blue-400 text-white' : ''" class="sm:w-auto hover:bg-blue-700 dark:hover:bg-blue-400 hover:text-white inline-flex items-center w-full p-3 font-bold"> Services <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </button> <div x-show="open" @click.outside="open = false" style="display:none" class="inset-x-1 bg-stone-100 dark:bg-stone-850 border-stone-300 dark:border-stone-750 absolute flex-wrap p-4 border shadow-lg"> <div class="sm:flex sm:px-4 max-w-screen-xl m-auto"> <h2 class="hidden mr-8 text-2xl font-bold lg:!block">Services</h2> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Resources For</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/adults/">Adults</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/kids-0-5/">Kids 0-5</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/kids-6-12/">Kids 6-12</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/school/">Students</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/teens/">Teens</a> </div> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase hidden sm:!block"> </div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/parents/">Parents</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/educators/">Educators</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/english-language-learners/">English Language Learners</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/job-seekers/">Job Seekers</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/newcomers/">Newcomers</a> </div> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Featured Services</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/capital-city-art/">Capital City Art</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/capital-city-press/">Capital City Press</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/epl2go/">epl2go Literacy Vans</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/epl2you/">Home Delivery</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/indigenous/">Indigenous</a> </div> <div class="border-stone-300 dark:border-stone-750 sm:border-r sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase hidden sm:!block"> </div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/the-kitchen/">The Kitchen</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/makerspace/">Makerspace</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/milner-library/outreach/">Outreach</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/newcomers/#settlement">Settlement</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/writer-in-residence/">Writer in Residence</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/services/">View All Services 禄</a> </div> <div class="sm:px-4 px-0 space-y-2"> <div class="sm:mt-1 mt-6 text-base font-bold uppercase ">Book A…</div> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://mypc.epl.ca/cire/SignIn.aspx">Computer</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www2.epl.ca/PersonalPicks/">Personal Picks</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://print.epl.ca/cps/">Print Job</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/room-rental/">Meeting Room or Event Space</a> <a class="sm:ml-0 text-stone-700 dark:text-stone-200 block ml-2" href="https://www.epl.ca/services/tours/">Library Tour</a> </div> </div> </div> </div> <a href="https://www2.epl.ca/chat/" class="text-stone-700 dark:text-stone-200 sm:w-auto hover:bg-blue-700 dark:hover:bg-blue-400 hover:text-white hover:no-underline inline-flex items-center w-full p-3 font-bold"> Chat<span class="hidden md:!inline"> with EPL</span> </a> </div> </header>  <main class="page w2Contents dark:bg-stone-950 max-w-screen-lg p-2 sm:p-6 mx-auto bg-white">  <h1 class="text-4xl font-semibold mb-8 pb-6 border-b-4 border-amber-400">Chat with EPL Staff</h1> <style> #chatButton { width:100%; border-radius:4px; } #chatButton:hover { opacity:0.8; background: black; } .laWidget { margin-left:7.5px; } .laWidget * { font-family: Arial,Helvetica,sans-serif; color: #474747; } .laWidget label { font-size:16px; } /*Override styles from LibAnswers*/ .s-la-widget-header {display:none !important;} .s-la-widget-embed {border:none;} /* Should override buttons from LibAnswers */ .laWidget .btn { display:inline-block; background-color: transparent; background-color: #002c77; color: #ffffff; border-radius:4px; padding: 10px 30px; /* Slightly bigger than the default 14px font for normal links */ font-size:16px; font-family: Arial,Helvetica,sans-serif; } .laWidget .btn:hover, .laWidget .btn:active, .laWidget .btn:focus, .laWidget .btn:active:focus { border: 1px solid #004B8D; border-color: #002c77; color: #002c77; background-color:rgba(0, 44, 119, 0.2); } @media (max-width:450px) { #chatButton { margin:0 auto; } .laWidget .btn { width:100%; } } #libchat_77bc22813f0a2fb18f76823c929a1c66 { width:100%; } html { min-height: 100%; } </style> <div class="flexContainer"> <div class="infoCard"> <h3>Phone Numbers</h3> <p>Talk: <a href="tel:780-496-7000">780-496-7000</a></p> <p>Text: <a href="tel:587-817-0337">587-817-0337</a></p> <p>Renewals: <a href="tel:780-496-7047">780-496-7047</a></p> <p><a href="https://epl.bibliocommons.com/locations/list/">Call a specific location</a></p> <h3>Email</h3> <p><a href="/contactepl/">Contact EPL via Email</a></p> <h3>Links</h3> <div class="flex flex-col space-y-2"> <a class="btn" href="https://www.epl.ca/faqs">FAQs</a> <a class="btn" href="https://www.epl.ca/suggest-item/">Suggest an item for the collection</a> <a class="btn" href="https://epl.libcal.com">Book a Room</a> <a class="btn" href="https://www.epl.ca/services/tours/">Book a Tour</a> </div> </div> <div id="libchat_77bc22813f0a2fb18f76823c929a1c66"></div> </div> <script src="https://contact.epl.ca/load_chat.php?hash=77bc22813f0a2fb18f76823c929a1c66"></script> </main>   <footer class="text-stone-700 dark:text-stone-200 dark:bg-stone-950 dark:border-blue-400 p-4 mb-12 font-sans bg-white border-t-[3px] border-blue-700 shadow"> <div class="max-w-screen-xl m-auto"> <div class="sm:space-x-0 sm:mt-4 sm:w-8 sm:mr-4 sm:float-left sm:flex-col sm:space-y-2 flex justify-center m-auto space-x-4"> <a href="https://www.facebook.com/EPLdotCA" class="inline-block rounded-full" aria-label="Edmonton Public Library on Facebook" style="background-color:#1877F2;"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="sm:w-8 sm:h-8 w-10 h-10" viewBox="-7 -7 32 32"> <path d="M12.9023 9.00001L12.5033 11.6016H10.4062V17.8907C14.7088 17.2155 18 13.4922 18 9C18 4.02944 13.9706 3.38232e-06 9 3.38232e-06C4.02943 3.38232e-06 0 4.02944 0 9C0 13.4922 3.29117 17.2155 7.59375 17.8907V11.6016H5.30859V9.00001H7.59375V7.01719C7.59375 6.87622 7.599 6.73919 7.60934 6.60615C7.76449 4.61069 9.06587 3.51563 10.9932 3.51563C11.9779 3.51563 13.0078 3.69141 13.0078 3.69141V5.90626H11.8729C10.7549 5.90626 10.4062 6.60001 10.4062 7.31175V9.00001H12.9023Z" fill="#fff"></path> </svg> </a> <a href="https://twitter.com/EPLdotCA" class="inline-block rounded-full" aria-label="Edmonton Public Library on Twitter" style="background-color:#1da1f2;"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="sm:w-8 sm:h-8 w-10 h-10" viewBox="0 0 32 32"> <path d="M24.0548 12.7342C24.0664 12.897 24.0664 13.0597 24.0664 13.2239C24.0664 18.2284 20.1452 24 12.9752 24V23.997C10.8571 24 8.78306 23.4105 7 22.2991C7.30798 22.3351 7.61751 22.3531 7.92781 22.3539C9.68308 22.3554 11.3882 21.7831 12.7691 20.7295C11.101 20.6987 9.63831 19.642 9.12732 18.0994C9.71164 18.2089 10.3137 18.1864 10.8872 18.0341C9.06866 17.6771 7.76031 16.1247 7.76031 14.3219C7.76031 14.3054 7.76031 14.2896 7.76031 14.2739C8.30217 14.5671 8.90888 14.7298 9.52947 14.7478C7.81666 13.6357 7.28869 11.4218 8.32301 9.6909C10.3021 12.057 13.2222 13.4954 16.3568 13.6477C16.0427 12.3322 16.4718 10.9538 17.4845 10.0291C19.0546 8.59522 21.5238 8.66872 22.9997 10.1934C23.8727 10.0261 24.7094 9.7149 25.4751 9.27393C25.1841 10.1506 24.5751 10.8953 23.7615 11.3685C24.5342 11.2801 25.2891 11.0791 26 10.7723C25.4767 11.5343 24.8175 12.198 24.0548 12.7342Z" fill="#fff"></path> </svg> </a> <a href="https://www.instagram.com/epldotca/" class="inline-block bg-pink-600 rounded-full" aria-label="Edmonton Public Library on Instagram"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="sm:w-8 sm:h-8 w-10 h-10" viewBox="-7 -7 32 32"> <path d="M9.00002 0C6.55575 0 6.24926 0.0103607 5.28931 0.0541611C4.33137 0.0978527 3.67712 0.250008 3.10465 0.472471C2.51282 0.702471 2.01092 1.01021 1.51056 1.51055C1.01022 2.01089 0.702482 2.51283 0.472485 3.10466C0.250009 3.67712 0.0978684 4.33137 0.0541467 5.28931C0.0103548 6.24926 0 6.55575 0 9.00002C0 11.4443 0.0103548 11.7507 0.0541467 12.7107C0.0978684 13.6686 0.250009 14.3229 0.472485 14.8953C0.702482 15.4872 1.01022 15.9891 1.51056 16.4895C2.01092 16.9898 2.51282 17.2975 3.10465 17.5275C3.67712 17.75 4.33137 17.9021 5.28931 17.9458C6.24926 17.9896 6.55575 18 9.00002 18C11.4443 18 11.7507 17.9896 12.7107 17.9458C13.6686 17.9021 14.3229 17.75 14.8953 17.5275C15.4872 17.2975 15.9891 16.9898 16.4895 16.4895C16.9898 15.9891 17.2975 15.4872 17.5275 14.8953C17.75 14.3229 17.9021 13.6686 17.9458 12.7107C17.9896 11.7507 18 11.4443 18 9.00002C18 6.55575 17.9896 6.24926 17.9458 5.28931C17.9021 4.33137 17.75 3.67712 17.5275 3.10466C17.2975 2.51283 16.9898 2.01089 16.4895 1.51055C15.9891 1.01021 15.4872 0.702471 14.8953 0.472471C14.3229 0.250008 13.6686 0.0978527 12.7107 0.0541611C11.7507 0.0103607 11.4443 0 9.00002 0ZM9.00002 1.62162C11.4031 1.62162 11.6878 1.6308 12.6368 1.6741C13.5143 1.71411 13.9908 1.86073 14.3079 1.98398C14.728 2.14725 15.0278 2.34228 15.3428 2.6572C15.6577 2.97215 15.8527 3.27196 16.016 3.69206C16.1393 4.00919 16.2859 4.48574 16.3259 5.36323C16.3692 6.31224 16.3784 6.5969 16.3784 9.00002C16.3784 11.4031 16.3692 11.6878 16.3259 12.6368C16.2859 13.5143 16.1393 13.9908 16.016 14.3079C15.8527 14.728 15.6577 15.0278 15.3428 15.3428C15.0278 15.6577 14.728 15.8528 14.3079 16.016C13.9908 16.1393 13.5143 16.2859 12.6368 16.3259C11.6879 16.3692 11.4033 16.3784 9.00002 16.3784C6.59672 16.3784 6.31213 16.3692 5.36323 16.3259C4.48574 16.2859 4.00919 16.1393 3.69206 16.016C3.27196 15.8528 2.97216 15.6577 2.65723 15.3428C2.3423 15.0278 2.14725 14.728 1.98398 14.3079C1.86073 13.9908 1.71413 13.5143 1.67409 12.6368C1.63079 11.6878 1.62162 11.4031 1.62162 9.00002C1.62162 6.5969 1.63079 6.31224 1.67409 5.36323C1.71413 4.48574 1.86073 4.00919 1.98398 3.69206C2.14725 3.27196 2.34229 2.97215 2.65721 2.65723C2.97216 2.34227 3.27196 2.14725 3.69206 1.98398C4.00919 1.86073 4.48574 1.71411 5.36323 1.6741C6.31224 1.6308 6.5969 1.62162 9.00002 1.62162Z" fill="#fff"></path><path d="M9.00001 12C7.34313 12 5.99999 10.6569 5.99999 9.00003C5.99999 7.34315 7.34313 6.00001 9.00001 6.00001C10.6569 6.00001 12 7.34315 12 9.00003C12 10.6569 10.6569 12 9.00001 12ZM9.00001 4.37839C6.44752 4.37839 4.37837 6.44754 4.37837 9.00003C4.37837 11.5525 6.44752 13.6216 9.00001 13.6216C11.5525 13.6216 13.6216 11.5525 13.6216 9.00003C13.6216 6.44754 11.5525 4.37839 9.00001 4.37839Z" fill="#fff"></path><path d="M14.8842 4.19577C14.8842 4.79225 14.4007 5.27576 13.8042 5.27576C13.2078 5.27576 12.7242 4.79225 12.7242 4.19577C12.7242 3.5993 13.2078 3.11575 13.8042 3.11575C14.4007 3.11575 14.8842 3.5993 14.8842 4.19577Z" fill="#fff"></path> </svg> </a> <a href="https://www.youtube.com/user/edmontonpl" class="inline-block rounded-full" aria-label="Edmonton Public Library on Youtube" style="background:#ED1D24"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="sm:w-8 sm:h-8 w-10 h-10" viewBox="-6 -9 32 32"> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.8139 0.417967C18.6744 0.647951 19.352 1.3256 19.582 2.18614C20 3.74582 20 7 20 7C20 7 20 10.2541 19.582 11.814C19.352 12.6744 18.6744 13.352 17.8139 13.5821C16.2542 14 10 14 10 14C10 14 3.74583 14 2.18612 13.5821C1.32564 13.352 0.647904 12.6744 0.417924 11.814C0 10.2541 0 7 0 7C0 7 0 3.74582 0.417924 2.18614C0.647904 1.3256 1.32564 0.647951 2.18612 0.417967C3.74583 0 10 0 10 0C10 0 16.2542 0 17.8139 0.417967ZM13.1818 7.00013L7.95454 9.95453V4.04546L13.1818 7.00013Z" fill="#fff"></path> </svg> </a> <a href="https://www.linkedin.com/company/edmonton-public-library" class="inline-block rounded-full" aria-label="Edmonton Public Library on LinkedIn" style="background:#2967BC"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="sm:w-8 sm:h-8 w-10 h-10" viewBox="-8 -7 32 32"> <path d="M16 16h-3.3v-5.2c0-1.2 0-2.8-1.7-2.8-1.8 0-2 1.3-2 2.7V16H5.7V5.3h3.1v1.5A3.5 3.5 0 0 1 12 5c3.4 0 4 2.3 4 5.1V16ZM2 3.9c-1.1 0-2-1-2-2S.9 0 2 0c1 0 1.8.9 1.8 2C3.8 3 3 3.8 2 3.8ZM3.5 16H.3V5.3h3.3V16Z" fill="#fff"/> </svg> </a> <a href="https://www.epl.ca/preferences-for-customization/" class="inline-block bg-blue-700 rounded-full" aria-label="Edmonton Public Library Newsletter"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="sm:w-8 sm:h-8 w-10 h-10" viewBox="-6 -9 32 32"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.614035C0 0.274913 0.276367 0 0.617284 0H19.3827C19.7236 0 20 0.274913 20 0.614035V13.386C20 13.7251 19.7236 14 19.3827 14H0.617284C0.276367 14 0 13.7251 0 13.386V0.614035ZM2.16641 1.22807L10 8.61031L17.8336 1.22807H2.16641ZM18.7654 2.04159L13.5039 7L18.7654 11.9584V2.04159ZM17.8336 12.7719L12.6063 7.84583L10.4245 9.9019C10.1864 10.1263 9.81355 10.1263 9.57547 9.9019L7.39369 7.84583L2.16641 12.7719H17.8336ZM1.23457 11.9584V2.04159L6.49614 7L1.23457 11.9584Z" fill="#fff"></path> </svg> </a> </div> <div class="sm:px-4 flex flex-wrap justify-between max-w-screen-xl m-auto text-base"> <div> <div class="mt-4 text-base font-bold">About EPL</div> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/building-projects/">Building Projects</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/business/">Business with EPL</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/digital-privacy/">Digital Privacy</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/board/">EPL Board & Policies</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/faqs/">FAQs</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/leadership/">Leadership</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/policies/">Library Policies</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/vision-mission-values/">Vision, Mission & Values</a> </div> <div> <div class="mt-4 mr-2 text-base font-bold">Membership & Borrowing</div> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/borrowing-guide/">Borrowing Guide</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/membership/#app">EPL Mobile App</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www2.epl.ca/register/?_ga=2.162111164.1211009073.1633359029-133531967.1625511207">Get a Card</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/interlibrary-loans/">Interlibrary Loans</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/membership/">Membership Information</a> <a class="dark:text-stone-200 block text-gray-700" href="https://www.epl.ca/my-account/">My EPL Account</a> </div> <div> <div class="mt-4 mr-2 text-base font-bold">News & Publications</div> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/preferences-for-customization/">eNewsletter</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/blogs/">EPL Blog</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/epl-news/">EPL News</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/reports/">Plans & Reports</a> </div> <div class="mr-4"> <div class="mt-4 text-base font-bold">Careers at EPL</div> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/careers/">Current Postings</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/careers/#students">Student Work Experience</a> <div class="mt-4 text-base font-bold">Support EPL</div> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/customer-stories/">Customer Stories</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/friends/">Friends of EPL</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/give/">Give</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/milner-library/">Hello Milner</a> <a class="dark:text-stone-200 text-stone-700 block" href="https://www.epl.ca/volunteer/">Volunteer</a> </div> <div class="sm:flex sm:w-auto flex-col items-end w-full"> <div> <div class="p-4 mt-4 text-white bg-blue-700"> <div class="text-blue-50 text-lg font-bold">Contact Us</div> <div>Edmonton Public Library</div> <div>7 Sir Winston Churchill <br class="hidden lg:!block">Square NW</div> <div>Edmonton, AB</div> <div>T5J 2V4</div> <div><a href="tel:780-496-7000" class="hover:text-white font-bold text-white underline">780-496-7000</a></div> </div> <div class="w-full mt-4"><a href="https://www2.epl.ca/ContactEPL/" class="btn primary block">Contact EPL</a></div> </div> </div> </div> <div class="flex justify-between mt-4"> <a href="https://interland3.donorperfect.net/weblink/WebLink.aspx?name=E920273QE&id=45" class="btn primary xs:px-3 text-2xl flex items-center px-1 py-1 !font-bold leading-6"> DONATE<br>NOW </a> <div class="mr-4 text-right"> <a class="sm:w-auto text-stone-700 dark:text-stone-200 inline-block w-full mx-1 mt-2 underline" href="https://epl.bibliocommons.com/info/terms/">Terms of Use</a> <a class="sm:w-auto text-stone-700 dark:text-stone-200 inline-block w-full mx-1 mt-2 underline" href="https://epl.bibliocommons.com/info/privacy/">Privacy Statement</a> <a class="sm:w-auto text-stone-700 dark:text-stone-200 inline-block w-full mx-1 mt-2 underline" href="https://epl.bibliocommons.com/info/accessibility/">Accessibility Statement</a> <a class="sm:w-auto text-stone-700 dark:text-stone-200 inline-block w-full mx-1 mt-2 underline" href="https://www.edmonton.ca/">City of Edmonton Website</a> <span class="text-xs">©2024 Edmonton Public Library</span> </div> </div> </div> </footer>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-8HX5BMFYV0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-8HX5BMFYV0'); </script> <div class="backCurtain" id="backCurtain"></div> <div id="OuterPopOver" class="popover"> <a href="javascript:void(0);" class="closeButton" onclick="closePopup();"></a> <div id="InnerPopOver"></div> </div> <script type="text/javascript"> //Loads external content into the InnerPopOver Div, then displays the OuterPopOver div function loadPopOverContent(contentPath, windowWidth, postData) { if (postData) {$('#InnerPopOver').load(contentPath, postData);} else {$('#InnerPopOver').load(contentPath);} if (windowWidth) { document.getElementById('OuterPopOver').style.width=windowWidth; document.getElementById('OuterPopOver').style.margin='auto'; } $('#OuterPopOver').fadeIn(400); $('#backCurtain').fadeIn(300); } //Accepts some HTML in first parameter and a width as the second parameter, shows it in a modal popup function showPopOver(content, windowWidth) { if (windowWidth) { document.getElementById('OuterPopOver').style.width=windowWidth; document.getElementById('OuterPopOver').style.margin='auto'; } $('#InnerPopOver').html(content); $('#OuterPopOver').fadeIn(400); $('#backCurtain').fadeIn(300); } //Fades out the popup function closePopup() { $('#OuterPopOver').fadeOut(300); $('#backCurtain').fadeOut(300); //Erase the contents of the popover after fadeout so you don't end up with stale data window.setTimeout(function(){$('#InnerPopOver').html('');},500); } //Ensures that clicks outside of the box close it. function revealEscHelp() {$('#escHelp').show();} //When the user presses escape, closes the popup $(document).keyup(function(event) {if(event.which === 27) closePopup();}); //Clicks on the background close the popup $('#backCurtain').click(function(){closePopup();}); //Mousing over the button shows 'press escape' help text. You can get rid of this if it looks cluttery. $('.closeButton').mouseenter(function(){$('#escHelp').show();}); $('.closeButton').mouseleave(function(){$('#escHelp').hide();}); //Handles click on close button $('.closeButton').click(function(){closePopup();}); function toggleDarkMode() { const htmlEl = document.querySelector('html'); htmlEl.classList.toggle('dark'); if (htmlEl.classList.contains('dark')) localStorage.theme = 'dark'; else localStorage.theme = 'light'; } </script> </body> </html>

CINXE.COM

EPL - Chat with EPL Staff