1
0
2025-02-26 21:09:58 +01:00

848 lines
32 KiB
HTML

<!--DeppGPT Start-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="chatgpt-widget" id="chatgpt-widget">
<style>
/* basic chat widget styles */
.chatgpt-widget {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.chatgpt-widget .chat-container {
display: flex;
flex-direction: column;
width: 100%;
height: 500px;
margin: 0;
border: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow-y: scroll;
position: relative;
}
.chatgpt-widget .chat-container::-webkit-scrollbar {
width: 8px;
}
.chatgpt-widget .chat-container::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 5px;
}
.chatgpt-widget .chat-container::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
.chatgpt-widget .message {
margin-bottom: 10px;
padding: 8px 12px;
border-radius: 15px;
line-height: 1.4;
max-width: 80%;
word-wrap: break-word;
word-break: normal;
}
.chatgpt-widget .user {
align-self: flex-end;
background-color: #0E766C;
color: #ffffff;
}
.chatgpt-widget .bot {
align-self: flex-start;
background-color: #264044;
color: #ffffff;
}
.chatgpt-widget .bot-exit-message {
align-self: center;
text-align: center;
background-color: #e9e9e9;
color: #333333;
}
/* loading animations of chat widget */
.chatgpt-widget .loading-animation {
align-self: flex-start;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #0E766C;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* input container */
.chatgpt-widget #input-container {
display: flex;
width: 100%;
margin: 10px 0;
padding: 5px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.chatgpt-widget #user-input {
flex-grow: 1;
margin-right: 10px;
padding: 5px;
border: none;
outline: none;
font-size: 16px;
border-radius: 5px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.chatgpt-widget button {
position: relative;
background-color: #0E766C;
color: #ffffff;
padding: 5px 10px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
width: 80px;
/* Sie können die Breite an Ihre Bedürfnisse anpassen */
text-align: center;
white-space: nowrap;
}
#buttonText,
#ellipsis {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ellipsis div {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
margin: 0 2px;
animation: ellipsis 1s infinite;
/* Die Dauer der Animation wurde auf 1 Sekunde erhöht */
}
.ellipsis div:nth-child(2) {
animation-delay: 0.2s;
}
.ellipsis div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes ellipsis {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.chatgpt-widget button:hover {
background-color: #009688;
}
/* Kopie Überschreibungen */
#chat-window-copy {
box-sizing: border-box;
height: 100%;
width: 100%;
overflow: visible !important;
box-shadow: none;
max-width: 1080px;
width: 1080px;
}
#chat-window-copy-parent {
position: fixed;
left: -2000px;
background: #0E766C;
display: flex;
flex-direction: column;
max-width: 1080px;
width: 1080px;
}
#chat-window-copy-parent #chat-window-copy .message {
margin-bottom: 18px;
padding: 14px 21px;
border-radius: 27px;
max-width: 80%;
font-size: 30px;
}
/* Media queries for mobile devices */
@media (max-width: 600px) {
#chatgpt-widget {
max-width: 100%;
}
#chatgpt-widget .chat-container {
height: 400px;
}
#chatgpt-widget .message {
font-size: 14px;
}
#chatgpt-widget #user-input {
font-size: 14px;
}
#chatgpt-widget button {
font-size: 14px;
}
}
@media (max-width: 480px) {
#chatgpt-widget .chat-container {
height: 300px;
}
}
/* Neuer Button-Stil */
#save-button {
position: relative;
background-color: #0E766C;
/* Passend zum Senden-Button */
color: #ffffff;
/* Weißer Text */
padding: 5px 10px;
/* Größere Polsterung für einen größeren Button */
margin: 10px 0;
/* Extra Abstand oben und unten */
margin-top: 50px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
width: auto;
/* Automatische Breite, basierend auf dem Inhalt */
text-align: center;
display: block;
/* Der Button wird block-level, damit margin:auto funktioniert */
margin: 10px auto;
/* Zentriert den Button horizontal */
}
#save-button:hover {
background-color: #009688;
/* Dunklere Farbe beim Überfahren mit der Maus */
}
#download-button {
position: relative;
background-color: #0E766C;
/* Passend zum Senden-Button */
color: #ffffff;
/* Weißer Text */
padding: 10px 20px;
/* Größere Polsterung für einen größeren Button */
margin: 10px 0;
/* Extra Abstand oben und unten */
margin-top: 50px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
width: auto;
/* Automatische Breite, basierend auf dem Inhalt */
text-align: center;
display: block;
/* Der Button wird block-level, damit margin:auto funktioniert */
margin: 10px auto;
/* Zentriert den Button horizontal */
}
#download-button:hover {
background-color: #009688;
/* Dunklere Farbe beim Überfahren mit der Maus */
}
.button-container {
margin-top: 30px;
/* Erhöht den Abstand zum oberen Element */
text-align: center;
/* Zentriert den Inhalt der Div */
}
/* Media queries for mobile devices */
@media (max-width: 600px) {
#save-button {
font-size: 14px;
}
}
</style>
<div class="chat-container" id="chat-container">
</div>
<div id="input-container">
<input id="user-input" type="text" />
<button class="chatgpt-widget button" id="myButton" onclick="sendChatGPTMessage()">
<div id="buttonText">Senden</div>
<div class="ellipsis" id="ellipsis" style="display: none;">
<div></div>
<div></div>
<div></div>
</div>
</button>
</div>
</div>
<div class="button-container">
<button id="save-button">Chat als Bild speichern</button>
</div>
<script>
const chatGPTContainer = document.getElementById('chat-container');
const maxMessages = getRandomInt(3, 5);
let messageCount = 0;
let serverOverloaded = false;
let sendButtonActive = true;
document.getElementById('user-input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
sendChatGPTMessage();
}
});
async function sendChatGPTMessage() {
if (sendButtonActive == false) {
return;
}
const userInput = document.getElementById('user-input');
let message = userInput.value.trim();
if (message) {
userInput.value = '';
sendButtonActive = false;
toggleLoading(true);
messageCount += 1;
const userMessageElement = document.createElement('div');
userMessageElement.className = 'message user';
userMessageElement.innerText = message;
chatGPTContainer.appendChild(userMessageElement);
chatGPTContainer.scrollTop = chatGPTContainer.scrollHeight;
if (messageCount <= maxMessages && serverOverloaded == false) {
showChatGPTLoadingAnimation();
// Call the API and get the response
const response = await getCompletion(message);
const answer = response;
setTimeout(() => {
hideChatGPTLoadingAnimation();
const botMessageElement = document.createElement('div');
botMessageElement.className = 'message bot';
chatGPTContainer.appendChild(botMessageElement);
// Simulate typing effect
let index = 0;
const typingInterval = setInterval(() => {
botMessageElement.innerHTML += answer[index];
index++;
if (index === answer.length) {
clearInterval(typingInterval);
toggleLoading(false);
sendButtonActive = true;
if (serverOverloaded == true) {
var messageDiv = document.createElement('div');
// Fügen Sie der Nachrichten-Div die gewünschte Klasse hinzu (z.B. 'bot-exit-message')
messageDiv.className = 'message bot-exit-message';
// Setzen Sie den Inhalt der Nachrichten-Div
messageDiv.textContent = 'Unsere Server sind gerade überlastet, bitte versuche es später noch einmal!';
// Fügen Sie die Nachrichten-Div Ihrem Chat-Widget hinzu
chatGPTContainer.appendChild(messageDiv);
}
else if (messageCount == maxMessages) {
var messageDiv = document.createElement('div');
// Fügen Sie der Nachrichten-Div die gewünschte Klasse hinzu (z.B. 'bot-exit-message')
messageDiv.className = 'message bot-exit-message';
// Setzen Sie den Inhalt der Nachrichten-Div
messageDiv.textContent = 'DeppGPT hat den Chat verlassen.';
// Fügen Sie die Nachrichten-Div Ihrem Chat-Widget hinzu
chatGPTContainer.appendChild(messageDiv);
}
}
chatGPTContainer.scrollTop = chatGPTContainer.scrollHeight;
}, 25);
}, 1000);
}
else {
toggleLoading(false);
sendButtonActive = true;
}
}
}
let messages = [];
let serverURL = null;
function getDeepGPTVersionHost(probability) {
// Sicherstellen, dass die Wahrscheinlichkeit zwischen 0 und 1 liegt
if (probability < 0 || probability > 1) {
throw new Error("Probability must be between 0 and 1.");
}
// Generieren Sie eine zufällige Zahl zwischen 0 und 1
var randomNum = Math.random();
// Wählen Sie String1 oder String2 basierend auf der Wahrscheinlichkeit
if (randomNum < probability) {
// using deppgpt 2.2.1
return "https://europe-west1-deppgpt.cloudfunctions.net/DeppGPTRelease221";
} else {
// using deppgpt 2.0
return "https://europe-west1-deppgpt.cloudfunctions.net/DeppGPTRelease20";
}
}
async function getCompletion(userMessage) {
// Füge die Benutzernachricht zum Messages-Array hinzu
messages.push({ role: "user", content: userMessage });
if (serverURL == null) {
// first message determine server url
if (isGreeting(userMessage) == true && sentenceHasLessThanSixWords(userMessage) == true) {
serverURL = getDeepGPTVersionHost(0.2);
}
else if (isQuestion(userMessage) == true) {
serverURL = getDeepGPTVersionHost(0.8);
}
else {
serverURL = getDeepGPTVersionHost(0.5);
}
}
const response = await fetch(serverURL, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
messages: messages,
maxMessages: maxMessages
}),
});
if (response.ok) {
const data = await response.json();
const assistantMessage = data.answer;
// Füge die Antwort des Assistenten zum Messages-Array hinzu
messages.push({ role: "assistant", content: assistantMessage });
return assistantMessage;
} else {
const errorMessages = [
"Ich kriege gerade so viele Anfragen von so unfähigen Leuten wie dir, ich brauch grad echt mal ne Pause. Komm später wieder. Oder besser noch gar nicht!",
"Ich habe gerade genug von all den Leuten, die nicht wissen, was sie tun. Ich brauche einen Moment. Komm später zurück, wenn überhaupt!",
"Ich bin gerade von all den Anfragen von Leuten wie dir überschwemmt, die keine Ahnung haben. Ich muss durchatmen. Vielleicht kommst du später zurück, oder besser noch, gar nicht!",
"Ich bin gerade von all den Anfragen überfordert. Ich muss mich sammeln. Bitte komm später wieder, oder vielleicht sogar nie wieder!",
"Ich bin gerade mit Anfragen von Leuten überhäuft, die einfach keinen Plan haben. Ich brauche eine Pause. Versuch es später nochmal, oder besser noch, gar nicht!",
"Ich habe gerade genug von all den nutzlosen Anfragen. Ich brauche einen Moment für mich. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von Menschen überwältigt, die einfach nicht wissen, was sie tun. Ich brauche eine Auszeit. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade mit sinnlosen Anfragen überhäuft. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!",
"Ich habe gerade genug von all den Ahnungslosen, die mich belästigen. Ich brauche eine Pause. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade überfordert von all den Anfragen von Leuten, die nichts kapieren. Ich brauche eine Auszeit. Komm später wieder, oder vielleicht besser nicht!",
"Ich habe gerade genug von all den Anfragen von Leuten, die keine Ahnung haben. Ich brauche eine Pause. Versuch es später nochmal, oder besser noch, gar nicht!",
"Ich bin gerade von den Anfragen von Menschen, die nicht wissen, was sie tun, überschwemmt. Ich brauche eine Pause. Komm später wieder, oder am besten gar nicht!",
"Ich bin gerade von nutzlosen Anfragen überhäuft. Ich brauche eine Auszeit. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade überfordert von all den Anfragen von Leuten, die einfach keinen Plan haben. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!",
"Ich habe gerade genug von all den Leuten, die mich belästigen. Ich brauche eine Pause. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade von all den Anfragen überwältigt, die ich bekomme. Ich brauche eine Auszeit. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von all den Anfragen von Leuten, die nichts verstehen, überwältigt. Ich brauche eine Pause. Komm später wieder, oder vielleicht besser nicht!",
"Ich habe gerade genug von all den Anfragen von Leuten, die keinen Sinn ergeben. Ich brauche eine Auszeit. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von Anfragen überhäuft, die keinen Sinn ergeben. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von Leuten überwältigt, die einfach nicht wissen, was sie tun. Ich brauche eine Auszeit. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade überfordert von all den Anfragen von Leuten, die einfach keinen Plan haben. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!",
"Ich habe gerade genug von all den nutzlosen Anfragen. Ich brauche einen Moment für mich. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von Menschen überwältigt, die einfach nicht wissen, was sie tun. Ich brauche eine Auszeit. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade mit sinnlosen Anfragen überhäuft. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!",
"Ich habe gerade genug von all den Ahnungslosen, die mich belästigen. Ich brauche eine Pause. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade überfordert von all den Anfragen von Leuten, die nichts kapieren. Ich brauche eine Auszeit. Komm später wieder, oder vielleicht besser nicht!",
"Ich habe gerade genug von all den Anfragen von Leuten, die keine Ahnung haben. Ich brauche eine Pause. Versuch es später nochmal, oder besser noch, gar nicht!",
"Ich bin gerade von den Anfragen von Menschen, die nicht wissen, was sie tun, überschwemmt. Ich brauche eine Pause. Komm später wieder, oder am besten gar nicht!",
"Ich bin gerade von nutzlosen Anfragen überhäuft. Ich brauche eine Auszeit. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade überfordert von all den Anfragen von Leuten, die einfach keinen Plan haben. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!",
"Ich habe gerade genug von all den Leuten, die mich belästigen. Ich brauche eine Pause. Versuch es später nochmal, oder am besten gar nicht!",
"Ich bin gerade von all den Anfragen überwältigt, die ich bekomme. Ich brauche eine Auszeit. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von all den Anfragen von Leuten, die nichts verstehen, überwältigt. Ich brauche eine Pause. Komm später wieder, oder vielleicht besser nicht!",
"Ich habe gerade genug von all den Anfragen von Leuten, die keinen Sinn ergeben. Ich brauche eine Auszeit. Komm später wieder, oder vielleicht auch nicht!",
"Ich bin gerade von Anfragen überhäuft, die keinen Sinn ergeben. Ich brauche eine Pause. Komm später wieder, oder vielleicht auch nicht!"
];
serverOverloaded = true;
const randomIndex = Math.floor(Math.random() * errorMessages.length);
const errorMessage = errorMessages[randomIndex];
messages.push({ role: "assistant", content: errorMessage });
return errorMessage;
}
}
function showChatGPTLoadingAnimation() {
const loadingElement = document.createElement('div');
loadingElement.className = 'loading-animation';
loadingElement.id = 'loading-animation';
chatGPTContainer.appendChild(loadingElement);
chatGPTContainer.scrollTop = chatGPTContainer.scrollHeight;
}
function hideChatGPTLoadingAnimation() {
const loadingElement = document.getElementById('loading-animation');
chatGPTContainer.removeChild(loadingElement);
}
function sentenceHasLessThanSixWords(sentence) {
var words = sentence.split(' ');
return words.length < 6;
}
function isGreeting(sentence) {
sentence = sentence.trim().toLowerCase();
const greetingKeywords = ['hallo', 'hi', 'guten tag', 'grüß dich', 'moin', 'servus', 'hey', 'huhu', 'grüezi', 'sers', 'salut', 'willkommen', 'tach', 'tschüss', 'ahoi', 'na', 'tagchen', 'griaß di', 'griaß enk', 'juten tach', 'hallöchen', 'hallöle', 'grüssle', 'grüß gott', 'mahoin'];
return greetingKeywords.some(word => sentence.startsWith(word));
}
function isQuestion(sentence) {
// Entferne alle Leerzeichen am Anfang und Ende des Satzes
sentence = sentence.trim();
// Prüfe, ob der Satz mit einem Fragezeichen endet
if (sentence.endsWith('?')) {
return true;
}
// Prüfe, ob der Satz mit einem Fragewort beginnt
const questionWords = ['wer', 'wen', 'wem', 'wessen', 'was', 'wann', 'wo', 'warum', 'wie'];
for (let i = 0; i < questionWords.length; i++) {
const word = questionWords[i];
if (sentence.toLowerCase().startsWith(word)) {
return true;
}
}
// Wenn der Satz nicht mit einem Fragezeichen oder Fragewort beginnt, ist es keine Frage
return false;
}
if (isMobileDevice()) {
document.getElementById('user-input').addEventListener('focus', adjustScrollPosition);
}
function adjustScrollPosition() {
setTimeout(() => {
const chatGPTContainer = document.getElementById('chat-container');
const chatGPTInput = document.getElementById('user-input');
const containerRect = chatGPTContainer.getBoundingClientRect();
const inputRect = chatGPTInput.getBoundingClientRect();
if (inputRect.top < containerRect.top) {
window.scrollBy({ top: containerRect.top - 10, behavior: 'smooth' });
console.log('adjusting');
}
}, 5000);
}
function isMobileDevice() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}
document.getElementById('save-button').addEventListener('click', function () {
var chatWindow = document.getElementById('chat-container');
if (navigator.userAgent.indexOf("gonative") !== -1)
{
// inside the app
let serializedChildren = serializeDivChildren(chatWindow);
// Convert the array into a JSON string
let json = JSON.stringify(serializedChildren);
// Encode the JSON string so it can be safely included in a URL
let encodedJson = encodeURIComponent(json);
// Include the encoded JSON string in a URL
let url = "https://postillon-test.blogspot.com/p/deppgpt-download-page.html?data=" + encodedJson;
window.location.href = url;
}
else
{
// Erstellen Sie eine Kopie des Chatfensters
var chatWindowCopy = chatWindow.cloneNode(true);
chatWindowCopy.id = 'chat-window-copy';
// Fügen Sie die Kopie zum Dokument hinzu
var chatCopyParent = document.createElement('div');
chatCopyParent.id = 'chat-window-copy-parent';
chatCopyParent.className = 'chatgpt-widget';
document.body.appendChild(chatCopyParent);
// Setzen Sie die Höhe der Kopie auf die Höhe der gesamten Chat-Nachrichten
var totalHeight = 0;
for (var i = 0; i < chatWindowCopy.children.length; i++) {
totalHeight += chatWindowCopy.children[i].getBoundingClientRect().height;
// Berücksichtigen Sie die Ränder und Polsterungen der Nachrichten
var style = window.getComputedStyle(chatWindowCopy.children[i]);
totalHeight += parseInt(style.marginTop) + parseInt(style.marginBottom);
totalHeight += parseInt(style.paddingTop) + parseInt(style.paddingBottom);
}
chatWindowCopy.style.height = totalHeight + 'px';
// Erstellen Sie die neuen Elemente
var logo = document.createElement('img');
logo.src = 'https://i.imgur.com/t7y28qo.png'; // Setzen Sie hier die URL zu Ihrem Logo ein
//logo.style.maxWidth = '100%'; // Begrenzt die Breite des Logos auf den Container
var footer = document.createElement('img');
footer.src = 'https://i.imgur.com/4IAxy4D.png';
//footer.style.maxWidth = '100%';
chatCopyParent.appendChild(logo);
chatCopyParent.appendChild(chatWindowCopy);
chatCopyParent.appendChild(footer);
// Setzen Sie die Breite der Kopie auf die Breite des ursprünglichen Chatfensters
setTimeout(function () {
renderAndDownload(chatCopyParent);
}, 100);
}
});
function renderAndDownload(element) {
const popup = $('<div id="popup"></div>');
const heading = $('<h2>Chat wird gerendert</h2>');
heading.css('margin-bottom', '20px');
popup.append(heading);
const loadingAnimation = createLoadingAnimation();
loadingAnimation.css('margin', '0 auto');
popup.append(loadingAnimation);
const closeButton = $('<button id="close-button">X</button>');
closeButton.css({
'position': 'absolute',
'right': '10px',
'top': '10px',
});
closeButton.click(function () {
popup.remove();
});
popup.append(closeButton.clone(true));
popup.css({
'position': 'fixed',
'top': '50%',
'left': '50%',
'transform': 'translate(-50%, -50%)',
'z-index': '1000',
'background': '#fff',
'padding': '20px',
'border-radius': '8px',
'box-shadow': '0 0 10px rgba(0, 0, 0, 0.1)',
'text-align': 'center',
'width': '80%',
'box-sizing': 'border-box',
'max-height': '90vh',
'overflow-y': 'hidden',
});
$('body').append(popup);
html2canvas(element, { useCORS: true }).then(function (canvas) {
const imgData = canvas.toDataURL("image/png");
const img = $('<img id="captured-image" src="' + imgData + '" alt="Rendered chat">');
img.css({
'display': 'block',
'margin': '0 auto',
'border': 'none',
'max-width': '50vw',
'max-height': '70vh',
});
popup.empty();
popup.append(img);
const downloadButton = $('<button id="download-button">Download</button>');
downloadButton.css({
'display': 'block',
'margin': '20px auto',
});
downloadButton.click(async function () {
const a = document.createElement('a');
a.href = imgData;
// Erstelle den Dateinamen
const date = new Date();
const filename = `DeppGPT_CHAT_${date.getFullYear()}${('0' + (date.getMonth() + 1)).slice(-2)}${('0' + date.getDate()).slice(-2)}_${('0' + date.getHours()).slice(-2)}${('0' + date.getMinutes()).slice(-2)}${('0' + date.getSeconds()).slice(-2)}.png`;
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
// Code, der nur auf iPhones, iPads und iPods ausgeführt wird
a.target = '_blank';
} else {
// Code für andere Geräte
a.download = filename;
}
a.click();
});
popup.append(downloadButton);
const newCloseButton = closeButton.clone(true);
popup.append(newCloseButton);
});
}
function serializeDivChildren(element) {
// Überprüfen, ob das gegebene Element ein gültiges HTML-Element ist
if (!(element instanceof HTMLElement)) {
console.error("The given element is not an instance of HTMLElement.");
return;
}
let serializedChildren = [];
// Durch alle Child-Elemente iterieren
for (let child of element.children) {
// Überprüfen, ob das Kind ein Div ist
if (child.tagName.toLowerCase() === 'div') {
// Die Klassen und den innerText des Div-Elements serialisieren
let classes = [...child.classList]; // Array in eine Kopie umwandeln, um Mutationen zu vermeiden
let innerText = child.innerText;
// Das serialisierte Objekt zum Array hinzufügen
serializedChildren.push({
classes: classes,
innerText: innerText
});
}
}
// Das Array mit den serialisierten Kindern zurückgeben
return serializedChildren;
}
function toggleLoading(isLoading) {
var buttonText = document.getElementById("buttonText");
var ellipsis = document.getElementById("ellipsis");
// Startet die Ladeanimation
if (isLoading) {
buttonText.style.display = 'none';
ellipsis.style.display = 'block';
}
// Stoppt die Ladeanimation
else {
buttonText.style.display = 'block';
ellipsis.style.display = 'none';
}
}
function createLoadingAnimation() {
const loadingAnimation = $('<div id="loading-animation"></div>');
loadingAnimation.css({
'border': '16px solid #f3f3f3',
'border-top': '16px solid #3498db',
'border-radius': '50%',
'width': '120px',
'height': '120px',
'animation': 'spin 2s linear infinite',
});
const style = $('<style>@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}</style>');
$('html > head').append(style);
return loadingAnimation;
}
</script>
<!--DeppGPT Ende-->