{"id":5150,"date":"2025-07-20T05:44:01","date_gmt":"2025-07-20T05:44:01","guid":{"rendered":"https:\/\/sharkxs.com\/community_creations\/"},"modified":"2025-09-22T08:14:50","modified_gmt":"2025-09-22T08:14:50","slug":"community_creations","status":"publish","type":"page","link":"https:\/\/sharkxs.com\/en\/community_creations\/","title":{"rendered":"community_creations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5150\" class=\"elementor elementor-5150 elementor-4863\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e77df0 e-flex e-con-boxed e-con e-parent\" data-id=\"4e77df0\" 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-e82a11e elementor-widget elementor-widget-html\" data-id=\"e82a11e\" 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<!-- wpml-no-translate -->\n<div class=\"wpml-no-translate\">\n\n<style>\n    .sharkxs-community-gallery {\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n        color: #fff;\n        width: 100%;\n    }\n\n    .gallery-header {\n        text-align: center;\n        margin-bottom: 3rem;\n    }\n\n    .gallery-title {\n        font-size: 3rem;\n        font-weight: 800;\n        margin-bottom: 1rem;\n        background: linear-gradient(45deg, #fff, #e0e0e0);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n        text-align: center;\n    }\n\n    .gallery-subtitle {\n        font-size: 1.2rem;\n        opacity: 0.9;\n        max-width: 600px;\n        margin: 0 auto;\n        line-height: 1.6;\n        color: #b3b3b3;\n    }\n\n    .stats-bar {\n        display: flex;\n        justify-content: center;\n        gap: 2rem;\n        margin-bottom: 2rem;\n        flex-wrap: wrap;\n    }\n\n    .stat-item {\n        background: rgba(255, 255, 255, 0.05);\n        padding: 1rem 1.5rem;\n        border-radius: 15px;\n        text-align: center;\n        backdrop-filter: blur(10px);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n    }\n\n    .stat-number {\n        font-size: 1.5rem;\n        font-weight: bold;\n        display: block;\n        color: #fff;\n    }\n\n    .stat-label {\n        font-size: 0.9rem;\n        opacity: 0.8;\n        color: #b3b3b3;\n    }\n\n    .filter-tabs {\n        display: flex;\n        justify-content: center;\n        gap: 1rem;\n        margin-bottom: 2rem;\n        flex-wrap: wrap;\n    }\n\n    .filter-tab {\n        background: rgba(255, 255, 255, 0.05);\n        border: 2px solid rgba(255, 255, 255, 0.1);\n        color: #fff;\n        padding: 0.75rem 1.5rem;\n        border-radius: 50px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-weight: 600;\n        backdrop-filter: blur(10px);\n        outline: none;\n        font-size: 0.9rem;\n    }\n\n    .filter-tab:hover,\n    .filter-tab.active {\n        background: rgba(255, 255, 255, 0.1);\n        border-color: rgba(255, 255, 255, 0.3);\n        transform: translateY(-2px);\n        color: #fff;\n    }\n\n    .gallery-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n        gap: 2rem;\n        margin-bottom: 3rem;\n    }\n\n    .creation-card {\n        background: rgba(255, 255, 255, 0.05);\n        border-radius: 20px;\n        overflow: hidden;\n        backdrop-filter: blur(15px);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        transition: all 0.4s ease;\n        cursor: pointer;\n        position: relative;\n    }\n\n    .creation-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\n        border-color: rgba(255, 255, 255, 0.2);\n        background: rgba(255, 255, 255, 0.08);\n    }\n\n    .media-container {\n        position: relative;\n        width: 100%;\n        padding-bottom: 56.25%;\n        background: rgba(0, 0, 0, 0.5);\n        overflow: hidden;\n    }\n\n    .media-container video,\n    .media-container img {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        transition: transform 0.4s ease;\n    }\n\n    .creation-card:hover .media-container video,\n    .creation-card:hover .media-container img {\n        transform: scale(1.05);\n    }\n\n    .media-type-badge {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        background: rgba(0, 0, 0, 0.8);\n        color: white;\n        padding: 0.5rem 1rem;\n        border-radius: 20px;\n        font-size: 0.8rem;\n        font-weight: 600;\n        backdrop-filter: blur(10px);\n        z-index: 10;\n    }\n\n    .video-badge {\n        background: rgba(220, 53, 69, 0.9);\n    }\n\n    .image-badge {\n        background: rgba(13, 202, 240, 0.9);\n    }\n\n    .play-overlay {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        background: rgba(255, 255, 255, 0.9);\n        width: 60px;\n        height: 60px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        transition: opacity 0.3s ease;\n        pointer-events: none;\n        z-index: 5;\n    }\n\n    .creation-card:hover .play-overlay {\n        opacity: 1;\n    }\n\n    .play-icon {\n        width: 0;\n        height: 0;\n        border-left: 15px solid #333;\n        border-top: 10px solid transparent;\n        border-bottom: 10px solid transparent;\n        margin-left: 3px;\n    }\n\n    .card-content {\n        padding: 1.5rem;\n    }\n\n    .prompt-text {\n        font-size: 1rem;\n        line-height: 1.5;\n        margin-bottom: 1rem;\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n        color: #e0e0e0;\n    }\n\n    .card-meta {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        font-size: 0.9rem;\n        opacity: 0.8;\n    }\n\n    .author-info {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        color: #b3b3b3;\n    }\n\n    .author-avatar {\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        background: linear-gradient(45deg, #667eea, #764ba2);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: bold;\n        font-size: 0.8rem;\n        color: #fff;\n    }\n\n    .date-info {\n        opacity: 0.7;\n        color: #999;\n    }\n\n    .load-more {\n        display: block;\n        margin: 2rem auto;\n        background: rgba(255, 255, 255, 0.05);\n        border: 2px solid rgba(255, 255, 255, 0.2);\n        color: #fff;\n        padding: 1rem 2rem;\n        border-radius: 50px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-weight: 600;\n        backdrop-filter: blur(10px);\n        outline: none;\n    }\n\n    .load-more:hover {\n        background: rgba(255, 255, 255, 0.1);\n        transform: translateY(-2px);\n        border-color: rgba(255, 255, 255, 0.3);\n    }\n\n    .modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.95);\n        z-index: 99999;\n        backdrop-filter: blur(5px);\n        overflow-y: auto;\n    }\n\n    .modal-content {\n        position: relative;\n        margin: 30px auto;\n        max-width: 90vw;\n        max-height: calc(100vh - 60px);\n        background: rgba(40, 40, 40, 0.95);\n        border-radius: 20px;\n        overflow: auto;\n        backdrop-filter: blur(15px);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        display: flex;\n        flex-direction: column;\n    }\n\n    .modal-media {\n        width: 100%;\n        height: auto;\n        max-height: 50vh;\n        object-fit: contain;\n        background: #000;\n        flex-shrink: 0;\n    }\n\n    .modal-info {\n        padding: 2.5rem;\n        color: #fff;\n        background: rgba(30, 30, 30, 0.9);\n        flex: 1;\n        overflow-y: auto;\n    }\n\n    .modal-model {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        margin-bottom: 1.5rem;\n        padding: 1rem;\n        background: rgba(255, 255, 255, 0.05);\n        border-radius: 10px;\n        border: 1px solid rgba(255, 255, 255, 0.1);\n    }\n\n    .model-label {\n        font-weight: 600;\n        color: #888;\n        text-transform: uppercase;\n        font-size: 0.8rem;\n        letter-spacing: 1px;\n    }\n\n    .model-name {\n        color: #fff;\n        font-size: 1.1rem;\n        font-weight: 600;\n        background: linear-gradient(45deg, #667eea, #764ba2);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n\n    .modal-prompt {\n        margin-bottom: 1.5rem;\n    }\n\n    .prompt-label {\n        font-weight: 600;\n        color: #888;\n        text-transform: uppercase;\n        font-size: 0.8rem;\n        letter-spacing: 1px;\n        margin-bottom: 0.5rem;\n        display: block;\n    }\n\n    .prompt-content {\n        font-size: 1.15rem;\n        line-height: 1.7;\n        color: #e0e0e0;\n        padding: 1.25rem;\n        background: rgba(255, 255, 255, 0.03);\n        border-radius: 10px;\n        border-left: 4px solid rgba(102, 126, 234, 0.5);\n        max-height: 300px;\n        overflow-y: auto;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n        margin-top: 0.5rem;\n    }\n    \n    \/* Scrollbar Styling *\/\n    .prompt-content::-webkit-scrollbar {\n        width: 8px;\n    }\n    \n    .prompt-content::-webkit-scrollbar-track {\n        background: rgba(255, 255, 255, 0.05);\n        border-radius: 4px;\n    }\n    \n    .prompt-content::-webkit-scrollbar-thumb {\n        background: rgba(255, 255, 255, 0.2);\n        border-radius: 4px;\n    }\n    \n    .prompt-content::-webkit-scrollbar-thumb:hover {\n        background: rgba(255, 255, 255, 0.3);\n    }\n\n    .modal-footer {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-top: 1.5rem;\n        padding-top: 1.5rem;\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n    }\n\n    .modal-author {\n        color: #b3b3b3;\n        font-size: 0.9rem;\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n    }\n\n    .modal-date {\n        color: #999;\n        font-size: 0.9rem;\n    }\n\n    .close-modal {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        background: rgba(0, 0, 0, 0.8);\n        color: #fff;\n        border: none;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        cursor: pointer;\n        font-size: 1.2rem;\n        transition: background 0.3s ease;\n        z-index: 10;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .close-modal:hover {\n        background: rgba(220, 53, 69, 0.9);\n        transform: rotate(90deg);\n    }\n\n    .loading {\n        text-align: center;\n        padding: 2rem;\n        color: #b3b3b3;\n    }\n\n    .spinner {\n        width: 40px;\n        height: 40px;\n        border: 4px solid rgba(255, 255, 255, 0.2);\n        border-top: 4px solid #fff;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n        margin: 0 auto 1rem;\n    }\n\n    .no-creations {\n        text-align: center;\n        padding: 3rem;\n        color: #b3b3b3;\n    }\n\n    .no-creations-icon {\n        font-size: 4rem;\n        margin-bottom: 1rem;\n        opacity: 0.5;\n    }\n\n    @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n\n\/* Music Badge Styling *\/\n.music-badge {\n    background: rgba(155, 89, 182, 0.9);\n}\n\n\/* Music Placeholder f\u00fcr Cards *\/\n.music-placeholder {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #1a1d20 0%, #2c3540 100%);\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.music-icon {\n    font-size: 4rem;\n    margin-bottom: 1rem;\n    color: #9b59b6;\n    animation: pulse 2s ease-in-out infinite;\n}\n\n.music-waveform {\n    display: flex;\n    gap: 4px;\n    height: 40px;\n    align-items: center;\n}\n\n.music-waveform span {\n    width: 4px;\n    background: #9b59b6;\n    border-radius: 2px;\n    animation: wave 1.2s ease-in-out infinite;\n}\n\n.music-waveform span:nth-child(1) { height: 10px; animation-delay: 0s; }\n.music-waveform span:nth-child(2) { height: 25px; animation-delay: 0.1s; }\n.music-waveform span:nth-child(3) { height: 35px; animation-delay: 0.2s; }\n.music-waveform span:nth-child(4) { height: 20px; animation-delay: 0.3s; }\n.music-waveform span:nth-child(5) { height: 30px; animation-delay: 0.4s; }\n\n@keyframes wave {\n    0%, 100% { transform: scaleY(0.5); }\n    50% { transform: scaleY(1); }\n}\n\n@keyframes pulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.1); opacity: 0.8; }\n}\n\n\/* Modal Audio Container *\/\n.modal-audio-container {\n    width: 100%;\n    padding: 2rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background: rgba(0, 0, 0, 0.3);\n}\n\n.audio-visualizer {\n    font-size: 5rem;\n    margin-bottom: 2rem;\n    color: #9b59b6;\n    animation: pulse 2s ease-in-out infinite;\n}\n\n.modal-audio {\n    width: 100%;\n    max-width: 500px;\n}\n\n    @media (max-width: 768px) {\n        .gallery-title {\n            font-size: 2rem;\n        }\n\n        .gallery-grid {\n            grid-template-columns: 1fr;\n            gap: 1.5rem;\n        }\n\n        .filter-tabs {\n            gap: 0.5rem;\n        }\n\n        .filter-tab {\n            padding: 0.5rem 1rem;\n            font-size: 0.8rem;\n        }\n\n        .stats-bar {\n            gap: 1rem;\n        }\n\n        .stat-item {\n            padding: 0.75rem 1rem;\n        }\n\n        .modal-content {\n            margin: 10px;\n            max-width: calc(100vw - 20px);\n            max-height: calc(100vh - 20px);\n        }\n        \n        .modal-media {\n            max-height: 40vh;\n        }\n\n        .modal-info {\n            padding: 1.5rem;\n        }\n        \n        .prompt-content {\n            max-height: 200px;\n            font-size: 1rem;\n        }\n\n        .card-content {\n            padding: 1rem;\n        }\n    }\n<\/style>\n\n<div class=\"sharkxs-community-gallery\">\n    <div class=\"gallery-header\">\n        <h1 class=\"gallery-title\" id=\"gallery-title\">\ud83c\udfac Community Galerie<\/h1>\n        <p class=\"gallery-subtitle\" id=\"gallery-subtitle\">\n            Entdecke beeindruckende AI-generierte Videos und Bilder unserer kreativen Community. \n            Lass dich inspirieren und teile deine eigenen Kunstwerke!\n        <\/p>\n    <\/div>\n\n    <div class=\"stats-bar\" id=\"statsBar\">\n        <div class=\"stat-item\">\n            <span class=\"stat-number\" id=\"totalCreations\">0<\/span>\n            <span class=\"stat-label\" id=\"stat-label-creations\">Kreationen<\/span>\n        <\/div>\n        <div class=\"stat-item\">\n            <span class=\"stat-number\" id=\"totalArtists\">0<\/span>\n            <span class=\"stat-label\" id=\"stat-label-artists\">K\u00fcnstler<\/span>\n        <\/div>\n        <div class=\"stat-item\">\n            <span class=\"stat-number\" id=\"todayCount\">0<\/span>\n            <span class=\"stat-label\" id=\"stat-label-today\">Heute<\/span>\n        <\/div>\n    <\/div>\n\n    <div class=\"filter-tabs\">\n        <button class=\"filter-tab active\" data-filter=\"all\" id=\"filter-all\">\ud83c\udfac Alle<\/button>\n        <button class=\"filter-tab\" data-filter=\"video\" id=\"filter-video\">\ud83c\udfa5 Videos<\/button>\n        <button class=\"filter-tab\" data-filter=\"image\" id=\"filter-image\">\ud83d\uddbc\ufe0f Bilder<\/button>\n        <button class=\"filter-tab\" data-filter=\"music\" id=\"filter-music\">\ud83c\udfb5 Musik<\/button>\n        <button class=\"filter-tab\" data-filter=\"recent\" id=\"filter-recent\">\u2b50 Neueste<\/button>\n    <\/div>\n\n    <div class=\"gallery-grid\" id=\"galleryGrid\">\n        <div class=\"loading\">\n            <div class=\"spinner\"><\/div>\n            <p id=\"loading-text\">Lade Community-Kreationen...<\/p>\n        <\/div>\n    <\/div>\n\n    <button class=\"load-more\" id=\"loadMore\" style=\"display: none;\">\u2728 Mehr laden<\/button>\n<\/div>\n\n<!-- Modal -->\n<div class=\"modal\" id=\"galleryModal\">\n    <div class=\"modal-content\">\n        <button class=\"close-modal\" id=\"closeModal\">\u00d7<\/button>\n        <div id=\"modalMedia\"><\/div>\n        <div class=\"modal-info\">\n            <div class=\"modal-model\" id=\"modelSection\" style=\"display: none;\">\n                <div>\n                    <div class=\"model-label\">AI MODELL<\/div>\n                    <div class=\"model-name\" id=\"modalModel\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"modal-prompt\">\n                <div class=\"prompt-label\">PROMPT<\/div>\n                <div class=\"prompt-content\" id=\"modalPrompt\"><\/div>\n            <\/div>\n            <div class=\"modal-footer\">\n                <div class=\"modal-author\" id=\"modalAuthor\"><\/div>\n                <div class=\"modal-date\" id=\"modalDate\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ KORRIGIERTE \u00dcbersetzungsfunktion ohne Template-Literale\nfunction t(key, fallback) {\n    if (!fallback) fallback = null;\n    \n    if (window.sharkxsData && window.sharkxsData.translations && window.sharkxsData.translations[key]) {\n        return window.sharkxsData.translations[key];\n    }\n    \n    var isGerman = window.location.pathname.indexOf('\/en\/') === -1;\n    \n    var staticTranslations = {\n        'de': {\n            'communityGallery': 'Community Galerie',\n            'gallerySubtitle': 'Entdecke beeindruckende AI-generierte Videos und Bilder unserer kreativen Community. Lass dich inspirieren und teile deine eigenen Kunstwerke!',\n            'creations': 'Kreationen',\n            'artists': 'K\u00fcnstler',\n            'today': 'Heute',\n            'all': 'Alle',\n            'videos': 'Videos',\n            'images': 'Bilder',\n            'latest': 'Neueste',\n            'loadMore': 'Mehr laden',\n            'loadingCreations': 'Lade Community-Kreationen...',\n            'noCreations': 'Noch keine Kreationen',\n            'emptyGallery': 'Die Community-Galerie ist leer. Sei der Erste und teile deine AI-Kreationen!',\n            'from': 'Von:',\n            'aiModel': 'AI MODELL',\n            'prompt': 'PROMPT',\n            'music': 'Musik',\n            'musicBadge': '\ud83c\udfb5 Musik'\n        },\n        'en': {\n            'communityGallery': 'Community Gallery',\n            'gallerySubtitle': 'Discover amazing AI-generated videos and images from our creative community. Get inspired and share your own artwork!',\n            'creations': 'Creations',\n            'artists': 'Artists',\n            'today': 'Today',\n            'all': 'All',\n            'videos': 'Videos',\n            'images': 'Images',\n            'latest': 'Latest',\n            'loadMore': 'Load More',\n            'loadingCreations': 'Loading community creations...',\n            'noCreations': 'No creations yet',\n            'emptyGallery': 'The community gallery is empty. Be the first to share your AI creations!',\n            'from': 'By:',\n            'aiModel': 'AI MODEL',\n            'prompt': 'PROMPT',\n            'music': 'Music',\n            'musicBadge': '\ud83c\udfb5 Music'\n        }\n    };\n    \n    var lang = isGerman ? 'de' : 'en';\n    return staticTranslations[lang][key] || fallback || key;\n}\n\n\/\/ Model Display Names Mapping\nvar modelDisplayNames = {\n    'fal-ai\/veo3': 'Veo 3',\n    'fal-ai\/veo3\/fast': 'Veo 3 Fast',\n    'fal-ai\/veo2\/text-to-video': 'Veo 2 (Text-to-Video)',\n    'fal-ai\/veo2\/image-to-video': 'Veo 2 (Image-to-Video)',\n    'fal-ai\/kling-video\/v2.1\/master\/text-to-video': 'Kling v2.1 (Text-to-Video)',\n    'fal-ai\/kling-video\/v2.1\/master\/image-to-video': 'Kling v2.1 (Image-to-Video)',\n    'fal-ai\/imagen4\/preview\/ultra': 'Imagen 4 Ultra',\n    'fal-ai\/imagen4\/preview': 'Imagen 4 (Preview)',\n    'runwayml\/gen4_image': 'Runway Gen-4 Image',\n    'fal-ai\/bytedance\/seedance\/v1\/pro\/text-to-video': 'Seedance v1 PRO (Text-to-Video)',\n    'fal-ai\/bytedance\/seedance\/v1\/pro\/image-to-video': 'Seedance v1 PRO (Image-to-Video)',\n    'fal-ai\/minimax\/hailuo-02\/pro\/text-to-video': 'Hailuo Pro (Text-to-Video)',\n    'fal-ai\/minimax\/hailuo-02\/pro\/image-to-video': 'Hailuo Pro (Image-to-Video)',\n    'runwayml\/gen4_turbo\/image-to-video': 'Runway Gen-4 Turbo',\n    'runwayml\/upscale_v1\/video-upscale': 'Runway Video Upscale v1',\n    'fal-ai\/flux-pro\/v1.1-ultra': 'Flux Ultra v1.1',\n    'fal-ai\/flux-pro\/kontext\/max': 'Flux Kontext Max',\n    'fal-ai\/flux-pro\/kontext\/max\/text-to-image': 'Flux Kontext Max (Text-to-Image)',\n    'fal-ai\/hidream-i1-full': 'HiDream I1 (Full)',\n    'fal-ai\/hidream-i1-full\/image-to-image': 'HiDream I1 (Image-to-Image)',\n    'fal-ai\/vidu\/q1\/reference-to-video': 'Vidu Q1 Reference-to-Video',\n    'fal-ai\/ai-avatar\/single-text': 'Talking Avatar Single',\n    'fal-ai\/ai-avatar\/multi-text': 'Talking Avatar Multi',\n    'fal-ai\/ai-avatar': 'Talking Avatar',\n    'fal-ai\/ai-avatar\/multi': 'Talking Avatar Multi',\n    'fal-ai\/pixverse\/v4.5\/image-to-video': 'PixVerse v4.5 (Image-to-Video)',\n    'fal-ai\/pixverse\/v4.5\/image-to-video\/fast': 'PixVerse v4.5 Fast',\n    'fal-ai\/pixverse\/v4.5\/text-to-video\/fast': 'PixVerse v4.5 (Text-to-Video Fast)',\n    'fal-ai\/pixverse\/lipsync': 'PixVerse LipSync',\n    'fal-ai\/pixverse\/extend': 'PixVerse Video Extend',\n    'eachlabs\/veo-3-image-to-video': 'Veo 3 (Image-to-Video)',\n    'eachlabs\/veo-3-fast-image-to-video': 'Veo 3 Fast (Image-to-Video)',\n    'eachlabs\/seedream-v3-text-to-image': 'SeeDream v3',\n    'fal-ai\/recraft\/v3\/text-to-image': 'Recraft V3',\n    'google\/veo-3': 'Google Veo 3',\n    'fal-ai\/minimax-music\/v1.5': 'MiniMax Music v1.5'\n};\n\nfunction getModelDisplayName(modelId) {\n    return modelDisplayNames[modelId] || modelId;\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log('Community Gallery Script geladen');\n    \n    let currentPage = 1;\n    let currentFilter = 'all';\n    let allCreations = [];\n    let isLoading = false;\n    \n    const galleryGrid = document.getElementById('galleryGrid');\n    const loadMoreBtn = document.getElementById('loadMore');\n    const modal = document.getElementById('galleryModal');\n    const closeModalBtn = document.getElementById('closeModal');\n    \n    \/\/ WordPress AJAX Endpunkt\n    const ajaxUrl = window.sharkxsData ? window.sharkxsData.myCreationsEndpoint.replace('\/my-creations', '\/public-creations') : '\/wp-json\/sharkxs-credits\/v1\/public-creations';\n    \n    \/\/ KORRIGIERTE \u00dcbersetzungen ohne Template-Literale\n    function initializeTranslations() {\n        \/\/ Gallery Title und Subtitle \u00fcbersetzen\n        document.getElementById('gallery-title').innerHTML = '\ud83c\udfac ' + t('communityGallery', 'Community Galerie');\n        document.getElementById('gallery-subtitle').textContent = t('gallerySubtitle', 'Entdecke beeindruckende AI-generierte Videos und Bilder unserer kreativen Community. Lass dich inspirieren und teile deine eigenen Kunstwerke!');\n        \n        \/\/ Statistik Labels\n        document.getElementById('stat-label-creations').textContent = t('creations', 'Kreationen');\n        document.getElementById('stat-label-artists').textContent = t('artists', 'K\u00fcnstler');\n        document.getElementById('stat-label-today').textContent = t('today', 'Heute');\n        \n        \/\/ Filter Buttons \u00fcbersetzen\n        document.getElementById('filter-all').innerHTML = '\ud83c\udfac ' + t('all', 'Alle');\n        document.getElementById('filter-video').innerHTML = '\ud83c\udfa5 ' + t('videos', 'Videos');\n        document.getElementById('filter-image').innerHTML = '\ud83d\uddbc\ufe0f ' + t('images', 'Bilder');\n        document.getElementById('filter-music').innerHTML = '\ud83c\udfb5 ' + t('music', 'Musik');\n        document.getElementById('filter-recent').innerHTML = '\u2b50 ' + t('latest', 'Neueste');\n        \n        \/\/ Loading Text\n        document.getElementById('loading-text').textContent = t('loadingCreations', 'Lade Community-Kreationen...');\n        \n        \/\/ Load More Button\n        loadMoreBtn.innerHTML = '\u2728 ' + t('loadMore', 'Mehr laden');\n    }\n    \n    \/\/ Initiale \u00dcbersetzungen setzen\n    initializeTranslations();\n    \n    \/\/ Initiale Daten laden\n    loadCreations();\n    \n    function loadCreations(append = false) {\n        if (isLoading) return;\n        isLoading = true;\n        \n        if (!append) {\n            galleryGrid.innerHTML = '<div class=\"loading\"><div class=\"spinner\"><\/div><p>' + t('loadingCreations', 'Lade Community-Kreationen...') + '<\/p><\/div>';\n        } else {\n            loadMoreBtn.innerHTML = '<div class=\"spinner\"><\/div> L\u00e4dt...';\n            loadMoreBtn.disabled = true;\n        }\n        \n        fetch(ajaxUrl + '?page=' + currentPage + '&filter=' + currentFilter + '&per_page=12')\n            .then(response => response.json())\n            .then(data => {\n                console.log('API Response:', data);\n                if (data.success) {\n                    if (!append) {\n                        allCreations = data.creations;\n                        updateStats(data.stats);\n                        renderCreations(data.creations);\n                    } else {\n                        allCreations = [...allCreations, ...data.creations];\n                        appendCreations(data.creations);\n                    }\n                    \n                    \/\/ Load More Button anzeigen\/verstecken\n                    if (data.creations.length < 12) {\n                        loadMoreBtn.style.display = 'none';\n                    } else {\n                        loadMoreBtn.style.display = 'block';\n                        loadMoreBtn.innerHTML = '\u2728 ' + t('loadMore', 'Mehr laden');\n                        loadMoreBtn.disabled = false;\n                    }\n                } else {\n                    showNoCreations();\n                }\n            })\n            .catch(error => {\n                console.error('Fehler beim Laden der Kreationen:', error);\n                showNoCreations();\n            })\n            .finally(() => {\n                isLoading = false;\n            });\n    }\n    \n    function updateStats(stats) {\n        document.getElementById('totalCreations').textContent = stats.total || 0;\n        document.getElementById('totalArtists').textContent = stats.artists || 0;\n        document.getElementById('todayCount').textContent = stats.today || 0;\n    }\n    \n    function renderCreations(creations) {\n        if (!creations || creations.length === 0) {\n            showNoCreations();\n            return;\n        }\n        \n        galleryGrid.innerHTML = creations.map(creation => createCreationCard(creation)).join('');\n        attachCardListeners();\n    }\n    \n    function appendCreations(creations) {\n        const newCardsHTML = creations.map(creation => createCreationCard(creation)).join('');\n        galleryGrid.insertAdjacentHTML('beforeend', newCardsHTML);\n        attachCardListeners();\n    }\n    \nfunction createCreationCard(creation) {\n    const isVideo = creation.job_type === 'video';\n    const isMusic = creation.job_type === 'music';\n    const isImage = creation.job_type === 'image';\n    \n    let mediaUrl = '';\n    if (isVideo) {\n        mediaUrl = creation.final_video_url;\n    } else if (isMusic) {\n        mediaUrl = creation.final_audio_url || creation.final_media_url;\n    } else {\n        mediaUrl = creation.final_image_url;\n    }\n    \n    const authorInitials = creation.author_name.split(' ').map(n => n[0]).join('').toUpperCase();\n    \n    \/\/ Badge-Typ bestimmen\n    let badgeClass = 'image-badge';\n    let badgeText = '\ud83d\uddbc\ufe0f Bild';\n    if (isVideo) {\n        badgeClass = 'video-badge';\n        badgeText = '\ud83c\udfac Video';\n    } else if (isMusic) {\n        badgeClass = 'music-badge';\n        badgeText = t('musicBadge', '\ud83c\udfb5 Musik');\n    }\n    \n    \/\/ Media-Container je nach Typ\n    let mediaContent = '';\n    if (isVideo) {\n        mediaContent = '<video src=\"' + mediaUrl + '\" preload=\"metadata\" muted><\/video>' +\n                      '<div class=\"play-overlay\"><div class=\"play-icon\"><\/div><\/div>';\n    } else if (isMusic) {\n        mediaContent = '<div class=\"music-placeholder\">' +\n                      '<div class=\"music-icon\">\ud83c\udfb5<\/div>' +\n                      '<div class=\"music-waveform\">' +\n                      '<span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>' +\n                      '<\/div><\/div>';\n    } else {\n        mediaContent = '<img decoding=\"async\" src=\"' + mediaUrl + '\" alt=\"AI Generated Image\">';\n    }\n    \n    return '<div class=\"creation-card\" data-type=\"' + creation.job_type + '\" data-creation-id=\"' + creation.id + '\">' +\n        '<div class=\"media-container\">' +\n            mediaContent +\n            '<div class=\"media-type-badge ' + badgeClass + '\">' +\n                badgeText +\n            '<\/div>' +\n        '<\/div>' +\n        '<div class=\"card-content\">' +\n            '<p class=\"prompt-text\">' + (creation.prompt || creation.lyrics || '') + '<\/p>' +\n            '<div class=\"card-meta\">' +\n                '<div class=\"author-info\">' +\n                    '<div class=\"author-avatar\">' + authorInitials + '<\/div>' +\n                    '<span>' + creation.author_name + '<\/span>' +\n                '<\/div>' +\n                '<span class=\"date-info\">' + creation.date_relative + '<\/span>' +\n            '<\/div>' +\n        '<\/div>' +\n    '<\/div>';\n}\n    \n    function attachCardListeners() {\n        const cards = galleryGrid.querySelectorAll('.creation-card');\n        cards.forEach(card => {\n            \/\/ Remove old listeners\n            card.replaceWith(card.cloneNode(true));\n        });\n        \n        \/\/ Re-attach to all cards\n        const newCards = galleryGrid.querySelectorAll('.creation-card');\n        newCards.forEach(card => {\n            \/\/ Modal \u00f6ffnen\n            card.addEventListener('click', function(e) {\n                e.preventDefault();\n                e.stopPropagation();\n                console.log('Card clicked');\n                const creationId = this.getAttribute('data-creation-id');\n                const creation = allCreations.find(c => c.id == creationId);\n                if (creation) {\n                    console.log('Opening modal for creation:', creation);\n                    openModal(creation);\n                }\n            });\n            \n            \/\/ Video Hover Play (nur f\u00fcr Videos)\n            const video = card.querySelector('video');\n            if (video) {\n                card.addEventListener('mouseenter', () => {\n                    video.play().catch(() => {});\n                });\n                \n                card.addEventListener('mouseleave', () => {\n                    video.pause();\n                    video.currentTime = 0;\n                });\n            }\n        });\n    }\n    \nfunction openModal(creation) {\n    console.log('openModal called with:', creation);\n    const isVideo = creation.job_type === 'video';\n    const isMusic = creation.job_type === 'music';\n    const isImage = creation.job_type === 'image';\n    \n    let mediaUrl = '';\n    if (isVideo) {\n        mediaUrl = creation.final_video_url;\n    } else if (isMusic) {\n        mediaUrl = creation.final_audio_url || creation.final_media_url;\n    } else {\n        mediaUrl = creation.final_image_url;\n    }\n    \n    const modalMedia = document.getElementById('modalMedia');\n    \n    if (isVideo) {\n        modalMedia.innerHTML = '<video src=\"' + mediaUrl + '\" controls autoplay class=\"modal-media\"><\/video>';\n    } else if (isMusic) {\n        modalMedia.innerHTML = '<div class=\"modal-audio-container\">' +\n            '<div class=\"audio-visualizer\">\ud83c\udfb5<\/div>' +\n            '<audio src=\"' + mediaUrl + '\" controls autoplay class=\"modal-audio\"><\/audio>' +\n            '<\/div>';\n    } else {\n        modalMedia.innerHTML = '<img decoding=\"async\" src=\"' + mediaUrl + '\" class=\"modal-media\" alt=\"AI Generated Image\">';\n    }\n    \n    \/\/ Model anzeigen wenn vorhanden\n    if (creation.model_id) {\n        const modelName = getModelDisplayName(creation.model_id);\n        document.getElementById('modalModel').textContent = modelName;\n        document.getElementById('modelSection').style.display = 'block';\n    } else {\n        document.getElementById('modelSection').style.display = 'none';\n    }\n    \n    \/\/ Prompt oder Lyrics anzeigen\n    const promptText = creation.prompt || creation.lyrics || '';\n    document.getElementById('modalPrompt').textContent = promptText;\n    \n    \/\/ Author und Datum\n    const authorInitials = creation.author_name.split(' ').map(n => n[0]).join('').toUpperCase();\n    document.getElementById('modalAuthor').innerHTML = '<div class=\"author-avatar\">' + \n        authorInitials + \n        '<\/div>' + t('from', 'Von:') + ' ' + creation.author_name;\n    document.getElementById('modalDate').textContent = creation.date_relative;\n    \n    modal.style.display = 'block';\n    document.body.style.overflow = 'hidden';\n}\n    \n    function closeModal() {\n        modal.style.display = 'none';\n        document.body.style.overflow = 'auto';\n        \n        \/\/ Videos und Audio stoppen\nconst modalVideo = modal.querySelector('video');\nif (modalVideo) {\n    modalVideo.pause();\n}\nconst modalAudio = modal.querySelector('audio');\nif (modalAudio) {\n    modalAudio.pause();\n}\n    }\n    \n    function showNoCreations() {\n        galleryGrid.innerHTML = \n            '<div class=\"no-creations\">' +\n                '<div class=\"no-creations-icon\">\ud83c\udfa8<\/div>' +\n                '<h3>' + t('noCreations', 'Noch keine Kreationen') + '<\/h3>' +\n                '<p>' + t('emptyGallery', 'Die Community-Galerie ist leer. Sei der Erste und teile deine AI-Kreationen!') + '<\/p>' +\n            '<\/div>';\n        loadMoreBtn.style.display = 'none';\n    }\n    \n    \/\/ Filter Funktionalit\u00e4t\n    const filterTabs = document.querySelectorAll('.filter-tab');\n    filterTabs.forEach(tab => {\n        tab.addEventListener('click', function() {\n            \/\/ Aktive Klasse setzen\n            filterTabs.forEach(t => t.classList.remove('active'));\n            this.classList.add('active');\n            \n            currentFilter = this.dataset.filter;\n            currentPage = 1;\n            loadCreations(false);\n        });\n    });\n    \n    \/\/ Load More Button\n    loadMoreBtn.addEventListener('click', function() {\n        currentPage++;\n        loadCreations(true);\n    });\n    \n    \/\/ Modal Schlie\u00dfen\n    closeModalBtn.addEventListener('click', closeModal);\n    \n    modal.addEventListener('click', function(e) {\n        if (e.target === this) {\n            closeModal();\n        }\n    });\n    \n    \/\/ ESC-Taste\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape' && modal.style.display === 'block') {\n            closeModal();\n        }\n    });\n});\n<\/script>\n\n<\/div>\n<!-- \/wpml-no-translate -->\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>\ud83c\udfac Community Galerie Entdecke beeindruckende AI-generierte Videos und Bilder unserer kreativen Community. Lass dich inspirieren und teile deine eigenen Kunstwerke! 0 Kreationen 0 K\u00fcnstler 0 Heute \ud83c\udfac Alle \ud83c\udfa5 Videos \ud83d\uddbc\ufe0f Bilder \ud83c\udfb5 Musik \u2b50 Neueste Lade Community-Kreationen&#8230; \u2728 Mehr laden \u00d7 AI MODELL PROMPT<\/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-5150","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5150","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=5150"}],"version-history":[{"count":9,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5150\/revisions"}],"predecessor-version":[{"id":6386,"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/pages\/5150\/revisions\/6386"}],"wp:attachment":[{"href":"https:\/\/sharkxs.com\/en\/wp-json\/wp\/v2\/media?parent=5150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}