diff --git a/Minecraft-Modern-Theme/css/assistant-widget.css b/Minecraft-Modern-Theme/css/assistant-widget.css new file mode 100644 index 0000000..7e58ac2 --- /dev/null +++ b/Minecraft-Modern-Theme/css/assistant-widget.css @@ -0,0 +1,74 @@ + +#mm-assistant-chat { + display: none; + position: absolute; + bottom: 110px; + right: 0; + width: 320px; + background: #1a1d22; /* Dunklerer Hintergrund */ + border-radius: 15px; + box-shadow: 0 15px 45px rgba(0,0,0,0.5); + border: 1px solid #333; + overflow: hidden; + z-index: 10000; +} + +.chat-header { + background: #0099ff; + padding: 12px 15px; + display: flex; + align-items: center; + font-weight: bold; + color: white; +} + +.status-dot { + height: 10px; + width: 10px; + background-color: #00ff00; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + box-shadow: 0 0 5px #00ff00; +} + +#mm-assistant-content { + padding: 20px; + max-height: 350px; + overflow-y: auto; + color: #e0e0e0; + line-height: 1.6; + font-size: 14px; +} + +.chat-input-area { + background: #111; + padding: 10px; + display: flex; + gap: 8px; + border-top: 1px solid #333; +} + +#mm-assistant-input { + flex: 1; + background: #222; + border: 1px solid #444; + color: white; + padding: 8px 12px; + border-radius: 8px; + outline: none; +} + +#mm-assistant-send { + background: #0099ff; + border: none; + color: white; + padding: 5px 12px; + border-radius: 8px; + cursor: pointer; + display: flex; + align-items: center; + transition: background 0.2s; +} + +#mm-assistant-send:hover { background: #0077cc; } \ No newline at end of file diff --git a/Minecraft-Modern-Theme/css/virtual-assistant.css b/Minecraft-Modern-Theme/css/virtual-assistant.css new file mode 100644 index 0000000..e3d459d --- /dev/null +++ b/Minecraft-Modern-Theme/css/virtual-assistant.css @@ -0,0 +1,215 @@ +/* Modernes Design für Virtuellen Assistenten (unten rechts) */ +#mm-virtual-assistant { + position: fixed; + bottom: 32px; + right: 32px; + z-index: 9999; + font-family: inherit; +} +#mm-assistant-btn { + background: transparent; + border: none; + cursor: pointer; + box-shadow: 0 2px 8px rgba(0,0,0,0.18); + border-radius: 16px; + padding: 0; + transition: box-shadow 0.2s; +} +#mm-assistant-btn:hover { + box-shadow: 0 4px 16px rgba(0,153,255,0.25); +} +#mm-assistant-btn img { + display: block; + background: #181c22; + border-radius: 16px; + width: 70px; + height: 70px; + box-shadow: 0 2px 8px rgba(0,0,0,0.12); +} +#mm-assistant-chat { + display: none; + position: absolute; + bottom: 110px; + right: 0; + width: 340px; + max-width: 95vw; + background: #23272e; + color: #fff; + border-radius: 18px; + box-shadow: 0 8px 32px rgba(0,0,0,0.35); + padding: 0; + overflow: hidden; + animation: mmFadeIn 0.25s; +} +@keyframes mmFadeIn { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } +} +#mm-assistant-chat > div:first-child { + background: #0099ff; + color: #fff; + font-weight: 600; + font-size: 1.1rem; + padding: 14px 18px 10px 18px; + border-bottom: 1px solid #1a1d22; + border-radius: 18px 18px 0 0; +} +#mm-assistant-content { + min-height: 40px; + font-size: 1rem; + padding: 18px 18px 8px 18px; + background: #23272e; +} +#mm-assistant-input { + width: 100%; + padding: 10px 14px; + border-radius: 8px; + border: none; + outline: none; + font-size: 1rem; + background: #1a1d22; + color: #fff; + margin-bottom: 8px; + box-sizing: border-box; +} +#mm-assistant-input::placeholder { + color: #aaa; +} +#mm-assistant-send { + width: 100%; + background: #0099ff; + color: #fff; + font-weight: bold; + border: none; + border-radius: 8px; + padding: 10px 0; + font-size: 1.1rem; + cursor: pointer; + transition: background 0.2s; +} +#mm-assistant-send:hover { + background: #007acc; +} +@media (max-width: 600px) { + #mm-assistant-chat { + width: 98vw; + min-width: 0; + border-radius: 12px; + right: -8px; + } + #mm-virtual-assistant { + right: 8px; + bottom: 8px; + } +} + + +#mm-assistant-chat { + display: none; + position: absolute; + bottom: 110px; + right: 0; + width: 320px; + background: #1a1d22; /* Dunklerer Hintergrund */ + border-radius: 15px; + box-shadow: 0 15px 45px rgba(0,0,0,0.5); + border: 1px solid #333; + overflow: hidden; + z-index: 10000; +} + +.chat-header { + background: #0099ff; + padding: 12px 15px; + display: flex; + align-items: center; + font-weight: bold; + color: white; +} + +.status-dot { + height: 10px; + width: 10px; + background-color: #00ff00; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + box-shadow: 0 0 5px #00ff00; +} + +#mm-assistant-content { + padding: 20px; + max-height: 350px; + overflow-y: auto; + color: #e0e0e0; + line-height: 1.6; + font-size: 14px; +} + +.chat-input-area { + background: #111; + padding: 10px; + display: flex; + gap: 8px; + border-top: 1px solid #333; +} + +#mm-assistant-input { + flex: 1; + background: #222; + border: 1px solid #444; + color: white; + padding: 8px 12px; + border-radius: 8px; + outline: none; +} + +#mm-assistant-send { + background: #0099ff; + border: none; + color: white; + padding: 5px 12px; + border-radius: 8px; + cursor: pointer; + display: flex; + align-items: center; + transition: background 0.2s; +} + +#mm-assistant-send:hover { background: #0077cc; } + + + #mm-bot-root { position:fixed; bottom:30px; right:30px; z-index:999999; font-family:-apple-system,system-ui,sans-serif; } + #mm-bot-launcher { background:#0099ff; border:none; border-radius:50%; width:60px; height:60px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:.3s ease; display:flex; align-items:center; justify-content:center; overflow:hidden; } + #mm-bot-launcher:hover { transform:scale(1.08); background:#0088ee; } + #mm-bot-launcher img { width:42px; height:42px; border-radius:4px; } + + #mm-bot-chat { position:absolute; bottom:80px; right:0; width:340px; background:#1e2124; border-radius:15px; box-shadow:0 12px 40px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden; border:1px solid #333; } + .mm-bot-header { background:#2f3136; color:#fff; padding:14px 18px; display:flex; align-items:center; gap:12px; font-weight:700; border-bottom:1px solid #111; } + .mm-bot-status { width:10px; height:10px; background:#43b581; border-radius:50%; box-shadow:0 0 8px #43b581; flex-shrink:0; } + + #mm-bot-content { height:320px; padding:16px; overflow-y:auto; background:#36393f; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; } + .mm-msg { padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; max-width:88%; word-break:break-word; } + .mm-msg.bot { background:#40444b; color:#dcddde; align-self:flex-start; border-bottom-left-radius:3px; } + .mm-msg.user { background:#0099ff; color:#fff; align-self:flex-end; border-bottom-right-radius:3px; } + .mm-msg a { color:#00b0f4; text-decoration:none; font-weight:600; } + .mm-msg a:hover { text-decoration:underline; } + .mm-loading { opacity:.6; font-size:20px; letter-spacing:4px; } + + .mm-bot-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } + .mm-quick-btn { background:#2f3136; color:#dcddde; border:1px solid #444; border-radius:20px; padding:5px 12px; font-size:12px; cursor:pointer; transition:.2s; white-space:nowrap; } + .mm-quick-btn:hover { background:#0099ff; color:#fff; border-color:#0099ff; } + + .mm-bot-input-area { padding:12px 14px; background:#2f3136; display:flex; gap:8px; border-top:1px solid #222; } + #mm-bot-field { flex:1; background:#40444b; border:1px solid #222; border-radius:8px; color:#fff; padding:9px 12px; outline:none; font-size:14px; } + #mm-bot-field:focus { border-color:#0099ff; } + #id-mm-bot-send { background:#0099ff; border:none; color:#fff; border-radius:8px; padding:0 16px; cursor:pointer; font-size:16px; } + #id-mm-bot-send:hover { background:#00b0f4; } + #mm-bot-close { margin-left:auto; background:none; border:none; color:#888; font-size:24px; cursor:pointer; line-height:1; padding:0; } + #mm-bot-close:hover { color:#fff; } + + #mm-bot-chat code { background:#222; padding:2px 6px; border-radius:4px; color:#ffa500; font-family:monospace; font-size:13px; } + + @media (max-width:400px) { + #mm-bot-chat { width:calc(100vw - 20px); right:-10px; } + } \ No newline at end of file