add id=pages to class pages, updated pageContainer to target id=pages, removed redundant event listerners

storeUI.html

@@ -542,7 +542,7 @@ div[contenteditable="true"] p::first-letter {
              </div>
         </div>
         <div class="page-container" id="pageContainer">
-            <div class="brewRenderer">
+            <div class="brewRenderer" id="brewRenderer">
                 <h1>Describe your creature</h1>
                 <textarea id="user-description" class="user-description-textarea"
                     hx-post="/update-stats" hx-trigger="change"
@@ -552,7 +552,7 @@ div[contenteditable="true"] p::first-letter {
                     <button id="parseHTML">Parse HTML</button>
                     <button id="resetButton">Reset</button>
                     <button onclick="printPageContainer()">Print to PDF</button>
-                <div class="pages">
+                <div class="pages" id="pages">
                     <div id="page-1" class="page" data-page-id="page-0">
                         <div class="columnWrapper">
                             <div class="block monster frame wide">
@@ -577,7 +577,7 @@ div[contenteditable="true"] p::first-letter {
         document.addEventListener("DOMContentLoaded", function() {
             const blockContainer = document.getElementById('blockContainer');
             let blockContainerPage = document.getElementById('block-page');
-            const pageContainer = document.getElementById('pageContainer');
+            const pageContainer = document.getElementById('pages');
             const trashArea = document.getElementById('trashArea');
             const resetButton = document.getElementById('resetButton');
             let currentPage = pageContainer.querySelector('.block.monster.frame.wide');
@@ -666,7 +666,7 @@ div[contenteditable="true"] p::first-letter {
         });
             // Print Function
             window.printPageContainer = function() {
-                var pageContainer = document.getElementById('pageContainer');
+                var pageContainer = document.getElementById('pages');
                 if (pageContainer) {
                     var printContents = pageContainer.innerHTML;
                     var originalContents = document.body.innerHTML;
@@ -1293,13 +1293,6 @@ div[contenteditable="true"] p::first-letter {
                 console.log('Trash leave event');
             }
 
-            currentPage.addEventListener('dragover', handleDragOver);
-            currentPage.addEventListener('drop', handleDrop);
-
-            trashArea.addEventListener('dragover', handleTrashOver);
-            trashArea.addEventListener('dragleave', handleTrashLeave);
-            trashArea.addEventListener('drop', handleTrashDrop);
-
             function handleReset() {
                 console.log('Reset button clicked');