improve ui

This commit is contained in:
f 2025-02-05 02:04:18 +03:00
parent 1fbb25a0fe
commit 7c68845eb0
1 changed files with 52 additions and 8 deletions

View File

@ -1462,16 +1462,22 @@
document.addEventListener('DOMContentLoaded', () => {
// Initialize dev mode
const devModeToggle = document.getElementById('devModeToggle');
const isDevMode = localStorage.getItem('dev-mode') === 'true';
devModeToggle.checked = isDevMode;
const initialDevMode = localStorage.getItem('dev-mode') === 'true';
devModeToggle.checked = initialDevMode;
// Initialize chat button icons
updateChatButtonIcons(initialDevMode);
// Handle dev mode toggle
devModeToggle.addEventListener('change', (e) => {
const isDevMode = e.target.checked;
localStorage.setItem('dev-mode', isDevMode);
const newDevMode = e.target.checked;
localStorage.setItem('dev-mode', newDevMode);
// Update chat button icons
updateChatButtonIcons(newDevMode);
// Check if we should show Copilot suggestion
if (isDevMode) {
if (newDevMode) {
const currentPlatform = document.querySelector('.platform-tag.active');
const shouldNotShow = localStorage.getItem('copilot-suggestion-hidden') === 'true';
@ -1523,6 +1529,10 @@
// Initialize search functionality
initializeSearch();
// Initialize chat button icons on page load
const isDevMode = localStorage.getItem('dev-mode') === 'true';
updateChatButtonIcons(isDevMode);
});
// Search functionality
@ -1854,9 +1864,13 @@
${title}
<div class="action-buttons">
<button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(content.trim())}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</button>
<button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(content.trim())}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@ -1963,9 +1977,13 @@
</div>
<div class="modal-footer-right">
<button class="modal-chat-button" onclick="openModalChat()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
Start Chat
</button>
</div>
@ -1997,15 +2015,29 @@
// Update chat button text with platform name and handle visibility
const platform = document.querySelector('.platform-tag.active');
const isDevMode = document.getElementById('devModeToggle').checked;
if (platform) {
const shouldHideChat = ['gemini', 'llama'].includes(platform.dataset.platform);
modalChatButton.style.display = shouldHideChat ? 'none' : 'flex';
if (!shouldHideChat) {
const chatIcon = modalChatButton.querySelector('.chat-icon');
const terminalIcon = modalChatButton.querySelector('.terminal-icon');
if (chatIcon && terminalIcon) {
chatIcon.style.display = isDevMode ? 'none' : 'block';
terminalIcon.style.display = isDevMode ? 'block' : 'none';
}
modalChatButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${isDevMode ? 'none' : 'block'}">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${isDevMode ? 'block' : 'none'}">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
Chat with ${platform.textContent}
`;
}
@ -2191,6 +2223,18 @@
document.body.style.overflow = '';
}
}
// Function to update chat button icons based on dev mode
function updateChatButtonIcons(isDevMode) {
document.querySelectorAll('.chat-button, .modal-chat-button').forEach(button => {
const chatIcon = button.querySelector('.chat-icon');
const terminalIcon = button.querySelector('.terminal-icon');
if (chatIcon && terminalIcon) {
chatIcon.style.display = isDevMode ? 'none' : 'block';
terminalIcon.style.display = isDevMode ? 'block' : 'none';
}
});
}
</script>
<style>video { max-width: 100% !important; }</style>
<!-- Google tag (gtag.js) -->