CSS aufgeteilt (base/main/prototype), prototype.html eigenes Init-Script

This commit is contained in:
Meleki committed 2026-02-26 19:56:23 +01:00
1 parent 80537c49ed
commit c0db8322f3
5 files changed
+283 -162

No files matched your search

+7 -159
View File
@@ -3,64 +3,22 @@
body {
background: #222;
color: #eee;
display: flex;
flex-direction: column;
height: 100vh;
}
#app {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── Nav ── */
#nav {
padding: .75em 1.5em;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
gap: 2em;
flex-shrink: 0;
}
.nav-brand {
font-weight: bold;
font-size: 1.1em;
}
.nav-links {
display: flex;
gap: 1em;
}
.nav-link {
color: #888;
text-decoration: none;
padding: .25em .5em;
}
.nav-link:hover { color: #eee; }
.nav-link.active { color: #eee; border-bottom: 2px solid #eee; }
body, input, select, button, textarea {
padding: .5em;
font-family: monospace;
font-size: 1em;
line-height: 1.5;
color: #eee;
}
h1, h2, h3, h4, h5 {
font-size: 1em;
}
button, select, textarea {
padding: .5em;
border: 1px solid #444;
background: #333;
outline: none;
@@ -73,6 +31,7 @@ button:hover, select:hover, input:hover, textarea:hover {
button {
cursor: pointer;
line-height: 1.25;
padding: .5em .75em;
}
textarea {
@@ -108,11 +67,7 @@ header {
flex-shrink: 0;
}
header h1 {
font-size: 1em;
}
/* ── System Promp ── */
/* ── System Prompt ── */
#systemPrompt {
display: none;
@@ -225,114 +180,7 @@ header h1 {
.archived { opacity: 0.6; }
/* ── Archive Button ── */
.archive-load-btn {
display: block;
margin-inline: auto;
}
/* ── Dashboard ── */
.dashboard {
padding: 2em;
overflow-y: auto;
}
.dashboard section {
margin-bottom: 2em;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1em;
}
.section-header h2 {
font-size: 1.1em;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1em;
}
.card {
background: #333;
border: 1px solid #444;
padding: 1em;
display: flex;
flex-direction: column;
gap: .5em;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: #888; }
.card-icon { font-size: 2em; }
.card-title { font-weight: bold; }
.card-sub { color: #888; font-size: 0.85em; }
.card.placeholder {
border-style: dashed;
color: #666;
}
/* ── Session Page ── */
.session-page {
display: flex;
flex-direction: column;
}
.session-header {
padding: .75em 1.5em;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
gap: 1em;
flex-shrink: 0;
}
.session-header h1 {
font-size: 1em;
}
.back-btn {
background: none;
border: none;
font-size: 1.2em;
padding: .25em .5em;
}
.header-btn {
font-size: 0.85em;
}
.editable-title {
cursor: pointer;
}
.editable-title:hover {
text-decoration: underline;
text-decoration-style: dotted;
}
/* ── Placeholder Pages ── */
.placeholder-page {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
color: #888;
}
.placeholder-icon {
font-size: 4em;
}
+135
View File
@@ -0,0 +1,135 @@
body {
display: flex;
flex-direction: column;
}
#app {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.page {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ── Nav ── */
#nav {
padding: .75em 1.5em;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
gap: 2em;
flex-shrink: 0;
}
.nav-links {
display: flex;
gap: 1em;
}
.nav-link {
color: #888;
text-decoration: none;
padding: .25em .5em;
}
.nav-link:hover { color: #eee; }
.nav-link.active { color: #eee; border-bottom: 2px solid #eee; }
/* ── Dashboard ── */
.dashboard {
padding: 2em;
overflow-y: auto;
}
.dashboard section {
margin-bottom: 2em;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1em;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1em;
}
.card {
background: #333;
border: 1px solid #444;
padding: 1em;
display: flex;
flex-direction: column;
gap: .5em;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: #888; }
.card-icon { font-size: 2em; }
.card-title { font-weight: bold; }
.card-sub { color: #888; }
.card.placeholder {
border-style: dashed;
color: #666;
}
/* ── Session Page ── */
.session-page {
display: flex;
flex-direction: column;
}
.session-header {
padding: .75em 1.5em;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
gap: 1em;
flex-shrink: 0;
}
.back-btn {
background: none;
border: none;
padding: .25em .5em;
}
.editable-title {
cursor: pointer;
}
.editable-title:hover {
text-decoration: underline;
text-decoration-style: dotted;
}
/* ── Placeholder Pages ── */
.placeholder-page {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
color: #888;
}
.placeholder-icon {
font-size: 4em;
}
+61
View File
@@ -0,0 +1,61 @@
body {
display: flex;
}
main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
/* ── Sidebar ── */
#sidebar {
width: 260px;
background: #1a1a1a;
border-right: 1px solid #444;
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow: hidden;
}
.sidebar-header {
padding: 1em;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
justify-content: space-between;
}
#sessionList {
flex: 1;
overflow-y: auto;
}
.session-item {
padding: 1em;
cursor: pointer;
display: flex;
flex-direction: column;
border-left: 3px solid transparent;
}
.session-item:hover { background: #333; }
.session-item.active {
background: #333;
border-left-color: #eee;
}
.session-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid transparent;
}
.session-date {
color: #888;
}