diff --git a/src/pages/index.astro b/src/pages/ a/src/pages/index.astro +++ b/src/pages/index.astro @@ -162,73 +162,164 @@ const FEEDBACK_WEBHOOK = `${N8N_BASE}/a901c13c-ff10-47f9-892c-17497cff07f0`; .main-content { flex: 1; min-width: 0; transition: margin-left 0.28s ease; } .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .hero { min-height: calc(100vh - 60px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 0.6fr); column-gap: 40px; align-items: start; width: 100%; padding: 28px 32px 0; box-sizing: border-box; } .hero-chat { background: var(--terra); border-radius: 36px; padding: 48px 40px 32px; display: flex; flex-direction: column; gap: 18px; position: relative; min-height: 760px; height: 760px; align-self: start; + overflow: hidden; + } + .hero-chat::before { + content: ''; + position: absolute; + inset: -20% -10% auto; + height: 260px; + background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.24), transparent 60%); + pointer-events: none; } .chat-messages { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; scrollbar-width: none; } .chat-messages::-webkit-scrollbar { display: none; } .chat-msg { background: var(--cream); border-radius: 34px; padding: 28px 30px; max-width: 680px; width: 100%; font-size: 15px; line-height: 1.7; color: var(--text); font-weight: 300; box-shadow: 0 2px 12px rgba(42,36,32,0.08); white-space: pre-wrap; } .chat-msg.user { margin-left: auto; border-radius: 34px; background: rgba(255,255,255,0.25); color: white; } .chat-msg.processing { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); font-size: 13px; padding: 16px 24px; border-radius: 20px; display: flex; align-items: center; gap: 10px; } .chat-msg .meta { font-size: 11px; color: var(--text-muted); margin-top: 10px; } + .mood-mascot { + position: absolute; + top: 18px; + right: 18px; + width: 94px; + height: 94px; + border-radius: 30px; + background: linear-gradient(180deg, #ffe5b7 0%, #efc989 100%); + border: 2px solid rgba(42,36,32,0.2); + box-shadow: 0 12px 26px rgba(42,36,32,0.2); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 20; + transition: transform 0.18s ease, box-shadow 0.18s ease; + } + .mood-mascot:hover { transform: scale(1.03); box-shadow: 0 16px 28px rgba(42,36,32,0.24); } + .mood-face { + position: relative; + width: 82px; + height: 82px; + border-radius: 28px; + background: #f5d9a8; + } + .mood-ear { + position: absolute; + top: -8px; + width: 20px; + height: 20px; + border-radius: 8px; + background: #e7be7a; + border: 2px solid rgba(42,36,32,0.14); + } + .mood-ear.left { left: 8px; transform: rotate(-22deg); } + .mood-ear.right { right: 8px; transform: rotate(22deg); } + .mood-eyes { + display: flex; + justify-content: center; + gap: 12px; + padding-top: 21px; + } + .mood-eye { + width: 24px; + height: 24px; + border-radius: 50%; + background: #fff; + border: 2px solid rgba(42,36,32,0.2); + position: relative; + overflow: hidden; + } + .mood-pupil { + position: absolute; + top: 8px; + left: 8px; + width: 8px; + height: 8px; + border-radius: 50%; + background: #2a2420; + transition: transform 0.1s linear; + } + .mood-mouth { + width: 22px; + height: 10px; + margin: 14px auto 0; + border-radius: 0 0 12px 12px; + border: 2px solid rgba(42,36,32,0.25); + border-top: 0; + } + .mood-hint { + position: absolute; + top: -10px; + left: -6px; + transform: translateY(-100%); + background: #fff; + color: var(--text-mid); + border: 1px solid var(--line); + border-radius: 999px; + padding: 6px 10px; + font-size: 11px; + white-space: nowrap; + } .typing-dots { display: inline-flex; gap: 4px; align-items: center; height: 16px; } .typing-dots span { width: 6px; height: 6px; border-radius: 99px; background: var(--text-muted); animation: bounce 1.2s infinite; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } } .chat-toolbar { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,0.18); border-radius: 999px; padding: 10px 12px 10px 16px; backdrop-filter: blur(8px); } .chat-plus-btn { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.25); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 20px; font-weight: 300; transition: background 0.15s; position: relative; } .chat-plus-btn:hover { background: rgba(255,255,255,0.35); } .attach-menu { @@ -280,50 +371,92 @@ const FEEDBACK_WEBHOOK = `${N8N_BASE}/a901c13c-ff10-47f9-892c-17497cff07f0`; .file-chip { display: inline-flex; gap: 6px; align-items: center; background: rgba(255,255,255,0.2); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: white; font-family: var(--font-body); } .file-chip button { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; } .hero-preview { background: var(--bg); padding: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 16px; min-height: 760px; height: 760px; align-self: start; } .social-icons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; width: 100%; overflow-x: visible; padding-top: 64px; } + .n8n-panel { + width: 100%; + background: rgba(255,255,255,0.55); + border: 1px solid var(--line); + border-radius: 18px; + padding: 12px; + display: grid; + gap: 8px; + } + .n8n-panel h3 { + margin: 0; + font-size: 13px; + font-weight: 600; + color: var(--text); + } + .n8n-panel p { + margin: 0; + font-size: 12px; + line-height: 1.5; + color: var(--text-mid); + } + .n8n-grid { display: grid; gap: 6px; } + .n8n-grid label { font-size: 11px; color: var(--text-muted); } + .n8n-grid input { + width: 100%; + border: 1px solid var(--line); + background: #fff; + border-radius: 10px; + padding: 7px 10px; + font-size: 12px; + color: var(--text-mid); + } + .n8n-panel-actions { display: flex; gap: 8px; } + .n8n-panel-actions button { + flex: 1; + border: 1px solid var(--line); + background: #fff; + border-radius: 10px; + font-size: 12px; + padding: 7px 10px; + cursor: pointer; + } .social-icon-wrap { position: relative; flex: 0 0 auto; } .social-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px); background: #171923; color: #fff; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; pointer-events: none; z-index: 10; } .social-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; background: #171923; transform: translateX(-50%) rotate(45deg); margin-top: -4px; } .social-icon-wrap:hover .social-tooltip, .social-icon-wrap:focus-within .social-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .social-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; color: var(--text-mid); font-size: 20px; text-decoration: none; position: relative; } @@ -499,81 +632,109 @@ const FEEDBACK_WEBHOOK = `${N8N_BASE}/a901c13c-ff10-47f9-892c-17497cff07f0`; Weihnachten

+ Hover mich 🪄 +

+ + +

Hi, ich bin MOOD — ich führe dich in wenigen Minuten durch ein kostenloses Erst-Briefing.

Erzähl mir kurz, was du anbietest, wen du erreichen willst und wo du gerade festhängst.

n8n Quick Connect

Webhook-URLs eintragen und sofort für Chat, Vorschau & Feedback nutzen.

+ Chat Endpoint + + Preview Endpoint + + Feedback Endpoint + +

+ + +

Kostenloses Erstgespräch mit MOOD starten.