jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0d84daea6a756bbbab4c2e171f5b189d4d74fb0f
singular-particular-space/ToolsnToys/foss-tools.html
JL Kruger 334929292e Add mobile responsiveness to ToolsnToys hub pages; fix table overflow in guides 
Add 680px breakpoint to toolsntoys, foss-tools, guides, jl-early-tools:
header stacks, stats bar collapses to 2-col, sidebar/content grid stacks.
Fix table overflow in 3 guide pages: move overflow-x:hidden from body to
.guide-wrap so .guide-table-wrap scroll containers work on mobile Safari.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-02 18:21:33 +02:00

1558 lines
80 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOSS ARSENAL // FIELD UNIT SP-07</title>
<!-- Sixtyfour, Share Tech Mono, Rambla -->
<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=Sixtyfour&family=Share+Tech+Mono&family=Rambla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
:root {
--bg-deep: #030812;
--bg-mid: #060f1a;
--bg-surface: #081524;
--bg-panel: #0d1e32;
--text-main: #c8d8e8;
--text-muted: #3a5570;
--phosphor: #00ff41;
--neon-green: #32dc8c;
--fire-amber: #e8943a;
--toucan: #ffcf40;
--fire-coral: #d4654a;
--neon-teal: #2ac4b3;
--orchid: #c558d9;
--border-neon: rgba(50,220,140,0.3);
--border-amber: rgba(232,148,58,0.4);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-deep);
color: var(--text-main);
font-family: 'Rambla', sans-serif;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 80%, rgba(232,148,58,0.05) 0%, transparent 70%),
radial-gradient(ellipse 100% 60% at 20% 0%, rgba(3,8,18,0.9) 0%, transparent 60%),
radial-gradient(ellipse 100% 60% at 80% 0%, rgba(3,8,18,0.9) 0%, transparent 60%),
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px);
pointer-events: none;
z-index: 0;
}
body::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.15) 3px, rgba(0,0,0,0.15) 4px);
pointer-events: none;
z-index: 1000;
animation: scanline 15s linear infinite;
}
@keyframes scanline { 0% { background-position: 0 0; } 100% { background-position: 0 400px; } }
.noise {
position: fixed; inset: 0; opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
pointer-events: none; z-index: 999;
}
.app { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-neon); position: relative; }
.header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 40%; height: 1px; background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
.unit-tag { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--fire-amber); letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 0.4rem; }
.title { font-family: 'Sixtyfour', cursive; font-size: 1.8rem; font-weight: 400; color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green), 0 0 20px rgba(50,220,140,0.6); line-height: 1.2; margin-bottom: 0.5rem; }
.subtitle { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--text-muted); letter-spacing: 0.2em; text-transform: uppercase; }
.status-badge { font-family: 'Share Tech Mono', monospace; font-size: 1rem; padding: 0.25rem 0.8rem; border: 1px solid var(--neon-green); color: var(--neon-green); letter-spacing: 0.15em; box-shadow: inset 0 0 10px rgba(50,220,140,0.15); }
.header-right { text-align: right; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.coord { font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; color: var(--text-muted); letter-spacing: 0.1em; }
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
.stat-card { background: var(--bg-panel); border: 1px solid var(--border-neon); padding: 0.85rem 1.1rem; position: relative; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); box-shadow: 0 0 15px rgba(0,0,0,0.3); }
.stat-card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent var(--bg-deep) transparent transparent; }
.stat-label { font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.18em; margin-bottom: 0.4rem; text-transform: uppercase; }
.stat-value { font-family: 'Sixtyfour', cursive; font-size: 0.9rem; color: var(--fire-amber); text-shadow: 0 0 10px rgba(232,148,58,0.5); margin-bottom: 0.2rem; }
.stat-sub { font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; color: var(--text-muted); }
.stat-bar-track { height: 3px; background: rgba(255,255,255,0.05); margin-top: 0.6rem; position: relative; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }
.main-grid { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.75rem;
max-height: calc(100vh - 310px);
min-height: 400px;
overflow-y: auto;
align-content: start;
padding-right: 0.4rem;
}
.tool-grid::-webkit-scrollbar { width: 3px; }
.tool-grid::-webkit-scrollbar-track { background: transparent; }
.tool-grid::-webkit-scrollbar-thumb { background: var(--text-muted); }
.panel { background: var(--bg-panel); border: 1px solid var(--border-neon); margin-bottom: 1.5rem; box-shadow: 0 0 15px rgba(0,0,0,0.4); }
.panel-header { font-family: 'Share Tech Mono', monospace; font-size: 1rem; letter-spacing: 0.2em; color: var(--fire-amber); padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(232,148,58,0.2); }
.panel-header::before { content: '//'; color: var(--text-muted); margin-right: 0.5rem; }
.panel-body { padding: 0.8rem; }
.category-list { display: flex; flex-direction: column; gap: 0.4rem; }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.9rem; color: var(--text-main); transition: all 150ms; border: 1px solid transparent; position: relative; }
.cat-item:hover, .cat-item.active { background: rgba(50,220,140,0.08); border-color: rgba(50,220,140,0.3); color: var(--neon-green); }
.cat-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--neon-green); box-shadow: 0 0 8px var(--neon-green); }
.cat-count { font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; color: var(--text-muted); background: rgba(0,0,0,0.3); padding: 1px 6px; }
/* Sidebar sticky scroll */
.sidebar {
position: sticky;
top: 2rem;
max-height: calc(100vh - 4rem);
overflow-y: auto;
}
/* List Card styles — vertical for grid layout */
.list-card {
background: var(--bg-panel);
border: 1px solid var(--border-neon);
display: flex;
flex-direction: column;
transition: all 150ms ease;
}
.list-card:hover { border-color: rgba(50,220,140,0.5); background: var(--bg-surface); box-shadow: 0 4px 15px rgba(0,0,0,0.4), 0 0 10px rgba(50,220,140,0.1); }
.lc-left { height: 4px; width: 100%; flex-shrink: 0; }
.lc-body { padding: 0.85rem 1rem; flex: 1; display: flex; flex-direction: column; }
.lc-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.lc-tag { font-family: 'Share Tech Mono', monospace; font-size: 0.65rem; padding: 1px 5px; border: 1px solid; letter-spacing: 0.1em; }
.lc-name { font-family: 'Rambla', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text-main); }
.lc-desc { font-family: 'Rambla', sans-serif; font-style: italic; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; margin: 0; flex: 1; }
.lc-visit-wrap { padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(50,220,140,0.12); margin-top: 0.75rem; }
.lc-visit-btn { font-family: 'Share Tech Mono', monospace; font-size: 0.85rem; padding: 0.45rem 1rem; background: transparent; border: 1px solid var(--fire-amber); color: var(--fire-amber); text-decoration: none; transition: all 150ms; letter-spacing: 0.1em; white-space: nowrap; width: 100%; text-align: center; }
.lc-visit-btn:hover { background: rgba(232,148,58,0.1); box-shadow: 0 0 10px rgba(232,148,58,0.2); text-shadow: 0 0 8px var(--fire-amber); }
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Share Tech Mono', monospace; color: var(--text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color 150ms; letter-spacing: 0.1em; }
.back-link:hover { color: var(--neon-green); }
#embers { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.campfire-glow { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse at center bottom, rgba(232,148,58,0.12) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; transform: translateX(-50%) scale(1.05); } }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--text-muted); }
@media (max-width: 680px) {
.header { flex-direction: column; gap: 0.75rem; }
.header-right { align-items: flex-start; text-align: left; }
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.main-grid { grid-template-columns: 1fr; }
.category-list { flex-direction: row; flex-wrap: wrap; }
.cat-item { flex: 1 1 auto; }
}
</style>
</head>
<body>
<div class="noise"></div>
<div class="campfire-glow"></div>
<canvas id="embers"></canvas>
<div class="app">
<a href="toolsntoys.html" class="back-link" target="_top">← TOOLS N TOYS</a>
<header class="header">
<div class="header-left">
<div class="unit-tag">▶ FIELD UNIT SP-07 // DIRECTORY</div>
<h1 class="title">FOSS ARSENAL</h1>
<div class="subtitle">FREE AND OPEN WEAPONS FOR BUILDERS</div>
</div>
<div class="header-right">
<div class="status-badge">● DATA_LOADED</div>
<div class="coord">SOURCE: FOSS-TOOLS.MD</div>
</div>
</header>
<div class="stats-bar">
<div class="stat-card">
<div class="stat-label">TOOLS</div>
<div class="stat-value">92</div>
<div class="stat-sub">INDEXED</div>
<div class="stat-bar-track"><div class="stat-bar-fill" style="width:100%"></div></div>
</div>
<div class="stat-card">
<div class="stat-label">CATEGORIES</div>
<div class="stat-value">8</div>
<div class="stat-sub">GROUPS</div>
<div class="stat-bar-track"><div class="stat-bar-fill" style="width:100%"></div></div>
</div>
<div class="stat-card">
<div class="stat-label">OPEN SOURCE</div>
<div class="stat-value">100%</div>
<div class="stat-sub">VERIFIED</div>
<div class="stat-bar-track"><div class="stat-bar-fill" style="width:100%; background:var(--neon-teal); box-shadow:0 0 6px var(--neon-teal);"></div></div>
</div>
<div class="stat-card">
<div class="stat-label">FREE</div>
<div class="stat-value">MOST</div>
<div class="stat-sub">ACCESS</div>
<div class="stat-bar-track"><div class="stat-bar-fill" style="width:90%"></div></div>
</div>
</div>
<div class="main-grid">
<aside class="sidebar">
<div class="panel">
<div class="panel-header">CATEGORIES</div>
<div class="panel-body">
<div class="category-list">
<div class="cat-item active" data-filter="ALL">
<span>ALL</span>
<span class="cat-count">92</span>
</div>
<div class="cat-item" data-filter="CREATIVE">
<span>CREATIVE</span>
<span class="cat-count">7</span>
</div>
<div class="cat-item" data-filter="MEDIA">
<span>MEDIA</span>
<span class="cat-count">19</span>
</div>
<div class="cat-item" data-filter="DEV TOOLS">
<span>DEV TOOLS</span>
<span class="cat-count">9</span>
</div>
<div class="cat-item" data-filter="KNOWLEDGE">
<span>KNOWLEDGE</span>
<span class="cat-count">9</span>
</div>
<div class="cat-item" data-filter="COMMS">
<span>COMMS</span>
<span class="cat-count">7</span>
</div>
<div class="cat-item" data-filter="INFRA">
<span>INFRA</span>
<span class="cat-count">25</span>
</div>
<div class="cat-item" data-filter="SECURITY">
<span>SECURITY</span>
<span class="cat-count">6</span>
</div>
<div class="cat-item" data-filter="AI & COMMUNITY">
<span>AI & COMMUNITY</span>
<span class="cat-count">10</span>
</div>
</div>
</div>
</div>
</aside>
<main class="tool-grid">
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">GIMP</div>
</div>
<p class="lc-desc">Powerful raster graphics editor for photo retouching, image composition, and authoring. Cross-platform Photoshop alternative with layers, filters, and customizable brushes.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.gimp.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">Krita</div>
</div>
<p class="lc-desc">Professional digital painting application designed by artists. Features brush stabilizers, advanced layer management, and animation tools for concept art and illustrations.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://krita.org/en/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">Inkscape</div>
</div>
<p class="lc-desc">Professional vector graphics software for SVG files. Create logos, illustrations, diagrams with bezier tools, text manipulation, and precision object control.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://inkscape.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">darktable</div>
</div>
<p class="lc-desc">Photography workflow application and RAW developer. Manage digital negatives in a database with non-destructive editing tools.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.darktable.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">Blender</div>
</div>
<p class="lc-desc">Complete 3D creation suite for modeling, rigging, animation, simulation, rendering, compositing, and motion tracking. Used by studios worldwide.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.blender.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">FreeCAD</div>
</div>
<p class="lc-desc">Parametric 3D CAD modeler for real-life object design. Modular architecture for mechanical engineering, architecture, and product design.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.freecad.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="CREATIVE">
<div class="lc-left" style="background: var(--orchid);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--orchid); border-color: var(--orchid);">CREATIVE</span>
<div class="lc-name">draw.io</div>
</div>
<p class="lc-desc">Free diagram software for flowcharts, process diagrams, org charts, UML, and network diagrams. Works offline with cloud storage integration.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.drawio.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Shutter Encoder</div>
</div>
<p class="lc-desc">Professional video/audio converter with extensive codec support, batch processing, custom encoding settings, and advanced filters.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.shutterencoder.com/en/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">FFmpeg</div>
</div>
<p class="lc-desc">Essential command-line multimedia framework for recording, converting, and streaming. Industry-standard codec library for batch processing.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://ffmpeg.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">HandBrake</div>
</div>
<p class="lc-desc">User-friendly video transcoder with device presets. Converts video from nearly any format with quality and size optimization.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://handbrake.fr/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Kdenlive</div>
</div>
<p class="lc-desc">Powerful multi-track video editor with effects, transitions, and color correction. Supports proxy editing for smooth high-res playback.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://kdenlive.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Shotcut</div>
</div>
<p class="lc-desc">Cross-platform video editor with native timeline, wide format support, and 4K handling. Includes color grading and audio filters.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.shotcut.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">OBS Studio</div>
</div>
<p class="lc-desc">Industry-standard software for video recording and live streaming. Real-time capture with scene composition and mixing. Powers countless streams.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://obsproject.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">ClipGrab</div>
</div>
<p class="lc-desc">Simple downloader and converter for YouTube, Vimeo, and other video sites. Various formats and quality options for offline viewing.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://clipgrab.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Kodi</div>
</div>
<p class="lc-desc">Award-winning media center organizing video, music, and photos. Extensible through add-ons, perfect for home theater PCs.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://kodi.tv/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">mpv</div>
</div>
<p class="lc-desc">Minimalist keyboard-driven media player with high-quality output. Supports virtually all formats, hardware decoding, and scripting.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://mpv.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Jellyfin</div>
</div>
<p class="lc-desc">Free media server for hosting and streaming personal collections. No premium licenses or tracking - completely free Plex alternative.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://jellyfin.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">FreeTube</div>
</div>
<p class="lc-desc">Private desktop YouTube client. Watch videos without ads or tracking, subscribe locally, export subscriptions. No Google account needed.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://freetubeapp.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Tenacity</div>
</div>
<p class="lc-desc">Modern Audacity fork focused on features and community. Multi-track audio editor with effects, analysis tools, and plugin support.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://tenacityaudio.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Audacity</div>
</div>
<p class="lc-desc">Legendary multi-track audio editor and recorder. Used by millions for podcasting, music production, and restoration.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.audacityteam.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">LMMS</div>
</div>
<p class="lc-desc">Complete digital audio workstation for music production. Includes synthesizers, samples, effects, and MIDI support.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://lmms.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Mixxx</div>
</div>
<p class="lc-desc">Professional DJ software with 4 decks, powerful mixing engine, effects, and hardware controller support for live performances.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://mixxx.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">MuseScore</div>
</div>
<p class="lc-desc">Professional music notation software for composing and editing sheet music. WYSIWYG interface with playback and export options.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://musescore.org/en" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">MuseHub</div>
</div>
<p class="lc-desc">Central hub for MuseScore plugins, sounds, and samples. Extends MuseScore with professional sound libraries and tools.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.musehub.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">Docusaurus</div>
</div>
<p class="lc-desc">Modern static website generator for technical documentation. Built with React, featuring versioning, search, and i18n out of the box.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://docusaurus.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">VuePress</div>
</div>
<p class="lc-desc">Vue-powered static site generator focused on documentation. Markdown-centered with built-in search and easy theming.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://vuepress.vuejs.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">BookStack</div>
</div>
<p class="lc-desc">Self-hosted wiki organizing content into books, chapters, and pages. Simple interface with powerful search and markdown support.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.bookstackapp.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Wiki.js</div>
</div>
<p class="lc-desc">Powerful modern wiki software built with Node.js. Clean interface, markdown editor, access control, and multiple storage backends.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://js.wiki/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">Vue.js</div>
</div>
<p class="lc-desc">Progressive JavaScript framework for building UIs. Easy to learn, performant, versatile - scales from library to full framework.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://vuejs.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">Create T3 App</div>
</div>
<p class="lc-desc">Opinionated full-stack Next.js starter with TypeScript, tRPC, Tailwind, and Prisma. Best practices for type-safe rapid development.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://create.t3.gg/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">Pandoc</div>
</div>
<p class="lc-desc">Universal document converter for dozens of formats including Markdown, HTML, LaTeX, and Word. Essential for documentation workflows.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://pandoc.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">MiKTeX</div>
</div>
<p class="lc-desc">Complete TeX/LaTeX typesetting system. Automatic package installation and integrated editor for professional scientific documents.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://miktex.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Logseq</div>
</div>
<p class="lc-desc">Privacy-first knowledge base on local markdown files. Combines outlining, bidirectional linking, and graph visualization for PKM.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://logseq.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Trilium Notes</div>
</div>
<p class="lc-desc">Hierarchical note-taking for personal knowledge bases. Features scripting, relations, and advanced note organization.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://triliumnotes.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Etherpad</div>
</div>
<p class="lc-desc">Real-time collaborative document editing in browser. Color-coded authorship, chat, and revision history for remote teams.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://etherpad.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Publii</div>
</div>
<p class="lc-desc">Desktop app for static websites with CMS interface. One-click sync to hosting services, no server or database required.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.getpublii.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Strapi</div>
</div>
<p class="lc-desc">Leading open-source headless CMS built with JavaScript. Fully customizable and developer-friendly for modern APIs.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://strapi.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Vendure</div>
</div>
<p class="lc-desc">Open-source headless commerce platform built with Node.js and TypeScript. Modern architecture for custom e-commerce solutions.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://vendure.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">nopCommerce</div>
</div>
<p class="lc-desc">Free ASP.NET Core shopping cart platform. Full-featured e-commerce solution with extensive plugin ecosystem.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.nopcommerce.com/en" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">OpenCart</div>
</div>
<p class="lc-desc">PHP-based online store management system. Easy to use with thousands of modules and themes available.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.opencart.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">PrestaShop</div>
</div>
<p class="lc-desc">Popular e-commerce solution powering 300,000+ stores worldwide. Feature-rich with extensive marketplace.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://prestashop.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Spree Commerce</div>
</div>
<p class="lc-desc">Modular Ruby on Rails e-commerce platform. API-first design for headless commerce implementations.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://spreecommerce.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">Rocket.Chat</div>
</div>
<p class="lc-desc">Open-source team communication platform. Self-hosted alternative to Slack with end-to-end encryption and customization.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.rocket.chat/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">Zulip</div>
</div>
<p class="lc-desc">Threaded team chat for organized conversations. Combines email threading with real-time chat for productive async communication.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://zulip.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">Element</div>
</div>
<p class="lc-desc">Secure messaging and collaboration built on Matrix protocol. End-to-end encrypted with federation support.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://element.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">Twake</div>
</div>
<p class="lc-desc">All-in-one collaboration platform with messaging, tasks, and documents. Open-source alternative to Microsoft Teams.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://twake.app/en/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">BigBlueButton</div>
</div>
<p class="lc-desc">Virtual classroom software for online learning. Built-in screen sharing, whiteboard, breakout rooms, and recording.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://bigbluebutton.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">MiroTalk SFU</div>
</div>
<p class="lc-desc">Free WebRTC video calls with screen sharing and messaging. Privacy-focused with no registration required.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://sfu.mirotalk.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="COMMS">
<div class="lc-left" style="background: var(--neon-green);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-green); border-color: var(--neon-green);">COMMS</span>
<div class="lc-name">Briefing</div>
</div>
<p class="lc-desc">Simple, secure, anonymous video chat. No account, no tracking, ephemeral rooms for private conversations.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://brie.fi/ng" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Metabase</div>
</div>
<p class="lc-desc">Business intelligence tool that lets anyone query data and build dashboards. No SQL required for basic queries.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.metabase.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Redash</div>
</div>
<p class="lc-desc">Connect and query your data sources, visualize results, and share insights. SQL-based data visualization platform.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://redash.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Matomo</div>
</div>
<p class="lc-desc">Ethical web analytics platform respecting user privacy. Full data ownership, GDPR compliant Google Analytics alternative.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://matomo.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Plane</div>
</div>
<p class="lc-desc">Open-source project management tool. Issue tracking, sprints, and cycles with a clean, modern interface.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://plane.so/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Focalboard</div>
</div>
<p class="lc-desc">Open-source alternative to Trello and Notion. Organize tasks with kanban boards, tables, and calendar views.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.focalboard.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">ToolJet</div>
</div>
<p class="lc-desc">Low-code platform to build internal tools. Connect databases, APIs, and build UIs quickly with drag-and-drop.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.tooljet.ai/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Firefly III</div>
</div>
<p class="lc-desc">Self-hosted personal finance manager. Track expenses, budgets, and bills with beautiful charts and reports.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.firefly-iii.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="SECURITY">
<div class="lc-left" style="background: var(--fire-coral);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-coral); border-color: var(--fire-coral);">SECURITY</span>
<div class="lc-name">Vault</div>
</div>
<p class="lc-desc">Secure secrets management and data protection. Encrypt data, manage access, and provide auditing for sensitive information.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://developer.hashicorp.com/vault" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="SECURITY">
<div class="lc-left" style="background: var(--fire-coral);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-coral); border-color: var(--fire-coral);">SECURITY</span>
<div class="lc-name">Keycloak</div>
</div>
<p class="lc-desc">Open-source identity and access management. SSO, social login, user federation, and fine-grained authorization.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.keycloak.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="SECURITY">
<div class="lc-left" style="background: var(--fire-coral);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-coral); border-color: var(--fire-coral);">SECURITY</span>
<div class="lc-name">ZITADEL</div>
</div>
<p class="lc-desc">Cloud-native identity platform combining best of Auth0 and Keycloak. Built for modern applications with focus on security.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://zitadel.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="SECURITY">
<div class="lc-left" style="background: var(--fire-coral);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-coral); border-color: var(--fire-coral);">SECURITY</span>
<div class="lc-name">KeePassXC</div>
</div>
<p class="lc-desc">Cross-platform password manager. Secure local storage with strong encryption, auto-type, and browser integration.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://keepassxc.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="SECURITY">
<div class="lc-left" style="background: var(--fire-coral);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-coral); border-color: var(--fire-coral);">SECURITY</span>
<div class="lc-name">Cryptomator</div>
</div>
<p class="lc-desc">Client-side encryption for cloud storage. Transparent encryption for Dropbox, Google Drive, and other cloud services.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://cryptomator.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Nextcloud</div>
</div>
<p class="lc-desc">Self-hosted file sync and share platform. Collaboration suite with calendar, contacts, mail, and extensive apps.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://nextcloud.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">ownCloud</div>
</div>
<p class="lc-desc">Enterprise file sync and share platform. Secure collaboration with granular permissions and compliance features.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://owncloud.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Seafile</div>
</div>
<p class="lc-desc">High-performance file syncing and sharing. Block-level sync, encryption, and efficient handling of large files.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.seafile.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Typesense</div>
</div>
<p class="lc-desc">Fast, typo-tolerant search engine. Open-source alternative to Algolia with instant search and simple setup.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://typesense.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">OpenSearch</div>
</div>
<p class="lc-desc">Community-driven search and analytics suite derived from Elasticsearch. Distributed, scalable, and Apache 2.0 licensed.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://opensearch.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">NocoDB</div>
</div>
<p class="lc-desc">Turn databases into smart spreadsheets. Open-source Airtable alternative with API generation and collaboration features.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.nocodb.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">Label Studio</div>
</div>
<p class="lc-desc">Data labeling platform for machine learning. Annotate images, text, audio, and video with configurable interfaces.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://labelstud.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">TDengine</div>
</div>
<p class="lc-desc">High-performance time-series database designed for IoT, Industrial IoT, and IT infrastructure monitoring.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://tdengine.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">Z.ai Chat</div>
</div>
<p class="lc-desc">Free AI chat powered by GLM-4.6 and GLM-4.5 models. Advanced language model with multilingual capabilities.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://chat.z.ai/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">DeepSeek</div>
</div>
<p class="lc-desc">AI assistant powered by DeepSeek models. Strong reasoning capabilities for coding, analysis, and conversation.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://chat.deepseek.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">T3 Chat</div>
</div>
<p class="lc-desc">Chat interface for testing and exploring T3 stack applications. Developer-focused AI interaction tool.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://t3.chat/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">Lemmy</div>
</div>
<p class="lc-desc">Federated link aggregator and forum. Open-source Reddit alternative that's part of the Fediverse.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://join-lemmy.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">PeerTube</div>
</div>
<p class="lc-desc">Decentralized video hosting network. Federation allows instances to follow each other, creating a federated YouTube alternative.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://joinpeertube.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">LBRY</div>
</div>
<p class="lc-desc">Blockchain-based content sharing platform. Censorship-resistant publishing with cryptocurrency rewards for creators.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://lbry.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">Forem</div>
</div>
<p class="lc-desc">Platform for building communities. Powers DEV and other niche communities with customizable features.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://forem.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">AVideo</div>
</div>
<p class="lc-desc">Open-source video platform for building YouTube-like sites. Live streaming, VOD, and monetization features.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://avideo.tube/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">NetBird</div>
</div>
<p class="lc-desc">Open-source zero trust networking. WireGuard-based mesh VPN with centralized management and no complex configs.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://netbird.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">rrweb</div>
</div>
<p class="lc-desc">Record and replay web sessions. Open-source session replay library for debugging and analytics.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.rrweb.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Mautic</div>
</div>
<p class="lc-desc">Open-source marketing automation platform. Email campaigns, landing pages, forms, and lead scoring.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://mautic.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Dub</div>
</div>
<p class="lc-desc">Open-source link management for modern marketing teams. Branded short links with analytics and API.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://dub.co/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Ant Media Server</div>
</div>
<p class="lc-desc">Scalable streaming platform supporting WebRTC, RTMP, HLS. Ultra-low latency streaming for broadcasting.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://antmedia.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="MEDIA">
<div class="lc-left" style="background: var(--neon-teal);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--neon-teal); border-color: var(--neon-teal);">MEDIA</span>
<div class="lc-name">Invidious</div>
</div>
<p class="lc-desc">Alternative YouTube frontend focused on privacy. No ads, no tracking, lightweight interface with subscriptions.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://invidious.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="SECURITY">
<div class="lc-left" style="background: var(--fire-coral);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-coral); border-color: var(--fire-coral);">SECURITY</span>
<div class="lc-name">ProjectDiscovery</div>
</div>
<p class="lc-desc">Suite of security tools for vulnerability scanning and reconnaissance. Nuclei, httpx, subfinder for security research.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://docs.projectdiscovery.io/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">ONLYOFFICE</div>
</div>
<p class="lc-desc">Office suite with document, spreadsheet, and presentation editors. Strong MS Office compatibility and collaboration.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.onlyoffice.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="KNOWLEDGE">
<div class="lc-left" style="background: var(--text-main);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--text-main); border-color: var(--text-main);">KNOWLEDGE</span>
<div class="lc-name">Anki</div>
</div>
<p class="lc-desc">Powerful flashcard program using spaced repetition. Proven effective for learning languages, medicine, and more.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://apps.ankiweb.net/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">7-Zip</div>
</div>
<p class="lc-desc">High compression ratio file archiver supporting 7z, ZIP, RAR, and many formats. Essential utility with better compression than most commercial tools.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.7-zip.org/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="DEV TOOLS">
<div class="lc-left" style="background: var(--toucan);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--toucan); border-color: var(--toucan);">DEV TOOLS</span>
<div class="lc-name">ShareX</div>
</div>
<p class="lc-desc">Feature-rich screenshot and screen recording tool. Automatic upload to dozens of services with annotation tools.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://getsharex.com/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Uptime Kuma</div>
</div>
<p class="lc-desc">Self-hosted monitoring tool with beautiful interface. Monitor HTTP(s), TCP, ping with status pages and notifications.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://uptime.kuma.pet/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">Organic Maps</div>
</div>
<p class="lc-desc">Privacy-focused offline maps for travelers and cyclists. Based on OpenStreetMap with no tracking or ads.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://organicmaps.app/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="INFRA">
<div class="lc-left" style="background: var(--fire-amber);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--fire-amber); border-color: var(--fire-amber);">INFRA</span>
<div class="lc-name">MeshCentral</div>
</div>
<p class="lc-desc">Remote management and monitoring platform. Full remote desktop, terminal, file transfer for IT administration.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://www.meshcommander.com/meshcentral2" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
<div class="list-card" data-category="AI & COMMUNITY">
<div class="lc-left" style="background: var(--phosphor);"></div>
<div class="lc-body">
<div class="lc-header">
<span class="lc-tag" style="color: var(--phosphor); border-color: var(--phosphor);">AI & COMMUNITY</span>
<div class="lc-name">Open Source Alternative</div>
</div>
<p class="lc-desc">Discover open-source alternatives to popular proprietary software. Curated directory with comparisons and reviews.</p>
</div>
<div class="lc-visit-wrap">
<a href="https://opensourcealternative.to/" class="lc-visit-btn" target="_blank">VISIT ↗</a>
</div>
</div>
</main>
</div>
</div>
<script>
/* === EMBER PARTICLE SYSTEM (Night Sky Adaptation) === */
const canvas = document.getElementById('embers');
const ctx = canvas.getContext('2d');
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
resize(); window.addEventListener('resize', resize);
const EMBER_COUNT = 60;
const embers = [];
const mouse = { x: -9999, y: -9999 };
window.addEventListener('mousemove', ev => { mouse.x = ev.clientX; mouse.y = ev.clientY; });
const ZONES = [
{ r: 40, strength: 0.012 },
{ r: 90, strength: 0.004 },
{ r: 130, strength: 0.001 },
];
function randomEmber() {
const COLORS = [{r:232,g:148,b:58},{r:212,g:101,b:74},{r:255,g:207,b:64},{r:197,g:88,b:217}];
const col = COLORS[Math.floor(Math.random()*COLORS.length)];
return {
x: Math.random()*canvas.width, y: canvas.height+10,
vx: (Math.random()-0.5)*0.8, vy: -(0.4+Math.random()*1.2),
life: 0, maxLife: 200+Math.random()*300, size: 1+Math.random()*2,
r: col.r, g: col.g, b: col.b, wobble: Math.random()*Math.PI*2,
wobbleSpeed: 0.02+Math.random()*0.02, trail: []
};
}
for(let i=0;i<EMBER_COUNT;i++){ const e=randomEmber(); e.y=Math.random()*canvas.height; e.life=Math.random()*e.maxLife; embers.push(e); }
function drawEmber(e) {
const progress = e.life/e.maxLife;
const alpha = progress < 0.1 ? progress/0.1 : progress > 0.8 ? (1-progress)/0.2 : 1;
if(alpha <= 0) return;
const gAlpha = alpha*0.38;
const glow = ctx.createRadialGradient(e.x, e.y, 0, e.x, e.y, e.size*5);
glow.addColorStop(0, `rgba(${e.r},${e.g},${e.b},${gAlpha})`);
glow.addColorStop(1, `rgba(${e.r},${e.g},${e.b},0)`);
ctx.beginPath(); ctx.arc(e.x,e.y,e.size*5,0,Math.PI*2); ctx.fillStyle=glow; ctx.fill();
ctx.fillStyle = `rgba(${e.r},${e.g},${e.b},${Math.min(0.65, gAlpha*1.4)})`;
const ps = Math.max(1, Math.round(e.size));
ctx.fillRect(Math.round(e.x)-ps, Math.round(e.y)-ps, ps*2, ps*2);
for(let t=0; t<e.trail.length; t++) {
const pt = e.trail[t];
const ta = (t/e.trail.length)*gAlpha*0.3;
ctx.fillStyle = `rgba(${e.r},${e.g},${e.b},${ta})`;
ctx.fillRect(Math.round(pt.x), Math.round(pt.y), 2, 2);
}
}
function tick() {
ctx.clearRect(0,0,canvas.width,canvas.height);
for(const e of embers) {
if(e.life % 6 === 0) {
e.trail.push({ x: e.x, y: e.y });
if(e.trail.length > 5) e.trail.shift();
}
const dx = mouse.x - e.x, dy = mouse.y - e.y, d = Math.sqrt(dx*dx+dy*dy);
if(d < ZONES[2].r) {
let s = 0;
for(const z of ZONES) if(d < z.r) { s = z.strength; break; }
e.vx += (dx/d)*s; e.vy += (dy/d)*s;
e.vx *= 0.98; e.vy *= 0.98;
}
e.wobble += e.wobbleSpeed;
e.x += e.vx + Math.sin(e.wobble)*0.3;
e.y += e.vy;
e.life++;
if(e.life >= e.maxLife || e.y < -20) Object.assign(e, randomEmber());
drawEmber(e);
}
requestAnimationFrame(tick);
}
tick();
// Category filtering
document.addEventListener('DOMContentLoaded', () => {
const catItems = document.querySelectorAll('.cat-item');
const listCards = document.querySelectorAll('.list-card');
catItems.forEach(item => {
item.addEventListener('click', () => {
catItems.forEach(c => c.classList.remove('active'));
item.classList.add('active');
const filter = item.dataset.filter;
listCards.forEach(card => {
card.style.display = (filter === 'ALL' || card.dataset.category === filter) ? '' : 'none';
});
});
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink