Widget:StartseitenSuche: Unterschied zwischen den Versionen

Aus MediaWiki
Wechseln zu:Navigation, Suche
← Zum vorherigen Versionsunterschied
VisuellWikitext
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
 
(11 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<includeonly>
<includeonly>
 
<div class="overlay-container">
<div id="chat-widget">
  <div class="overlay-content">
  <div id="chat-messages"></div>
    <div id="chat-widget">
  <div id="chat-sources-panel"></div>
      <div id="chat-messages"></div>
  <form id="chat-form">
      <div id="chat-sources-panel"></div>
    <input type="text" id="chat-input" placeholder="Stelle eine Frage über Münster …" autocomplete="off" />
      <form id="chat-form">
    <button type="submit" id="chat-send">Fragen</button>
        <input type="text" id="chat-input" placeholder="Stelle mir deine Frage …" autocomplete="off" />
  </form>
        <button type="submit" id="chat-send">Fragen</button>
  <div id="chat-footer">
      </form>
    <span id="chat-status"></span>
      <div id="chat-footer">
    <button id="chat-new" type="button">Neue Unterhaltung</button>
        <span id="chat-status"></span>
        <button id="chat-new" type="button">Neue Unterhaltung</button>
      </div>
    </div>
   </div>
   </div>
</div>
</div>


<style>
<style>
.overlay-container {
  position: relative;
  width: 100%;
  min-height: 400px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background-color: #2f3e46;
  background-image: url("/w/images/a/a9/Schloss-Muenster-Philipp-Foelting-CC-BY-SA.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.overlay-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 1;
}
.overlay-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  padding: 0px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}
#chat-widget {
#chat-widget {
   max-width: 800px;
   width: 80%;
   margin: 0 auto;
   margin: 0 auto;
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: #212529;
   color: #212529;
   display: flex;
   display: flex;
  background-image:url("/w/images/a/a9/Schloss-Muenster-Philipp-Foelting-CC-BY-SA.jpg");
  background-size: cover;
  background-position: center;
  min-height:400px;
   flex-direction: column;
   flex-direction: column;
  background: transparent;
}
}
#chat-messages {
#chat-messages {
   min-height: 120px;
   min-height: 120px;
Zeile 36: Zeile 76:
   gap: 12px;
   gap: 12px;
}
}
#chat-messages:empty::before {
#chat-messages:empty::before {
   content: "Stelle eine Frage und erhalte Antworten basierend auf dem Münster Wiki und ausgewählten Seiten. Beachte: KI-Suche kann Fehler enthalten. Bitte prüfe die Ergebnisse. Personenbezogenen Daten können zur Optimierung der KI genutzt werden";
   content: "Stelle eine Frage und erhalte Antworten basierend auf dem Münster Wiki und ausgewählten Web-Inhalten für Münster. Beachte: KI-Suche kann Fehler machen. Prüfe deine Ergebnisse sorgfältig. Verwende keine personenbezogenen Daten.";
   display: block;
   display: block;
   text-align: center;
   text-align: center;
   color: #999;
   color: #666;
   font-size: 14px;
   font-size: 14px;
   padding: 40px 16px;
   padding: 20px 16px;
}
}
.chat-msg {
.chat-msg {
   max-width: 85%;
   max-width: 85%;
Zeile 52: Zeile 94:
   word-wrap: break-word;
   word-wrap: break-word;
}
}
.chat-msg-user {
.chat-msg-user {
   align-self: flex-end;
   align-self: flex-end;
Zeile 58: Zeile 101:
   border-bottom-right-radius: 3px;
   border-bottom-right-radius: 3px;
}
}
.chat-msg-assistant {
.chat-msg-assistant {
   align-self: flex-start;
   align-self: flex-start;
Zeile 64: Zeile 108:
   border-bottom-left-radius: 3px;
   border-bottom-left-radius: 3px;
}
}
.chat-msg-assistant p {
.chat-msg-assistant p {
   margin: 0 0 8px 0;
   margin: 0 0 8px 0;
}
}
.chat-msg-assistant p:last-child {
.chat-msg-assistant p:last-child {
   margin-bottom: 0;
   margin-bottom: 0;
}
}
@keyframes chatDots {
@keyframes chatDots {
   0%, 80%, 100% { opacity: 0.3; }
   0%, 80%, 100% { opacity: 0.3; }
   40% { opacity: 1; }
   40% { opacity: 1; }
}
}
.chat-loading-dots span {
.chat-loading-dots span {
   display: inline-block;
   display: inline-block;
Zeile 83: Zeile 131:
   animation: chatDots 1.2s ease-in-out infinite;
   animation: chatDots 1.2s ease-in-out infinite;
}
}
.chat-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
.chat-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
#chat-sources-panel {
#chat-sources-panel {
   display: none;
   display: none;
}
}
#chat-sources-panel.visible {
#chat-sources-panel.visible {
   display: block;
   display: block;
   margin: 4px 0 8px 0;
   margin: 4px 0 8px 0;
}
}
.chat-sources-toggle {
.chat-sources-toggle {
   background: none;
   background: none;
Zeile 102: Zeile 154:
   transition: background 0.15s;
   transition: background 0.15s;
}
}
.chat-sources-toggle:hover {
.chat-sources-toggle:hover {
   background: #f5f5f5;
   background: #f5f5f5;
}
}
.chat-sources-list {
.chat-sources-list {
   display: none;
   display: none;
   margin-top: 8px;
   margin-top: 8px;
}
}
.chat-sources-list.open {
.chat-sources-list.open {
   display: block;
   display: block;
}
}
.chat-source-item {
.chat-source-item {
   padding: 10px 12px;
   padding: 10px 12px;
Zeile 120: Zeile 176:
   transition: border-color 0.15s;
   transition: border-color 0.15s;
}
}
.chat-source-item:hover {
.chat-source-item:hover {
   border-color: #b0b8c1;
   border-color: #b0b8c1;
}
}
.chat-source-item h5 {
.chat-source-item h5 {
   margin: 0 0 3px 0;
   margin: 0 0 3px 0;
Zeile 128: Zeile 186:
   font-weight: 600;
   font-weight: 600;
}
}
.chat-source-item h5 a {
.chat-source-item h5 a {
   color: #00308D;
   color: #00308D;
   text-decoration: none;
   text-decoration: none;
}
}
.chat-source-item h5 a:hover {
.chat-source-item h5 a:hover {
   text-decoration: underline;
   text-decoration: underline;
}
}
.chat-source-item .chat-source-snippet {
.chat-source-item .chat-source-snippet {
   font-size: 12.5px;
   font-size: 12.5px;
Zeile 141: Zeile 202:
   margin: 0;
   margin: 0;
}
}
.chat-source-item .chat-source-meta {
.chat-source-item .chat-source-meta {
   font-size: 11px;
   font-size: 11px;
Zeile 146: Zeile 208:
   margin-top: 3px;
   margin-top: 3px;
}
}
#chat-form {
#chat-form {
   display: flex;
   display: flex;
   margin-top: 8px;
   margin-top: 8px;
}
}
#chat-input {
#chat-input {
   flex: 1;
   flex: 1;
Zeile 161: Zeile 225:
   color: #212529;
   color: #212529;
   background: #fff;
   background: #fff;
  min-width: 0;
}
}
#chat-input:focus {
#chat-input:focus {
   border-color: #4CAF50;
   border-color: #4CAF50;
}
}
#chat-input:disabled {
#chat-input:disabled {
   background: #f5f5f5;
   background: #f5f5f5;
   color: #999;
   color: #999;
}
}
#chat-send {
#chat-send {
   padding: 10px 20px;
   padding: 10px 20px;
Zeile 181: Zeile 249:
   white-space: nowrap;
   white-space: nowrap;
}
}
#chat-send:hover {
#chat-send:hover {
   background: #43A047;
   background: #43A047;
}
}
#chat-send:disabled {
#chat-send:disabled {
   background: #a5d6a7;
   background: #a5d6a7;
   cursor: not-allowed;
   cursor: not-allowed;
}
}
#chat-footer {
#chat-footer {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: space-between;
   justify-content: space-between;
  gap: 12px;
   margin-top: 8px;
   margin-top: 8px;
   min-height: 28px;
   min-height: 28px;
}
}
#chat-status {
#chat-status {
   font-size: 12px;
   font-size: 12px;
   color: #888;
   color: #666;
}
}
#chat-new {
#chat-new {
   display: none;
   display: none;
Zeile 210: Zeile 284:
   transition: background 0.15s;
   transition: background 0.15s;
}
}
#chat-new:hover {
#chat-new:hover {
   background: #f5f5f5;
   background: #f5f5f5;
}
}
#chat-new.visible {
#chat-new.visible {
   display: inline-block;
   display: inline-block;
}
}
.chat-msg-error {
.chat-msg-error {
   align-self: center;
   align-self: center;
Zeile 224: Zeile 301:
   padding: 8px 14px;
   padding: 8px 14px;
   border-radius: 6px;
   border-radius: 6px;
}
/* Tablet */
@media (max-width: 900px) {
  .overlay-container {
    min-height: 340px;
    padding: 18px;
    border-radius: 10px;
  }
  .overlay-content {
    padding: 16px;
    border-radius: 10px;
  }
}
/* Smartphone */
@media (max-width: 600px) {
  .overlay-container {
    min-height: 280px;
    padding: 12px;
    align-items: stretch;
    border-radius: 8px;
  }
  .overlay-content {
    padding: 14px;
    border-radius: 8px;
  }
  #chat-form {
    flex-direction: column;
    gap: 8px;
  }
  #chat-input {
    border-right: 1px solid #ccc;
    border-radius: 4px;
  }
  #chat-send {
    width: 100%;
    border-radius: 4px;
  }
  .chat-msg {
    max-width: 100%;
  }
  #chat-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Kleine Smartphones */
@media (max-width: 400px) {
  .overlay-container {
    min-height: 240px;
    padding: 10px;
  }
  .overlay-content {
    padding: 12px;
  }
  #chat-messages {
    max-height: 420px;
  }
  .chat-msg {
    font-size: 14px;
    padding: 9px 12px;
  }
}
}
</style>
</style>
Zeile 249: Zeile 400:
   function truncate(str, len) {
   function truncate(str, len) {
     if (str.length <= len) return str;
     if (str.length <= len) return str;
     return str.substring(0, len).replace(/\s+\S*$/, '') + '\u2026';
     return str.substring(0, len).replace(/\\s+\\S*$/, '') + '\\u2026';
   }
   }


   function formatAnswer(text) {
   function formatAnswer(text) {
     var html = escapeHtml(text);
     var html = escapeHtml(text);
     html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
     html = html.replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>');
     var paragraphs = html.split(/\n{2,}/);
     var paragraphs = html.split(/\\n{2,}/);
     if (paragraphs.length > 1) {
     if (paragraphs.length > 1) {
       html = paragraphs.map(function(p) { return '<p>' + p.replace(/\n/g, '<br>') + '</p>'; }).join('');
       html = paragraphs.map(function(p) { return '<p>' + p.replace(/\\n/g, '<br>') + '</p>'; }).join('');
     } else {
     } else {
       html = html.replace(/\n/g, '<br>');
       html = html.replace(/\\n/g, '<br>');
     }
     }
     return html;
     return html;
Zeile 314: Zeile 465:
     sourcesPanel.className = 'visible';
     sourcesPanel.className = 'visible';
     var listId = 'src-list-' + Date.now();
     var listId = 'src-list-' + Date.now();
     var html = '<button class="chat-sources-toggle" onclick="var l=document.getElementById(\'' + listId + '\');l.classList.toggle(\'open\');this.textContent=l.classList.contains(\'open\')?\'▲ Quellen verbergen\':\'▼ ' + sources.length + ' Quellen anzeigen\'">'
     var html = '<button class="chat-sources-toggle" onclick="var l=document.getElementById(\\'' + listId + '\\');l.classList.toggle(\\'open\\');this.textContent=l.classList.contains(\\'open\\')?\\'▲ Quellen verbergen\\':\\'▼ ' + sources.length + ' Quellen anzeigen\\'">'
       + '▼ ' + sources.length + ' Quellen anzeigen</button>';
       + '▼ ' + sources.length + ' Quellen anzeigen</button>';
     html += '<div class="chat-sources-list" id="' + listId + '">';
     html += '<div class="chat-sources-list" id="' + listId + '">';
Zeile 343: Zeile 494:
   function updateStatus(remaining) {
   function updateStatus(remaining) {
     if (remaining > 0) {
     if (remaining > 0) {
       statusEl.textContent = remaining + ' R\u00fcckfrage' + (remaining !== 1 ? 'n' : '') + ' verbleibend';
       statusEl.textContent = remaining + ' R\\u00fcckfrage' + (remaining !== 1 ? 'n' : '') + ' verbleibend';
     } else if (remaining === 0) { if (conversationId) {
     } else if (remaining === 0) {
      statusEl.textContent = 'Keine R\u00fcckfragen mehr m\u00f6glich';
      if (conversationId) {
      input.disabled = true;
        statusEl.textContent = 'Keine R\\u00fcckfragen mehr m\\u00f6glich';
      sendBtn.disabled = true;
        input.disabled = true;
      input.placeholder = 'Starte eine neue Unterhaltung';
        sendBtn.disabled = true;
     } }
        input.placeholder = 'Starte eine neue Unterhaltung';
      }
     }
     newBtn.className = conversationId ? 'visible' : '';
     newBtn.className = conversationId ? 'visible' : '';
   }
   }
Zeile 362: Zeile 515:
     input.disabled = false;
     input.disabled = false;
     sendBtn.disabled = false;
     sendBtn.disabled = false;
     input.placeholder = 'Stelle eine Frage \u00fcber M\u00fcnster \u2026';
     input.placeholder = 'Stelle eine Frage \\u00fcber M\\u00fcnster \\u2026';
     input.focus();
     input.focus();
   }
   }
Zeile 414: Zeile 567:
})();
})();
</script>
</script>
<style type="text/css">
.overlay-container {
  position: relative;
  width: 100%;
  display: inline-block;
  background-image:url("/w/images/a/a9/Schloss-Muenster-Philipp-Foelting-CC-BY-SA.jpg");
  background-size: cover;
  background-position: center;
  min-height:400px;
}
.overlay-content {
  position: absolute;
  top: 50%; /* Position des Widgets */
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Textfarbe: Weiß */
  background-color: #00308D; /* Hintergrundfarbe: Blau */
  border-radius: 15px; /* Abgerundete Ecken */
  padding: 20px;
  text-align: center;
  width: 80%; /* Breite des Widgets, kannst du anpassen */
}
.overlay-content p {
  margin: 10px 0; /* Abstand zwischen den Textabsätzen */
}
.overlay-content .headline-text {
  font-size: 1.5em; /* Größerer Schriftzug */
  font-weight: bold; /* Dickere Schrift */
  margin: 10px 0;
}
/* To make images responsive */
.img-fluid img {
max-width:100%;
height:auto;
}
</style>
</includeonly>
</includeonly>

Aktuelle Version vom 5. Mai 2026, 19:54 Uhr

Abgerufen von „https://www.muenster4you.de/w/index.php?title=Widget:StartseitenSuche&oldid=1120“
Powered by MediaWiki