port setupManager, setupProtocol to serviceFeature

remove styles on webapp UI, and add stylesheet
This commit is contained in:
vorotamoroz
2026-03-17 19:58:12 +09:00
parent fdd3a3aecb
commit 1f87a9fd3d
13 changed files with 684 additions and 236 deletions

View File

@@ -4,229 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-hosted LiveSync WebApp</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
max-width: 700px;
width: 100%;
}
h1 {
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
.subtitle {
color: #666;
margin-bottom: 24px;
font-size: 14px;
}
#status {
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
}
#status.error {
background: #fee;
color: #c33;
border: 1px solid #fcc;
}
#status.warning {
background: #ffeaa7;
color: #d63031;
border: 1px solid #fdcb6e;
}
#status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
#status.info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.vault-selector {
border: 1px solid #e6e9f2;
border-radius: 8px;
padding: 16px;
background: #fbfcff;
margin-bottom: 22px;
}
.vault-selector h2 {
font-size: 18px;
margin-bottom: 8px;
color: #333;
}
.vault-selector p {
color: #555;
font-size: 14px;
margin-bottom: 12px;
}
.vault-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.vault-item {
border: 1px solid #d9deee;
border-radius: 8px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #fff;
}
.vault-item-info {
min-width: 0;
}
.vault-item-name {
font-weight: 600;
color: #1f2a44;
word-break: break-word;
}
.vault-item-meta {
margin-top: 2px;
font-size: 12px;
color: #63708f;
}
button {
border: none;
border-radius: 6px;
padding: 8px 12px;
background: #2f5ae5;
color: #fff;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
}
button:hover {
background: #1e4ad6;
}
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.empty-note {
font-size: 13px;
color: #6c757d;
margin-bottom: 8px;
}
.info-section {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.info-section h2 {
font-size: 18px;
margin-bottom: 12px;
color: #333;
}
.info-section ul {
list-style: none;
padding-left: 0;
}
.info-section li {
padding: 7px 0;
color: #666;
font-size: 14px;
}
.info-section li::before {
content: "•";
color: #667eea;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
padding-right: 0.5em;
}
code {
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-family: "Courier New", monospace;
font-size: 13px;
}
.footer {
margin-top: 24px;
text-align: center;
color: #999;
font-size: 12px;
}
.footer a {
color: #667eea;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.container {
padding: 28px 18px;
}
h1 {
font-size: 24px;
}
.vault-item {
flex-direction: column;
align-items: stretch;
}
}
</style>
<link rel="stylesheet" href="./webapp.css">
</head>
<body>
<div class="container">