JL Kruger
5422131782
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
552 lines
14 KiB
HTML
552 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Draft: Starfield & Nebula v1 - Gemini</title>
|
|
<!--
|
|
DRAFT: Starfield & Nebula v1
|
|
AUTHOR: Gemini (Designer Agent)
|
|
DATE: 2026-03-26
|
|
|
|
DESCRIPTION:
|
|
This draft focuses on the celestial atmosphere.
|
|
|
|
NEW IN THIS VERSION:
|
|
- Multi-colored stars (Amber, Teal, Blue, Magenta) with varied sizes.
|
|
- Procedural "Nebula Washes" using large, low-opacity radial gradients on the canvas.
|
|
- Differentiated Star Nodes: Each node has a unique glow color and subtle breathing animation.
|
|
- Pulsing Constellation Lines: SVG lines now have a faint, organic pulse.
|
|
- Enhanced Skyline: Added bioluminescent "moss" highlights and warmer window accents.
|
|
- Campfire-style Lightbox: Warm amber tones and a focused layout.
|
|
- Strictly follows Uncodixfy: No large radii, no big blurs, no glassmorphism.
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
/* Deep Space Palette */
|
|
--bg-void: #04060b;
|
|
--bg-deep: #060a14;
|
|
--bg-warm: #0d1320;
|
|
|
|
/* Celestial & Fire Palette */
|
|
--fire-amber: #e8943a;
|
|
--fire-coral: #d4654a;
|
|
--neon-green: #32dc8c;
|
|
--neon-teal: #2ac4b3;
|
|
--deep-red: #8b2020;
|
|
--cosmic-purple:#4a1d6e;
|
|
--star-blue: #a0c4ff;
|
|
|
|
/* Text */
|
|
--text-warm: #e8d5b8;
|
|
--text-muted: #6a7a8a;
|
|
|
|
/* Constraints */
|
|
--radius-std: 4px;
|
|
--radius-max: 10px;
|
|
--blur-max: 8px;
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
background: var(--bg-void);
|
|
color: var(--text-warm);
|
|
overflow: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body.content-mode {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* ── Zone 1: Star Map ── */
|
|
|
|
#star-zone {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: radial-gradient(circle at 50% 50%, #080c18 0%, #04060b 100%);
|
|
}
|
|
|
|
#star-canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
#constellation-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.constellation-line {
|
|
stroke-width: 1;
|
|
stroke-linecap: round;
|
|
transition: stroke-opacity 1s ease;
|
|
}
|
|
|
|
/* ── Star Nodes ── */
|
|
|
|
.star-node {
|
|
position: absolute;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -50%);
|
|
outline: none;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.star-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 0 4px #fff;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.star-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
letter-spacing: 0.05em;
|
|
text-transform: lowercase;
|
|
white-space: nowrap;
|
|
opacity: 0.6;
|
|
transition: opacity 0.2s ease, color 0.2s ease;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Node Specificity */
|
|
.star-node[data-star="writings"] .star-dot { box-shadow: 0 0 6px var(--star-blue); background: var(--star-blue); }
|
|
.star-node[data-star="videos"] .star-dot { box-shadow: 0 0 6px var(--fire-coral); background: var(--fire-coral); }
|
|
.star-node[data-star="music"] .star-dot { box-shadow: 0 0 6px var(--neon-teal); background: var(--neon-teal); }
|
|
.star-node[data-star="images"] .star-dot { box-shadow: 0 0 6px var(--neon-green); background: var(--neon-green); }
|
|
.star-node[data-star="playlists"] .star-dot { box-shadow: 0 0 6px var(--fire-amber); background: var(--fire-amber); }
|
|
.star-node[data-star="watchlists"] .star-dot { box-shadow: 0 0 6px var(--cosmic-purple); background: var(--cosmic-purple); }
|
|
.star-node[data-star="toolsntoys"] .star-dot { box-shadow: 0 0 6px #fff; background: #fff; }
|
|
.star-node[data-star="creatorlists"] .star-dot { box-shadow: 0 0 6px var(--text-warm); background: var(--text-warm); }
|
|
|
|
.star-node:hover .star-dot,
|
|
.star-node:focus .star-dot,
|
|
.star-node.current .star-dot {
|
|
background: var(--fire-amber) !important;
|
|
box-shadow: 0 0 8px var(--fire-amber) !important;
|
|
}
|
|
|
|
.star-node:hover .star-label,
|
|
.star-node:focus .star-label,
|
|
.star-node.current .star-label {
|
|
color: var(--text-warm);
|
|
opacity: 1;
|
|
}
|
|
|
|
.star-node.visited::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: -12px;
|
|
right: -12px;
|
|
font-size: 10px;
|
|
color: var(--neon-green);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ── Transition Zone: Skyline ── */
|
|
|
|
#transition-zone {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: linear-gradient(to bottom, var(--bg-void) 0%, #080c14 40%, #0d1320 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#skyline {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 70%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.building {
|
|
background: #05080f;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
border-top: 1px solid rgba(232, 148, 58, 0.05);
|
|
}
|
|
|
|
/* Bioluminescent Highlights */
|
|
.building.bio-active::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 0;
|
|
width: 2px;
|
|
height: 30%;
|
|
background: var(--neon-teal);
|
|
box-shadow: 0 0 6px var(--neon-teal);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.billboard-nav {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
color: var(--text-warm);
|
|
border: 1px solid var(--text-muted);
|
|
background: var(--bg-void);
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition: border-color 0.2s ease, color 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.billboard-nav:hover,
|
|
.billboard-nav:focus {
|
|
color: var(--fire-amber);
|
|
border-color: var(--fire-amber);
|
|
outline: none;
|
|
}
|
|
|
|
/* ── Zone 3: Content Alley ── */
|
|
|
|
#content-zone {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: var(--bg-warm);
|
|
position: relative;
|
|
}
|
|
|
|
#content-frame {
|
|
width: 100%;
|
|
height: 100vh;
|
|
border: none;
|
|
display: block;
|
|
background: var(--bg-warm);
|
|
}
|
|
|
|
/* ── Persistent UI ── */
|
|
|
|
#back-btn {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 100;
|
|
padding: 8px 16px;
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
background: rgba(4, 6, 11, 0.8);
|
|
border: 1px solid rgba(106, 122, 138, 0.3);
|
|
border-radius: var(--radius-std);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
#back-btn:hover {
|
|
color: var(--fire-amber);
|
|
border-color: var(--fire-amber);
|
|
}
|
|
|
|
#jl-link {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 100;
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
opacity: 0.6;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
#jl-link:hover {
|
|
opacity: 1;
|
|
color: var(--fire-amber);
|
|
}
|
|
|
|
/* ── Lightbox: Campfire Style ── */
|
|
|
|
#lightbox-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#lightbox-overlay.hidden { display: none; }
|
|
|
|
#lightbox {
|
|
background: var(--bg-warm);
|
|
border: 1px solid var(--fire-amber);
|
|
border-radius: var(--radius-std);
|
|
padding: 40px;
|
|
max-width: 500px;
|
|
width: 90%;
|
|
position: relative;
|
|
}
|
|
|
|
#lightbox::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 4px;
|
|
border: 1px solid rgba(232, 148, 58, 0.1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#lightbox p {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
color: var(--text-warm);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.nav-hint {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 32px;
|
|
display: block;
|
|
}
|
|
|
|
#lightbox-enter {
|
|
padding: 10px 32px;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--bg-void);
|
|
background: var(--fire-amber);
|
|
border: none;
|
|
border-radius: var(--radius-std);
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
#lightbox-enter:hover { opacity: 0.9; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="star-zone">
|
|
<canvas id="star-canvas"></canvas>
|
|
<svg id="constellation-svg" xmlns="http://www.w3.org/2000/svg"></svg>
|
|
</div>
|
|
|
|
<div id="transition-zone">
|
|
<div id="skyline"></div>
|
|
</div>
|
|
|
|
<div id="content-zone">
|
|
<iframe id="content-frame" title="Section content"></iframe>
|
|
</div>
|
|
|
|
<button id="back-btn">stars</button>
|
|
<a id="jl-link" href="https://jl-kruger.github.io/introductions" target="_blank" rel="noopener">JL Kruger</a>
|
|
|
|
<div id="lightbox-overlay" class="hidden">
|
|
<div id="lightbox">
|
|
<p>Hello traveller, welcome to a singular, particular space. Feel free to explore this little pocket of the universe. It's an adventure, bring snacks. Happy wanderings, Myster Wizzard</p>
|
|
<span class="nav-hint">click stars · arrow keys · escape to return</span>
|
|
<button id="lightbox-enter">Enter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
const STARS = [
|
|
{ id: 'writings', label: 'Writings', x: 25, y: 22, color: '#a0c4ff' },
|
|
{ id: 'videos', label: 'Videos', x: 65, y: 18, color: '#d4654a' },
|
|
{ id: 'music', label: 'Music', x: 15, y: 45, color: '#2ac4b3' },
|
|
{ id: 'images', label: 'Images', x: 50, y: 35, color: '#32dc8c' },
|
|
{ id: 'playlists', label: 'Playlists', x: 80, y: 50, color: '#e8943a' },
|
|
{ id: 'watchlists', label: 'Watchlists', x: 20, y: 70, color: '#4a1d6e' },
|
|
{ id: 'toolsntoys', label: 'ToolsnToys', x: 55, y: 75, color: '#ffffff' },
|
|
{ id: 'creatorlists', label: 'Creatorlists', x: 82, y: 72, color: '#e8d5b8' }
|
|
];
|
|
|
|
const CONNECTIONS = [
|
|
['writings', 'videos'], ['music', 'images'], ['images', 'videos'],
|
|
['watchlists', 'toolsntoys'], ['toolsntoys', 'creatorlists'], ['music', 'watchlists']
|
|
];
|
|
|
|
const canvas = document.getElementById('star-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let bgStars = [];
|
|
let nebulae = [];
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
initAtmosphere();
|
|
}
|
|
|
|
function initAtmosphere() {
|
|
bgStars = [];
|
|
const colors = ['#ffffff', '#a0c4ff', '#ffd7ba', '#e8943a', '#2ac4b3'];
|
|
for(let i=0; i<350; i++) {
|
|
bgStars.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
r: Math.random() * 1.5 + 0.2,
|
|
color: colors[Math.floor(Math.random()*colors.length)],
|
|
opacity: Math.random() * 0.7 + 0.3,
|
|
blink: Math.random() * 0.02 + 0.005,
|
|
phase: Math.random() * Math.PI * 2
|
|
});
|
|
}
|
|
|
|
nebulae = [
|
|
{ x: 0.2, y: 0.3, r: 0.4, color: 'rgba(74, 29, 110, 0.08)' },
|
|
{ x: 0.8, y: 0.2, r: 0.5, color: 'rgba(42, 196, 179, 0.05)' },
|
|
{ x: 0.5, y: 0.7, r: 0.6, color: 'rgba(232, 148, 58, 0.04)' }
|
|
];
|
|
}
|
|
|
|
function draw(time) {
|
|
ctx.fillStyle = '#04060b';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Draw Nebulae
|
|
nebulae.forEach(n => {
|
|
const grad = ctx.createRadialGradient(
|
|
n.x * canvas.width, n.y * canvas.height, 0,
|
|
n.x * canvas.width, n.y * canvas.height, n.r * canvas.width
|
|
);
|
|
grad.addColorStop(0, n.color);
|
|
grad.addColorStop(1, 'transparent');
|
|
ctx.fillStyle = grad;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
});
|
|
|
|
// Draw Stars
|
|
const t = time * 0.001;
|
|
bgStars.forEach(s => {
|
|
const o = s.opacity + Math.sin(t / s.blink + s.phase) * 0.2;
|
|
ctx.beginPath();
|
|
ctx.arc(s.x, s.y, s.r, 0, Math.PI*2);
|
|
ctx.fillStyle = s.color;
|
|
ctx.globalAlpha = Math.max(0.1, Math.min(1, o));
|
|
ctx.fill();
|
|
});
|
|
ctx.globalAlpha = 1;
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
// Star Nodes
|
|
const starZone = document.getElementById('star-zone');
|
|
STARS.forEach((s, i) => {
|
|
const node = document.createElement('button');
|
|
node.className = 'star-node';
|
|
node.dataset.star = s.id;
|
|
node.style.left = s.x + '%';
|
|
node.style.top = s.y + '%';
|
|
node.innerHTML = `<span class="star-dot"></span><span class="star-label">${s.label}</span>`;
|
|
starZone.appendChild(node);
|
|
});
|
|
|
|
// Constellations
|
|
const svg = document.getElementById('constellation-svg');
|
|
function drawLines() {
|
|
svg.innerHTML = '';
|
|
CONNECTIONS.forEach(pair => {
|
|
const s1 = STARS.find(s => s.id === pair[0]);
|
|
const s2 = STARS.find(s => s.id === pair[1]);
|
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
line.setAttribute('x1', s1.x + '%');
|
|
line.setAttribute('y1', s1.y + '%');
|
|
line.setAttribute('x2', s2.x + '%');
|
|
line.setAttribute('y2', s2.y + '%');
|
|
line.setAttribute('class', 'constellation-line');
|
|
line.setAttribute('stroke', s1.color);
|
|
line.setAttribute('stroke-opacity', '0.15');
|
|
svg.appendChild(line);
|
|
});
|
|
}
|
|
|
|
// Skyline
|
|
function initSkyline() {
|
|
const skyline = document.getElementById('skyline');
|
|
for(let i=0; i<40; i++) {
|
|
const b = document.createElement('div');
|
|
b.className = 'building' + (Math.random() > 0.7 ? ' bio-active' : '');
|
|
const w = 20 + Math.random() * 60;
|
|
const h = 40 + Math.random() * 300;
|
|
b.style.width = w + 'px';
|
|
b.style.height = h + 'px';
|
|
b.style.marginRight = '2px';
|
|
|
|
// Random Windows
|
|
if(h > 100) {
|
|
for(let j=0; j<Math.floor(h/40); j++) {
|
|
const win = document.createElement('div');
|
|
win.style.cssText = `position:absolute; width:2px; height:2px; background:var(--fire-amber); opacity:${Math.random()*0.2}; left:${Math.random()*w}px; top:${30+j*30}px;`;
|
|
b.appendChild(win);
|
|
}
|
|
}
|
|
skyline.appendChild(b);
|
|
}
|
|
}
|
|
|
|
// Interaction
|
|
const enterBtn = document.getElementById('lightbox-enter');
|
|
const overlay = document.getElementById('lightbox-overlay');
|
|
enterBtn.onclick = () => overlay.classList.add('hidden');
|
|
|
|
window.onresize = resize;
|
|
resize();
|
|
drawLines();
|
|
initSkyline();
|
|
requestAnimationFrame(draw);
|
|
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|