{"id":5965,"date":"2025-08-20T13:33:42","date_gmt":"2025-08-20T13:33:42","guid":{"rendered":"https:\/\/sharkxs.com\/mycreations\/"},"modified":"2025-09-27T07:19:09","modified_gmt":"2025-09-27T07:19:09","slug":"mycreations","status":"publish","type":"page","link":"https:\/\/sharkxs.com\/en\/mycreations\/","title":{"rendered":"mycreations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5965\" class=\"elementor elementor-5965 elementor-5960\">\n\t\t\t\t<div class=\"elementor-element elementor-element-67801dd e-flex e-con-boxed e-con e-parent\" data-id=\"67801dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6ac73b elementor-widget elementor-widget-html\" data-id=\"a6ac73b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- SharkXS My Creations Page - Complete Version with WPML -->\r\n\r\n<!-- WICHTIG: F\u00fcgen Sie diesen Shortcode VOR dem HTML Widget ein -->\r\n\r\n    <div class=\"sharkxs-mycreations-login-container\" id=\"mycreations-login-overlay\">\r\n        <style>\r\n            .sharkxs-mycreations-login-container {\r\n                background: linear-gradient(135deg, #1a1d20 0%, #2c3540 100%);\r\n                border-radius: 14px;\r\n                padding: 60px 40px;\r\n                text-align: center;\r\n                color: #fff;\r\n                max-width: 650px;\r\n                margin: 40px auto;\r\n                box-shadow: 0 10px 40px rgba(0,0,0,0.4);\r\n                border: 2px solid #764ba2;\r\n                animation: fadeInUp 0.5s ease-out;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            \r\n            .sharkxs-mycreations-login-container::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: -50%;\r\n                right: -50%;\r\n                width: 200%;\r\n                height: 200%;\r\n                background: radial-gradient(circle, rgba(118,75,162,0.1) 0%, transparent 70%);\r\n                animation: rotate 20s linear infinite;\r\n            }\r\n            \r\n            @keyframes rotate {\r\n                100% { transform: rotate(360deg); }\r\n            }\r\n            \r\n            @keyframes fadeInUp {\r\n                from {\r\n                    opacity: 0;\r\n                    transform: translateY(20px);\r\n                }\r\n                to {\r\n                    opacity: 1;\r\n                    transform: translateY(0);\r\n                }\r\n            }\r\n            \r\n            .mycreations-icon-wrapper {\r\n                margin-bottom: 30px;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .mycreations-icon {\r\n                font-size: 4rem;\r\n                display: inline-block;\r\n                animation: pulse 2s ease-in-out infinite;\r\n            }\r\n            \r\n            @keyframes pulse {\r\n                0%, 100% { transform: scale(1); }\r\n                50% { transform: scale(1.1); }\r\n            }\r\n            \r\n            .mycreations-title {\r\n                font-size: 2.3rem;\r\n                font-weight: 700;\r\n                margin: 0 0 10px 0;\r\n                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                -webkit-background-clip: text;\r\n                -webkit-text-fill-color: transparent;\r\n                background-clip: text;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .mycreations-subtitle {\r\n                font-size: 1.2rem;\r\n                color: #764ba2;\r\n                margin: 0 0 25px 0;\r\n                font-weight: 500;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .mycreations-description {\r\n                font-size: 1.1rem;\r\n                color: #b3bbca;\r\n                line-height: 1.6;\r\n                margin: 0 0 35px 0;\r\n                max-width: 450px;\r\n                margin-left: auto;\r\n                margin-right: auto;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .mycreations-features {\r\n                background: rgba(0,0,0,0.4);\r\n                border-radius: 10px;\r\n                padding: 25px;\r\n                margin: 30px auto;\r\n                text-align: left;\r\n                max-width: 450px;\r\n                backdrop-filter: blur(10px);\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .mycreations-features h4 {\r\n                color: #fff;\r\n                font-size: 1rem;\r\n                margin: 0 0 15px 0;\r\n                text-align: center;\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n                font-weight: 600;\r\n            }\r\n            \r\n            .mycreations-features ul {\r\n                list-style: none;\r\n                margin: 0;\r\n                padding: 0;\r\n            }\r\n            \r\n            .mycreations-features li {\r\n                padding: 10px 0;\r\n                color: #b3bbca;\r\n                display: flex;\r\n                align-items: center;\r\n                font-size: 0.95rem;\r\n            }\r\n            \r\n            .mycreations-features .check {\r\n                color: #764ba2;\r\n                margin-right: 12px;\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .mycreations-buttons {\r\n                display: flex;\r\n                gap: 15px;\r\n                justify-content: center;\r\n                flex-wrap: wrap;\r\n                margin-top: 35px;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            .mycreations-login-btn, .mycreations-register-btn {\r\n                padding: 14px 35px;\r\n                text-decoration: none;\r\n                border-radius: 8px;\r\n                display: inline-block;\r\n                font-weight: 600;\r\n                font-size: 1.1rem;\r\n                transition: all 0.3s ease;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            \r\n            .mycreations-login-btn {\r\n                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                color: white;\r\n                box-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);\r\n            }\r\n            \r\n            .mycreations-login-btn:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 6px 25px rgba(118, 75, 162, 0.4);\r\n            }\r\n            \r\n            .mycreations-register-btn {\r\n                background: transparent;\r\n                color: #764ba2;\r\n                border: 2px solid #764ba2;\r\n            }\r\n            \r\n            .mycreations-register-btn:hover {\r\n                background: #764ba2;\r\n                color: #fff;\r\n                transform: translateY(-2px);\r\n            }\r\n            \r\n            .mycreations-info-text {\r\n                margin-top: 25px;\r\n                font-size: 0.9rem;\r\n                color: #666;\r\n                font-style: italic;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n            \r\n            @media (max-width: 600px) {\r\n                .sharkxs-mycreations-login-container {\r\n                    padding: 40px 20px;\r\n                    margin: 20px 10px;\r\n                }\r\n                \r\n                .mycreations-title {\r\n                    font-size: 1.8rem;\r\n                }\r\n                \r\n                .mycreations-buttons {\r\n                    flex-direction: column;\r\n                }\r\n                \r\n                .mycreations-login-btn, .mycreations-register-btn {\r\n                    width: 100%;\r\n                }\r\n            }\r\n        <\/style>\r\n        \r\n        <div class=\"mycreations-icon-wrapper\">\r\n            <span class=\"mycreations-icon\">\u2728<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"mycreations-title\">\r\n            My creations        <\/h2>\r\n\r\n        <p class=\"mycreations-subtitle\">\r\n            Registration required        <\/p>\r\n\r\n        <p class=\"mycreations-description\">\r\n            Manage your AI-generated videos and images in one place. Log in to view, download and organize your creations.        <\/p>\r\n\r\n        <div class=\"mycreations-features\">\r\n            <h4>Your advantages<\/h4>\r\n            <ul>\r\n                <li>\r\n                    <span class=\"check\">\u2714<\/span>\r\n                    All your AI creations at a glance                <\/li>\r\n                <li>\r\n                    <span class=\"check\">\u2714<\/span>\r\n                    Download in original quality                <\/li>\r\n                <li>\r\n                    <span class=\"check\">\u2714<\/span>\r\n                    Filtering by videos and images                <\/li>\r\n                <li>\r\n                    <span class=\"check\">\u2714<\/span>\r\n                    Administration and organization                <\/li>\r\n            <\/ul>\r\n        <\/div>\r\n\r\n        <div class=\"mycreations-buttons\">\r\n                        \r\n            <a href=\"https:\/\/sharkxs.com\/en\/login\/\" \r\n               class=\"mycreations-login-btn\">\r\n               \ud83d\udd13 Log in            <\/a>\r\n            \r\n            <a href=\"https:\/\/sharkxs.com\/en\/register\/\" \r\n               class=\"mycreations-register-btn\">\r\n               \ud83d\udc64 Create account            <\/a>\r\n        <\/div>\r\n\r\n        <p class=\"mycreations-info-text\">\r\n            Your creations are securely stored and can be accessed at any time        <\/p>\r\n    <\/div>\r\n    \r\n    <script>\r\n        \/\/ Verstecke das normale My Creations Interface\r\n        jQuery(document).ready(function($) {\r\n            $('#sharkxs-mycreations-page').hide();\r\n            \r\n            \/\/ Analytics Tracking (optional)\r\n            if (typeof gtag !== 'undefined') {\r\n                gtag('event', 'view_mycreations_login', {\r\n                    'event_category': 'MyCreations',\r\n                    'event_label': 'login_required',\r\n                    'value': 0\r\n                });\r\n            }\r\n        });\r\n    <\/script>\r\n    \r\n<div id=\"sharkxs-mycreations-page\">\r\n  <!-- Header Section -->\r\n  <div class=\"mycreations-header\">\r\n    <h1 class=\"mycreations-title\">\r\n      <span class=\"title-icon\">\u2728<\/span>\r\n      <span class=\"title-text\" data-translate=\"myCreations\">Meine Kreationen<\/span>\r\n    <\/h1>\r\n    <p class=\"mycreations-subtitle\" data-translate=\"myCreationsSubtitle\">\r\n      Verwalten Sie Ihre AI-generierten Videos und Bilder an einem Ort\r\n    <\/p>\r\n    \r\n    <!-- Stats Bar -->\r\n    <div class=\"mycreations-stats\" id=\"user-stats\">\r\n      <div class=\"stat-item\">\r\n        <span class=\"stat-number\" id=\"total-creations\">0<\/span>\r\n        <span class=\"stat-label\" data-translate=\"totalCreations\">Gesamt<\/span>\r\n      <\/div>\r\n      <div class=\"stat-item\">\r\n        <span class=\"stat-number\" id=\"video-count\">0<\/span>\r\n        <span class=\"stat-label\" data-translate=\"videos\">Videos<\/span>\r\n      <\/div>\r\n      <div class=\"stat-item\">\r\n        <span class=\"stat-number\" id=\"image-count\">0<\/span>\r\n        <span class=\"stat-label\" data-translate=\"images\">Bilder<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Filter Bar -->\r\n  <div class=\"mycreations-filters\">\r\n    <button class=\"filter-btn active\" data-filter=\"all\">\r\n      <span data-translate=\"all\">Alle<\/span>\r\n    <\/button>\r\n    <button class=\"filter-btn\" data-filter=\"video\">\r\n      <span>\ud83c\udfac<\/span> <span data-translate=\"videos\">Videos<\/span>\r\n    <\/button>\r\n    <button class=\"filter-btn\" data-filter=\"image\">\r\n      <span>\ud83d\uddbc\ufe0f<\/span> <span data-translate=\"images\">Bilder<\/span>\r\n    <\/button>\r\n<button class=\"filter-btn\" data-filter=\"music\">\r\n    <span>\ud83c\udfb5<\/span> <span data-translate=\"music\">Musik<\/span>\r\n<\/button>\r\n    <button class=\"filter-btn\" data-filter=\"recent\">\r\n      <span>\ud83d\udd50<\/span> <span data-translate=\"recent7Days\">Letzte 7 Tage<\/span>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <!-- Initial Load Button -->\r\n  <div id=\"mycreations-initial-load\" class=\"initial-load-container\">\r\n    <div class=\"load-illustration\">\r\n      <div class=\"floating-icons\">\r\n        <span class=\"float-icon\">\ud83c\udfa8<\/span>\r\n        <span class=\"float-icon\">\ud83c\udfac<\/span>\r\n        <span class=\"float-icon\">\u2728<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    <button id=\"load-creations-btn\" class=\"primary-load-btn\">\r\n      <span class=\"btn-icon\">\ud83d\ude80<\/span>\r\n      <span class=\"btn-text\" data-translate=\"loadMyCreations\">Meine Kreationen laden<\/span>\r\n    <\/button>\r\n    <p class=\"load-hint\" data-translate=\"loadHint\">\r\n      Klicken Sie hier, um Ihre AI-Kreationen anzuzeigen\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Loading Spinner -->\r\n  <div id=\"mycreations-loading\" class=\"loading-container\" style=\"display: none;\">\r\n    <div class=\"spinner\"><\/div>\r\n    <p data-translate=\"loadingCreations\">Lade Kreationen...<\/p>\r\n  <\/div>\r\n\r\n  <!-- Creations Grid -->\r\n  <div id=\"mycreations-grid\" class=\"creations-grid\" style=\"display: none;\"><\/div>\r\n\r\n  <!-- Load More Button -->\r\n  <div id=\"mycreations-loadmore\" class=\"loadmore-container\" style=\"display: none;\">\r\n    <button id=\"loadmore-btn\" class=\"loadmore-btn\">\r\n      <span data-translate=\"loadMore\">Weitere laden<\/span>\r\n    <\/button>\r\n    <div class=\"pagination-info\">\r\n      <span id=\"showing-count\">0<\/span> <span data-translate=\"of\">von<\/span> \r\n      <span id=\"total-count\">0<\/span> <span data-translate=\"shown\">angezeigt<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Empty State -->\r\n  <div id=\"mycreations-empty\" class=\"empty-state\" style=\"display: none;\">\r\n    <div class=\"empty-icon\">\ud83c\udfa8<\/div>\r\n    <h3 data-translate=\"noCreationsTitle\">Noch keine Kreationen<\/h3>\r\n    <p data-translate=\"noCreationsText\">\r\n      Beginnen Sie jetzt mit der Erstellung beeindruckender AI-Videos und Bilder!\r\n    <\/p>\r\n    <div class=\"action-buttons\">\r\n      <a href=\"\/ai-video\" class=\"action-btn video-btn\">\r\n        <span>\ud83c\udfac<\/span> <span data-translate=\"createVideo\">Video erstellen<\/span>\r\n      <\/a>\r\n      <a href=\"\/ai-image\" class=\"action-btn image-btn\">\r\n        <span>\ud83d\uddbc\ufe0f<\/span> <span data-translate=\"createImage\">Bild erstellen<\/span>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Media Preview Modal -->\r\n  <div id=\"media-modal\" class=\"media-modal\" style=\"display: none;\">\r\n    <div class=\"modal-overlay\"><\/div>\r\n    <div class=\"modal-content\">\r\n      <button class=\"modal-close\">\u00d7<\/button>\r\n      <div class=\"modal-body\"><\/div>\r\n      <div class=\"modal-info\">\r\n        <p class=\"modal-prompt\"><\/p>\r\n        <div class=\"modal-meta\">\r\n          <span class=\"modal-date\"><\/span>\r\n          <span class=\"modal-type\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* MyCreations Page Styles *\/\r\n#sharkxs-mycreations-page {\r\n  min-height: 500px;\r\n  color: #ffffff;\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\r\n}\r\n\r\n\/* Header Section *\/\r\n.mycreations-header {\r\n  text-align: center;\r\n  padding: 2rem 0 3rem;\r\n  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);\r\n  border-radius: 20px;\r\n  margin-bottom: 2rem;\r\n}\r\n\r\n.mycreations-title {\r\n  font-size: 2.5rem;\r\n  margin: 0 0 0.5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.title-icon {\r\n  font-size: 2rem;\r\n  animation: sparkle 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes sparkle {\r\n  0%, 100% { transform: scale(1) rotate(0deg); }\r\n  50% { transform: scale(1.2) rotate(10deg); }\r\n}\r\n\r\n.mycreations-subtitle {\r\n  font-size: 1.1rem;\r\n  color: #b8bcc8;\r\n  margin: 0 0 2rem;\r\n}\r\n\r\n\/* Stats Bar *\/\r\n.mycreations-stats {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 3rem;\r\n  padding: 1.5rem;\r\n  background: rgba(0, 0, 0, 0.3);\r\n  border-radius: 15px;\r\n  max-width: 500px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.stat-item {\r\n  text-align: center;\r\n}\r\n\r\n.stat-number {\r\n  display: block;\r\n  font-size: 2rem;\r\n  font-weight: bold;\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.stat-label {\r\n  display: block;\r\n  font-size: 0.9rem;\r\n  color: #9ca3af;\r\n  margin-top: 0.25rem;\r\n}\r\n\r\n\/* Filter Bar *\/\r\n.mycreations-filters {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1rem;\r\n  margin-bottom: 2rem;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.filter-btn {\r\n  padding: 0.75rem 1.5rem;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: 1px solid rgba(255, 255, 255, 0.2);\r\n  border-radius: 25px;\r\n  color: #ffffff;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  font-size: 0.95rem;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.filter-btn:hover {\r\n  background: rgba(255, 255, 255, 0.15);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.filter-btn.active {\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n  border-color: transparent;\r\n}\r\n\r\n\/* Initial Load Container *\/\r\n.initial-load-container {\r\n  text-align: center;\r\n  padding: 4rem 2rem;\r\n}\r\n\r\n.load-illustration {\r\n  margin-bottom: 2rem;\r\n  height: 100px;\r\n  position: relative;\r\n}\r\n\r\n.floating-icons {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 2rem;\r\n}\r\n\r\n.float-icon {\r\n  font-size: 3rem;\r\n  animation: float 3s ease-in-out infinite;\r\n}\r\n\r\n.float-icon:nth-child(2) { animation-delay: 1s; }\r\n.float-icon:nth-child(3) { animation-delay: 2s; }\r\n\r\n@keyframes float {\r\n  0%, 100% { transform: translateY(0); }\r\n  50% { transform: translateY(-20px); }\r\n}\r\n\r\n.primary-load-btn {\r\n  padding: 1rem 3rem;\r\n  font-size: 1.2rem;\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 50px;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.75rem;\r\n  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n.primary-load-btn:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);\r\n}\r\n\r\n.primary-load-btn:disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n  transform: none;\r\n}\r\n\r\n.btn-icon {\r\n  font-size: 1.5rem;\r\n}\r\n\r\n.load-hint {\r\n  margin-top: 1rem;\r\n  color: #9ca3af;\r\n  font-size: 0.95rem;\r\n}\r\n\r\n\/* Loading Spinner *\/\r\n.loading-container {\r\n  text-align: center;\r\n  padding: 3rem;\r\n}\r\n\r\n.spinner {\r\n  width: 50px;\r\n  height: 50px;\r\n  margin: 0 auto 1rem;\r\n  border: 3px solid rgba(255, 255, 255, 0.1);\r\n  border-top-color: #667eea;\r\n  border-radius: 50%;\r\n  animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n\/* Creations Grid *\/\r\n.creations-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n  gap: 1.5rem;\r\n  margin-bottom: 2rem;\r\n}\r\n\r\n.creation-card {\r\n  background: linear-gradient(145deg, rgba(30, 30, 35, 0.9), rgba(20, 20, 25, 0.9));\r\n  border-radius: 15px;\r\n  overflow: hidden;\r\n  transition: all 0.3s ease;\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  opacity: 0;\r\n  animation: fadeInUp 0.5s ease forwards;\r\n}\r\n\r\n.creation-card:hover {\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);\r\n  border-color: rgba(102, 126, 234, 0.5);\r\n}\r\n\r\n@keyframes fadeInUp {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n.creation-media {\r\n  position: relative;\r\n  width: 100%;\r\n  padding-bottom: 56.25%;\r\n  background: #000;\r\n  cursor: pointer;\r\n  overflow: hidden;\r\n}\r\n\r\n.creation-media img,\r\n.creation-media video {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n.media-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: rgba(0, 0, 0, 0.4);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.creation-card:hover .media-overlay {\r\n  opacity: 1;\r\n}\r\n\r\n.play-icon {\r\n  font-size: 3rem;\r\n  color: white;\r\n  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));\r\n}\r\n\r\n.type-badge {\r\n  position: absolute;\r\n  top: 10px;\r\n  right: 10px;\r\n  padding: 0.25rem 0.75rem;\r\n  background: rgba(0, 0, 0, 0.8);\r\n  border-radius: 20px;\r\n  font-size: 0.8rem;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n.type-badge.video {\r\n  background: rgba(220, 38, 38, 0.9);\r\n}\r\n\r\n.type-badge.image {\r\n  background: rgba(37, 99, 235, 0.9);\r\n}\r\n\r\n.creation-info {\r\n  padding: 1rem;\r\n}\r\n\r\n\r\n.creation-meta {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  font-size: 0.85rem;\r\n  color: #9ca3af;\r\n}\r\n\r\n.creation-actions {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n  padding: 0 1rem 1rem;\r\n}\r\n\r\n.action-btn-small {\r\n  flex: 1;\r\n  padding: 0.5rem;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: 1px solid rgba(255, 255, 255, 0.2);\r\n  border-radius: 8px;\r\n  color: white;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  font-size: 0.85rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.action-btn-small:hover {\r\n  background: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.action-btn-small.download {\r\n  background: rgba(34, 194, 166, 0.2);\r\n  border-color: #22c2a6;\r\n}\r\n\r\n.action-btn-small.download:hover {\r\n  background: rgba(34, 194, 166, 0.3);\r\n}\r\n\r\n.action-btn-small.delete {\r\n  background: rgba(229, 64, 99, 0.2);\r\n  border-color: #e54063;\r\n}\r\n\r\n.action-btn-small.delete:hover {\r\n  background: rgba(229, 64, 99, 0.3);\r\n}\r\n\r\n\/* Load More *\/\r\n.loadmore-container {\r\n  text-align: center;\r\n  padding: 2rem;\r\n}\r\n\r\n.loadmore-btn {\r\n  padding: 0.75rem 2rem;\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 25px;\r\n  cursor: pointer;\r\n  font-size: 1rem;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.loadmore-btn:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n}\r\n\r\n.loadmore-btn:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.pagination-info {\r\n  margin-top: 1rem;\r\n  color: #9ca3af;\r\n  font-size: 0.9rem;\r\n}\r\n\r\n\/* Empty State *\/\r\n.empty-state {\r\n  text-align: center;\r\n  padding: 4rem 2rem;\r\n}\r\n\r\n.empty-icon {\r\n  font-size: 5rem;\r\n  margin-bottom: 1rem;\r\n  opacity: 0.5;\r\n}\r\n\r\n.empty-state h3 {\r\n  font-size: 1.5rem;\r\n  margin-bottom: 0.5rem;\r\n  color: #e5e7eb;\r\n}\r\n\r\n.empty-state p {\r\n  color: #9ca3af;\r\n  margin-bottom: 2rem;\r\n}\r\n\r\n.action-buttons {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1rem;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.action-btn {\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 25px;\r\n  text-decoration: none;\r\n  color: white;\r\n  transition: all 0.3s ease;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.video-btn {\r\n  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);\r\n}\r\n\r\n.image-btn {\r\n  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);\r\n}\r\n\r\n.action-btn:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n\/* Modal *\/\r\n.media-modal {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 9999;\r\n}\r\n\r\n.modal-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: rgba(0, 0, 0, 0.9);\r\n}\r\n\r\n.modal-content {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  max-width: 90vw;\r\n  max-height: 90vh;\r\n  background: #1a1a1a;\r\n  border-radius: 15px;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.modal-close {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 15px;\r\n  width: 40px;\r\n  height: 40px;\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: none;\r\n  border-radius: 50%;\r\n  color: white;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n  z-index: 10;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.modal-close:hover {\r\n  background: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.modal-body {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.modal-body img,\r\n.modal-body video {\r\n  max-width: 100%;\r\n  height: auto;\r\n  display: block;\r\n}\r\n\r\n.modal-info {\r\n    padding: 1rem;\r\n    background: rgba(0, 0, 0, 0.5);\r\n    max-height: 200px;  \/* Diese Zeile fehlt *\/\r\n    overflow-y: auto;    \/* Das ist schon da *\/\r\n}\r\n\r\n.modal-info::-webkit-scrollbar {\r\n    width: 8px;\r\n}\r\n\r\n.modal-info::-webkit-scrollbar-track {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    border-radius: 4px;\r\n}\r\n\r\n.modal-info::-webkit-scrollbar-thumb {\r\n    background: rgba(255, 255, 255, 0.3);\r\n    border-radius: 4px;\r\n}\r\n\r\n.modal-info::-webkit-scrollbar-thumb:hover {\r\n    background: rgba(255, 255, 255, 0.5);\r\n}\r\n\r\n.modal-prompt {\r\n    margin: 0 0 1rem;\r\n    color: #e5e7eb;\r\n    line-height: 1.5;\r\n    word-wrap: break-word;\r\n    white-space: pre-wrap; \/* Erh\u00e4lt Zeilenumbr\u00fcche *\/\r\n}\r\n\r\n.modal-info.has-scroll {\r\n    position: relative;\r\n}\r\n\r\n.modal-info.has-scroll::after {\r\n    content: '\u2193';\r\n    position: sticky;\r\n    bottom: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    color: rgba(255, 255, 255, 0.5);\r\n    font-size: 20px;\r\n    pointer-events: none;\r\n    animation: bounce 2s infinite;\r\n}\r\n\r\n.modal-meta {\r\n  display: flex;\r\n  gap: 1rem;\r\n  font-size: 0.9rem;\r\n  color: #9ca3af;\r\n}\r\n\r\n.creation-prompt {\r\n  font-size: 0.9rem;\r\n  line-height: 1.4;\r\n  margin-bottom: 0.75rem;\r\n  color: #e5e7eb;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  position: relative;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n}\r\n\r\n.creation-prompt.expanded {\r\n  -webkit-line-clamp: unset !important;\r\n  display: block !important;\r\n  max-height: none !important;\r\n  overflow: visible !important;\r\n}\r\n\r\n.prompt-toggle {\r\n  color: #667eea;\r\n  font-size: 0.85rem;\r\n  margin-top: 0.5rem;\r\n  cursor: pointer;\r\n  display: inline-block;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.prompt-toggle:hover {\r\n  opacity: 0.8;\r\n  text-decoration: underline;\r\n}\r\n\r\n@keyframes slideUp {\r\n    from {\r\n        transform: translateX(-50%) translateY(100%);\r\n        opacity: 0;\r\n    }\r\n    to {\r\n        transform: translateX(-50%) translateY(0);\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes bounce {\r\n    0%, 100% { transform: translateX(-50%) translateY(0); }\r\n    50% { transform: translateX(-50%) translateY(-5px); }\r\n}\r\n\r\n\/* Responsive Design *\/\r\n@media (max-width: 768px) {\r\n  .mycreations-title {\r\n    font-size: 2rem;\r\n  }\r\n\r\n    .action-btn-small {\r\n        min-height: 44px;\r\n        padding: 12px;\r\n        font-size: 14px;\r\n    }\r\n    \r\n    .creation-actions {\r\n        gap: 10px;\r\n    }\r\n  \r\n  .mycreations-stats {\r\n    gap: 2rem;\r\n  }\r\n  \r\n  .stat-number {\r\n    font-size: 1.5rem;\r\n  }\r\n  \r\n  .creations-grid {\r\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n    gap: 1rem;\r\n  }\r\n  \r\n  .filter-btn {\r\n    padding: 0.5rem 1rem;\r\n    font-size: 0.9rem;\r\n  }\r\n\r\n    \r\n    .modal-body {\r\n        max-height: 60vh !important;\r\n    }\r\n    \r\n    .modal-body video,\r\n    .modal-body img {\r\n        max-height: 60vh !important;\r\n        width: auto !important;\r\n        max-width: 100% !important;\r\n    }\r\n    \r\n    .modal-info {\r\n        padding: 10px;\r\n        max-height: 30vh;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n.modal-content {\r\n        max-width: 100vw !important;\r\n        max-height: 100vh !important;\r\n        margin: 0;\r\n        border-radius: 0;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        transform: none !important;\r\n    }\r\n    \r\n    \/* Besserer Close-Button f\u00fcr Mobile *\/\r\n    .modal-close {\r\n        position: fixed;\r\n        top: 10px;\r\n        right: 10px;\r\n        width: 50px;\r\n        height: 50px;\r\n        background: rgba(0, 0, 0, 0.8);\r\n        border: 2px solid white;\r\n        border-radius: 50%;\r\n        color: white;\r\n        font-size: 30px;\r\n        z-index: 10001;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 2px 10px rgba(0,0,0,0.5);\r\n    }\r\n    \r\n    .modal-close:active {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n}\r\n\r\n\/* Verbessere Touch-Interaktion f\u00fcr Media-Cards *\/\r\n.creation-media {\r\n    cursor: pointer;\r\n    -webkit-tap-highlight-color: rgba(0,0,0,0.1);\r\n}\r\n\r\n.creation-media:active {\r\n    opacity: 0.9;\r\n}\r\n  \r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .mycreations-stats {\r\n    gap: 1.5rem;\r\n  }\r\n  \r\n  .creations-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n  \r\n  .mycreations-filters {\r\n    gap: 0.5rem;\r\n  }\r\n  \r\n  .action-buttons {\r\n    flex-direction: column;\r\n  }\r\n  \r\n  .action-btn {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n\/* === MUSIK-SPEZIFISCHE STYLES === *\/\r\n.creation-card .music-thumbnail-container {\r\n    position: relative;\r\n    width: 100%;\r\n    padding-bottom: 56.25%;\r\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n    overflow: hidden;\r\n}\r\n\r\n.music-thumbnail-container img {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 60%;\r\n    height: auto;\r\n    object-fit: contain;\r\n}\r\n\r\n.music-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: rgba(0, 0, 0, 0.3);\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n}\r\n\r\n.creation-card:hover .music-overlay {\r\n    opacity: 1;\r\n}\r\n\r\n.music-play-icon {\r\n    font-size: 3rem;\r\n    color: white;\r\n    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));\r\n}\r\n\r\n.music-duration {\r\n    color: white;\r\n    background: rgba(0, 0, 0, 0.6);\r\n    padding: 0.25rem 0.5rem;\r\n    border-radius: 15px;\r\n    margin-top: 0.5rem;\r\n    font-size: 0.85rem;\r\n}\r\n\r\n.type-badge.music {\r\n    background: rgba(155, 89, 182, 0.9);\r\n}\r\n\r\n.music-style {\r\n    font-size: 0.85rem;\r\n    color: #9b59b6;\r\n    margin: 0.5rem 0;\r\n}\r\n\r\n.music-style .style-label {\r\n    font-weight: 600;\r\n    color: #b8bcc8;\r\n}\r\n\r\n.music-player-modal {\r\n    text-align: center;\r\n    padding: 2rem;\r\n}\r\n\r\n.music-style-modal {\r\n    margin-top: 1rem;\r\n    color: #9b59b6;\r\n    font-size: 1rem;\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ MyCreations Page - Complete JavaScript with WPML Support\r\njQuery(document).ready(function($) {\r\n  console.log('\ud83c\udfa8 MyCreations Page Initializing...');\r\n  \r\n  \/\/ === \u00dcBERSETZUNGSSYSTEM ===\r\n  const translations = {\r\n    de: {\r\n      myCreations: 'Meine Kreationen',\r\n      myCreationsSubtitle: 'Verwalten Sie Ihre AI-generierten Videos und Bilder an einem Ort',\r\n      totalCreations: 'Gesamt',\r\n      videos: 'Videos',\r\n      images: 'Bilder',\r\n      all: 'Alle',\r\n      recent7Days: 'Letzte 7 Tage',\r\n      loadMyCreations: 'Meine Kreationen laden',\r\n      loadHint: 'Klicken Sie hier, um Ihre AI-Kreationen anzuzeigen',\r\n      loadingCreations: 'Lade Kreationen...',\r\n      noCreationsTitle: 'Noch keine Kreationen',\r\n      noCreationsText: 'Beginnen Sie jetzt mit der Erstellung beeindruckender AI-Videos und Bilder!',\r\n      shown: 'angezeigt',\r\n      of: 'von',\r\n      loadMore: 'Weitere laden',\r\n      download: 'Download',\r\n      delete: 'L\u00f6schen',\r\n      confirmDelete: 'M\u00f6chten Sie diese Kreation wirklich l\u00f6schen?',\r\n      downloadError: 'Download fehlgeschlagen',\r\n      deleteError: 'L\u00f6schen fehlgeschlagen',\r\n      loadError: 'Fehler beim Laden der Kreationen',\r\n      retry: 'Neu versuchen',\r\n      loading: 'L\u00e4dt...',\r\n      createVideo: 'Video erstellen',\r\n      createImage: 'Bild erstellen',\r\n      noDescription: 'Keine Beschreibung',\r\n      music: 'Musik',\r\nmusicStyle: 'Musik-Stil',\r\nstyleLabel: 'Style:',\r\naudioNotSupported: 'Ihr Browser unterst\u00fctzt das Audio-Tag nicht'\r\n      \r\n    },\r\n    en: {\r\n      myCreations: 'My Creations',\r\n      myCreationsSubtitle: 'Manage your AI-generated videos and images in one place',\r\n      totalCreations: 'Total',\r\n      videos: 'Videos',\r\n      images: 'Images',\r\n      all: 'All',\r\n      recent7Days: 'Last 7 Days',\r\n      loadMyCreations: 'Load My Creations',\r\n      loadHint: 'Click here to view your AI creations',\r\n      loadingCreations: 'Loading creations...',\r\n      noCreationsTitle: 'No Creations Yet',\r\n      noCreationsText: 'Start creating amazing AI videos and images now!',\r\n      shown: 'shown',\r\n      of: 'of',\r\n      loadMore: 'Load More',\r\n      download: 'Download',\r\n      delete: 'Delete',\r\n      confirmDelete: 'Do you really want to delete this creation?',\r\n      downloadError: 'Download failed',\r\n      deleteError: 'Delete failed',\r\n      loadError: 'Error loading creations',\r\n      retry: 'Try Again',\r\n      loading: 'Loading...',\r\n      createVideo: 'Create Video',\r\n      createImage: 'Create Image',\r\n      noDescription: 'No description',\r\n      music: 'Music',\r\nmusicStyle: 'Music Style', \r\nstyleLabel: 'Style:',\r\naudioNotSupported: 'Your browser does not support the audio tag'\r\n    }\r\n  };\r\n  \r\n  \/\/ === Sprache erkennen ===\r\n  function getCurrentLanguage() {\r\n    \/\/ 1. Aus window.sharkxsData\r\n    if (window.sharkxsData && window.sharkxsData.currentLang) {\r\n      console.log('Language from sharkxsData:', window.sharkxsData.currentLang);\r\n      return window.sharkxsData.currentLang;\r\n    }\r\n    \r\n    \/\/ 2. Aus HTML lang Attribut\r\n    const htmlLang = document.documentElement.lang;\r\n    if (htmlLang) {\r\n      const langCode = htmlLang.split('-')[0];\r\n      console.log('Language from HTML:', langCode);\r\n      return langCode;\r\n    }\r\n    \r\n    \/\/ 3. Aus URL\r\n    const url = window.location.pathname;\r\n    if (url.includes('\/en\/')) {\r\n      console.log('Language from URL: en');\r\n      return 'en';\r\n    }\r\n    \r\n    \/\/ 4. WPML Cookie\r\n    const wpmlCookie = document.cookie.match(\/wp-wpml_current_language=([^;]+)\/);\r\n    if (wpmlCookie && wpmlCookie[1]) {\r\n      console.log('Language from WPML cookie:', wpmlCookie[1]);\r\n      return wpmlCookie[1];\r\n    }\r\n    \r\n    \/\/ 5. Default\r\n    console.log('Using default language: de');\r\n    return 'de';\r\n  }\r\n  \r\n  const currentLang = getCurrentLanguage();\r\n  console.log('\ud83c\udf0d Current Language:', currentLang);\r\n  \r\n  \/\/ === \u00dcbersetzungsfunktion ===\r\n  function t(key, fallback) {\r\n    \/\/ 1. Versuche von window.sharkxsData.translations (vom PHP Backend)\r\n    if (window.sharkxsData && window.sharkxsData.translations && window.sharkxsData.translations[key]) {\r\n      return window.sharkxsData.translations[key];\r\n    }\r\n    \r\n    \/\/ 2. Versuche von window.sharkxsTranslations (global)\r\n    if (window.sharkxsTranslations && window.sharkxsTranslations[key]) {\r\n      return window.sharkxsTranslations[key];\r\n    }\r\n    \r\n    \/\/ 3. Verwende lokale \u00dcbersetzungen\r\n    const localTranslations = translations[currentLang] || translations['de'];\r\n    if (localTranslations[key]) {\r\n      return localTranslations[key];\r\n    }\r\n    \r\n    \/\/ 4. Fallback\r\n    return fallback || key;\r\n  }\r\n  \r\n  \/\/ === \u00dcbersetzungen anwenden ===\r\n  function applyTranslations() {\r\n    console.log('\ud83d\udd24 Applying translations for language:', currentLang);\r\n    \r\n    $('[data-translate]').each(function() {\r\n      const $elem = $(this);\r\n      const key = $elem.data('translate');\r\n      const currentText = $elem.text();\r\n      const translated = t(key, currentText);\r\n      \r\n      \/\/ Pr\u00fcfe ob es ein Input\/Button ist\r\n      if ($elem.is('input, button')) {\r\n        if ($elem.attr('value')) {\r\n          $elem.attr('value', translated);\r\n        } else {\r\n          $elem.text(translated);\r\n        }\r\n      } else {\r\n        $elem.text(translated);\r\n      }\r\n      \r\n      console.log(`Translated \"${key}\": \"${currentText}\" -> \"${translated}\"`);\r\n    });\r\n    \r\n    \/\/ Links anpassen basierend auf Sprache\r\n    if (currentLang === 'en') {\r\n      $('.video-btn').attr('href', '\/en\/ai-video');\r\n      $('.image-btn').attr('href', '\/en\/ai-image');\r\n    } else {\r\n      $('.video-btn').attr('href', '\/ai-video');\r\n      $('.image-btn').attr('href', '\/ai-image');\r\n    }\r\n  }\r\n  \r\n  \/\/ === Konfiguration ===\r\n  const CONFIG = {\r\n    perPage: 12,\r\n    apiBase: '\/wp-json\/sharkxs-credits\/v1'\r\n  };\r\n  \r\n  \/\/ === State Management ===\r\nlet state = {\r\n    currentPage: 0,\r\n    totalPages: 0,\r\n    totalItems: 0,  \/\/ Gesamtzahl vom Server\r\n    loadedItems: 0,  \/\/ Anzahl geladener Items\r\n    isLoading: false,\r\n    currentFilter: 'all',\r\n    allCreations: [],  \/\/ Alle vom Server geladenen Kreationen\r\n    filteredCreations: [],  \/\/ Gefilterte Kreationen\r\n    stats: {\r\n        total: 0,\r\n        videos: 0,\r\n        images: 0\r\n    }\r\n};\r\n  \/\/ === Kreationen laden ===\r\nasync function loadCreations(page = 1, append = false) {\r\n    if (state.isLoading) return;\r\n    \r\n    console.log('\ud83d\udce6 Loading creations, page:', page, 'append:', append);\r\n    state.isLoading = true;\r\n    \r\n    \/\/ UI Update\r\n    if (!append) {\r\n        $('#mycreations-initial-load').hide();\r\n        $('#mycreations-loading').show();\r\n        $('#mycreations-grid').hide();\r\n        if (page === 1) {  \/\/ Nur bei erstem Load zur\u00fccksetzen\r\n            state.allCreations = [];\r\n            state.filteredCreations = [];\r\n            state.loadedItems = 0;\r\n        }\r\n    } else {\r\n        $('#loadmore-btn').prop('disabled', true).text(t('loading', 'Loading...'));\r\n    }\r\n    \r\n    try {\r\n        const apiUrl = window.sharkxsData?.myCreationsEndpoint || CONFIG.apiBase + '\/my-creations';\r\n        const nonce = window.sharkxsData?.apiNonce || '<?php echo wp_create_nonce(\"wp_rest\"); ?>';\r\n        \r\n        const ajaxPromise = new Promise((resolve, reject) => {\r\n            $.ajax({\r\n                url: apiUrl,\r\n                method: 'GET',\r\n                headers: {\r\n                    'X-WP-Nonce': nonce\r\n                },\r\n                data: {\r\n                    page: page,\r\n                    per_page: CONFIG.perPage\r\n                },\r\n                success: function(data, textStatus, jqXHR) {\r\n                    const totalItems = parseInt(jqXHR.getResponseHeader('X-WP-Total') || 0);\r\n                    const totalPages = parseInt(jqXHR.getResponseHeader('X-WP-TotalPages') || 0);\r\n                    \r\n                    console.log('\u2705 Response Headers:', {\r\n                        total: totalItems,\r\n                        totalPages: totalPages,\r\n                        currentPage: page,\r\n                        dataLength: data.length\r\n                    });\r\n                    \r\n                    resolve({\r\n                        data: data,\r\n                        totalItems: totalItems,\r\n                        totalPages: totalPages\r\n                    });\r\n                },\r\n                error: function(jqXHR, textStatus, errorThrown) {\r\n                    reject(errorThrown);\r\n                }\r\n            });\r\n        });\r\n        \r\n        const result = await ajaxPromise;\r\n        \r\n        \/\/ State aktualisieren\r\n        state.currentPage = page;\r\n        state.totalPages = result.totalPages || Math.ceil(result.totalItems \/ CONFIG.perPage) || 1;\r\n        state.totalItems = result.totalItems || 0;\r\n        \r\n        \/\/ Fallback wenn keine Headers vorhanden\r\n        if (state.totalItems === 0 && result.data.length > 0) {\r\n            if (result.data.length < CONFIG.perPage) {\r\n                state.totalItems = (page - 1) * CONFIG.perPage + result.data.length;\r\n                state.totalPages = page;\r\n            } else {\r\n                \/\/ Vermute, dass es mehr gibt\r\n                state.totalItems = '100+';  \r\n                state.totalPages = page + 1;\r\n            }\r\n        }\r\n        \r\n        \/\/ F\u00fcge neue Kreationen hinzu\r\n        state.allCreations = state.allCreations.concat(result.data);\r\n        state.loadedItems = state.allCreations.length;\r\n        \r\n        \/\/ Berechne Stats mit Server-Total\r\n        const stats = calculateStats(state.allCreations, true);\r\n        updateStats(stats);\r\n        \r\n        \/\/ Wende aktuellen Filter an\r\n        filterAndDisplayCreations(append);\r\n        \r\n        \/\/ Zeige Load More wenn es mehr Seiten gibt\r\n        const hasMore = page < state.totalPages || result.data.length === CONFIG.perPage;\r\n        \r\n        if (hasMore) {\r\n            $('#mycreations-loadmore').show();\r\n            $('#loadmore-btn').prop('disabled', false).text(t('loadMore', 'Load More'));\r\n        } else {\r\n            $('#mycreations-loadmore').hide();\r\n        }\r\n        \r\n    } catch (error) {\r\n        console.error('\u274c Error loading:', error);\r\n        showError(error);\r\n    } finally {\r\n        state.isLoading = false;\r\n        $('#mycreations-loading').hide();\r\n    }\r\n}\r\n\r\n\/\/ === Mobile Swipe-to-Close Funktionalit\u00e4t ===\r\nfunction initMobileModalGestures() {\r\n    const modal = document.getElementById('media-modal');\r\n    const modalContent = modal.querySelector('.modal-content');\r\n    \r\n    let startY = 0;\r\n    let currentY = 0;\r\n    let isDragging = false;\r\n    \r\n    \/\/ Touch-Start\r\n    modalContent.addEventListener('touchstart', function(e) {\r\n        startY = e.touches[0].clientY;\r\n        isDragging = true;\r\n        modalContent.style.transition = 'none';\r\n    });\r\n    \r\n    \/\/ Touch-Move\r\n    modalContent.addEventListener('touchmove', function(e) {\r\n        if (!isDragging) return;\r\n        \r\n        currentY = e.touches[0].clientY;\r\n        const deltaY = currentY - startY;\r\n        \r\n        \/\/ Nur nach unten ziehen erlauben\r\n        if (deltaY > 0) {\r\n            modalContent.style.transform = `translateY(${deltaY}px)`;\r\n            modalContent.style.opacity = 1 - (deltaY \/ 300);\r\n        }\r\n    });\r\n    \r\n    \/\/ Touch-End\r\n    modalContent.addEventListener('touchend', function(e) {\r\n        isDragging = false;\r\n        modalContent.style.transition = 'all 0.3s ease';\r\n        \r\n        const deltaY = currentY - startY;\r\n        \r\n        \/\/ Wenn mehr als 100px nach unten gezogen, schlie\u00dfe Modal\r\n        if (deltaY > 100) {\r\n            closeMediaModal();\r\n        } else {\r\n            \/\/ Zur\u00fcck zur Ausgangsposition\r\n            modalContent.style.transform = '';\r\n            modalContent.style.opacity = '';\r\n        }\r\n        \r\n        startY = 0;\r\n        currentY = 0;\r\n    });\r\n}\r\n\r\n\/\/ Initialisiere beim Laden\r\n$(document).ready(function() {\r\n    if (\/iPhone|iPad|iPod|Android\/i.test(navigator.userAgent)) {\r\n        initMobileModalGestures();\r\n    }\r\n});\r\n\r\n  \/\/ === Kreationen anzeigen ===\r\nfunction displayCreations(creations, append = false) {\r\n    const $grid = $('#mycreations-grid');\r\n    \r\n    if (!append) {\r\n        $grid.empty();\r\n    }\r\n    \r\n    if (creations.length === 0 && !append) {\r\n        $('#mycreations-empty').show();\r\n        $grid.hide();\r\n        \r\n        \/\/ Angepasste Nachricht basierend auf Filter\r\n        let emptyMessage = '';\r\n        switch(state.currentFilter) {\r\n            case 'video':\r\n                emptyMessage = currentLang === 'en' \r\n                    ? 'No videos found.' + (state.loadedItems < state.totalItems ? ' Try loading more items.' : ' Create your first AI video!')\r\n                    : 'Keine Videos gefunden.' + (state.loadedItems < state.totalItems ? ' Versuchen Sie mehr zu laden.' : ' Erstellen Sie Ihr erstes AI-Video!');\r\n                break;\r\n            case 'image':\r\n                emptyMessage = currentLang === 'en' \r\n                    ? 'No images found.' + (state.loadedItems < state.totalItems ? ' Try loading more items.' : ' Create your first AI image!')\r\n                    : 'Keine Bilder gefunden.' + (state.loadedItems < state.totalItems ? ' Versuchen Sie mehr zu laden.' : ' Erstellen Sie Ihr erstes AI-Bild!');\r\n                break;\r\n            case 'recent':\r\n                emptyMessage = currentLang === 'en' \r\n                    ? 'No creations in the last 7 days.' + (state.loadedItems < state.totalItems ? ' Try loading more items.' : '')\r\n                    : 'Keine Kreationen in den letzten 7 Tagen.' + (state.loadedItems < state.totalItems ? ' Versuchen Sie mehr zu laden.' : '');\r\n                break;\r\n            default:\r\n                emptyMessage = t('noCreationsText', 'Start creating amazing AI videos and images now!');\r\n        }\r\n        $('#mycreations-empty p').text(emptyMessage);\r\n        return;\r\n    }\r\n    \r\n    $('#mycreations-empty').hide();\r\n    $grid.show();\r\n    \r\n    \/\/ Nur neue Items hinzuf\u00fcgen wenn append = true\r\n    const itemsToAdd = append \r\n        ? creations.slice(creations.length - CONFIG.perPage) \r\n        : creations;\r\n    \r\n    itemsToAdd.forEach((creation, index) => {\r\n        const card = createCreationCard(creation);\r\n        $grid.append(card);\r\n        \r\n        setTimeout(() => {\r\n            card.addClass('animated');\r\n        }, index * 50);\r\n    });\r\n}\r\n  \r\n  \/\/ === Kreations-Karte erstellen ===\r\nfunction createCreationCard(creation) {\r\n    const isVideo = creation.job_type === 'video';\r\n    const isImage = creation.job_type === 'image';\r\n    const isMusic = creation.job_type === 'music'; \/\/ NEU\r\n    \r\n    let mediaUrl = '';\r\n    let thumbnailUrl = '';\r\n    \r\n    if (isMusic) {\r\n        mediaUrl = creation.final_audio_url;\r\n        thumbnailUrl = creation.thumbnail_url || 'https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/09\/music.png';\r\n    } else if (isVideo) {\r\n        mediaUrl = creation.final_video_url;\r\n        thumbnailUrl = creation.thumbnail_url || mediaUrl;\r\n    } else {\r\n        mediaUrl = creation.final_image_url;\r\n        thumbnailUrl = creation.thumbnail_url || mediaUrl;\r\n    }\r\n    \r\n    const date = new Date(creation.date);\r\n    const dateStr = date.toLocaleDateString(currentLang === 'en' ? 'en-US' : 'de-DE', {\r\n        day: '2-digit',\r\n        month: '2-digit',\r\n        year: 'numeric'\r\n    });\r\n    \r\n    const promptText = creation.prompt || t('noDescription', 'No description');\r\n    const isLongPrompt = promptText.length > 100;\r\n    const promptId = 'prompt-' + creation.id;\r\n    \r\n    let typeBadgeIcon = '';\r\n    let typeBadgeText = '';\r\n    let typeBadgeClass = '';\r\n    \r\n    if (isMusic) {\r\n    typeBadgeIcon = '\ud83c\udfb5';\r\n    typeBadgeText = t('music', 'Musik'); \/\/ Verwendet t() Funktion\r\n    typeBadgeClass = 'music';\r\n} else if (isVideo) {\r\n    typeBadgeIcon = '\ud83c\udfac';\r\n    typeBadgeText = t('videos', 'Video');\r\n    typeBadgeClass = 'video';\r\n} else {\r\n    typeBadgeIcon = '\ud83d\uddbc\ufe0f';\r\n    typeBadgeText = t('image', 'Bild');\r\n    typeBadgeClass = 'image';\r\n}\r\n    \r\n    const $card = $(`\r\n        <div class=\"creation-card\" data-id=\"${creation.id}\" data-type=\"${creation.job_type}\">\r\n            <div class=\"creation-media\" data-url=\"${mediaUrl}\" data-type=\"${creation.job_type}\">\r\n                ${isMusic \r\n                    ? `<div class=\"music-thumbnail-container\">\r\n                           <img decoding=\"async\" src=\"${thumbnailUrl}\" alt=\"Music\" loading=\"lazy\" \/>\r\n                           <div class=\"music-overlay\">\r\n                               <span class=\"music-play-icon\">\u25b6\ufe0f<\/span>\r\n                               <span class=\"music-duration\">${creation.duration || 30}s<\/span>\r\n                           <\/div>\r\n                       <\/div>`\r\n                    : isVideo \r\n                    ? `<video src=\"${thumbnailUrl}\" preload=\"metadata\" muted><\/video>\r\n                       <div class=\"media-overlay\"><span class=\"play-icon\">\u25b6\ufe0f<\/span><\/div>`\r\n                    : `<img decoding=\"async\" src=\"${thumbnailUrl}\" alt=\"${escapeHtml(creation.prompt || 'AI Creation')}\" loading=\"lazy\" \/>`\r\n                }\r\n                <div class=\"type-badge ${typeBadgeClass}\">\r\n                    ${typeBadgeIcon} ${typeBadgeText}\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"creation-info\">\r\n                <div class=\"creation-prompt ${isLongPrompt ? 'has-toggle' : ''}\" \r\n                     id=\"${promptId}\">\r\n                    ${escapeHtml(isLongPrompt ? promptText.substring(0, 100) + '...' : promptText)}\r\n                <\/div>\r\n                ${isLongPrompt ? `\r\n                    <span class=\"prompt-toggle\" data-target=\"${promptId}\" data-full-text=\"${promptText.replace(\/\"\/g, '&quot;')}\">\r\n                        ${t('more', 'mehr')} \u25bc\r\n                    <\/span>\r\n                ` : ''}\r\n                ${isMusic && creation.music_style ? `\r\n    <div class=\"music-style\">\r\n        <span class=\"style-label\">${t('styleLabel', 'Style:')}<\/span> ${escapeHtml(creation.music_style)}\r\n    <\/div>\r\n` : ''}\r\n                <div class=\"creation-meta\">\r\n                    <span class=\"creation-date\">${dateStr}<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"creation-actions\">\r\n                <button class=\"action-btn-small download\" \r\n                        data-url=\"${mediaUrl}\" \r\n                        data-filename=\"sharkxs-${creation.job_type}-${creation.id}\" \r\n                        data-type=\"${creation.job_type}\"\r\n                        title=\"${t('download', 'Download')}\">\r\n                    <span>\u2b07\ufe0f<\/span> ${t('download', 'Download')}\r\n                <\/button>\r\n                <button class=\"action-btn-small delete\" data-id=\"${creation.id}\" title=\"${t('delete', 'Delete')}\">\r\n                    <span>\ud83d\uddd1\ufe0f<\/span> ${t('delete', 'Delete')}\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    `);\r\n    \r\n    $card.find(`#${promptId}`).data('fullPrompt', promptText);\r\n    \r\n    return $card;\r\n}\r\n  \r\n  \/\/ === Stats berechnen ===\r\nfunction calculateStats(creations, useServerTotal = false) {\r\n    const stats = {\r\n        total: useServerTotal ? state.totalItems : creations.length,\r\n        videos: creations.filter(c => c.job_type === 'video').length,\r\n        images: creations.filter(c => c.job_type === 'image').length\r\n    };\r\n    \r\n    \/\/ Wenn wir die Server-Totals kennen, verwende diese f\u00fcr die Anzeige\r\n    if (state.totalItems > creations.length) {\r\n        stats.totalDisplay = state.totalItems;\r\n        stats.videosDisplay = Math.round(state.totalItems * (stats.videos \/ creations.length)) || stats.videos;\r\n        stats.imagesDisplay = state.totalItems - stats.videosDisplay;\r\n    } else {\r\n        stats.totalDisplay = stats.total;\r\n        stats.videosDisplay = stats.videos;\r\n        stats.imagesDisplay = stats.images;\r\n    }\r\n    \r\n    return stats;\r\n}\r\n  \r\n  \/\/ === Stats anzeigen ===\r\nfunction updateStats(stats) {\r\n    \/\/ Zeige die gesch\u00e4tzten Gesamtzahlen wenn nicht alle geladen sind\r\n    $('#total-creations').text(stats.totalDisplay || stats.total);\r\n    \r\n    if (state.totalItems > state.loadedItems) {\r\n        \/\/ Zeige aktuelle\/gesamt Format wenn nicht alle geladen sind\r\n        $('#video-count').text(stats.videos + (stats.videosDisplay > stats.videos ? '+' : ''));\r\n        $('#image-count').text(stats.images + (stats.imagesDisplay > stats.images ? '+' : ''));\r\n    } else {\r\n        $('#video-count').text(stats.videos);\r\n        $('#image-count').text(stats.images);\r\n    }\r\n    \r\n    state.stats = stats;\r\n}\r\n  \r\n  \/\/ === Pagination Update ===\r\nfunction updatePagination() {\r\n    const displayCount = state.currentFilter !== 'all' \r\n        ? state.filteredCreations.length \r\n        : state.loadedItems;\r\n        \r\n    $('#showing-count').text(displayCount);\r\n    $('#total-count').text(state.totalItems);\r\n}\r\n\r\n\/\/ === Load More Button Handler anpassen ===\r\n$('#loadmore-btn').off('click').on('click', async function() {\r\n    console.log('\ud83d\udce6 Load more clicked');\r\n    await loadCreations(state.currentPage + 1, true);\r\n});\r\n  \r\n  \/\/ === Filter anwenden ===\r\nasync function applyFilter(filter) {\r\n    if (filter === state.currentFilter) return;\r\n    \r\n    console.log('\ud83d\udd0d Applying filter:', filter);\r\n    state.currentFilter = filter;\r\n    \r\n    $('.filter-btn').removeClass('active');\r\n    $(`.filter-btn[data-filter=\"${filter}\"]`).addClass('active');\r\n    \r\n    \/\/ Wenn noch keine Kreationen geladen wurden, lade sie zuerst\r\n    if (state.allCreations.length === 0) {\r\n        await loadCreations(1, false);\r\n        return;\r\n    }\r\n    \r\n    \/\/ Filtere und zeige vorhandene Kreationen\r\n    filterAndDisplayCreations();\r\n}\r\n\r\n\/\/ === Neue Funktion: Kreationen filtern und anzeigen ===\r\nfunction filterAndDisplayCreations(append = false) {\r\n    let filtered = [...state.allCreations];\r\n    \r\n    \/\/ Wende Filter an\r\n    switch(state.currentFilter) {\r\n        case 'video':\r\n            filtered = state.allCreations.filter(c => c.job_type === 'video');\r\n            break;\r\n        case 'image':\r\n            filtered = state.allCreations.filter(c => c.job_type === 'image');\r\n            break;\r\n        case 'music':\r\n    filtered = state.allCreations.filter(c => c.job_type === 'music');\r\n    break;\r\n        case 'recent':\r\n            const sevenDaysAgo = new Date();\r\n            sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);\r\n            filtered = state.allCreations.filter(c => {\r\n                const creationDate = new Date(c.date);\r\n                return creationDate >= sevenDaysAgo;\r\n            });\r\n            break;\r\n        case 'all':\r\n        default:\r\n            \/\/ Keine Filterung\r\n            break;\r\n    }\r\n    \r\n    state.filteredCreations = filtered;\r\n    displayCreations(filtered, append);\r\n    \r\n    \/\/ Update Pagination f\u00fcr gefilterte Ergebnisse\r\n    $('#showing-count').text(filtered.length);\r\n    \r\n    if (state.currentFilter !== 'all') {\r\n        $('#total-count').text(filtered.length);\r\n        \r\n        \/\/ Bei Filtern: Zeige Info \u00fcber gefilterte Ergebnisse\r\n        if (state.currentPage < state.totalPages && state.loadedItems < state.totalItems) {\r\n            \/\/ Es gibt noch mehr zu laden vom Server\r\n            const loadMoreText = currentLang === 'en' \r\n                ? `Load more (${state.loadedItems}\/${state.totalItems} loaded)` \r\n                : `Weitere laden (${state.loadedItems}\/${state.totalItems} geladen)`;\r\n            $('#loadmore-btn').text(loadMoreText);\r\n        }\r\n    } else {\r\n        $('#total-count').text(state.totalItems);\r\n    }\r\n}\r\n\r\n\/\/ === Neue Funktion: Gefilterte Kreationen anzeigen ===\r\nfunction displayFilteredCreations(creations) {\r\n    const $grid = $('#mycreations-grid');\r\n    $grid.empty();\r\n    \r\n    if (creations.length === 0) {\r\n        \/\/ Zeige leeren Zustand mit filterabh\u00e4ngiger Nachricht\r\n        $('#mycreations-empty').show();\r\n        $grid.hide();\r\n        \r\n        \/\/ Passe die Nachricht basierend auf dem Filter an\r\n        let emptyMessage = '';\r\n        switch(state.currentFilter) {\r\n            case 'video':\r\n                emptyMessage = currentLang === 'en' \r\n                    ? 'No videos found. Create your first AI video!' \r\n                    : 'Keine Videos gefunden. Erstellen Sie Ihr erstes AI-Video!';\r\n                break;\r\n            case 'image':\r\n                emptyMessage = currentLang === 'en' \r\n                    ? 'No images found. Create your first AI image!' \r\n                    : 'Keine Bilder gefunden. Erstellen Sie Ihr erstes AI-Bild!';\r\n                break;\r\n            case 'recent':\r\n                emptyMessage = currentLang === 'en' \r\n                    ? 'No creations in the last 7 days.' \r\n                    : 'Keine Kreationen in den letzten 7 Tagen.';\r\n                break;\r\n            default:\r\n                emptyMessage = t('noCreationsText', 'Start creating amazing AI videos and images now!');\r\n        }\r\n        $('#mycreations-empty p').text(emptyMessage);\r\n        \r\n        $('#mycreations-loadmore').hide();\r\n        return;\r\n    }\r\n    \r\n    $('#mycreations-empty').hide();\r\n    $grid.show();\r\n    \r\n    \/\/ Zeige nur die ersten CONFIG.perPage Elemente\r\n    const itemsToShow = creations.slice(0, state.loadedItems);\r\n    \r\n    itemsToShow.forEach((creation, index) => {\r\n        const card = createCreationCard(creation);\r\n        $grid.append(card);\r\n        \r\n        setTimeout(() => {\r\n            card.addClass('animated');\r\n        }, index * 50);\r\n    });\r\n    \r\n    \/\/ Update Pagination Info f\u00fcr gefilterte Ergebnisse\r\n    $('#showing-count').text(Math.min(state.loadedItems, creations.length));\r\n    $('#total-count').text(creations.length);\r\n    \r\n    \/\/ Verstecke Load More wenn alle gefilterten Items angezeigt werden\r\n    if (creations.length <= state.loadedItems || state.currentPage >= state.totalPages) {\r\n        $('#mycreations-loadmore').hide();\r\n    } else {\r\n        $('#mycreations-loadmore').show();\r\n    }\r\n}\r\n  \r\n  \/\/ === Download Handler ===\r\n\/\/ === Verbesserte Download-Funktion mit PHP-Proxy ===\r\nasync function downloadMedia(url, filename, mediaType = null) {\r\n    const isMobile = \/iPhone|iPad|iPod|Android\/i.test(navigator.userAgent);\r\n    \r\n    \/\/ Erkenne Typ\r\n    let type = mediaType || 'image';\r\n    \r\n    if (!mediaType) {\r\n        if (filename.includes('video') || url.includes('.mp4')) {\r\n            type = 'video';\r\n        } else if (filename.includes('music') || url.includes('.mp3') || url.includes('.wav')) {\r\n            type = 'audio';\r\n        }\r\n    }\r\n    \r\n    console.log('Download:', { url, filename, type });\r\n    \r\n    try {\r\n        \/\/ F\u00fcr Audio-Dateien: Lade als Blob und erzwinge Download\r\n        if (type === 'audio' || url.includes('.mp3')) {\r\n            const isGerman = getCurrentLanguage() === 'de';\r\n            showToast(isGerman ? '\u23f3 Musik wird vorbereitet...' : '\u23f3 Preparing music...');\r\n            \r\n            try {\r\n                \/\/ Lade die Datei als Blob\r\n                const response = await fetch(url);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error('Download fehlgeschlagen');\r\n                }\r\n                \r\n                const blob = await response.blob();\r\n                \r\n                \/\/ Erstelle Blob-URL\r\n                const blobUrl = window.URL.createObjectURL(blob);\r\n                \r\n                \/\/ Erstelle Download-Link\r\n                const a = document.createElement('a');\r\n                a.href = blobUrl;\r\n                a.download = filename.endsWith('.mp3') ? filename : filename + '.mp3';\r\n                a.style.display = 'none';\r\n                \r\n                document.body.appendChild(a);\r\n                a.click();\r\n                \r\n                \/\/ Aufr\u00e4umen\r\n                setTimeout(() => {\r\n                    window.URL.revokeObjectURL(blobUrl);\r\n                    a.remove();\r\n                }, 100);\r\n                \r\n                showToast(isGerman ? '\u2705 Musik-Download gestartet!' : '\u2705 Music download started!');\r\n                \r\n            } catch (fetchError) {\r\n                console.error('Blob download failed, trying direct:', fetchError);\r\n                \r\n                \/\/ Fallback: Direkter Download-Versuch\r\n                const a = document.createElement('a');\r\n                a.href = url;\r\n                a.download = filename.endsWith('.mp3') ? filename : filename + '.mp3';\r\n                a.setAttribute('download', ''); \/\/ Force download attribute\r\n                \r\n                \/\/ Versuche mit einem Klick-Event\r\n                document.body.appendChild(a);\r\n                \r\n                \/\/ Simuliere Klick\r\n                const clickEvent = new MouseEvent('click', {\r\n                    view: window,\r\n                    bubbles: true,\r\n                    cancelable: false\r\n                });\r\n                a.dispatchEvent(clickEvent);\r\n                \r\n                setTimeout(() => a.remove(), 100);\r\n                \r\n                showToast(isGerman ? '\u26a0\ufe0f Falls der Download nicht startet, Rechtsklick \u2192 Speichern unter' : \r\n                         '\u26a0\ufe0f If download doesn\\'t start, right-click \u2192 Save as');\r\n            }\r\n            \r\n            return;\r\n        }\r\n        \r\n        \/\/ F\u00fcr Video und Bilder: Verwende Proxy\r\n        const proxyUrl = `\/wp-json\/sharkxs-credits\/v1\/download-proxy?url=${encodeURIComponent(url)}&type=${type}`;\r\n        \r\n        if (isMobile) {\r\n            window.location.href = proxyUrl;\r\n        } else {\r\n            const iframe = document.createElement('iframe');\r\n            iframe.style.display = 'none';\r\n            iframe.src = proxyUrl;\r\n            document.body.appendChild(iframe);\r\n            \r\n            setTimeout(() => {\r\n                iframe.remove();\r\n            }, 5000);\r\n        }\r\n        \r\n        const isGerman = getCurrentLanguage() === 'de';\r\n        showToast(isGerman ? '\u2705 Download gestartet...' : '\u2705 Download started...');\r\n        \r\n    } catch (error) {\r\n        console.error('Download failed:', error);\r\n        \r\n        \/\/ Ultimate Fallback\r\n        const a = document.createElement('a');\r\n        a.href = url;\r\n        a.download = filename || 'ai-creation';\r\n        a.target = '_blank';\r\n        document.body.appendChild(a);\r\n        a.click();\r\n        setTimeout(() => a.remove(), 100);\r\n    }\r\n}\r\n\r\n\/\/ Toast-Funktion bleibt gleich\r\nfunction showToast(message) {\r\n    $('.download-toast').remove();\r\n    \r\n    const toast = $(`\r\n        <div class=\"download-toast\" style=\"\r\n            position: fixed;\r\n            bottom: 20px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background: rgba(0,0,0,0.9);\r\n            color: white;\r\n            padding: 12px 20px;\r\n            border-radius: 25px;\r\n            font-size: 14px;\r\n            z-index: 10000;\r\n            max-width: 90%;\r\n            text-align: center;\r\n            animation: slideUp 0.3s ease;\r\n        \">\r\n            ${message}\r\n        <\/div>\r\n    `);\r\n    \r\n    $('body').append(toast);\r\n    \r\n    setTimeout(() => {\r\n        toast.fadeOut(300, function() {\r\n            $(this).remove();\r\n        });\r\n    }, 3000);\r\n}\r\n  \r\n  \/\/ === Delete Handler ===\r\nasync function deleteCreation(id) {\r\n    if (!confirm(t('confirmDelete', 'Do you really want to delete this creation?'))) {\r\n        return;\r\n    }\r\n    \r\n    try {\r\n        const apiUrl = window.sharkxsData?.myCreationsEndpoint || CONFIG.apiBase + '\/my-creations';\r\n        const deleteUrl = apiUrl.replace('\/my-creations', `\/delete-creation\/${id}`);\r\n        const nonce = window.sharkxsData?.apiNonce || '<?php echo wp_create_nonce(\"wp_rest\"); ?>';\r\n        \r\n        await $.ajax({\r\n            url: deleteUrl,\r\n            method: 'DELETE',\r\n            headers: {\r\n                'X-WP-Nonce': nonce\r\n            }\r\n        });\r\n        \r\n        $(`.creation-card[data-id=\"${id}\"]`).fadeOut(300, function() {\r\n            $(this).remove();\r\n            \r\n            \/\/ Entferne aus allen Listen\r\n            state.allCreations = state.allCreations.filter(c => c.id !== id);\r\n            state.displayedCreations = state.displayedCreations.filter(c => c.id !== id);\r\n            state.loadedItems = state.allCreations.length;\r\n            state.totalItems = Math.max(0, state.totalItems - 1);\r\n            \r\n            const stats = calculateStats(state.allCreations);\r\n            updateStats(stats);\r\n            \r\n            \/\/ Wende Filter neu an um die Anzeige zu aktualisieren\r\n            if (state.currentFilter !== 'all') {\r\n                filterAndDisplayCreations();\r\n            } else {\r\n                updatePagination();\r\n            }\r\n            \r\n            \/\/ Zeige Empty State wenn keine Kreationen mehr vorhanden\r\n            if (state.displayedCreations.length === 0 || \r\n                (state.currentFilter === 'all' && state.allCreations.length === 0)) {\r\n                $('#mycreations-grid').hide();\r\n                $('#mycreations-empty').show();\r\n            }\r\n        });\r\n        \r\n    } catch (error) {\r\n        console.error('Delete failed:', error);\r\n        alert(t('deleteError', 'Delete failed'));\r\n    }\r\n}\r\n\r\n\/\/ === Load More Button f\u00fcr gefilterte Ansicht anpassen ===\r\n$('#loadmore-btn').on('click', async function() {\r\n    console.log('\ud83d\udce6 Load more clicked');\r\n    \r\n    if (state.currentFilter !== 'all') {\r\n        \/\/ Wenn ein Filter aktiv ist, lade erst mehr Daten und filtere dann\r\n        await loadCreations(state.currentPage + 1, true);\r\n    } else {\r\n        await loadCreations(state.currentPage + 1, true);\r\n    }\r\n});\r\n  \r\n  \/\/ === Fehler anzeigen ===\r\n  function showError(error) {\r\n    console.error('Error details:', error);\r\n    $('#mycreations-loading').hide();\r\n    $('#mycreations-initial-load').show();\r\n    \r\n    if (!$('#error-message').length) {\r\n      $('#mycreations-initial-load').append(`\r\n        <div id=\"error-message\" style=\"color: #ef4444; margin-top: 1rem;\">\r\n          <p>${t('loadError', 'Error loading creations')}<\/p>\r\n          <small>Details: ${error.statusText || error.message || 'Unknown error'}<\/small>\r\n        <\/div>\r\n      `);\r\n    }\r\n  }\r\n\r\n\/\/ === Media Modal Funktion ===\r\n\/\/ Erweitere die openMediaModal Funktion\r\nfunction openMediaModal(url, type, prompt, date, style) {\r\n    const $modal = $('#media-modal');\r\n    const $modalBody = $modal.find('.modal-body');\r\n    const $modalPrompt = $modal.find('.modal-prompt');\r\n    const $modalDate = $modal.find('.modal-date');\r\n    const $modalType = $modal.find('.modal-type');\r\n    const $modalInfo = $modal.find('.modal-info');\r\n    \r\n    $modalBody.empty();\r\n    \r\nif (type === 'music') {\r\n    $modalBody.html(`\r\n        <div class=\"music-player-modal\">\r\n            <img decoding=\"async\" src=\"https:\/\/sharkxs.com\/wp-content\/uploads\/2025\/09\/music.png\" \r\n                 alt=\"${t('music', 'Music')}\" \r\n                 style=\"width: 200px; height: 200px; margin: 0 auto 20px; display: block; border-radius: 10px;\">\r\n            <audio controls autoplay style=\"width: 100%; max-width: 400px;\">\r\n                <source src=\"${url}\" type=\"audio\/mpeg\">\r\n                ${t('audioNotSupported', 'Ihr Browser unterst\u00fctzt das Audio-Tag nicht.')}\r\n            <\/audio>\r\n            ${style ? `<div class=\"music-style-modal\">${t('styleLabel', 'Style:')} ${style}<\/div>` : ''}\r\n        <\/div>\r\n    `);\r\n    $modalType.text('\ud83c\udfb5 ' + t('music', 'Musik'));\r\n} else if (type === 'video') {\r\n        $modalBody.html(`\r\n            <video controls autoplay style=\"width: 100%; max-height: 80vh;\">\r\n                <source src=\"${url}\" type=\"video\/mp4\">\r\n                Ihr Browser unterst\u00fctzt das Video-Tag nicht.\r\n            <\/video>\r\n        `);\r\n        $modalType.text('\ud83c\udfac Video');\r\n    } else {\r\n        $modalBody.html(`\r\n            <img decoding=\"async\" src=\"${url}\" alt=\"AI Creation\" style=\"width: 100%; height: auto; max-height: 80vh; object-fit: contain;\">\r\n        `);\r\n        $modalType.text('\ud83d\uddbc\ufe0f ' + (getCurrentLanguage() === 'en' ? 'Image' : 'Bild'));\r\n    }\r\n    \r\n    $modalPrompt.text(prompt || t('noDescription', 'Keine Beschreibung'));\r\n    $modalDate.text(date || '');\r\n    \r\n    $modal.fadeIn(300, function() {\r\n        if ($modalInfo[0].scrollHeight > $modalInfo[0].clientHeight) {\r\n            $modalInfo.addClass('has-scroll');\r\n        } else {\r\n            $modalInfo.removeClass('has-scroll');\r\n        }\r\n    });\r\n    \r\n    $('body').css('overflow', 'hidden');\r\n}\r\n\r\n\/\/ === Modal schlie\u00dfen - erweiterte Version ===\r\nfunction closeMediaModal() {\r\n    const $modal = $('#media-modal');\r\n    \r\n    \/\/ Pausiere Videos\r\n    $modal.find('video').each(function() {\r\n        this.pause();\r\n    });\r\n    \r\n    \/\/ Verstecke Modal\r\n    $modal.fadeOut(300, function() {\r\n        \/\/ Leere Inhalt nach dem Ausblenden\r\n        $(this).find('.modal-body').empty();\r\n    });\r\n    \r\n    \/\/ Erlaube wieder Scrollen\r\n    $('body').css('overflow', 'auto');\r\n}\r\n\r\n\/\/ === Aktualisiere die Event-Handler f\u00fcr Modal ===\r\n$('#media-modal .modal-close, #media-modal .modal-overlay').on('click', function() {\r\n    closeMediaModal();\r\n});\r\n\r\n\/\/ ESC-Taste zum Schlie\u00dfen\r\n$(document).on('keydown', function(e) {\r\n    if (e.key === 'Escape' && $('#media-modal').is(':visible')) {\r\n        closeMediaModal();\r\n    }\r\n});\r\n\r\n\/\/ Verhindere Schlie\u00dfen beim Klick auf Modal-Inhalt\r\n$('#media-modal .modal-content').on('click', function(e) {\r\n    e.stopPropagation();\r\n});\r\n\r\n\r\n  \/\/ === Escape HTML ===\r\n  function escapeHtml(text) {\r\n    if (!text) return '';\r\n    const map = {\r\n      '&': '&amp;',\r\n      '<': '&lt;',\r\n      '>': '&gt;',\r\n      '\"': '&quot;',\r\n      \"'\": '&#039;'\r\n    };\r\n    return text.replace(\/[&<>\"']\/g, m => map[m]);\r\n  }\r\n  \r\n  \/\/ === Event Handlers ===\r\n  \r\n  \/\/ Initial Load Button\r\n  $('#load-creations-btn').on('click', function() {\r\n    console.log('\ud83d\ude80 Initial load button clicked');\r\n    loadCreations(1, false);\r\n  });\r\n  \r\n  \/\/ Load More Button\r\n  $('#loadmore-btn').on('click', function() {\r\n    console.log('\ud83d\udce6 Load more clicked');\r\n    loadCreations(state.currentPage + 1, true);\r\n  });\r\n  \r\n  \/\/ Filter Buttons\r\n  $('.filter-btn').on('click', function() {\r\n    const filter = $(this).data('filter');\r\n    applyFilter(filter);\r\n  });\r\n  \r\n  \/\/ Media Click - Open Modal\r\n$(document).on('click', '.creation-media', function(e) {\r\n    e.preventDefault();\r\n    e.stopPropagation();\r\n    \r\n    const $this = $(this);\r\n    const url = $this.data('url');\r\n    const type = $this.data('type');\r\n    const $card = $this.closest('.creation-card');\r\n    \r\n    const $prompt = $card.find('.creation-prompt');\r\n    const fullPrompt = $prompt.data('fullPrompt') || $prompt.text();\r\n    \r\n    const date = $card.find('.creation-date').text();\r\n    \r\n    let style = '';\r\n    if (type === 'music') {\r\n        style = $card.find('.music-style').text().replace('Style:', '').trim();\r\n    }\r\n    \r\n    openMediaModal(url, type, fullPrompt, date, style);\r\n});\r\n  \r\n\/\/ Download Button\r\n$(document).on('click', '.action-btn-small.download', function(e) {\r\n    e.stopPropagation();\r\n    const url = $(this).data('url');\r\n    const type = $(this).data('type'); \/\/ Hole den Typ aus data-type\r\n    let filename = $(this).data('filename') || 'ai-creation-' + Date.now();\r\n    \r\n    \/\/ Stelle sicher, dass Musik-Dateien die richtige Endung haben\r\n    if (type === 'music' && !filename.endsWith('.mp3')) {\r\n        filename += '.mp3';\r\n    }\r\n    \r\n    downloadMedia(url, filename, type);\r\n});\r\n  \r\n  \/\/ Delete Button\r\n  $(document).on('click', '.action-btn-small.delete', function(e) {\r\n    e.stopPropagation();\r\n    const id = $(this).data('id');\r\n    deleteCreation(id);\r\n  });\r\n\/\/ Prompt aufklappen\/zuklappen\r\n$(document).on('click', '.prompt-toggle', function(e) {\r\n    e.stopPropagation();\r\n    const $toggle = $(this);\r\n    const targetId = $toggle.data('target');\r\n    const $prompt = $('#' + targetId);\r\n    \r\n    \/\/ Hole den unescaped Text aus jQuery data\r\n    let fullPrompt = $prompt.data('fullPrompt');\r\n    \r\n    \/\/ Fallback falls data nicht gesetzt ist\r\n    if (!fullPrompt) {\r\n        fullPrompt = $toggle.data('full-text') || $prompt.text();\r\n    }\r\n    \r\n    if ($prompt.hasClass('expanded')) {\r\n        \/\/ Zuklappen\r\n        const shortPrompt = fullPrompt.substring(0, 100) + '...';\r\n        $prompt.removeClass('expanded').html(escapeHtml(shortPrompt));\r\n        $toggle.html(t('more', 'mehr') + ' \u25bc');\r\n    } else {\r\n        \/\/ Aufklappen\r\n        $prompt.addClass('expanded').html(escapeHtml(fullPrompt));\r\n        $toggle.html(t('less', 'weniger') + ' \u25b2');\r\n    }\r\n});\r\n  \r\n  \/\/ Modal Close (dieser existiert bereits weiter unten)\r\n  $('#media-modal .modal-close, #media-modal .modal-overlay').on('click', function() {\r\n    $('#media-modal').fadeOut(300);\r\n    $('#media-modal video').each(function() {\r\n      this.pause();\r\n    });\r\n  });\r\n  \r\n  \/\/ Modal Close\r\n  $('#media-modal .modal-close, #media-modal .modal-overlay').on('click', function() {\r\n    $('#media-modal').fadeOut(300);\r\n    $('#media-modal video').each(function() {\r\n      this.pause();\r\n    });\r\n  });\r\n  \r\n  \/\/ ESC Key - Close Modal\r\n  $(document).on('keydown', function(e) {\r\n    if (e.key === 'Escape') {\r\n      $('#media-modal').fadeOut(300);\r\n    }\r\n  });\r\n  \r\n  \/\/ === INITIALISIERUNG ===\r\n  console.log('\u2705 MyCreations Page Ready!');\r\n  \r\n  \/\/ \u00dcbersetzungen sofort anwenden\r\n  setTimeout(function() {\r\n    applyTranslations();\r\n  }, 100);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2728 Meine Kreationen Verwalten Sie Ihre AI-generierten Videos und Bilder an einem Ort 0 Gesamt 0 Videos 0 Bilder Alle \ud83c\udfac Videos \ud83d\uddbc\ufe0f Bilder \ud83c\udfb5 Musik \ud83d\udd50 Letzte 7 Tage \ud83c\udfa8 \ud83c\udfac \u2728 \ud83d\ude80 Meine Kreationen laden Klicken Sie hier, um Ihre AI-Kreationen anzuzeigen Lade Kreationen&#8230; Weitere laden 0 von 0 angezeigt \ud83c\udfa8 Noch keine [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5965","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/comments?post=5965"}],"version-history":[{"count":21,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5965\/revisions"}],"predecessor-version":[{"id":6493,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5965\/revisions\/6493"}],"wp:attachment":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/media?parent=5965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}