Akamaru/PonyWave-Tools
1
0
Fork 0
Code Issues Activity

DeppGPT: Entferne Boat und adde Dark/Light Theme

Browse Source
This commit is contained in:
Akamaru
2025-03-04 19:25:43 +01:00
parent f01362ac47
commit a0b945e708
1 changed files with 131 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
depp_gpt/index.html
View File

@ -15,6 +15,20 @@
--accent-color: #009688; --accent-color: #009688;
--text-light: #ffffff; --text-light: #ffffff;
--background-light: #f5f5f5; --background-light: #f5f5f5;
--chat-bg: #ffffff;
--button-bg: #0E766C;
--button-hover: #009688;
}
:root[data-theme="dark"] {
--primary-color: #1a1a1a;
--secondary-color: #333333;
--accent-color: #009688;
--text-light: #ffffff;
--background-light: #121212;
--chat-bg: #1e1e1e;
--button-bg: #333333;
--button-hover: #444444;
} }
body { body {
@ -24,6 +38,7 @@
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: background-color 0.3s ease;
} }
/* Header Styles */ /* Header Styles */
@ -33,6 +48,29 @@
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.theme-toggle {
background: transparent;
border: none;
color: var(--text-light);
font-size: 1.5rem;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: background-color 0.3s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.1);
} }
/* Main Container */ /* Main Container */
@ -46,12 +84,13 @@
/* Chat Container */ /* Chat Container */
.chat-container { .chat-container {
background: white; background: var(--chat-bg);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
height: 500px; height: 500px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: background-color 0.3s ease;
} }
.chat-messages { .chat-messages {
@ -182,11 +221,43 @@
0% { transform: scale(0); } 0% { transform: scale(0); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
/* Button Styles */
.button-container {
display: flex;
gap: 10px;
margin-top: 15px;
justify-content: center;
}
.action-button {
background: var(--button-bg);
color: var(--text-light);
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.action-button:hover {
background: var(--button-hover);
transform: translateY(-2px);
}
.action-button .emoji {
font-size: 1.2rem;
}
</style> </style>
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<h1>DeppGPT</h1> <h1>DeppGPT</h1>
<button class="theme-toggle" id="theme-toggle">🌞</button>
</header> </header>
<main class="main-content"> <main class="main-content">
@ -197,16 +268,19 @@
<button class="send-button" id="send-button"> <button class="send-button" id="send-button">
<div id="buttonText">Senden</div> <div id="buttonText">Senden</div>
<div class="ellipsis" id="ellipsis" style="display: none;"> <div class="ellipsis" id="ellipsis" style="display: none;">
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</button> </button>
</div> </div>
</div> </div>
<div class="button-container"> <div class="button-container">
<button class="save-button" id="save-button">Chat als Bild speichern</button> <button class="action-button" id="save-button">
<span class="emoji">📸</span>
<span>Chat speichern</span>
</button>
</div> </div>
</main> </main>
@ -436,135 +510,35 @@
document.getElementById('save-button').addEventListener('click', function () { document.getElementById('save-button').addEventListener('click', function () {
var chatWindow = document.querySelector('.chat-messages'); var chatWindow = document.querySelector('.chat-messages');
if (navigator.userAgent.indexOf("gonative") !== -1) { // Speichere aktuelle Scroll-Position
let serializedChildren = serializeDivChildren(chatWindow); const originalScrollTop = chatWindow.scrollTop;
let json = JSON.stringify(serializedChildren);
let encodedJson = encodeURIComponent(json); // Speichere ursprüngliche Höhe und Style
let url = "https://postillon-test.blogspot.com/p/deppgpt-download-page.html?data=" + encodedJson; const originalHeight = chatWindow.style.height;
window.location.href = url; const originalOverflow = chatWindow.style.overflow;
} else {
var chatWindowCopy = chatWindow.cloneNode(true); // Setze temporär die Höhe auf die ScrollHeight und deaktiviere Scrolling
chatWindowCopy.id = 'chat-window-copy'; chatWindow.style.height = 'auto';
chatWindow.style.overflow = 'visible';
var chatCopyParent = document.createElement('div');
chatCopyParent.id = 'chat-window-copy-parent'; html2canvas(chatWindow, {
document.body.appendChild(chatCopyParent); height: chatWindow.scrollHeight,
windowHeight: chatWindow.scrollHeight
var totalHeight = 0; }).then(canvas => {
for (var i = 0; i < chatWindowCopy.children.length; i++) { const link = document.createElement('a');
totalHeight += chatWindowCopy.children[i].getBoundingClientRect().height; const date = new Date();
var style = window.getComputedStyle(chatWindowCopy.children[i]); 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`;
totalHeight += parseInt(style.marginTop) + parseInt(style.marginBottom); link.download = filename;
totalHeight += parseInt(style.paddingTop) + parseInt(style.paddingBottom); link.href = canvas.toDataURL();
} link.click();
chatWindowCopy.style.height = totalHeight + 'px';
// Stelle ursprüngliche Höhe und Style wieder her
var logo = document.createElement('img'); chatWindow.style.height = originalHeight;
logo.src = 'https://i.imgur.com/t7y28qo.png'; chatWindow.style.overflow = originalOverflow;
chatWindow.scrollTop = originalScrollTop;
var footer = document.createElement('img'); });
footer.src = 'https://i.imgur.com/4IAxy4D.png';
chatCopyParent.appendChild(logo);
chatCopyParent.appendChild(chatWindowCopy);
chatCopyParent.appendChild(footer);
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;
const date = new Date();
const filename = `FunGPT_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)) {
a.target = '_blank';
} else {
a.download = filename;
}
a.click();
});
popup.append(downloadButton);
popup.append(closeButton.clone(true));
});
}
function serializeDivChildren(element) {
let serializedChildren = [];
for (let child of element.children) {
if (child.tagName.toLowerCase() === 'div') {
serializedChildren.push({
classes: [...child.classList],
innerText: child.innerText
});
}
}
return serializedChildren;
}
function createLoadingAnimation() { function createLoadingAnimation() {
const loadingAnimation = $('<div id="loading-animation"></div>'); const loadingAnimation = $('<div id="loading-animation"></div>');
loadingAnimation.css({ loadingAnimation.css({
@ -581,6 +555,31 @@
return loadingAnimation; return loadingAnimation;
} }
// Theme Functionality
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;
// Check system preference
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
root.setAttribute('data-theme', 'dark');
themeToggle.textContent = '🌞';
}
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newTheme = e.matches ? 'dark' : 'light';
root.setAttribute('data-theme', newTheme);
themeToggle.textContent = newTheme === 'dark' ? '🌞' : '🌑';
});
// Manual theme toggle
themeToggle.addEventListener('click', () => {
const currentTheme = root.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
root.setAttribute('data-theme', newTheme);
themeToggle.textContent = newTheme === 'dark' ? '🌞' : '🌑';
});
</script> </script>
</body> </body>
</html> </html>