CyberMind-FR
ccba39da62
Implement Service Registry LuCI app for unified service management: - RPCD backend aggregating services from HAProxy, Tor, netstat, LXC - One-click publish to clearnet (HAProxy+ACME) and/or Tor hidden service - Static landing page generator with QR codes for all URLs - LuCI dashboard with service grid, quick publish form - CLI tool (secubox-registry) for command-line management - Share buttons for X, Telegram, WhatsApp RPCD methods: list_services, publish_service, unpublish_service, generate_landing_page, get_qr_data, list_categories Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
436 lines
7.0 KiB
CSS
436 lines
7.0 KiB
CSS
/* Service Registry Dashboard Styles */
|
|
|
|
.sr-dashboard {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
/* Stats row */
|
|
.sr-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sr-stat-card {
|
|
background: var(--cbi-section-bg, #fff);
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 8px;
|
|
padding: 15px 20px;
|
|
min-width: 150px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sr-stat-value {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
color: var(--primary-color, #0099cc);
|
|
}
|
|
|
|
.sr-stat-label {
|
|
font-size: 0.85em;
|
|
color: var(--secondary-text-color, #666);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Provider status indicators */
|
|
.sr-providers {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 25px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sr-provider {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 15px;
|
|
background: var(--cbi-section-bg, #fff);
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 6px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.sr-provider-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.sr-provider-dot.running { background: #22c55e; }
|
|
.sr-provider-dot.stopped { background: #ef4444; }
|
|
.sr-provider-dot.unknown { background: #a1a1aa; }
|
|
|
|
/* Service grid */
|
|
.sr-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Service card */
|
|
.sr-card {
|
|
background: var(--cbi-section-bg, #fff);
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
transition: box-shadow 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.sr-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--primary-color, #0099cc);
|
|
}
|
|
|
|
.sr-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sr-card-icon {
|
|
font-size: 1.5em;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--cbi-section-alt-bg, #f5f5f5);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sr-card-title {
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
flex: 1;
|
|
}
|
|
|
|
.sr-card-status {
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 0.75em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sr-status-running {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
|
|
.sr-status-stopped {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
/* URL list */
|
|
.sr-urls {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.sr-url-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: var(--cbi-section-alt-bg, #f9f9f9);
|
|
border-radius: 6px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sr-url-label {
|
|
min-width: 65px;
|
|
font-size: 0.75em;
|
|
color: var(--secondary-text-color, #666);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.sr-url-link {
|
|
flex: 1;
|
|
color: var(--primary-color, #0099cc);
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sr-url-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sr-copy-btn {
|
|
padding: 4px 8px;
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* QR codes */
|
|
.sr-qr-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 15px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid var(--cbi-border-color, #ddd);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sr-qr-box {
|
|
text-align: center;
|
|
}
|
|
|
|
.sr-qr-code {
|
|
background: #fff;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
display: inline-block;
|
|
}
|
|
|
|
.sr-qr-label {
|
|
font-size: 0.7em;
|
|
color: var(--secondary-text-color, #666);
|
|
margin-top: 6px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Quick publish form */
|
|
.sr-quick-publish {
|
|
background: var(--cbi-section-bg, #fff);
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.sr-quick-publish h3 {
|
|
margin-bottom: 15px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.sr-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.sr-form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.sr-form-group label {
|
|
font-size: 0.85em;
|
|
color: var(--secondary-text-color, #666);
|
|
}
|
|
|
|
.sr-form-group input[type="text"],
|
|
.sr-form-group input[type="number"] {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 6px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.sr-form-group input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color, #0099cc);
|
|
}
|
|
|
|
.sr-checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.sr-checkbox-group input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Category filter */
|
|
.sr-category-filter {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sr-category-btn {
|
|
padding: 6px 14px;
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 20px;
|
|
background: var(--cbi-section-bg, #fff);
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.sr-category-btn:hover,
|
|
.sr-category-btn.active {
|
|
background: var(--primary-color, #0099cc);
|
|
color: #fff;
|
|
border-color: var(--primary-color, #0099cc);
|
|
}
|
|
|
|
/* Published modal */
|
|
.sr-published-modal {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.sr-published-modal h3 {
|
|
margin-bottom: 20px;
|
|
color: #22c55e;
|
|
}
|
|
|
|
.sr-url-box {
|
|
margin: 15px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.sr-url-box label {
|
|
display: block;
|
|
font-size: 0.85em;
|
|
color: var(--secondary-text-color, #666);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sr-url-box input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid var(--cbi-border-color, #ddd);
|
|
border-radius: 6px;
|
|
font-family: monospace;
|
|
background: var(--cbi-section-alt-bg, #f9f9f9);
|
|
}
|
|
|
|
/* Share buttons */
|
|
.sr-share-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sr-share-buttons a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--cbi-section-alt-bg, #f5f5f5);
|
|
color: var(--primary-text-color, #333);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.sr-share-buttons a:hover {
|
|
background: var(--primary-color, #0099cc);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Landing page link */
|
|
.sr-landing-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
padding: 15px;
|
|
background: var(--cbi-section-alt-bg, #f5f5f5);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sr-landing-link a {
|
|
color: var(--primary-color, #0099cc);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Actions dropdown */
|
|
.sr-card-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--cbi-border-color, #ddd);
|
|
}
|
|
|
|
.sr-card-actions button {
|
|
flex: 1;
|
|
padding: 6px 10px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Empty state */
|
|
.sr-empty {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--secondary-text-color, #666);
|
|
}
|
|
|
|
.sr-empty h3 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sr-empty p {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.sr-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sr-stats {
|
|
justify-content: center;
|
|
}
|
|
|
|
.sr-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sr-form-group {
|
|
width: 100%;
|
|
}
|
|
|
|
.sr-form-group input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.sr-card,
|
|
.sr-quick-publish,
|
|
.sr-stat-card,
|
|
.sr-provider {
|
|
background: #1e1e2e;
|
|
border-color: #333;
|
|
}
|
|
|
|
.sr-url-row,
|
|
.sr-landing-link {
|
|
background: #252535;
|
|
}
|
|
|
|
.sr-status-running {
|
|
background: #064e3b;
|
|
color: #6ee7b7;
|
|
}
|
|
|
|
.sr-status-stopped {
|
|
background: #7f1d1d;
|
|
color: #fca5a5;
|
|
}
|
|
}
|