{"id":615,"date":"2024-08-23T13:59:12","date_gmt":"2024-08-23T11:59:12","guid":{"rendered":"https:\/\/momentu.net\/albuma-sortu\/"},"modified":"2025-09-26T13:24:12","modified_gmt":"2025-09-26T11:24:12","slug":"albuma-sortu","status":"publish","type":"page","link":"https:\/\/momentu.net\/eu\/albuma-sortu\/","title":{"rendered":"Albuma Sortu"},"content":{"rendered":"
\n\n\n \n \n Albuma Sortu<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.6.1\/cropper.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: #fafafa;\n color: #333;\n line-height: 1.5;\n min-height: 100vh;\n }\n\n body.no-scroll {\n overflow: hidden;\n }\n\n .container {\n width: 100%;\n margin: 0 auto;\n padding: 0 16px;\n }\n\n .container_success {\n max-width: 720px;\n margin: 0 auto;\n min-height: 80vh;\n padding: 80px 24px;\n text-align: center;\n display: none;\n }\n\n h1 {\n font-size: 2rem;\n font-weight: 600;\n color: #111;\n margin-bottom: 32px;\n letter-spacing: -0.01em;\n text-align: center;\n }\n\n .form-section {\n background: white;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 20px;\n border: 1px solid #e5e5e5;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group:last-child {\n margin-bottom: 0;\n }\n\n .form-group label {\n display: block;\n font-weight: 500;\n margin-bottom: 6px;\n color: #333;\n font-size: 0.95rem;\n }\n\n .form-group input[type=\"email\"],\n .form-group input[type=\"text\"] {\n width: 100%;\n padding: 12px 16px;\n font-size: 0.95rem;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n background: #fff;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n font-family: inherit;\n }\n\n .form-group input[type=\"email\"]:focus,\n .form-group input[type=\"text\"]:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n\n .form-submitted .form-group input:invalid {\n border-color: #ef4444;\n }\n\n .form-submitted .form-group input:invalid:focus {\n border-color: #ef4444;\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n }\n\n .checkbox-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n }\n\n .checkbox-wrapper input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n accent-color: #3b82f6;\n }\n\n .checkbox-wrapper label {\n font-size: 0.9rem;\n font-weight: 400;\n color: #666;\n margin: 0;\n }\n\n \/* Cover Image Section - Optimized Layout *\/\n .cover-preview-container {\n display: flex;\n justify-content: center;\n margin: 12px 0 0;\n }\n\n .cover-preview {\n width: 160px;\n height: 213px;\n border: 2px dashed #d1d5db;\n border-radius: 12px;\n background: #f9fafb;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n overflow: hidden;\n position: relative;\n }\n\n .cover-preview:hover {\n border-color: #3b82f6;\n background: #f0f9ff;\n }\n\n .cover-preview.has-image {\n border-style: solid;\n border-color: #e5e5e5;\n }\n\n .cover-preview img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 10px;\n display: block;\n }\n\n .cover-placeholder {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #6b7280;\n font-weight: 400;\n height: 100%;\n pointer-events: none;\n text-align: center;\n }\n\n .cover-placeholder svg {\n margin-bottom: 8px;\n opacity: 0.6;\n display: block;\n }\n\n .cover-placeholder p {\n margin: 0;\n font-size: 0.85rem;\n }\n\n .edit-cover-btn {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.7);\n color: white;\n cursor: pointer;\n display: none;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n }\n\n .edit-cover-btn:hover {\n background: rgba(0, 0, 0, 0.8);\n transform: scale(1.05);\n }\n\n .cover-preview-container:hover .edit-cover-btn {\n display: flex;\n }\n\n \/* Photo Format Options - Compact Layout *\/\n .format-options {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin: 12px 0 0;\n }\n\n .format-option {\n cursor: pointer;\n }\n\n .format-option input {\n display: none;\n }\n\n .format-card {\n border: 2px solid #e5e5e5;\n border-radius: 8px;\n padding: 12px;\n text-align: center;\n transition: all 0.2s ease;\n background: white;\n position: relative;\n overflow: hidden;\n }\n\n .format-card:hover {\n border-color: #3b82f6;\n transform: translateY(-1px);\n box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);\n }\n\n .format-option input:checked + .format-card {\n border-color: #3b82f6;\n background: #f8faff;\n box-shadow: 0 2px 12px rgba(59, 130, 246, 0.12);\n }\n\n .format-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .format-card h4 {\n font-weight: 600;\n color: #111;\n font-size: 0.85rem;\n margin: 0;\n }\n\n .format-check {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #3b82f6;\n color: white;\n font-size: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n opacity: 0;\n transform: scale(0.8);\n transition: all 0.2s ease;\n }\n\n .format-option input:checked + .format-card .format-check {\n opacity: 1;\n transform: scale(1);\n }\n\n .format-card img {\n width: 100%;\n max-width: 140px;\n height: auto;\n border-radius: 4px;\n margin: 0 0 8px;\n box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);\n }\n\n .format-card p {\n font-size: 0.75rem;\n color: #666;\n line-height: 1.2;\n margin: 0;\n }\n\n .format-option input:checked + .format-card p {\n color: #444;\n }\n\n \/* Upload Section - Compact *\/\n .upload-section {\n text-align: center;\n }\n\n .upload-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 14px 24px;\n font-size: 0.95rem;\n font-weight: 500;\n border: 2px dashed #3b82f6;\n border-radius: 8px;\n background: #f0f9ff;\n color: #3b82f6;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n margin-bottom: 12px;\n }\n\n .upload-btn:hover {\n background: #dbeafe;\n border-color: #2563eb;\n }\n\n .help-text {\n font-size: 0.8rem;\n color: #666;\n margin: 6px 0;\n line-height: 1.4;\n }\n\n \/* Enhanced Photo Preview Grid - Better Mobile Layout *\/\n .preview-container {\n background: white;\n border-radius: 12px;\n padding: 16px;\n margin: 16px 0;\n border: 1px solid #e5e5e5;\n min-height: 100px;\n }\n\n .preview-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n gap: 10px;\n }\n\n .preview-item {\n position: relative;\n background: white;\n border-radius: 8px;\n overflow: hidden;\n border: 1px solid #f3f4f6;\n transition: all 0.2s ease;\n cursor: grab;\n aspect-ratio: 1;\n }\n\n .preview-item:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n border-color: #3b82f6;\n }\n\n .preview-item:active {\n cursor: grabbing;\n transform: scale(0.98);\n }\n\n .preview-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .preview-number {\n position: absolute;\n top: 4px;\n left: 4px;\n width: 18px;\n height: 18px;\n background: rgba(0, 0, 0, 0.8);\n color: white;\n border-radius: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n font-weight: 600;\n font-family: inherit;\n }\n\n .delete-btn {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 18px;\n height: 18px;\n border: none;\n border-radius: 9px;\n background: rgba(239, 68, 68, 0.9);\n color: white;\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transform: scale(0.8);\n transition: all 0.2s ease;\n }\n\n .preview-item:hover .delete-btn {\n opacity: 1;\n transform: scale(1);\n }\n\n .delete-btn:hover {\n background: rgba(239, 68, 68, 1);\n transform: scale(1.05);\n }\n\n \/* Mobile delete button visibility - hide by default on touch devices *\/\n @media (hover: none) and (pointer: coarse) {\n .delete-btn {\n opacity: 0;\n transform: scale(0.8);\n background: rgba(239, 68, 68, 0.8);\n }\n\n \/* Show delete button only when preview item is tapped\/active *\/\n .preview-item:active .delete-btn,\n .preview-item.show-controls .delete-btn {\n opacity: 1;\n transform: scale(1);\n }\n\n .edit-cover-btn {\n opacity: 0;\n }\n\n .cover-preview:active .edit-cover-btn,\n .cover-preview.show-controls .edit-cover-btn {\n opacity: 1;\n }\n }\n\n \/* Submit Button *\/\n .submit-btn {\n width: 100%;\n padding: 16px 24px;\n font-size: 1rem;\n font-weight: 600;\n border: none;\n border-radius: 8px;\n background: #111;\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n margin-top: 24px;\n }\n\n .submit-btn:hover {\n background: #000;\n transform: translateY(-1px);\n }\n\n .submit-btn:active {\n transform: translateY(0);\n }\n\n \/* Progress Section *\/\n .progress-container {\n margin: 40px 0;\n }\n\n .progress-bar {\n width: 100%;\n height: 6px;\n background: #f3f4f6;\n border-radius: 3px;\n overflow: hidden;\n margin: 16px 0;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #3b82f6, #06b6d4);\n border-radius: 3px;\n transition: width 0.3s ease;\n width: 0%;\n }\n\n .progress-text {\n font-weight: 600;\n color: #111;\n text-align: center;\n }\n\n .success-message {\n display: none;\n }\n\n .success-message h3 {\n font-size: 1.5rem;\n font-weight: 600;\n color: #059669;\n margin-bottom: 16px;\n }\n\n .success-message p {\n font-size: 1rem;\n color: #666;\n margin: 8px 0;\n }\n\n \/* Crop Modal - Enhanced for Mobile Stability *\/\n .crop-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.9);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .crop-modal.show {\n opacity: 1;\n }\n\n .crop-container {\n background: white;\n border-radius: 12px;\n overflow: hidden;\n max-width: 90vw;\n max-height: 90vh;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n transform: scale(0.9);\n transition: transform 0.3s ease;\n }\n\n .crop-modal.show .crop-container {\n transform: scale(1);\n }\n\n .crop-header {\n background: #f9fafb;\n padding: 16px 20px;\n border-bottom: 1px solid #e5e5e5;\n }\n\n .crop-title {\n color: #111;\n font-size: 1.1rem;\n font-weight: 600;\n text-align: center;\n margin: 0;\n }\n\n .crop-image-container {\n background: #f3f4f6;\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 300px;\n max-height: 60vh;\n position: relative;\n }\n\n .crop-image {\n max-width: 100%;\n max-height: 100%;\n border-radius: 8px;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .crop-image.loaded {\n opacity: 1;\n }\n\n .crop-loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #666;\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .crop-loading::before {\n content: '';\n width: 16px;\n height: 16px;\n border: 2px solid #e5e5e5;\n border-top: 2px solid #3b82f6;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .crop-controls {\n background: #f9fafb;\n padding: 16px 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n }\n\n .crop-btn {\n padding: 12px 20px;\n border: none;\n border-radius: 6px;\n font-size: 0.95rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n min-width: 80px;\n position: relative;\n }\n\n .crop-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n .crop-cancel {\n background: white;\n color: #666;\n border: 1px solid #d1d5db;\n }\n\n .crop-cancel:hover:not(:disabled) {\n background: #f9fafb;\n border-color: #9ca3af;\n }\n\n .crop-accept {\n background: #3b82f6;\n color: white;\n }\n\n .crop-accept:hover:not(:disabled) {\n background: #2563eb;\n }\n\n .crop-accept.processing::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n border: 2px solid transparent;\n border-top: 2px solid currentColor;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n margin-left: 8px;\n }\n\n \/* Hidden inputs *\/\n input[type=\"file\"] {\n display: none;\n }\n\n \/* Enhanced Mobile Experience - Improved Quality and Layout *\/\n @media (max-width: 768px) {\n .container, .container_success {\n padding: 20px 12px;\n }\n\n h2 {\n font-size: 1.5rem;\n margin-bottom: 24px;\n }\n\n .form-section {\n padding: 20px 16px;\n margin-bottom: 16px;\n border-radius: 10px;\n }\n\n .format-options {\n grid-template-columns: 1fr;\n gap: 10px;\n }\n\n .format-card {\n padding: 14px;\n }\n\n .format-card img {\n max-width: 180px;\n }\n\n \/* Better mobile preview grid - higher quality *\/\n .preview-grid {\n grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));\n gap: 8px;\n }\n\n .preview-container {\n padding: 12px;\n margin: 12px 0;\n border-radius: 10px;\n }\n\n .crop-container {\n max-width: 95vw;\n max-height: 95vh;\n border-radius: 10px;\n }\n\n .crop-controls {\n flex-direction: row;\n gap: 10px;\n padding: 14px 16px;\n }\n\n .crop-btn {\n flex: 1;\n padding: 12px 16px;\n font-size: 0.95rem;\n }\n\n .cover-preview {\n width: 140px;\n height: 187px;\n }\n\n .edit-cover-btn {\n width: 26px;\n height: 26px;\n top: 6px;\n right: 6px;\n }\n\n \/* Better touch targets for mobile *\/\n .upload-btn {\n padding: 16px 24px;\n font-size: 1rem;\n min-height: 48px;\n }\n\n .submit-btn {\n padding: 18px 24px;\n font-size: 1.1rem;\n min-height: 52px;\n }\n\n \/* Improved form inputs for mobile *\/\n .form-group input[type=\"email\"],\n .form-group input[type=\"text\"] {\n padding: 14px 16px;\n font-size: 1rem;\n min-height: 48px;\n }\n\n \/* Compact spacing for mobile *\/\n .form-group {\n margin-bottom: 16px;\n }\n\n .form-group label {\n font-size: 0.9rem;\n margin-bottom: 6px;\n }\n\n .help-text {\n font-size: 0.8rem;\n margin: 6px 0;\n }\n }\n\n @media (max-width: 480px) {\n .container, .container_success {\n padding: 16px 10px;\n }\n\n h2 {\n font-size: 1.4rem;\n margin-bottom: 20px;\n }\n\n .form-section {\n padding: 16px 14px;\n margin-bottom: 14px;\n }\n\n .format-card {\n padding: 12px;\n }\n\n .format-card img {\n max-width: 180px;\n }\n\n \/* Very high quality mobile preview *\/\n .preview-grid {\n grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\n gap: 6px;\n }\n\n .preview-container {\n padding: 10px;\n margin: 10px 0;\n }\n\n .cover-preview {\n width: 120px;\n height: 160px;\n }\n\n \/* Extra large touch targets for small screens *\/\n .upload-btn {\n padding: 18px 24px;\n font-size: 1.05rem;\n }\n\n .submit-btn {\n padding: 20px 24px;\n font-size: 1.15rem;\n }\n\n \/* Adjust text sizes for readability *\/\n .format-card h4 {\n font-size: 0.8rem;\n }\n\n .format-card p {\n font-size: 0.7rem;\n }\n\n .form-group {\n margin-bottom: 14px;\n }\n }\n\n \/* Sortable styles *\/\n .sortable-ghost {\n opacity: 0.4;\n }\n\n .sortable-chosen {\n transform: scale(1.02);\n z-index: 10;\n }\n\n .sortable-drag {\n transform: rotate(2deg);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n }\n\n \/* Loading states *\/\n .upload-btn:disabled,\n .submit-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none !important;\n }\n\n \/* Focus styles *\/\n .crop-btn:focus,\n .upload-btn:focus,\n .submit-btn:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n }\n\n \/* Empty state for preview *\/\n .preview-empty {\n grid-column: 1 \/ -1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100px;\n color: #9ca3af;\n font-size: 0.85rem;\n border: 2px dashed #e5e7eb;\n border-radius: 8px;\n background: #fafafa;\n }\n\n \/* Hide preview items until image is loaded *\/\n .preview-item {\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .preview-item.loaded {\n opacity: 1;\n }\n\n \/* Smooth transitions *\/\n * {\n transition: background-color 0.2s ease, border-color 0.2s ease, \n box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;\n }\n\n \/* Accessibility *\/\n @media (prefers-reduced-motion: reduce) {\n * {\n transition: none !important;\n animation: none !important;\n }\n }\n\n \/* Enhanced stability improvements *\/\n .cropper-container {\n user-select: none;\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n touch-action: manipulation;\n }\n\n \/* Prevent crashes on navigation *\/\n .crop-modal.closing {\n pointer-events: none;\n opacity: 0;\n }\n\n \/* Force GPU acceleration for smoother mobile performance *\/\n .crop-modal,\n .crop-container,\n .cropper-container {\n transform: translateZ(0);\n -webkit-transform: translateZ(0);\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n }\n <\/style>\n\n\n <!-- Crop Modal -->\n <div id=\"cropModal\" class=\"crop-modal\">\n <div class=\"crop-container\">\n <div class=\"crop-header\">\n <h3 class=\"crop-title\">Azala doitu<\/h3>\n <\/div>\n <div class=\"crop-image-container\">\n <div class=\"crop-loading\" id=\"cropLoading\">Kargatzen...<\/div>\n <img id=\"cropImage\" class=\"crop-image\" alt=\"Moztu beharreko irudia\">\n <\/div>\n <div class=\"crop-controls\">\n <button id=\"cancelCrop\" class=\"crop-btn crop-cancel\">Ezeztatu<\/button>\n<button id=\"acceptCrop\" class=\"crop-btn crop-accept\">Prest<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Success Container -->\n <div class=\"container_success\" id=\"containerSuccess\">\n <div class=\"progress-container\" id=\"progressContainer\">\n <div class=\"progress-text\" id=\"progressText\">Prestatzen...<\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\n <\/div>\n <p class=\"help-text\">Ia prest...ez itxi leihoa.<\/p>\n <\/div>\n <div id=\"successMessage\" class=\"success-message\">\n <h3>Dena prest!<\/h3>\n <p>Minutu gutxitan PDF-a jasoko duzu zure korreoan.<\/p>\n <\/div> \n <\/div>\n\n <!-- Main Container -->\n <div class=\"container\" id=\"mainContainer\">\n <h1>Albuma Sortu<\/h1> \n <!-- First section: Email and Title -->\n <div class=\"form-section\">\n <div class=\"form-group\">\n <label for=\"email\">Korreo elektronikoa<\/label>\n <input type=\"email\" id=\"email\" placeholder=\"tu@email.com\" required=\"\">\n <\/div>\n <\/div>\n\n <!-- Second section: Cover Image and Photo Format -->\n <div class=\"form-section\">\n <div class=\"form-group\">\n <label for=\"title\">Azaleko titulua<\/label>\n <input type=\"text\" id=\"title\" placeholder=\"Adib: UDA 2024\" maxlength=\"30\" required=\"\">\n <div class=\"checkbox-wrapper\">\n <input type=\"checkbox\" id=\"no-title\">\n <label for=\"no-title\">Titulu gabe<\/label>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"cover-image\">Azaleko Argazkia<\/label>\n <div class=\"cover-preview-container\">\n <div class=\"cover-preview\" id=\"coverPreviewDiv\">\n <div class=\"cover-placeholder\" id=\"cover-placeholder\">\n <svg width=\"28\" height=\"28\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17l2.5-3.16L14.5 17H9zm8.5-7L19 12.5V19H5v-.5l3-3.5 1.5 1.68L17.5 10z\"\/>\n <\/svg>\n <p>Aukeratu irudia<\/p>\n <\/div>\n <div id=\"cover-preview\"><\/div>\n <button class=\"edit-cover-btn\" id=\"editCoverBtn\">\n <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"\/>\n <\/svg>\n <\/button>\n <\/div>\n <input type=\"file\" id=\"cover-image\" accept=\"image\/*\" required=\"\">\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label>Argazki horizontalentzako formatua<\/label>\n <div class=\"format-options\">\n <label class=\"format-option\">\n <input type=\"radio\" name=\"photo-format\" value=\"sinGirar\" required=\"\">\n <div class=\"format-card\">\n <div class=\"format-header\">\n <h4>Biratu gabe<\/h4>\n <div class=\"format-check\">\u2713<\/div>\n <\/div>\n <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/momentu-website.s3.eu-west-3.amazonaws.com\/images\/A.jpg\" alt=\"A aukera\">\n <p>Irudi guztiak zentzu berean, espazio txuri gehiago<\/p>\n <\/div>\n <\/label>\n <label class=\"format-option\">\n <input type=\"radio\" name=\"photo-format\" value=\"giradas\" required=\"\">\n <div class=\"format-card\">\n <div class=\"format-header\">\n <h4>90\u00ba biratuta<\/h4>\n <div class=\"format-check\">\u2713<\/div>\n <\/div>\n <img class=\"lazyload\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-orig-src=\"https:\/\/momentu-website.s3.eu-west-3.amazonaws.com\/images\/B.jpg\" alt=\"B aukera\">\n <p>Espazio guztia aprobetxatu, koadernoa biratu argazki horizontalak ikusteko<\/p>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Third section: Photo Upload -->\n <div class=\"form-section upload-section\">\n <button class=\"upload-btn\" id=\"uploadBtn\">\n <svg width=\"20\" height=\"20\" fill=\"currentColor\" viewbox=\"0 0 24 24\">\n <path d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z\"\/>\n <\/svg>\n Igo argazkiak\n <\/button>\n <p class=\"help-text\">Mugitu argazkiak ordenatzeko<\/p>\n \n <div class=\"preview-container\">\n <div id=\"preview-parent\" class=\"preview-grid\">\n <div class=\"preview-empty\">\n 30 eta 60 argazki bitartean aukeratu\n <\/div>\n <\/div>\n <\/div>\n <input type=\"file\" id=\"input\" multiple accept=\"image\/*\">\n <\/div>\n\n <button class=\"submit-btn\" id=\"submitButton\">Amaitu Albuma<\/button>\n <p class=\"help-text\">\n PDF bat jasoko duzu zure korreoan<br> Gustatzen bazaizu ordainketa burutu ahalko duzu\n <\/p>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.6.1\/cropper.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sortablejs@latest\/Sortable.min.js\"><\/script>\n <script>\n const S3_UPLOAD_URL = 'https:\/\/6dqi0xls4i.execute-api.eu-west-3.amazonaws.com\/default\/getSignedUrl';\n const LAMBDA_URL = 'https:\/\/rdoea5s43d.execute-api.eu-west-3.amazonaws.com\/default\/custom0';\n\n let dataTransfer = new DataTransfer();\n const input = document.getElementById('input');\n const coverInput = document.getElementById('cover-image');\n const previewParent = document.getElementById('preview-parent');\n const submitButton = document.getElementById('submitButton');\n const emailInput = document.getElementById('email');\n const titleInput = document.getElementById('title');\n const typeEjemplo = \"album\";\n \n let coverFile = null;\n let originalCoverFile = null;\n let selectedImageCount = 0;\n let selectedFormat = null;\n let cropper = null;\n let isNavigating = false;\n let cropModalOpen = false;\n let cropperInitialized = false;\n let initializationTimeout = null;\n let fallbackTimeout = null;\n \n \/\/ Variables to track modal click vs drag\n let modalMouseStartX = 0;\n let modalMouseStartY = 0;\n let modalMouseMoved = false;\n\n \/\/ Enhanced stability - prevent crashes during navigation\n const handleBeforeUnload = () => {\n isNavigating = true;\n cleanupCropper();\n };\n\n const handlePageHide = () => {\n isNavigating = true;\n cleanupCropper();\n };\n\n const handleVisibilityChange = () => {\n if (document.hidden && cropper) {\n cleanupCropper();\n closeCropModal();\n }\n };\n\n \/\/ Memory management functions\n const cleanupTimeouts = () => {\n if (initializationTimeout) {\n clearTimeout(initializationTimeout);\n initializationTimeout = null;\n }\n if (fallbackTimeout) {\n clearTimeout(fallbackTimeout);\n fallbackTimeout = null;\n }\n };\n\n const cleanupCropper = () => {\n cleanupTimeouts();\n if (cropper) {\n try {\n cropper.destroy();\n } catch (error) {\n console.warn('Cropper cleanup warning (ignored):', error);\n }\n cropper = null;\n }\n cropperInitialized = false;\n };\n\n const resetCropState = () => {\n cropModalOpen = false;\n cropperInitialized = false;\n cleanupCropper();\n };\n\n \/\/ Event listeners for stability\n window.addEventListener('beforeunload', handleBeforeUnload);\n window.addEventListener('pagehide', handlePageHide);\n document.addEventListener('visibilitychange', handleVisibilityChange);\n\n \/\/ Initialize empty state\n function updateEmptyState() {\n const isEmpty = dataTransfer.files.length === 0;\n const emptyElement = previewParent.querySelector('.preview-empty');\n \n if (isEmpty && !emptyElement) {\n previewParent.innerHTML = '<div class=\"preview-empty\">Selecciona entre 30 y 60 fotos<\/div>';\n } else if (!isEmpty && emptyElement) {\n emptyElement.remove();\n }\n }\n\n \/\/ Check if image is 3:4 ratio\n function isAlready34Ratio(img) {\n const ratio = img.width \/ img.height;\n const target34 = 3 \/ 4;\n const tolerance = 0.02;\n return Math.abs(ratio - target34) < tolerance;\n }\n\n \/\/ No title checkbox handler\n document.getElementById('no-title').addEventListener('change', function() {\n const titleInput = document.getElementById('title');\n if (this.checked) {\n titleInput.value = \"\";\n titleInput.disabled = true;\n titleInput.style.opacity = \"0.5\";\n } else {\n titleInput.disabled = false;\n titleInput.style.opacity = \"1\";\n }\n });\n\n \/\/ Photo format selection\n document.querySelectorAll('input[name=\"photo-format\"]').forEach(input => {\n input.addEventListener('change', function() {\n selectedFormat = this.value;\n });\n });\n\n \/\/ Mobile touch handlers for showing controls\n function addMobileTouchHandlers() {\n \/\/ Handle preview items\n document.addEventListener('touchstart', function(e) {\n const previewItem = e.target.closest('.preview-item');\n if (previewItem) {\n document.querySelectorAll('.preview-item.show-controls').forEach(item => {\n if (item !== previewItem) {\n item.classList.remove('show-controls');\n }\n });\n previewItem.classList.toggle('show-controls');\n }\n });\n\n \/\/ Handle cover preview\n document.addEventListener('touchstart', function(e) {\n const coverPreview = e.target.closest('.cover-preview');\n if (coverPreview && coverPreview.classList.contains('has-image')) {\n coverPreview.classList.toggle('show-controls');\n }\n });\n\n \/\/ Hide controls when touching outside\n document.addEventListener('touchstart', function(e) {\n if (!e.target.closest('.preview-item') && !e.target.closest('.cover-preview')) {\n document.querySelectorAll('.show-controls').forEach(item => {\n item.classList.remove('show-controls');\n });\n }\n });\n }\n\n \/\/ Initialize mobile touch handlers\n if ('ontouchstart' in window) {\n addMobileTouchHandlers();\n }\n\n \/\/ Enhanced cover preview click\/touch handling\n const coverPreviewDiv = document.getElementById('coverPreviewDiv');\n const coverImageInput = document.getElementById('cover-image');\n const editCoverBtn = document.getElementById('editCoverBtn');\n\n \/\/ Handle cover preview clicks\/touches - optimized for mobile\n const handleCoverPreviewInteraction = (e) => {\n e.preventDefault();\n e.stopPropagation();\n \n \/\/ If edit button was clicked, handle crop modal\n if (e.target.closest('.edit-cover-btn')) {\n if (originalCoverFile && !isNavigating) {\n reopenCropModal();\n }\n return;\n }\n \n \/\/ Otherwise, trigger file selection\n if (!isNavigating) {\n coverImageInput.click();\n }\n };\n\n \/\/ Add both click and touch events for maximum compatibility\n coverPreviewDiv.addEventListener('click', handleCoverPreviewInteraction);\n coverPreviewDiv.addEventListener('touchend', handleCoverPreviewInteraction);\n\n \/\/ Prevent double-tap zoom on the cover preview\n coverPreviewDiv.addEventListener('touchstart', (e) => {\n e.preventDefault();\n });\n\n \/\/ Handle edit button specifically\n editCoverBtn.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (originalCoverFile && !isNavigating) {\n reopenCropModal();\n }\n });\n\n editCoverBtn.addEventListener('touchend', (e) => {\n e.preventDefault();\n e.stopPropagation();\n if (originalCoverFile && !isNavigating) {\n reopenCropModal();\n }\n });\n\n \/\/ Enhanced cover image handler with better error handling\n document.getElementById(\"cover-image\").addEventListener(\"change\", function() {\n const file = this.files[0];\n if (!file || isNavigating) return;\n\n originalCoverFile = file;\n \n \/\/ Create a dedicated FileReader for this operation\n const reader = new FileReader();\n \n const handleReaderError = () => {\n console.error('FileReader error for cover image');\n \/\/ Fallback: use original file\n coverFile = file;\n const fallbackReader = new FileReader();\n fallbackReader.onload = (e) => {\n if (!isNavigating) {\n updateCoverPreview(e.target.result);\n }\n };\n fallbackReader.readAsDataURL(file);\n };\n\n reader.onerror = handleReaderError;\n reader.onabort = handleReaderError;\n \n reader.onload = function(e) {\n if (isNavigating) return;\n \n const img = new Image();\n \n const handleImageError = () => {\n console.error('Image load error for cover');\n coverFile = file;\n updateCoverPreview(e.target.result);\n };\n\n img.onerror = handleImageError;\n img.onabort = handleImageError;\n \n img.onload = function() {\n if (isNavigating) return;\n \n try {\n if (isAlready34Ratio(img)) {\n coverFile = file;\n updateCoverPreview(e.target.result);\n } else {\n showCropModal(e.target.result, file);\n }\n } catch (error) {\n console.error('Image processing error:', error);\n coverFile = file;\n updateCoverPreview(e.target.result);\n }\n };\n \n \/\/ Set src after setting up handlers\n img.src = e.target.result;\n };\n \n try {\n reader.readAsDataURL(file);\n } catch (error) {\n console.error('FileReader readAsDataURL error:', error);\n handleReaderError();\n }\n });\n\n \/\/ Reopen crop modal\n function reopenCropModal() {\n if (!originalCoverFile || isNavigating || cropModalOpen) return;\n \n const reader = new FileReader();\n reader.onload = function(e) {\n if (!isNavigating) {\n showCropModal(e.target.result, originalCoverFile);\n }\n };\n reader.onerror = () => {\n console.error('Error reopening crop modal');\n };\n reader.readAsDataURL(originalCoverFile);\n }\n\n \/\/ Enhanced crop modal with mobile-first stability\n function showCropModal(imageSrc, originalFile) {\n if (isNavigating || cropModalOpen) return;\n \n \/\/ Reset state\n resetCropState();\n cropModalOpen = true;\n \n const modal = document.getElementById('cropModal');\n const cropImage = document.getElementById('cropImage');\n const cropLoading = document.getElementById('cropLoading');\n const acceptBtn = document.getElementById('acceptCrop');\n const cancelBtn = document.getElementById('cancelCrop');\n \n \/\/ Reset UI state\n cropImage.classList.remove('loaded');\n cropLoading.style.display = 'flex';\n acceptBtn.disabled = true;\n acceptBtn.classList.remove('processing');\n \n \/\/ Show modal with animation\n modal.style.display = 'flex';\n document.body.classList.add('no-scroll');\n \n \/\/ Force reflow and show\n setTimeout(() => {\n if (cropModalOpen && !isNavigating) {\n modal.classList.add('show');\n }\n }, 50);\n\n \/\/ Set up fallback function\n const fallbackToOriginalImage = (reason = 'fallback') => {\n console.warn(`Using original image (${reason})`);\n cleanupCropper();\n closeCropModal();\n \n if (!isNavigating) {\n coverFile = originalFile;\n const reader = new FileReader();\n reader.onload = (e) => {\n if (!isNavigating) {\n updateCoverPreview(e.target.result);\n }\n };\n reader.readAsDataURL(originalFile);\n }\n };\n\n \/\/ Initialize cropper function\n const initializeCropper = () => {\n if (isNavigating || !cropModalOpen || cropperInitialized) return;\n \n cleanupTimeouts();\n \n try {\n \/\/ Extra safety check for Cropper availability\n if (typeof Cropper === 'undefined') {\n console.error('Cropper.js not loaded');\n fallbackToOriginalImage('cropper-unavailable');\n return;\n }\n\n cropper = new Cropper(cropImage, {\n aspectRatio: 3 \/ 4,\n viewMode: 1,\n responsive: true,\n restore: false,\n guides: true,\n center: true,\n highlight: false,\n autoCrop: true,\n autoCropArea: 0.85,\n background: false,\n modal: true,\n minCropBoxHeight: 80,\n minCropBoxWidth: 60,\n zoomable: true,\n zoomOnTouch: true,\n zoomOnWheel: true,\n scalable: true,\n rotatable: false,\n checkOrientation: false,\n toggleDragModeOnDblclick: false,\n ready: function() {\n cropperInitialized = true;\n cleanupTimeouts();\n \n if (cropModalOpen && !isNavigating) {\n cropLoading.style.display = 'none';\n cropImage.classList.add('loaded');\n acceptBtn.disabled = false;\n }\n },\n cropstart: function() {\n \/\/ Cropper is responsive\n },\n cropmove: function() {\n \/\/ Cropper is being used\n }\n });\n } catch (error) {\n console.error('Cropper initialization error:', error);\n fallbackToOriginalImage('init-error');\n }\n };\n\n \/\/ Set up timeouts with longer delays for mobile\n const isMobile = \/iPhone|iPad|iPod|Android\/i.test(navigator.userAgent);\n const initDelay = isMobile ? 800 : 500;\n const fallbackDelay = isMobile ? 15000 : 10000;\n\n initializationTimeout = setTimeout(() => {\n if (!cropperInitialized && cropModalOpen) {\n fallbackToOriginalImage('init-timeout');\n }\n }, fallbackDelay);\n\n \/\/ Handle image load\n const handleImageLoad = () => {\n if (!isNavigating && cropModalOpen) {\n setTimeout(initializeCropper, initDelay);\n }\n };\n\n const handleImageError = () => {\n console.error('Crop image load error');\n fallbackToOriginalImage('image-load-error');\n };\n\n \/\/ Set up image handlers\n cropImage.onload = handleImageLoad;\n cropImage.onerror = handleImageError;\n cropImage.onabort = handleImageError;\n\n \/\/ Set image source\n try {\n cropImage.src = imageSrc;\n } catch (error) {\n console.error('Error setting crop image src:', error);\n fallbackToOriginalImage('src-error');\n }\n\n \/\/ Enhanced accept crop with processing state\n acceptBtn.onclick = function() {\n if (isNavigating || !cropModalOpen || !cropper || acceptBtn.disabled) return;\n \n acceptBtn.disabled = true;\n acceptBtn.classList.add('processing');\n cancelBtn.disabled = true;\n \n try {\n const canvas = cropper.getCroppedCanvas({\n imageSmoothingEnabled: true,\n imageSmoothingQuality: 'high',\n fillColor: '#ffffff'\n });\n \n if (!canvas) {\n throw new Error('Canvas creation failed');\n }\n \n canvas.toBlob(function(blob) {\n if (!blob || isNavigating) {\n fallbackToOriginalImage('blob-error');\n return;\n }\n \n try {\n coverFile = new File([blob], originalFile.name, {\n type: originalFile.type || 'image\/jpeg',\n lastModified: Date.now()\n });\n \n const dataURL = canvas.toDataURL(originalFile.type || 'image\/jpeg', 1);\n updateCoverPreview(dataURL);\n closeCropModal();\n } catch (error) {\n console.error('File creation error:', error);\n fallbackToOriginalImage('file-error');\n }\n }, originalFile.type || 'image\/jpeg', 1);\n \n } catch (error) {\n console.error('Crop processing error:', error);\n fallbackToOriginalImage('crop-error');\n }\n };\n\n \/\/ Cancel crop\n cancelBtn.onclick = function() {\n closeCropModal();\n };\n\n \/\/ Enhanced modal click handling\n const handleModalClick = (e) => {\n if (e.target === modal && !modalMouseMoved) {\n closeCropModal();\n }\n modalMouseStartX = 0;\n modalMouseStartY = 0;\n modalMouseMoved = false;\n };\n\n const handleModalStart = (clientX, clientY) => {\n modalMouseStartX = clientX;\n modalMouseStartY = clientY;\n modalMouseMoved = false;\n };\n\n const handleModalMove = (clientX, clientY) => {\n if (modalMouseStartX !== 0 || modalMouseStartY !== 0) {\n const deltaX = Math.abs(clientX - modalMouseStartX);\n const deltaY = Math.abs(clientY - modalMouseStartY);\n const threshold = isMobile ? 15 : 8;\n if (deltaX > threshold || deltaY > threshold) {\n modalMouseMoved = true;\n }\n }\n };\n\n \/\/ Mouse events\n modal.addEventListener('mousedown', (e) => {\n if (e.target === modal) {\n handleModalStart(e.clientX, e.clientY);\n }\n });\n\n modal.addEventListener('mousemove', (e) => {\n if (e.target === modal) {\n handleModalMove(e.clientX, e.clientY);\n }\n });\n\n modal.addEventListener('mouseup', handleModalClick);\n\n \/\/ Touch events\n modal.addEventListener('touchstart', (e) => {\n if (e.target === modal && e.touches.length === 1) {\n const touch = e.touches[0];\n handleModalStart(touch.clientX, touch.clientY);\n }\n });\n\n modal.addEventListener('touchmove', (e) => {\n if (e.target === modal && e.touches.length === 1) {\n const touch = e.touches[0];\n handleModalMove(touch.clientX, touch.clientY);\n }\n });\n\n modal.addEventListener('touchend', handleModalClick);\n }\n\n \/\/ Enhanced close modal with better cleanup\n function closeCropModal() {\n if (!cropModalOpen) return;\n \n const modal = document.getElementById('cropModal');\n \n \/\/ Start closing animation\n modal.classList.remove('show');\n modal.classList.add('closing');\n \n \/\/ Reset state immediately\n cropModalOpen = false;\n \n \/\/ Clean up after animation\n setTimeout(() => {\n if (!isNavigating) {\n modal.style.display = 'none';\n modal.classList.remove('closing');\n document.body.classList.remove('no-scroll');\n }\n cleanupCropper();\n }, 300);\n }\n\n function updateCoverPreview(imageSrc) {\n if (isNavigating) return;\n \n const coverPreviewContainer = document.getElementById(\"cover-preview\");\n const coverPlaceholder = document.getElementById(\"cover-placeholder\");\n const coverPreview = document.querySelector('.cover-preview');\n \n coverPreviewContainer.innerHTML = \"\";\n const img = document.createElement(\"img\");\n img.src = imageSrc;\n img.alt = \"Vista previa de portada\";\n coverPreviewContainer.appendChild(img);\n coverPlaceholder.style.display = \"none\";\n coverPreview.classList.add('has-image');\n }\n\n \/\/ Upload button click\n document.getElementById('uploadBtn').addEventListener('click', () => {\n if (!isNavigating) {\n input.click();\n }\n });\n\n \/\/ Update image count\n const updateImageCount = () => {\n selectedImageCount = dataTransfer.files.length;\n const btn = document.getElementById('uploadBtn');\n if (selectedImageCount > 0) {\n btn.innerHTML = `<svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/>\n <\/svg>\n ${selectedImageCount} fotos seleccionadas`;\n } else {\n btn.innerHTML = `<svg width=\"20\" height=\"20\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z\"\/>\n <\/svg>\n Subir Fotos`;\n }\n updateEmptyState();\n };\n\n \/\/ Handle file selection with enhanced mobile quality\n input.addEventListener('change', () => {\n if (isNavigating) return;\n \n const files = Array.from(input.files);\n \n \/\/ Enhanced resize function with better quality for mobile\n const resizeImage = (file, maxWidth, maxHeight, callback) => {\n const img = new Image();\n const reader = new FileReader();\n \n reader.onload = (e) => {\n if (isNavigating) return;\n img.src = e.target.result;\n };\n \n reader.onerror = () => {\n console.error('File read error:', file.name);\n callback(null);\n };\n \n reader.readAsDataURL(file);\n\n img.onload = () => {\n if (isNavigating) return;\n \n try {\n const aspectRatio = img.width \/ img.height;\n let newWidth = maxWidth;\n let newHeight = maxHeight;\n\n \/\/ Better sizing for mobile previews\n const isMobile = window.innerWidth <= 768;\n const targetSize = isMobile ? 400 : 300;\n \n if (img.width > img.height) {\n newWidth = targetSize;\n newHeight = targetSize \/ aspectRatio;\n } else {\n newHeight = targetSize;\n newWidth = targetSize * aspectRatio;\n }\n\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n canvas.width = newWidth;\n canvas.height = newHeight;\n \n \/\/ Enable image smoothing for better quality\n ctx.imageSmoothingEnabled = true;\n ctx.imageSmoothingQuality = 'high';\n \n ctx.drawImage(img, 0, 0, newWidth, newHeight);\n\n \/\/ Higher quality JPEG for mobile\n const quality = isMobile ? 0.95 : 0.9;\n callback(canvas.toDataURL('image\/jpeg', quality));\n } catch (error) {\n console.error('Image resize error:', error);\n callback(null);\n }\n };\n \n img.onerror = () => {\n console.error('Image load error:', file.name);\n callback(null);\n };\n };\n\n files.forEach((file, index) => {\n if (isNavigating) return;\n \n dataTransfer.items.add(file);\n \n const preview = document.createElement('div');\n preview.classList.add('preview-item');\n \n const previewImage = document.createElement('img');\n previewImage.alt = `Foto ${index + 1}`;\n \n const numberIndicator = document.createElement('div');\n numberIndicator.classList.add('preview-number');\n numberIndicator.textContent = dataTransfer.items.length;\n \n const deleteButton = document.createElement('button');\n deleteButton.classList.add('delete-btn');\n deleteButton.setAttribute('data-index', dataTransfer.items.length - 1);\n deleteButton.innerHTML = '\u00d7';\n deleteButton.title = 'Eliminar foto';\n \n const orderInput = document.createElement('input');\n orderInput.type = 'hidden';\n orderInput.name = `images_order[${file.name}]`;\n\n preview.appendChild(numberIndicator);\n preview.appendChild(previewImage);\n preview.appendChild(deleteButton);\n preview.appendChild(orderInput);\n previewParent.appendChild(preview);\n\n \/\/ Use enhanced resize with better mobile quality\n const isMobile = window.innerWidth <= 768;\n const maxSize = isMobile ? 400 : 300;\n \n resizeImage(file, maxSize, maxSize, (resizedImageDataURL) => {\n if (resizedImageDataURL && !isNavigating) {\n previewImage.src = resizedImageDataURL;\n previewImage.onload = () => {\n preview.classList.add('loaded');\n };\n } else {\n \/\/ Fallback to original file\n const reader = new FileReader();\n reader.onload = (e) => {\n if (!isNavigating) {\n previewImage.src = e.target.result;\n previewImage.onload = () => {\n preview.classList.add('loaded');\n };\n }\n };\n reader.readAsDataURL(file);\n }\n });\n\n deleteButton.addEventListener('click', () => {\n if (!isNavigating) {\n deleteImage(deleteButton);\n }\n });\n });\n\n input.files = dataTransfer.files;\n updateImageCount();\n updateOrder();\n });\n\n \/\/ Delete image\n const deleteImage = (button) => {\n if (isNavigating) return;\n \n const index = parseInt(button.dataset.index);\n dataTransfer.items.remove(index);\n input.files = dataTransfer.files;\n button.parentNode.remove();\n updateImageCount();\n updateOrder();\n };\n\n \/\/ Update order\n const updateOrder = () => {\n if (isNavigating) return;\n \n const orderInputs = document.querySelectorAll('input[name^=\"images_order\"]');\n const deleteButtons = document.querySelectorAll('.delete-btn');\n const numberIndicators = document.querySelectorAll('.preview-number');\n \n orderInputs.forEach((input, i) => {\n input.value = i;\n if (deleteButtons[i]) {\n deleteButtons[i].dataset.index = i;\n }\n if (numberIndicators[i]) {\n numberIndicators[i].textContent = i + 1;\n }\n });\n };\n\n \/\/ Initialize sortable with error handling\n try {\n new Sortable(previewParent, {\n animation: 200,\n ghostClass: 'sortable-ghost',\n chosenClass: 'sortable-chosen',\n dragClass: 'sortable-drag',\n filter: '.preview-empty',\n onEnd: () => {\n if (!isNavigating) {\n updateOrder();\n }\n },\n });\n } catch (error) {\n console.error('Sortable initialization error:', error);\n }\n\n \/\/ Upload file to S3\n const uploadFile = async (file, path, typeEjemplo, selectedFormat) => {\n const response = await fetch(S3_UPLOAD_URL, {\n method: 'POST',\n body: JSON.stringify({ path, filename: file.name, typeEjemplo, selectedFormat }),\n });\n \n if (!response.ok) {\n throw new Error(`Upload URL request failed: ${response.status}`);\n }\n \n const { uploadURL } = await response.json();\n const uploadResponse = await fetch(uploadURL, { method: 'PUT', body: file });\n \n if (!uploadResponse.ok) {\n throw new Error(`File upload failed: ${uploadResponse.status}`);\n }\n \n return uploadURL.split('?')[0];\n };\n\n \/\/ Submit handler with proper validation and error handling\n submitButton.addEventListener('click', async () => {\n if (isNavigating) return;\n \n const email = emailInput.value.trim();\n const title = titleInput.value.trim();\n const dateNow = new Date().toISOString().replace(\/[:.]\/g, '-'); \n const randomID = Math.random().toString(36).substring(2, 15);\n const userPath = `${email}\/${dateNow}_${randomID}`;\n const isNoTitleChecked = document.getElementById('no-title').checked;\n\n \/\/ Add form-submitted class to show validation errors\n document.getElementById('mainContainer').classList.add('form-submitted');\n\n \/\/ Validation\n if (!coverFile || !dataTransfer.files.length || !email || (!isNoTitleChecked && !title) || !selectedFormat) {\n alert('Por favor, completa todos los campos requeridos.');\n return;\n }\n \n if (selectedImageCount < 30 || selectedImageCount > 60) {\n alert('Debes seleccionar entre 30 y 60 fotos.');\n return;\n }\n\n \/\/ Email validation\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!emailRegex.test(email)) {\n alert('Por favor, introduce un email v\u00e1lido.');\n return;\n }\n\n \/\/ Remove form-submitted class if validation passes\n document.getElementById('mainContainer').classList.remove('form-submitted');\n\n \/\/ Disable submit button to prevent double submission\n submitButton.disabled = true;\n\n \/\/ Show progress\n const progressContainer = document.getElementById('progressContainer');\n const progressFill = document.getElementById('progressFill');\n const progressText = document.getElementById('progressText');\n const mainContainer = document.getElementById('mainContainer');\n const containerSuccess = document.getElementById('containerSuccess');\n const successMessage = document.getElementById('successMessage');\n \n mainContainer.style.display = 'none';\n containerSuccess.style.display = 'block'; \n progressContainer.style.display = 'block';\n successMessage.style.display = 'none';\n \n window.scrollTo({ top: 0, behavior: 'smooth' });\n\n try {\n const totalFiles = dataTransfer.files.length + 1;\n let uploadedFiles = 0;\n\n const updateProgress = () => {\n const progress = Math.round((uploadedFiles \/ totalFiles) * 100);\n progressFill.style.width = `${progress}%`;\n progressText.textContent = `${progress}%`;\n };\n\n \/\/ Upload cover\n progressText.textContent = 'Subiendo portada...';\n updateProgress();\n const coverUrl = await uploadFile(coverFile, `${userPath}\/cover`, typeEjemplo);\n uploadedFiles++;\n updateProgress();\n\n \/\/ Get ordered images\n const orderedImageNames = Array.from(previewParent.querySelectorAll('input[name^=\"images_order\"]'))\n .map(input => input.name);\n const imageUrls = [];\n\n \/\/ Upload images\n progressText.textContent = 'Subiendo fotos...';\n for (const imageName of orderedImageNames) {\n if (isNavigating) break;\n \n const filename = imageName.match(\/\\[(.*?)\\]\/)[1];\n const file = Array.from(dataTransfer.files).find(f => f.name === filename);\n\n if (file) {\n const newFilename = `${uploadedFiles}_${file.name}`;\n const imageUrl = await uploadFile(file, `${userPath}\/images\/${newFilename}`, typeEjemplo, selectedFormat);\n imageUrls.push(imageUrl);\n uploadedFiles++;\n updateProgress();\n }\n }\n\n if (isNavigating) return;\n\n \/\/ Send metadata\n progressText.textContent = 'Finalizando...';\n const metadata = {\n email,\n title,\n coverUrl,\n typeEjemplo,\n selectedFormat,\n selectedImageCount,\n imageOrder: imageUrls,\n isNoTitleChecked\n };\n\n await fetch(LAMBDA_URL, {\n method: 'POST',\n mode: 'no-cors',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(metadata),\n });\n\n \/\/ Show success\n if (!isNavigating) {\n progressContainer.style.display = 'none';\n successMessage.style.display = 'block';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n \n } catch (error) {\n console.error('Error uploading files or sending metadata:', error);\n \n if (!isNavigating) {\n alert('Error al crear el \u00e1lbum. Por favor, int\u00e9ntalo de nuevo.');\n \n \/\/ Return to main form\n containerSuccess.style.display = 'none';\n mainContainer.style.display = 'block';\n mainContainer.classList.remove('form-submitted');\n submitButton.disabled = false;\n }\n }\n });\n\n \/\/ Keyboard shortcuts\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && cropModalOpen) {\n closeCropModal();\n }\n });\n\n \/\/ Prevent form submission on Enter\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' && e.target.tagName !== 'BUTTON') {\n e.preventDefault();\n }\n });\n\n \/\/ Enhanced cleanup on page unload\n window.addEventListener('unload', () => {\n isNavigating = true;\n cleanupCropper();\n });\n\n \/\/ Initialize\n updateEmptyState();\n\n \/\/ Additional mobile performance optimizations\n if ('serviceWorker' in navigator) {\n \/\/ Don't register service worker to avoid potential conflicts\n }\n\n \/\/ Force garbage collection periodically on mobile (if available)\n if (window.gc && \/iPhone|iPad|iPod|Android\/i.test(navigator.userAgent)) {\n setInterval(() => {\n if (!cropModalOpen && !isNavigating) {\n try {\n window.gc();\n } catch (e) {\n \/\/ Ignore if not available\n }\n }\n }, 30000);\n }\n <\/script>\n\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-615","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sortu zure albuma Momentu-n<\/title>\n<meta name=\"description\" content=\"Momentu. Albuma sortzea erraza da: aukeratu zure argazkiak, diseinatu eta jaso oroigarri paregabea paperean kalitate profesionalarekin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/momentu.net\/eu\/albuma-sortu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sortu zure albuma Momentu-n\" \/>\n<meta property=\"og:description\" content=\"Momentu. Albuma sortzea erraza da: aukeratu zure argazkiak, diseinatu eta jaso oroigarri paregabea paperean kalitate profesionalarekin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/momentu.net\/eu\/albuma-sortu\/\" \/>\n<meta property=\"og:site_name\" content=\"Momentu\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T11:24:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/momentu.net\/wp-content\/uploads\/2025\/08\/logo1x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"902\" \/>\n\t<meta property=\"og:image:height\" content=\"223\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"37 minutua\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/momentu.net\/eu\/albuma-sortu\/\",\"url\":\"https:\/\/momentu.net\/eu\/albuma-sortu\/\",\"name\":\"Sortu zure albuma Momentu-n\",\"isPartOf\":{\"@id\":\"https:\/\/momentu.net\/#website\"},\"datePublished\":\"2024-08-23T11:59:12+00:00\",\"dateModified\":\"2025-09-26T11:24:12+00:00\",\"description\":\"Momentu. Albuma sortzea erraza da: aukeratu zure argazkiak, diseinatu eta jaso oroigarri paregabea paperean kalitate profesionalarekin.\",\"breadcrumb\":{\"@id\":\"https:\/\/momentu.net\/eu\/albuma-sortu\/#breadcrumb\"},\"inLanguage\":\"eu\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/momentu.net\/eu\/albuma-sortu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/momentu.net\/eu\/albuma-sortu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/momentu.net\/eu\/hasiera\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Albuma Sortu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/momentu.net\/#website\",\"url\":\"https:\/\/momentu.net\/\",\"name\":\"Momentu. Crea tu \u00e1lbum de fotos.\",\"description\":\"Crea tu \u00e1lbum de fotos\",\"publisher\":{\"@id\":\"https:\/\/momentu.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/momentu.net\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"eu\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/momentu.net\/#organization\",\"name\":\"Momentu. Crea tu \u00e1lbum de fotos.\",\"url\":\"https:\/\/momentu.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"eu\",\"@id\":\"https:\/\/momentu.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/momentu.net\/wp-content\/uploads\/2025\/08\/logo1x.png\",\"contentUrl\":\"https:\/\/momentu.net\/wp-content\/uploads\/2025\/08\/logo1x.png\",\"width\":902,\"height\":223,\"caption\":\"Momentu. Crea tu \u00e1lbum de fotos.\"},\"image\":{\"@id\":\"https:\/\/momentu.net\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sortu zure albuma Momentu-n","description":"Momentu. Albuma sortzea erraza da: aukeratu zure argazkiak, diseinatu eta jaso oroigarri paregabea paperean kalitate profesionalarekin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/momentu.net\/eu\/albuma-sortu\/","og_locale":"en_US","og_type":"article","og_title":"Sortu zure albuma Momentu-n","og_description":"Momentu. Albuma sortzea erraza da: aukeratu zure argazkiak, diseinatu eta jaso oroigarri paregabea paperean kalitate profesionalarekin.","og_url":"https:\/\/momentu.net\/eu\/albuma-sortu\/","og_site_name":"Momentu","article_modified_time":"2025-09-26T11:24:12+00:00","og_image":[{"width":902,"height":223,"url":"https:\/\/momentu.net\/wp-content\/uploads\/2025\/08\/logo1x.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"37 minutua"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/momentu.net\/eu\/albuma-sortu\/","url":"https:\/\/momentu.net\/eu\/albuma-sortu\/","name":"Sortu zure albuma Momentu-n","isPartOf":{"@id":"https:\/\/momentu.net\/#website"},"datePublished":"2024-08-23T11:59:12+00:00","dateModified":"2025-09-26T11:24:12+00:00","description":"Momentu. Albuma sortzea erraza da: aukeratu zure argazkiak, diseinatu eta jaso oroigarri paregabea paperean kalitate profesionalarekin.","breadcrumb":{"@id":"https:\/\/momentu.net\/eu\/albuma-sortu\/#breadcrumb"},"inLanguage":"eu","potentialAction":[{"@type":"ReadAction","target":["https:\/\/momentu.net\/eu\/albuma-sortu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/momentu.net\/eu\/albuma-sortu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/momentu.net\/eu\/hasiera\/"},{"@type":"ListItem","position":2,"name":"Albuma Sortu"}]},{"@type":"WebSite","@id":"https:\/\/momentu.net\/#website","url":"https:\/\/momentu.net\/","name":"Momentu. Crea tu \u00e1lbum de fotos.","description":"Crea tu \u00e1lbum de fotos","publisher":{"@id":"https:\/\/momentu.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/momentu.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"eu"},{"@type":"Organization","@id":"https:\/\/momentu.net\/#organization","name":"Momentu. Crea tu \u00e1lbum de fotos.","url":"https:\/\/momentu.net\/","logo":{"@type":"ImageObject","inLanguage":"eu","@id":"https:\/\/momentu.net\/#\/schema\/logo\/image\/","url":"https:\/\/momentu.net\/wp-content\/uploads\/2025\/08\/logo1x.png","contentUrl":"https:\/\/momentu.net\/wp-content\/uploads\/2025\/08\/logo1x.png","width":902,"height":223,"caption":"Momentu. Crea tu \u00e1lbum de fotos."},"image":{"@id":"https:\/\/momentu.net\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/pages\/615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/comments?post=615"}],"version-history":[{"count":5,"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/pages\/615\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/pages\/615\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/momentu.net\/eu\/wp-json\/wp\/v2\/media?parent=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}