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