mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
Add support modal and toggle button for user feedback and support
This commit is contained in:
Will Miao
@@ -972,4 +972,163 @@ body.modal-open {
|
|||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Support Modal Styles */
|
||||||
|
.support-modal {
|
||||||
|
max-width: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-bottom: var(--space-3);
|
||||||
|
padding-bottom: var(--space-2);
|
||||||
|
border-bottom: 1px solid var(--lora-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-icon {
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: var(--lora-error);
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-content > p {
|
||||||
|
font-size: 1.1em;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-section {
|
||||||
|
background: var(--bg-color);
|
||||||
|
border: 1px solid var(--lora-border);
|
||||||
|
border-radius: var(--border-radius-sm);
|
||||||
|
padding: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-section h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
font-size: 1.1em;
|
||||||
|
color: var(--lora-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-section h3 i {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-section p {
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
color: var(--text-color);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-links {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-2);
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: var(--lora-surface);
|
||||||
|
border: 1px solid var(--lora-border);
|
||||||
|
border-radius: var(--border-radius-sm);
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-color);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-link:hover {
|
||||||
|
background: var(--lora-accent);
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kofi-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #FF5E5B;
|
||||||
|
color: white;
|
||||||
|
border-radius: var(--border-radius-sm);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
margin-top: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kofi-button:hover {
|
||||||
|
background: #E04946;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add support toggle button style */
|
||||||
|
.support-toggle {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--lora-error);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-toggle:hover {
|
||||||
|
background: var(--lora-accent);
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-toggle i {
|
||||||
|
font-size: 1.1em;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
left: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.support-links {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -331,6 +331,33 @@
|
|||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.support-toggle {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--lora-error);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-toggle:hover {
|
||||||
|
background: var(--lora-error);
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-toggle i {
|
||||||
|
font-size: 1.1em;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
left: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
.theme-toggle img {
|
.theme-toggle img {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|||||||
@@ -52,6 +52,15 @@ export class ModalManager {
|
|||||||
document.body.classList.remove('modal-open');
|
document.body.classList.remove('modal-open');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add supportModal registration
|
||||||
|
this.registerModal('supportModal', {
|
||||||
|
element: document.getElementById('supportModal'),
|
||||||
|
onClose: () => {
|
||||||
|
this.getModal('supportModal').element.style.display = 'none';
|
||||||
|
document.body.classList.remove('modal-open');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('keydown', this.boundHandleEscape);
|
document.addEventListener('keydown', this.boundHandleEscape);
|
||||||
this.initialized = true;
|
this.initialized = true;
|
||||||
|
|||||||
@@ -159,4 +159,60 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Support Modal -->
|
||||||
|
<div id="supportModal" class="modal">
|
||||||
|
<div class="modal-content support-modal">
|
||||||
|
<button class="close" onclick="modalManager.closeModal('supportModal')">×</button>
|
||||||
|
<div class="support-header">
|
||||||
|
<i class="fas fa-heart support-icon"></i>
|
||||||
|
<h2>Support the Project</h2>
|
||||||
|
</div>
|
||||||
|
<div class="support-content">
|
||||||
|
<p>If you find LoRA Manager useful, I'd really appreciate your support! 🙌</p>
|
||||||
|
|
||||||
|
<div class="support-section">
|
||||||
|
<h3><i class="fas fa-comment"></i> Provide Feedback</h3>
|
||||||
|
<p>Your feedback helps shape future updates! Share your thoughts:</p>
|
||||||
|
<div class="support-links">
|
||||||
|
<a href="https://github.com/willmiao/ComfyUI-Lora-Manager/issues/new" class="social-link" target="_blank">
|
||||||
|
<i class="fab fa-github"></i>
|
||||||
|
<span>Submit GitHub Issue</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://discord.gg/KK3dn4Jx" class="social-link" target="_blank">
|
||||||
|
<i class="fab fa-discord"></i>
|
||||||
|
<span>Join Discord</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="support-section">
|
||||||
|
<h3><i class="fas fa-rss"></i> Follow for Updates</h3>
|
||||||
|
<div class="support-links">
|
||||||
|
<a href="https://www.youtube.com/@pixelpaws-ai" class="social-link" target="_blank">
|
||||||
|
<i class="fab fa-youtube"></i>
|
||||||
|
<span>YouTube Channel</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://discord.gg/KK3dn4Jx" class="social-link" target="_blank">
|
||||||
|
<i class="fab fa-discord"></i>
|
||||||
|
<span>Discord Community</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="support-section">
|
||||||
|
<h3><i class="fas fa-coffee"></i> Buy me a coffee</h3>
|
||||||
|
<p>If you'd like to support my work directly:</p>
|
||||||
|
<a href="https://ko-fi.com/pixelpawsai" class="kofi-button" target="_blank">
|
||||||
|
<i class="fas fa-mug-hot"></i>
|
||||||
|
<span>Support on Ko-fi</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="support-footer">
|
||||||
|
<p>Thank you for using LoRA Manager! ❤️</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -51,6 +51,9 @@
|
|||||||
<img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
|
<img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
|
||||||
<img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
|
<img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="support-toggle" onclick="modalManager.showModal('supportModal')" title="Support">
|
||||||
|
<i class="fas fa-heart"></i>
|
||||||
|
</div>
|
||||||
<div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
|
<div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
|
||||||
<i class="fas fa-cog"></i>
|
<i class="fas fa-cog"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user