diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css
index 712364856..01a247c08 100644
--- a/resources/css/csp-safe.css
+++ b/resources/css/csp-safe.css
@@ -501,6 +501,77 @@ code.api-token::-webkit-scrollbar-thumb:hover {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5);
}
+/* Image Modal Styles */
+.image-modal-backdrop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99999;
+ background-color: rgba(0, 0, 0, 0.9);
+ backdrop-filter: blur(4px);
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+}
+
+.image-modal-backdrop.hidden {
+ display: none !important;
+}
+
+.image-modal-backdrop:not(.hidden) {
+ display: flex;
+ animation: fadeIn 0.3s ease-out;
+}
+
+.image-modal-backdrop:not(.hidden) .image-modal-container {
+ animation: modalSlideIn 0.3s ease-out;
+}
+
+.image-modal-container {
+ position: relative;
+ max-width: 90vw;
+ max-height: 90vh;
+}
+
+.image-modal-close {
+ position: absolute;
+ top: -3rem;
+ right: 0;
+ background-color: rgba(255, 255, 255, 0.1);
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ font-size: 1.25rem;
+}
+
+.image-modal-close:hover {
+ background-color: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: scale(1.1);
+}
+
+/* NFO Modal Styles */
+#nfoModal {
+ display: none;
+}
+
+#nfoModal.hidden {
+ display: none !important;
+}
+
+#nfoModal:not(.hidden) {
+ display: block;
+}
+
.confirmation-modal-footer .btn-confirm:active {
transform: translateY(0);
}
diff --git a/resources/js/csp-safe.js b/resources/js/csp-safe.js
index 885371d71..0fe5744e4 100644
--- a/resources/js/csp-safe.js
+++ b/resources/js/csp-safe.js
@@ -423,6 +423,7 @@ function initNfoModal() {
// Show modal
modal.classList.remove('hidden');
+ modal.style.display = 'block';
// Reset content with loading message
content.innerHTML = 'Loading NFO...
';
@@ -453,6 +454,7 @@ function initNfoModal() {
const modal = document.getElementById('nfoModal');
if (modal) {
modal.classList.add('hidden');
+ modal.style.display = 'none';
}
};
@@ -2316,6 +2318,131 @@ function showExpiryToast(message, type) {
}, 3000);
}
+// Page-specific initialization functions
+function initMyMovies() {
+ // Placeholder for MyMovies page specific functionality
+ // Currently no additional functionality needed
+}
+
+function initAuthPages() {
+ // Placeholder for auth pages specific functionality
+ // Currently no additional functionality needed
+}
+
+function initProfileEdit() {
+ // Placeholder for profile edit page specific functionality
+ // Currently no additional functionality needed
+}
+
+function initDetailsPageImageModal() {
+ // Handle image modal triggers on release details page
+ const imageModalTriggers = document.querySelectorAll('.image-modal-trigger');
+ const imageModal = document.getElementById('imageModal');
+ const imageModalImage = document.getElementById('imageModalImage');
+ const imageModalTitle = document.getElementById('imageModalTitle');
+ const closeButtons = document.querySelectorAll('[data-close-image-modal]');
+
+ if (!imageModal || !imageModalImage || !imageModalTitle) {
+ return; // Not on the details page
+ }
+
+ // Add click handlers to image triggers
+ imageModalTriggers.forEach(function(trigger) {
+ trigger.addEventListener('click', function(e) {
+ e.preventDefault();
+ const imageUrl = this.getAttribute('data-image-url');
+ const imageTitle = this.getAttribute('data-image-title') || 'Image Preview';
+
+ // Update the full image URL (replace _thumb with the full image)
+ const fullImageUrl = imageUrl.replace('_thumb.jpg', '.jpg');
+
+ imageModalImage.src = fullImageUrl;
+ imageModalTitle.textContent = imageTitle;
+ imageModal.classList.remove('hidden');
+ imageModal.style.display = 'flex';
+ });
+ });
+
+ // Add click handler to close button
+ closeButtons.forEach(function(closeBtn) {
+ closeBtn.addEventListener('click', function(e) {
+ e.preventDefault();
+ imageModal.classList.add('hidden');
+ imageModal.style.display = 'none';
+ });
+ });
+
+ // Close modal when clicking on backdrop
+ imageModal.addEventListener('click', function(e) {
+ if (e.target === imageModal) {
+ imageModal.classList.add('hidden');
+ imageModal.style.display = 'none';
+ }
+ });
+
+ // Close modal with Escape key
+ document.addEventListener('keydown', function(e) {
+ if (e.key === 'Escape' && !imageModal.classList.contains('hidden')) {
+ imageModal.classList.add('hidden');
+ imageModal.style.display = 'none';
+ }
+ });
+}
+
+function initAddToCart() {
+ // Add to cart functionality is already handled in initCartFunctionality()
+ // This is just a placeholder for backward compatibility
+}
+
+function initMoviesLayoutToggle() {
+ // Placeholder for movies layout toggle functionality
+ // Currently no additional functionality needed
+}
+
+function initProfilePage() {
+ // Placeholder for profile page specific functionality
+ // Progress bars and charts are handled elsewhere
+}
+
+function initMobileEnhancements() {
+ // Handle mobile-specific enhancements
+ const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle');
+ if (mobileSidebarToggle) {
+ mobileSidebarToggle.addEventListener('click', function() {
+ const sidebar = document.getElementById('sidebar');
+ if (sidebar) {
+ sidebar.classList.toggle('hidden');
+ sidebar.classList.toggle('flex');
+ }
+ });
+ }
+}
+
+function initAdminDashboardCharts() {
+ // Placeholder for admin dashboard charts
+ // Chart initialization happens when the admin dashboard loads
+}
+
+function initAdminGroups() {
+ // Placeholder for admin groups functionality
+ // Group management is handled in event delegation
+}
+
+function initTinyMCE() {
+ // Placeholder for TinyMCE initialization
+ // TinyMCE is loaded separately when needed
+}
+
+function initAdminSpecificFeatures() {
+ // Placeholder for admin-specific features
+ // Most admin features are handled in dedicated functions
+}
+
+function initRecentActivityRefresh() {
+ // Placeholder for recent activity auto-refresh
+ // Activity refresh is handled on the admin dashboard
+}
+
// Theme Management (moved from main.blade.php)
function initThemeManagement() {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
diff --git a/resources/views/details/index.blade.php b/resources/views/details/index.blade.php
index 64ec84f38..f8e1c6794 100644
--- a/resources/views/details/index.blade.php
+++ b/resources/views/details/index.blade.php
@@ -922,7 +922,7 @@
@endsection
-
+