aladac/tensors
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply tengu.to color scheme and styling

Browse Source 
- Background: #0f0f0f
- Cards: #1a1a1a with #333 borders
- Accent: #4ade80 (green) for active/code
- Primary button: #dc2626 (red)
- Text: #e5e5e5, muted #888/#666
- Monospace font for prompts
- 8px border-radius on all components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adam Ladachowski
2026-02-14 03:14:53 +01:00
parent 181710dc24
commit c1f5a7ce37
1 changed files with 71 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tensors/server/static/index.html
+71 -41
View File
@@ -8,9 +8,9 @@
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #1a1a1a;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #0f0f0f;
color: #e5e5e5;
min-height: 100vh;
display: flex;
}
@@ -18,7 +18,7 @@
/* Sidebar */
.sidebar {
width: 60px;
background: #111;
background: #0f0f0f;
display: flex;
flex-direction: column;
align-items: center;
@@ -39,8 +39,8 @@
justify-content: center;
transition: all 0.2s;
}
.sidebar button:hover { background: #222; color: #fff; }
.sidebar button.active { background: #333; color: #fff; }
.sidebar button:hover { background: #1a1a1a; color: #e5e5e5; }
.sidebar button.active { background: #1a1a1a; color: #4ade80; }
.sidebar svg { width: 24px; height: 24px; }
/* Main content */
@@ -55,17 +55,18 @@
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 8px;
padding: 12px;
gap: 12px;
padding: 1rem;
}
@media (min-width: 768px) {
.gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; padding: 1.5rem; }
}
.gallery a {
aspect-ratio: 1;
overflow: hidden;
border-radius: 6px;
background: #333;
border-radius: 8px;
background: #1a1a1a;
border: 1px solid #333;
}
.gallery img {
width: 100%;
@@ -83,28 +84,37 @@
.chat-area {
flex: 1;
overflow-y: auto;
padding: 12px;
padding: 1rem;
}
@media (min-width: 768px) {
.chat-area { padding: 1.5rem; }
}
.chat-message {
margin-bottom: 1rem;
margin-bottom: 1.5rem;
}
.chat-prompt {
color: #888;
font-size: 0.85rem;
margin-bottom: 0.5rem;
padding-left: 4px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
color: #4ade80;
font-size: 0.9rem;
margin-bottom: 0.75rem;
padding: 0.75rem 1rem;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
display: inline-block;
}
.chat-images {
display: flex;
flex-wrap: wrap;
gap: 8px;
gap: 12px;
}
.chat-images a {
width: 150px;
height: 150px;
border-radius: 6px;
border-radius: 8px;
overflow: hidden;
background: #333;
background: #1a1a1a;
border: 1px solid #333;
}
@media (min-width: 768px) {
.chat-images a { width: 200px; height: 200px; }
@@ -115,18 +125,26 @@
object-fit: cover;
}
.chat-images .generating {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 0.8rem;
color: #888;
font-size: 0.85rem;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
}
@media (min-width: 768px) {
.chat-images .generating { width: 200px; height: 200px; }
}
.chat-images .generating::after {
content: '';
width: 20px;
height: 20px;
border: 2px solid #444;
border-top-color: #888;
border: 2px solid #333;
border-top-color: #4ade80;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 8px;
@@ -135,53 +153,63 @@
/* Input area */
.input-area {
padding: 12px;
background: #222;
padding: 1rem;
background: #0f0f0f;
border-top: 1px solid #333;
}
@media (min-width: 768px) {
.input-area { padding: 1.5rem; }
}
.input-row {
display: flex;
gap: 8px;
gap: 10px;
max-width: 800px;
margin: 0 auto;
}
.input-row input[type="text"] {
flex: 1;
padding: 12px 16px;
border: 1px solid #444;
padding: 1rem 1.25rem;
border: 1px solid #333;
border-radius: 8px;
background: #1a1a1a;
color: #fff;
color: #e5e5e5;
font-size: 1rem;
}
.input-row input[type="text"]::placeholder { color: #666; }
.input-row input[type="text"]:focus {
outline: none;
border-color: #666;
border-color: #4ade80;
}
.input-row input[type="number"] {
width: 60px;
padding: 12px 8px;
border: 1px solid #444;
width: 70px;
padding: 1rem 0.5rem;
border: 1px solid #333;
border-radius: 8px;
background: #1a1a1a;
color: #fff;
color: #e5e5e5;
font-size: 1rem;
text-align: center;
}
.input-row input[type="number"]:focus {
outline: none;
border-color: #4ade80;
}
.input-row button {
padding: 12px 20px;
padding: 1rem 1.5rem;
border: none;
border-radius: 8px;
background: #0066cc;
background: #dc2626;
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.input-row button:hover { background: #0077ee; }
.input-row button:disabled { background: #444; cursor: not-allowed; }
.input-row button:hover { background: #b91c1c; }
.input-row button:disabled { background: #333; color: #666; cursor: not-allowed; }
.empty { text-align: center; padding: 4rem 1rem; color: #666; }
.error { color: #dc2626; }
</style>
</head>
<body>
@@ -315,11 +343,13 @@
</a>
`).join('');
initLightbox();
} else if (data.error) {
imagesDiv.innerHTML = `<div class="empty error">${escapeHtml(data.error)}</div>`;
} else {
imagesDiv.innerHTML = '<div class="empty">Generation failed</div>';
imagesDiv.innerHTML = '<div class="empty error">Generation failed</div>';
}
} catch (e) {
msgDiv.querySelector('.chat-images').innerHTML = '<div class="empty">Error: ' + e.message + '</div>';
msgDiv.querySelector('.chat-images').innerHTML = '<div class="empty error">Error: ' + escapeHtml(e.message) + '</div>';
}
generateBtn.disabled = false;