{"id":18771,"date":"2024-12-19T01:54:17","date_gmt":"2024-12-19T01:54:17","guid":{"rendered":"https:\/\/pathfinder2e.org\/rpg\/?page_id=18771"},"modified":"2025-11-15T03:41:34","modified_gmt":"2025-11-15T03:41:34","slug":"add-2e-monsters","status":"publish","type":"page","link":"https:\/\/pathfinder2e.org\/rpg\/add-2e-monsters\/","title":{"rendered":"AD&amp;D 2e Monsters"},"content":{"rendered":"<div class=\"monster-compendium\">\r\n    <!-- Loading message shown while AJAX loads data -->\r\n    <div id=\"monster-loading\" style=\"text-align: center; padding: 40px; font-size: 18px; background: #f9f9f9; border: 2px solid #ddd; border-radius: 8px;\">\r\n        <strong>Loading Monster Database...<\/strong><br>\r\n        <small>Please wait while we fetch the monster data.<\/small>\r\n        <div style=\"margin-top: 15px;\">\r\n            <div style=\"display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;\"><\/div>\r\n        <\/div>\r\n        <div id=\"loading-details\" style=\"margin-top: 15px; font-size: 12px; color: #666;\">\r\n            Initializing...\r\n        <\/div>\r\n        <style>\r\n        @keyframes spin {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n        <\/style>\r\n    <\/div>\r\n    \r\n    <!-- Main interface - hidden until data loads -->\r\n    <div id=\"monster-interface\" style=\"display: none;\">\r\n        <!-- Search Bar -->\r\n        <input type=\"text\" id=\"monster-search\" \r\n               placeholder=\"Search monsters...\" \r\n               style=\"margin-bottom: 10px; padding: 8px; width: 100%; box-sizing: border-box; font-size: 16px;\">\r\n\r\n        <!-- Monsters Per Page Dropdown and Filters -->\r\n        <div id=\"monster-filters-container\">\r\n            <label for=\"monsters-per-page\" style=\"font-size: 16px;\">Show:<\/label>\r\n            <select id=\"monsters-per-page\" style=\"padding: 5px; font-size: 16px;\">\r\n                <option value=\"15\" selected>15<\/option>\r\n                <option value=\"25\">25<\/option>\r\n                <option value=\"50\">50<\/option>\r\n                <option value=\"75\">75<\/option>\r\n                <option value=\"100\">100<\/option>\r\n            <\/select>\r\n            <span style=\"font-size: 16px;\">monsters per page<\/span>\r\n            <button id=\"toggle-filters-btn\">Collapse Filters<\/button>\r\n            \r\n            <div class=\"monster-filters\">\r\n                <h3 class=\"filter-heading\">Advanced Filters<\/h3>\r\n                <div class=\"filters-grid\">\r\n                    <!-- XP Range Filter -->\r\n                    <div class=\"filter-card\">\r\n                        <label class=\"filter-label\">XP Range: <span id=\"xp-range-display\">0 - 100,000<\/span><\/label>\r\n                        <div class=\"double-range-slider\">\r\n                            <input type=\"range\" id=\"min-xp\" class=\"range-input min\" min=\"0\" max=\"100000\" step=\"100\" value=\"0\">\r\n                            <input type=\"range\" id=\"max-xp\" class=\"range-input max\" min=\"0\" max=\"100000\" step=\"100\" value=\"100000\">\r\n                            <div class=\"slider-track\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Climate\/Terrain Filter -->\r\n                    <div class=\"filter-card\">\r\n                        <label class=\"filter-label\">Climate\/Terrain<\/label>\r\n                        <div class=\"custom-multiselect\">\r\n                            <div class=\"multiselect-header\">\r\n                                <input type=\"text\" class=\"multiselect-search\" placeholder=\"Search climates...\">\r\n                            <\/div>\r\n                            <div class=\"selected-options\" id=\"selected-climates\"><\/div>\r\n                            <div class=\"multiselect-dropdown\" id=\"climate-options\">\r\n                                <!-- Options populated by JS -->\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Frequency Filter -->\r\n                    <div class=\"filter-card\">\r\n                        <label class=\"filter-label\">Frequency<\/label>\r\n                        <div class=\"custom-multiselect\">\r\n                            <div class=\"multiselect-header\">\r\n                                <input type=\"text\" class=\"multiselect-search\" placeholder=\"Search frequencies...\">\r\n                            <\/div>\r\n                            <div class=\"selected-options\" id=\"selected-frequencies\"><\/div>\r\n                            <div class=\"multiselect-dropdown\" id=\"frequency-options\">\r\n                                <!-- Options populated by JS -->\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Hit Dice Range -->\r\n                    <div class=\"filter-card\">\r\n                        <label class=\"filter-label\">Hit Dice Range: <span id=\"hd-range-display\">0 - 20<\/span><\/label>\r\n                        <div class=\"double-range-slider\">\r\n                            <input type=\"range\" id=\"min-hd\" class=\"range-input min\" min=\"0\" max=\"20\" step=\"1\" value=\"0\">\r\n                            <input type=\"range\" id=\"max-hd\" class=\"range-input max\" min=\"0\" max=\"20\" step=\"1\" value=\"20\">\r\n                            <div class=\"slider-track\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Armor Class Range -->\r\n                    <div class=\"filter-card\">\r\n                        <label class=\"filter-label\">Armor Class Range: <span id=\"ac-range-display\">-10 - 10<\/span><\/label>\r\n                        <div class=\"double-range-slider\">\r\n                            <input type=\"range\" id=\"min-ac\" class=\"range-input min\" min=\"-10\" max=\"10\" step=\"1\" value=\"-10\">\r\n                            <input type=\"range\" id=\"max-ac\" class=\"range-input max\" min=\"-10\" max=\"10\" step=\"1\" value=\"10\">\r\n                            <div class=\"slider-track\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"filter-actions\">\r\n                    <button id=\"apply-filters\" class=\"filter-button apply\">Apply Filters<\/button>\r\n                    <button id=\"reset-filters\" class=\"filter-button reset\">Reset Filters<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Pagination Top -->\r\n        <div id=\"pagination-top\" style=\"margin-bottom: 10px; text-align: center;\"><\/div>\r\n\r\n        <!-- Monster Table -->\r\n        <table id=\"monster-table\" style=\"width: 100%; border-collapse: collapse; margin-bottom: 15px; font-family: Arial, sans-serif;\">\r\n            <thead>\r\n                <tr style=\"background-color: #333; color: #fff;\">\r\n                    <th style=\"padding: 10px; text-align: left; border-bottom: 2px solid #222;\">Name<\/th>\r\n                    <th style=\"padding: 0px !important; text-align: center; border-bottom: 2px solid #222;\">Image<\/th>\r\n                    <th style=\"padding: 10px; text-align: center; border-bottom: 2px solid #222;\">Hit Dice<\/th>\r\n                    <th style=\"padding: 10px; text-align: center; border-bottom: 2px solid #222;\">Armor Class<\/th>\r\n                    <th style=\"padding: 10px; text-align: center; border-bottom: 2px solid #222;\">THAC0<\/th>\r\n                    <th style=\"padding: 10px; text-align: left; border-bottom: 2px solid #222;\">Climate\/Terrain<\/th>\r\n                    <th style=\"padding: 10px; text-align: center; border-bottom: 2px solid #222;\">Frequency<\/th>\r\n                    <th style=\"padding: 10px; text-align: center; border-bottom: 2px solid #222;\">XP Value<\/th>\r\n                <\/tr>\r\n            <\/thead>\r\n            <tbody id=\"monster-table-body\" style=\"background-color: #f9f9f9;\">\r\n                <!-- Rows dynamically generated here -->\r\n            <\/tbody>\r\n        <\/table>\r\n\r\n        <!-- Pagination Bottom -->\r\n        <div id=\"pagination-bottom\" style=\"margin-top: 10px; text-align: center;\"><\/div>\r\n\r\n        <!-- Modal for displaying monster details -->\r\n        <div id=\"monster-modal\">\r\n            <div id=\"monster-modal-content\">\r\n                <span id=\"close-modal\">&times;<\/span>\r\n                <div id=\"monster-details\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Image Modal -->\r\n        <div id=\"image-modal\" class=\"modal\">\r\n            <div id=\"image-modal-content\" class=\"modal-content\">\r\n                <span id=\"close-image-modal\" class=\"modal-close\">&times;<\/span>\r\n                <img decoding=\"async\" id=\"modal-image\" src=\"\" alt=\"\" style=\"width: 100%; height: auto;\">\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Large Image Popup -->\r\n        <div id=\"large-image-modal\" class=\"large-image-modal\">\r\n            <span id=\"close-large-image\" class=\"close-large-image\">&times;<\/span>\r\n            <img decoding=\"async\" id=\"large-image\" class=\"large-image\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" alt=\"Large Monster Image\">\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n    \n\n\n\n<p>A catalogue of Advanced Dungeons and Dragons 2nd edition monsters.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A catalogue of Advanced Dungeons and Dragons 2nd edition monsters.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18771","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/pages\/18771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/comments?post=18771"}],"version-history":[{"count":1,"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/pages\/18771\/revisions"}],"predecessor-version":[{"id":20703,"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/pages\/18771\/revisions\/20703"}],"wp:attachment":[{"href":"https:\/\/pathfinder2e.org\/rpg\/wp-json\/wp\/v2\/media?parent=18771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}