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
@@ -973,3 +973,162 @@ body.modal-open {
|
||||
font-size: 0.9em;
|
||||
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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
@@ -53,6 +53,15 @@ export class ModalManager {
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
this.initialized = true;
|
||||
}
|
||||
|
||||
@@ -160,3 +160,59 @@
|
||||
</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>
|
||||
@@ -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-dark.svg" alt="Theme" class="theme-icon dark-icon">
|
||||
</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">
|
||||
<i class="fas fa-cog"></i>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user