jaakko/agentic-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kolme kipina.tech-teemaa: gecko, forge, serpent — satunnaisvalinta

Browse Source 
Tuodaan kipina.techin kolme visuaalista teemaa kipina.studioon:
- gecko: lämmin kulta/oranssi (#ff7b00)
- forge: kyber-sininen/syaani (#00e5ff)
- serpent: neon-turkoosi (#00ffff)

Teema arvotaan satunnaisesti joka sivulatauksella. Kaikki aiemmin
hardcoodatut #ff6b00-aksenttivärit korvattu CSS-muuttujilla
(--hero-accent, --hero-glow) jotka mukautuvat teemaan.
This commit is contained in:
jaakko
2026-04-13 14:22:33 +03:00
parent 670141c8c3
commit 3a00de9b8e
2 changed files with 68 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
network-poc/frontend/src/pages/index.astro
View File

@@ -136,6 +136,13 @@ import Settings from "../components/Settings.astro";
</div>
<script is:inline>
// === Teeman satunnaisvalinta (gecko/forge/serpent) ===
(function() {
const themes = ['gecko', 'forge', 'serpent'];
const theme = themes[Math.floor(Math.random() * themes.length)];
document.documentElement.setAttribute('data-theme', theme);
})();
// === Helpers ===
window.showJoinDialog = function() {
const d = document.getElementById('join-dialog');

74
network-poc/frontend/src/styles/global.css
View File

@@ -1,3 +1,4 @@
/* Oletusvärit — ylikirjoitetaan teemalla */
:root {
--bg: #0d1117;
--panel: #161b22;
@@ -8,6 +9,53 @@
--red: #f85149;
--purple: #a371f7;
--border: #30363d;
--hero-accent: #ff6b00;
--hero-glow: rgba(255, 107, 0, 0.15);
}
/* Gecko — lämmin kulta/oranssi (kipina.tech) */
[data-theme="gecko"] {
--bg: #0a0500;
--panel: #1f1000;
--text: #fff5e6;
--accent: #ff7b00;
--green: #3fb950;
--yellow: #ffae00;
--red: #f85149;
--purple: #ff9d4d;
--border: rgba(255, 174, 0, 0.2);
--hero-accent: #ff7b00;
--hero-glow: rgba(255, 123, 0, 0.15);
}
/* Forge — kyber-sininen/syaani (kipina.tech) */
[data-theme="forge"] {
--bg: #060b11;
--panel: #121e2d;
--text: #e0f2fe;
--accent: #00e5ff;
--green: #3fb950;
--yellow: #ff5e3a;
--red: #f85149;
--purple: #7dd3fc;
--border: rgba(0, 229, 255, 0.15);
--hero-accent: #00e5ff;
--hero-glow: rgba(0, 229, 255, 0.15);
}
/* Serpent — neon-turkoosi/teal (kipina.tech) */
[data-theme="serpent"] {
--bg: #000808;
--panel: #001e1e;
--text: #ccffff;
--accent: #00ffff;
--green: #00ffaa;
--yellow: #d29922;
--red: #f85149;
--purple: #66cccc;
--border: rgba(0, 255, 255, 0.15);
--hero-accent: #00ffff;
--hero-glow: rgba(0, 255, 255, 0.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
@@ -235,7 +283,7 @@ body {
.bg-mesh {
position: fixed; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255,107,0,0.08) 0%, transparent 70%),
radial-gradient(ellipse 80% 60% at 20% 40%, var(--hero-glow) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(88,166,255,0.06) 0%, transparent 70%),
var(--bg);
}
@@ -244,7 +292,7 @@ body {
padding: 20px 40px;
}
.landing-logo { text-decoration: none; font-size: 18px; font-weight: 700; }
.logo-accent { color: #ff6b00; }
.logo-accent { color: var(--hero-accent); }
.logo-sub { color: #8b949e; font-weight: 400; }
/* Hero */
@@ -260,7 +308,7 @@ body {
line-height: 1.15; color: #e6edf3; margin-bottom: 16px;
}
.hero-divider {
width: 60px; height: 3px; background: #ff6b00;
width: 60px; height: 3px; background: var(--hero-accent);
border-radius: 2px; margin-bottom: 20px;
}
.hero-desc {
@@ -283,7 +331,7 @@ body {
outline: none; transition: border-color 0.2s;
}
.hero-input:focus {
border-color: #ff6b00; box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
border-color: var(--hero-accent); box-shadow: 0 0 0 3px var(--hero-glow);
}
.hero-input::placeholder { color: #484f58; }
.hero-input.shake {
@@ -299,11 +347,11 @@ body {
.hero-btn {
padding: 14px 28px; font-size: 16px; font-weight: 600;
font-family: 'Inter', sans-serif;
background: #ff6b00; color: #fff; border: none; border-radius: 8px;
background: var(--hero-accent); color: #fff; border: none; border-radius: 8px;
cursor: pointer; transition: background 0.2s, transform 0.1s;
white-space: nowrap;
}
.hero-btn:hover { background: #e05e00; transform: translateY(-1px); }
.hero-btn:hover { filter: brightness(0.85); transform: translateY(-1px); }
.hero-btn:active { transform: translateY(0); }
/* Example buttons */
@@ -325,13 +373,13 @@ body {
}
.hero-orb {
width: 340px; height: 340px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(255,107,0,0.15) 0%, transparent 70%);
background: radial-gradient(circle at 30% 30%, var(--hero-glow) 0%, transparent 70%);
display: flex; align-items: center; justify-content: center;
animation: orb-float 6s ease-in-out infinite;
}
.hero-orb-img {
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 0 40px rgba(255,107,0,0.25));
filter: drop-shadow(0 0 40px var(--hero-glow));
}
@keyframes orb-float {
0%, 100% { transform: translateY(0); }
@@ -357,11 +405,11 @@ body {
background: var(--panel); border: 1px solid var(--border);
border-radius: 12px; transition: border-color 0.3s;
}
.how-step:hover { border-color: rgba(255,107,0,0.4); }
.how-step:hover { border-color: var(--hero-accent); }
.how-step-num {
width: 40px; height: 40px; line-height: 40px;
border-radius: 50%; background: rgba(255,107,0,0.12);
color: #ff6b00; font-weight: 700; font-size: 18px;
border-radius: 50%; background: var(--hero-glow);
color: var(--hero-accent); font-weight: 700; font-size: 18px;
margin: 0 auto 14px;
}
.how-step h3 { color: #e6edf3; font-size: 1rem; margin-bottom: 8px; }
@@ -397,8 +445,8 @@ body {
.learn-step-header:hover { background: rgba(88,166,255,0.04); }
.learn-step-num {
width: 28px; height: 28px; line-height: 28px; text-align: center;
border-radius: 50%; background: rgba(255,107,0,0.12);
color: #ff6b00; font-weight: 700; font-size: 13px; flex-shrink: 0;
border-radius: 50%; background: var(--hero-glow);
color: var(--hero-accent); font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.learn-step-agent {
font-weight: 600; color: #e6edf3; font-size: 14px;