knso/Webklar-Kundenbereich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): Live-Vorschaufenster pro Projektkarte im Kundenbereich

Browse Source 
Statt nur Name + Link zeigt jede Projektkarte jetzt ein kleines,
skaliertes Live-Fenster der echten Webseite (iframe der previewUrl,
responsiv per ResizeObserver auf 1280px-Basisbreite herunterskaliert).
Klick aufs Fenster oeffnet die Seite im neuen Tab. Nicht-fertige
Projekte zeigen einen Platzhalter statt iframe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-07-12 12:42:35 +00:00
parent a874e51773
commit 07ebcc7e62
2 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/app.js
View File

@@ -83,6 +83,22 @@ function featuresForProject(features, projectId) {
return features.filter((f) => !f.projectId || f.projectId === projectId)
}
const PREVIEW_BASE_WIDTH = 1280
function setupPreviewFrame(frame) {
const view = frame.querySelector('.preview-frame__view')
if (!view) return
const apply = () => {
const w = frame.clientWidth
if (w) view.style.transform = `scale(${w / PREVIEW_BASE_WIDTH})`
}
if (typeof ResizeObserver !== 'undefined') {
new ResizeObserver(apply).observe(frame)
} else {
window.addEventListener('resize', apply)
}
apply()
}
function renderProjectCard(project, features) {
const li = document.createElement('li')
li.className = 'project-card'
@@ -91,14 +107,25 @@ function renderProjectCard(project, features) {
? `<div class="feature-tags">${projectFeatures.map((f) => `<span class="feature-tag">${escapeHtml(f.featureKey)}</span>`).join('')}</div>`
: ''
const ready = isProjectPreviewReady(project)
const url = project.previewUrl ? escapeAttr(project.previewUrl) : ''
const previewHtml = ready && url
? `
<a class="preview-frame" href="${url}" target="_blank" rel="noreferrer" data-preview-frame aria-label="Projekt-Webseite in neuem Tab öffnen">
<iframe class="preview-frame__view" src="${url}" loading="lazy" scrolling="no" tabindex="-1" aria-hidden="true"></iframe>
<span class="preview-frame__hint">Webseite öffnen ↗</span>
</a>`
: `<div class="preview-frame preview-frame--empty"><span>${project.previewUrl ? 'Vorschau wird vorbereitet …' : 'Noch keine Webseite veröffentlicht'}</span></div>`
li.innerHTML = `
${previewHtml}
<h2>${escapeHtml(project.projectName || project.subdomain || 'Projekt')}</h2>
<dl>
<dt>Subdomain</dt><dd>${escapeHtml(project.subdomain || '–')}</dd>
<dt>Vorschau</dt><dd>${project.previewUrl ? `<a class="btn btn-green" href="${escapeAttr(project.previewUrl)}">Projekt-Webseite öffnen</a>` : '–'}</dd>
<dt>Live-Domain</dt><dd>${project.liveDomain ? escapeHtml(project.liveDomain) : '–'}</dd>
<dt>Status</dt><dd>${escapeHtml(project.status || '–')}</dd>
</dl>
${ready && url ? `<p class="preview-open"><a class="btn btn-green" href="${url}" target="_blank" rel="noreferrer">Projekt-Webseite öffnen ↗</a></p>` : ''}
${featureHtml}
<div class="project-details-toggle">
<button type="button" class="portal-btn-outline" data-details-btn>Details anzeigen</button>
@@ -106,6 +133,9 @@ function renderProjectCard(project, features) {
<div class="project-details hidden" data-details-box></div>
`
const frame = li.querySelector('[data-preview-frame]')
if (frame) setupPreviewFrame(frame)
const btn = li.querySelector('[data-details-btn]')
const box = li.querySelector('[data-details-box]')
let loaded = false

25
public/dashboard.html
View File

@@ -61,6 +61,31 @@
.commit-meta { font-size: 12px; opacity: 0.6; }
.commit-body { font-size: 13px; opacity: 0.8; white-space: pre-wrap; margin: 2px 0 0 8px; }
/* Projekt-Vorschaufenster */
.preview-frame {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.04); margin-bottom: 1rem; text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.preview-frame:hover { border-color: rgba(157,61,254,0.7); box-shadow: 0 0 0 1px rgba(157,61,254,0.35); }
.preview-frame__view {
position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0;
transform-origin: 0 0; pointer-events: none; background: #fff;
}
.preview-frame__hint {
position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px;
font-size: 13px; font-weight: 600; color: #fff;
background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.preview-frame:hover .preview-frame__hint { opacity: 1; }
.preview-frame--empty {
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.5); font-size: 14px; aspect-ratio: 16 / 10;
}
.preview-open { margin: 0.75rem 0 0; }
/* Chat */
.chat-box { display: flex; flex-direction: column; height: 480px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 10px; }