wisecolt/startup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: retro Claude ekip konsolunu kur

Browse Source
This commit is contained in:
wisecolt
2026-03-16 23:38:15 +03:00
parent 9294028fb2
commit 68d5c2afea
32 changed files with 5207 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
web/src/styles/app.css Normal file
View File

@@ -0,0 +1,404 @@
.app-shell {
min-height: 100vh;
padding: 28px;
}
.app-shell__header {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: end;
margin-bottom: 24px;
}
.app-shell__eyebrow,
.panel-frame__eyebrow,
.prompt-composer__label,
.status-strip__label {
margin: 0 0 8px;
font-family: var(--font-display);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-amber);
}
.app-shell h1,
.panel-frame__title {
margin: 0;
font-family: var(--font-display);
line-height: 1.3;
text-transform: uppercase;
}
.app-shell h1 {
font-size: clamp(1.3rem, 2vw, 2rem);
}
.app-shell__meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.app-shell__meta span {
padding: 8px 12px;
border: 2px solid var(--border-mid);
background: rgba(15, 22, 17, 0.8);
color: var(--text-dim);
font-size: 0.75rem;
}
.shell-frame {
position: relative;
padding: 16px;
border: 4px solid #374739;
background: linear-gradient(180deg, #2a352b 0%, #161d17 100%);
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}
.shell-frame__bezel {
position: absolute;
inset: 8px;
border: 2px solid rgba(255, 255, 255, 0.08);
pointer-events: none;
}
.shell-frame__screen {
position: relative;
overflow: hidden;
min-height: 78vh;
padding: 18px;
border: 4px solid #081108;
background:
radial-gradient(circle at center, rgba(34, 65, 43, 0.35), transparent 50%),
linear-gradient(180deg, rgba(11, 18, 12, 0.98) 0%, rgba(7, 12, 8, 0.98) 100%);
}
.shell-frame__content {
position: relative;
z-index: 1;
}
.status-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.status-strip__cell,
.panel-frame,
.prompt-composer,
.error-banner {
border: 3px solid var(--border-dark);
box-shadow: inset 0 0 0 2px var(--border-light), var(--shadow-panel);
background: linear-gradient(180deg, rgba(26, 34, 29, 0.95) 0%, rgba(14, 19, 16, 0.95) 100%);
}
.status-strip__cell {
padding: 12px;
}
.status-strip__cell strong {
font-size: 0.95rem;
letter-spacing: 0.08em;
}
.is-green {
color: var(--accent-green);
}
.is-red {
color: var(--accent-red);
}
.is-cyan {
color: var(--accent-cyan);
}
.is-amber {
color: var(--accent-amber);
}
.session-toolbar {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.pixel-button {
position: relative;
border: 0;
padding: 0;
cursor: pointer;
text-transform: uppercase;
background: transparent;
min-width: 156px;
}
.pixel-button span {
display: block;
padding: 14px 16px;
border: 3px solid var(--border-dark);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06);
font-family: var(--font-display);
font-size: 0.62rem;
letter-spacing: 0.14em;
}
.pixel-button:hover span {
transform: translate(-1px, -1px);
}
.pixel-button:active span {
transform: translate(1px, 1px);
}
.pixel-button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.pixel-button--green span {
background: linear-gradient(180deg, rgba(55, 112, 68, 0.9), rgba(20, 58, 28, 0.96));
color: var(--text-main);
}
.pixel-button--cyan span {
background: linear-gradient(180deg, rgba(35, 104, 112, 0.9), rgba(16, 49, 54, 0.96));
color: #d8feff;
}
.pixel-button--red span {
background: linear-gradient(180deg, rgba(125, 56, 56, 0.9), rgba(63, 21, 21, 0.96));
color: #ffe6e6;
}
.pixel-button--amber span {
background: linear-gradient(180deg, rgba(132, 95, 37, 0.9), rgba(70, 45, 12, 0.96));
color: #fff2d5;
}
.error-banner {
margin-bottom: 16px;
padding: 12px 14px;
color: var(--accent-red);
}
.console-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
gap: 16px;
}
.console-grid__main,
.console-grid__side {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.panel-frame__header {
padding: 14px 16px 0;
}
.panel-frame__body {
padding: 14px 16px 16px;
}
.chat-stream,
.team-card__body {
min-height: 420px;
max-height: 62vh;
overflow: auto;
padding: 16px;
border: 2px solid var(--border-mid);
background:
linear-gradient(180deg, rgba(4, 8, 5, 0.88) 0%, rgba(8, 12, 9, 0.92) 100%);
}
.chat-stream pre,
.team-message pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-family: var(--font-body);
}
.chat-stream pre {
color: var(--accent-green);
line-height: 1.55;
}
.empty-state {
display: grid;
gap: 10px;
min-height: 100%;
place-content: center;
text-align: center;
color: var(--text-dim);
font-family: var(--font-display);
font-size: 0.62rem;
line-height: 1.9;
}
.empty-state--small {
font-size: 0.56rem;
}
.prompt-composer {
padding: 14px;
}
.prompt-composer textarea {
width: 100%;
min-height: 110px;
resize: vertical;
border: 3px solid var(--border-dark);
box-shadow: inset 0 0 0 2px var(--border-mid);
background: rgba(5, 10, 6, 0.95);
color: var(--text-main);
padding: 14px;
outline: none;
}
.prompt-composer textarea::placeholder {
color: var(--text-muted);
}
.prompt-composer__actions {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-top: 12px;
color: var(--text-muted);
font-size: 0.78rem;
}
.team-board {
display: grid;
gap: 12px;
}
.team-card {
border: 2px solid var(--border-mid);
background: linear-gradient(180deg, rgba(10, 16, 11, 0.92), rgba(8, 12, 9, 0.96));
box-shadow: inset 0 0 0 1px rgba(114, 255, 132, 0.08);
}
.team-card__header {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 12px 14px;
border-bottom: 1px dashed rgba(70, 121, 84, 0.32);
}
.team-card__identity {
display: flex;
gap: 10px;
align-items: center;
min-width: 0;
}
.team-card__icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--border-light);
background: rgba(35, 52, 41, 0.72);
font-size: 1rem;
}
.team-card__identity h3,
.team-card__identity p {
margin: 0;
}
.team-card__identity h3 {
font-size: 0.9rem;
}
.team-card__identity p {
color: var(--text-muted);
font-size: 0.72rem;
}
.team-card__count {
display: inline-flex;
min-width: 28px;
justify-content: center;
padding: 4px 6px;
border: 1px solid var(--accent-cyan);
color: var(--accent-cyan);
font-family: var(--font-display);
font-size: 0.62rem;
}
.team-card__body {
min-height: 124px;
max-height: 190px;
}
.team-message {
display: grid;
gap: 8px;
padding: 0 0 10px;
margin-bottom: 10px;
border-bottom: 1px dashed rgba(70, 121, 84, 0.22);
}
.team-message:last-child {
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 0;
}
.team-message__speaker {
color: var(--accent-cyan);
font-family: var(--font-display);
font-size: 0.6rem;
}
.team-message pre {
color: var(--text-main);
line-height: 1.45;
font-size: 0.84rem;
}
@media (max-width: 1024px) {
.status-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.console-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.app-shell {
padding: 14px;
}
.app-shell__header,
.prompt-composer__actions {
flex-direction: column;
align-items: stretch;
}
.status-strip {
grid-template-columns: 1fr;
}
.shell-frame__screen {
min-height: auto;
padding: 12px;
}
}