DeppGPT: Entferne Boat und adde Dark/Light Theme
This commit is contained in:
parent
f01362ac47
commit
a0b945e708
@ -15,6 +15,20 @@
|
||||
--accent-color: #009688;
|
||||
--text-light: #ffffff;
|
||||
--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 {
|
||||
@ -24,6 +38,7 @@
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Header Styles */
|
||||
@ -33,6 +48,29 @@
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
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 */
|
||||
@ -46,12 +84,13 @@
|
||||
|
||||
/* Chat Container */
|
||||
.chat-container {
|
||||
background: white;
|
||||
background: var(--chat-bg);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
@ -182,11 +221,43 @@
|
||||
0% { transform: scale(0); }
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1>DeppGPT</h1>
|
||||
<button class="theme-toggle" id="theme-toggle">🌞</button>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
@ -197,16 +268,19 @@
|
||||
<button class="send-button" id="send-button">
|
||||
<div id="buttonText">Senden</div>
|
||||
<div class="ellipsis" id="ellipsis" style="display: none;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
|
||||
@ -436,135 +510,35 @@
|
||||
document.getElementById('save-button').addEventListener('click', function () {
|
||||
var chatWindow = document.querySelector('.chat-messages');
|
||||
|
||||
if (navigator.userAgent.indexOf("gonative") !== -1) {
|
||||
let serializedChildren = serializeDivChildren(chatWindow);
|
||||
let json = JSON.stringify(serializedChildren);
|
||||
let encodedJson = encodeURIComponent(json);
|
||||
let url = "https://postillon-test.blogspot.com/p/deppgpt-download-page.html?data=" + encodedJson;
|
||||
window.location.href = url;
|
||||
} else {
|
||||
var chatWindowCopy = chatWindow.cloneNode(true);
|
||||
chatWindowCopy.id = 'chat-window-copy';
|
||||
|
||||
var chatCopyParent = document.createElement('div');
|
||||
chatCopyParent.id = 'chat-window-copy-parent';
|
||||
document.body.appendChild(chatCopyParent);
|
||||
|
||||
var totalHeight = 0;
|
||||
for (var i = 0; i < chatWindowCopy.children.length; i++) {
|
||||
totalHeight += chatWindowCopy.children[i].getBoundingClientRect().height;
|
||||
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';
|
||||
|
||||
var logo = document.createElement('img');
|
||||
logo.src = 'https://i.imgur.com/t7y28qo.png';
|
||||
|
||||
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);
|
||||
}
|
||||
// Speichere aktuelle Scroll-Position
|
||||
const originalScrollTop = chatWindow.scrollTop;
|
||||
|
||||
// Speichere ursprüngliche Höhe und Style
|
||||
const originalHeight = chatWindow.style.height;
|
||||
const originalOverflow = chatWindow.style.overflow;
|
||||
|
||||
// Setze temporär die Höhe auf die ScrollHeight und deaktiviere Scrolling
|
||||
chatWindow.style.height = 'auto';
|
||||
chatWindow.style.overflow = 'visible';
|
||||
|
||||
html2canvas(chatWindow, {
|
||||
height: chatWindow.scrollHeight,
|
||||
windowHeight: chatWindow.scrollHeight
|
||||
}).then(canvas => {
|
||||
const link = document.createElement('a');
|
||||
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`;
|
||||
link.download = filename;
|
||||
link.href = canvas.toDataURL();
|
||||
link.click();
|
||||
|
||||
// Stelle ursprüngliche Höhe und Style wieder her
|
||||
chatWindow.style.height = originalHeight;
|
||||
chatWindow.style.overflow = originalOverflow;
|
||||
chatWindow.scrollTop = originalScrollTop;
|
||||
});
|
||||
});
|
||||
|
||||
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() {
|
||||
const loadingAnimation = $('<div id="loading-animation"></div>');
|
||||
loadingAnimation.css({
|
||||
@ -581,6 +555,31 @@
|
||||
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user