🎯 Universal Bewerbungssuite

Ein digitales Bewerbungs- und Präsentationsmodul für Text, Audio, Video, Bilder, Code, 3D, Daten und digitale Produkte.

Text Audio Video Bild Code 3D Daten Produkt

🧩 Bewerbungs-Builder

🖼️ Live-Vorschau

Digital Creator & Systems Builder

Raymond Demitrio Tel

Portfolio, Bewerbung und digitale Präsenz

📦 Medienkarten

⬇️ Export


        


        

            
📘 Produktbeschreibung

            
        

    


    

`;
        }

        function buildMarkdownExport(data) {
            const blocks = (data.items || []).map((item) => {
                const title = `## ${item.type || 'Medien'}`;
                const description = item.description ? `\n${item.description}` : '';
                const link = item.link ? `\nLink: ${item.link}` : '';
                return `${title}${description}${link}`;
            }).join('\n\n');
            return `# ${data.applicantName}\n\n## ${data.applicantRole}\n\n**Ziel:** ${data.applicantFocus}\n\n**Beschreibung:** ${data.mediaDescription}\n\n${blocks}`;
        }

        function buildJsonExport(data) {
            return JSON.stringify(data, null, 2);
        }

        function buildExportContent(format) {
            const data = collectData();
            switch (format) {
                case 'html':
                    return buildHtmlExport(data);
                case 'markdown':
                    return buildMarkdownExport(data);
                case 'json':
                    return buildJsonExport(data);
                case 'pdf':
                    return `PDF-Preview für ${data.applicantName}`;
                default:
                    return '';
            }
        }

        function downloadFile(filename, content, type) {
            const blob = new Blob([content], { type });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }

        function saveProfileState() {
            state.applicantName = document.getElementById('applicantName').value || defaultState.applicantName;
            state.applicantRole = document.getElementById('applicantRole').value || defaultState.applicantRole;
            state.applicantFocus = document.getElementById('applicantFocus').value || defaultState.applicantFocus;
            state.mediaType = document.getElementById('mediaType').value || defaultState.mediaType;
            state.mediaLink = document.getElementById('mediaLink').value || defaultState.mediaLink;
            state.mediaDescription = document.getElementById('mediaDescription').value || defaultState.mediaDescription;
            saveState();
        }

        function handleExport(format) {
            const content = buildExportContent(format);
            if (format === 'pdf') {
                const win = window.open('', '_blank');
                if (win) {
                    win.document.write(`${content.replace(/\n/g, '
')}


`);
                    win.document.close();
                    setTimeout(() => win.print(), 250);
                }
                return;
            }

            const fileName = `bewerbung.${format === 'html' ? 'html' : format === 'markdown' ? 'md' : 'json'}`;
            const mimeType = format === 'json' ? 'application/json' : 'text/plain';
            downloadFile(fileName, content, mimeType);
            exportPreview.textContent = `${fileName} wurde erzeugt.`;
        }

        async function addCurrentMediaItem() {
            const type = document.getElementById('mediaType').value;
            const link = document.getElementById('mediaLink').value.trim();
            const description = document.getElementById('mediaDescription').value || 'Beschreibung';
            const files = Array.from(mediaFileInput.files || []);

            if (files.length) {
                const uploads = [];
                for (const file of files) {
                    const reader = new FileReader();
                    const dataUrl = await new Promise((resolve, reject) => {
                        reader.onload = () => resolve(reader.result);
                        reader.onerror = () => reject(reader.error);
                        if (file.size <= MAX_STORED_FILE_SIZE) {
                            reader.readAsDataURL(file);
                        } else {
                            resolve(null);
                        }
                    });
                    uploads.push({
                        type,
                        label: file.name,
                        description: `${file.type || 'Datei'} • ${Math.round(file.size / 1024)} KB${description ? ` • ${description}` : ''}`,
                        link: link || file.name,
                        dataUrl,
                        fileName: file.name
                    });
                }
                state.items.push(...uploads);
                saveState();
                renderPreview();
                exportPreview.textContent = `${uploads.length} Datei(en) hinzugefügt und gespeichert.`;
                mediaFileInput.value = '';
                return;
            }

            state.items.push({
                type,
                label: link || 'Neue Medienkarte',
                description,
                link,
                dataUrl: null,
                fileName: null
            });
            saveState();
            renderPreview();
            exportPreview.textContent = 'Medienkarte hinzugefügt.';
        }

        function init3DCanvases() {
            if (!window.THREE || !window.THREE.OBJLoader) {
                document.querySelectorAll('canvas[data-3d]').forEach((canvas) => {
                    const ctx = canvas.getContext('2d');
                    if (!ctx) return;
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.fillStyle = '#111827';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    ctx.strokeStyle = '#ffd166';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.moveTo(40, 40);
                    ctx.lineTo(260, 80);
                    ctx.lineTo(140, 240);
                    ctx.lineTo(40, 40);
                    ctx.stroke();
                    ctx.fillStyle = '#f8fafc';
                    ctx.font = '16px Segoe UI';
                    ctx.fillText('3D-Viewer vorbereitet', 50, 270);
                });
                return;
            }

            document.querySelectorAll('canvas[data-3d]').forEach((canvas) => {
                const source = canvas.getAttribute('data-3d');
                if (!source) return;
                const renderer = new window.THREE.WebGLRenderer({ canvas, antialias: true });
                renderer.setPixelRatio(window.devicePixelRatio || 1);
                renderer.setSize(canvas.clientWidth || 300, canvas.clientHeight || 300);

                const scene = new window.THREE.Scene();
                scene.background = new window.THREE.Color(0x111827);
                const camera = new window.THREE.PerspectiveCamera(45, 1, 0.1, 1000);
                camera.position.set(0, 0, 4);

                const light = new window.THREE.DirectionalLight(0xffffff, 1.2);
                light.position.set(2, 2, 4);
                scene.add(light);
                scene.add(new window.THREE.AmbientLight(0x7dd3fc));

                const geometry = new window.THREE.BoxGeometry(1, 1, 1);
                const material = new window.THREE.MeshStandardMaterial({ color: 0x06b6d4, metalness: 0.2, roughness: 0.4 });
                const cube = new window.THREE.Mesh(geometry, material);
                scene.add(cube);

                const loader = new window.THREE.OBJLoader();
                if (source) {
                    loader.load(source, (object) => {
                        object.scale.set(0.8, 0.8, 0.8);
                        scene.remove(cube);
                        scene.add(object);
                    }, undefined, () => {
                        scene.add(cube);
                    });
                }

                const animate = () => {
                    requestAnimationFrame(animate);
                    cube.rotation.y += 0.01;
                    renderer.render(scene, camera);
                };
                animate();
            });
        }

        document.querySelectorAll('[data-export]').forEach((button) => {
            button.addEventListener('click', () => handleExport(button.getAttribute('data-export')));
        });

        form.addEventListener('submit', (event) => {
            event.preventDefault();
            saveProfileState();
            renderPreview();
            exportPreview.textContent = 'Profil wurde aktualisiert und gespeichert.';
        });

        addMediaBtn.addEventListener('click', async () => {
            await addCurrentMediaItem();
        });

        clearBtn.addEventListener('click', () => {
            form.reset();
            document.getElementById('applicantName').value = defaultState.applicantName;
            document.getElementById('applicantRole').value = defaultState.applicantRole;
            document.getElementById('applicantFocus').value = defaultState.applicantFocus;
            document.getElementById('mediaType').value = defaultState.mediaType;
            document.getElementById('mediaLink').value = defaultState.mediaLink;
            document.getElementById('mediaDescription').value = defaultState.mediaDescription;
            state = { ...defaultState, items: [...defaultState.items] };
            saveState();
            renderPreview();
            exportPreview.textContent = 'Profil zurückgesetzt.';
        });

        mediaFileInput.addEventListener('change', async () => {
            const files = Array.from(mediaFileInput.files || []);
            if (!files.length) return;
            await addCurrentMediaItem();
            mediaFileInput.value = '';
        });

        applyStateToForm();
        renderPreview();

        document.querySelectorAll('a[href^="#"]').forEach((link) => {
            link.addEventListener('click', (event) => {
                const targetId = link.getAttribute('href').slice(1);
                if (!targetId) return;
                const target = document.getElementById(targetId);
                if (!target) return;
                event.preventDefault();
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                if (window.history.replaceState) {
                    window.history.replaceState(null, '', `#${targetId}`);
                }
            });
        });