wip
This commit is contained in:
pika
parent
6dd38036e7
commit
097b3dbf09
34 changed files with 1719 additions and 520 deletions
|
|
@ -1,14 +1,35 @@
|
|||
/* Custom styles for the app */
|
||||
:root {
|
||||
--background-color: #f5f8fa;
|
||||
--text-color: #333;
|
||||
--card-bg: #fff;
|
||||
--border-color: #e3e8ee;
|
||||
--sidebar-bg: #f0f2f5;
|
||||
--sidebar-hover-bg: #e0e5ee;
|
||||
--highlight-color: #3b82f6;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--background-color: #1a2234;
|
||||
--text-color: #e6e8eb;
|
||||
--card-bg: #24304d;
|
||||
--border-color: #374564;
|
||||
--sidebar-bg: #151a27;
|
||||
--sidebar-hover-bg: #1c2133;
|
||||
--highlight-color: #3f8cff;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #f5f7fb;
|
||||
color: #232e3c;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -92,85 +113,160 @@ body {
|
|||
|
||||
/* Sidebar styles */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--text-color);
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
|
||||
width: 250px;
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: 1.5rem;
|
||||
padding: 1.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.sidebar-brand-text {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
padding: 0.75rem 1rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: #8898aa;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
display: block;
|
||||
padding: 0.675rem 1.2rem;
|
||||
font-size: 0.875rem;
|
||||
color: #525f7f;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
border-radius: 0.25rem;
|
||||
margin: 0.2rem 0.5rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
color: #5e72e4;
|
||||
background: rgba(94, 114, 228, 0.1);
|
||||
text-decoration: none;
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
color: #5e72e4;
|
||||
background: rgba(94, 114, 228, 0.1);
|
||||
background-color: var(--highlight-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
padding: 1rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
.page-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 260px;
|
||||
.page-pretitle {
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Responsive sidebar */
|
||||
@media (max-width: 992px) {
|
||||
/* Auth pages */
|
||||
body.auth-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Port visualization */
|
||||
.port-map {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.port-map-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.port-item {
|
||||
padding: 4px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.port-item:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Responsive tweaks */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
left: -260px;
|
||||
transition: left 0.3s ease;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar.show {
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main-content.sidebar-open {
|
||||
margin-left: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme switch */
|
||||
#theme-toggle {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-icon-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-icon-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .theme-icon-light {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .theme-icon-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Notification area */
|
||||
|
|
|
|||
|
|
@ -58,6 +58,24 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Wait for DOM to be fully loaded
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize theme toggle
|
||||
initThemeToggle();
|
||||
|
||||
// Initialize clipboard functionality
|
||||
initClipboard();
|
||||
|
||||
// Initialize port map tooltips
|
||||
initTooltips();
|
||||
|
||||
// Initialize mobile sidebar
|
||||
initMobileSidebar();
|
||||
|
||||
// Initialize notifications
|
||||
initNotifications();
|
||||
});
|
||||
});
|
||||
|
||||
function initTiptapEditor(element) {
|
||||
|
|
@ -134,9 +152,108 @@ function showNotification(message, type = 'info') {
|
|||
|
||||
notificationArea.appendChild(notification);
|
||||
|
||||
// Remove notification after 3 seconds
|
||||
// Auto-remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
notification.classList.remove('show');
|
||||
setTimeout(() => notification.remove(), 150);
|
||||
}, 3000);
|
||||
if (notification.parentNode) {
|
||||
notification.remove();
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function initThemeToggle() {
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', function () {
|
||||
const currentTheme = document.documentElement.getAttribute('data-bs-theme') || 'light';
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
document.documentElement.setAttribute('data-bs-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
console.log(`Theme switched to ${newTheme} mode`);
|
||||
});
|
||||
}
|
||||
|
||||
// Load saved theme or use OS preference
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
if (storedTheme) {
|
||||
document.documentElement.setAttribute('data-bs-theme', storedTheme);
|
||||
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
function initClipboard() {
|
||||
// Add click handlers to any clipboard copy buttons
|
||||
document.querySelectorAll('.copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function () {
|
||||
const textToCopy = this.getAttribute('data-clipboard-text');
|
||||
if (textToCopy) {
|
||||
navigator.clipboard.writeText(textToCopy)
|
||||
.then(() => {
|
||||
showNotification('Copied to clipboard!', 'success');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initTooltips() {
|
||||
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
||||
if (tooltips.length > 0) {
|
||||
Array.from(tooltips).map(tooltipNode => new bootstrap.Tooltip(tooltipNode));
|
||||
}
|
||||
}
|
||||
|
||||
function initMobileSidebar() {
|
||||
// Sidebar toggle for mobile
|
||||
const sidebarToggler = document.querySelector('.sidebar-toggler');
|
||||
if (sidebarToggler) {
|
||||
sidebarToggler.addEventListener('click', function () {
|
||||
document.querySelector('.sidebar').classList.toggle('show');
|
||||
document.querySelector('.main-content').classList.toggle('sidebar-open');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function initNotifications() {
|
||||
// Add flash messages as notifications
|
||||
const flashMessages = document.querySelectorAll('.alert.flash-message');
|
||||
flashMessages.forEach(message => {
|
||||
setTimeout(() => {
|
||||
const bsAlert = new bootstrap.Alert(message);
|
||||
bsAlert.close();
|
||||
}, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
// For random port suggestion
|
||||
async function suggestRandomPort(serverId) {
|
||||
try {
|
||||
const response = await fetch(`/api/servers/${serverId}/suggest_port`);
|
||||
if (!response.ok) throw new Error('Failed to get port suggestion');
|
||||
|
||||
const data = await response.json();
|
||||
if (data.port) {
|
||||
// Copy to clipboard
|
||||
navigator.clipboard.writeText(data.port.toString())
|
||||
.then(() => {
|
||||
showNotification(`Port ${data.port} copied to clipboard!`, 'success');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
showNotification(`Suggested free port: ${data.port}`, 'info');
|
||||
});
|
||||
}
|
||||
return data.port;
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showNotification('Failed to suggest port', 'danger');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue