jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
542213178233261403b587d4177db7e9a50d5ab4
singular-particular-space/DumperCan/jl_foss_tools_restyled.html
JL Kruger 5422131782 Initial commit — Singular Particular Space v1 
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>
2026-03-27 12:09:22 +02:00

785 lines
44 KiB
HTML
Executable File
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 Tools Collection</title>
<link href="https://fonts.googleapis.com/css2?family=Notable:wght@400&family=Special+Elite:wght@400&family=Noto+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--color-bg-primary: #0B0B0B;
--color-h1: #EB7513;
--color-h2: #F2C62A;
--color-h3: #5E9A0E;
--color-h4: #A52C16;
--color-text: #F2F2BC;
--color-link-primary: #F2C62A;
--color-link-secondary: #EB7513;
--color-btn-accent: #5E9A0E;
--color-border-1: #69190D;
--color-border-2: #A52C16;
--color-border-3: #EB7513;
--font-h1-h2: 'Notable', sans-serif;
--font-h3-h6: 'Special Elite', serif;
--font-body: 'Noto Sans', sans-serif;
--gradient-card-border: linear-gradient(to bottom,
#0B0B0B, #442204, #69190D, #A52C16, #EB7513, #F2C62A, #F2F2BC);
--gradient-btn-primary: linear-gradient(to bottom,
#69190D, #A52C16, #EB7513, #F2C62A);
--gradient-btn-secondary: linear-gradient(to bottom,
#073720, #0E4D0E, #5E9A0E, #F2C62A);
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
--glow-primary: 0 0 20px rgba(242, 242, 188, 0.4);
--glow-secondary: 0 0 20px rgba(235, 117, 19, 0.4);
--glow-accent: 0 0 20px rgba(94, 154, 14, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg-primary);
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
margin-bottom: var(--space-md);
}
h1, h2 {
font-family: var(--font-h1-h2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
h3, h4, h5, h6 {
font-family: var(--font-h3-h6);
text-transform: uppercase;
letter-spacing: 0.03em;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
color: var(--color-h1);
text-align: center;
margin-bottom: var(--space-lg);
}
h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--color-h2);
margin-bottom: var(--space-xl);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-md);
}
@media (min-width: 768px) {
.container {
padding: 0 var(--space-lg);
}
}
/* === Header === */
.header {
padding: var(--space-2xl) 0;
border-bottom: 3px solid var(--color-h3);
background: linear-gradient(135deg, rgba(94, 154, 14, 0.05) 0%, transparent 100%);
}
.subtitle {
text-align: center;
font-size: clamp(0.95rem, 2vw, 1.2rem);
color: var(--color-link-primary);
margin-bottom: var(--space-xl);
font-weight: 300;
}
/* === Categories Container === */
#categories-container {
padding: var(--space-2xl) 0;
}
/* === Category Cards === */
.category-card {
position: relative;
background-color: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-2xl);
transition: all var(--transition-base);
}
.category-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
padding: 4px;
background: var(--gradient-card-border);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.6;
transition: opacity var(--transition-base);
}
.category-card:hover {
transform: translateY(-2px);
}
.category-card:hover::before {
opacity: 1;
filter: drop-shadow(var(--glow-primary));
}
.category-card:nth-child(even)::before {
background: linear-gradient(to bottom,
#F2F2BC, #5E9A0E, #0E4D0E, #073720, #0B0B0B);
}
.category-title {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
color: var(--color-h2);
margin-bottom: var(--space-lg);
position: relative;
z-index: 1;
}
/* === Links Grid === */
.links-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-md);
position: relative;
z-index: 1;
}
/* === Link Buttons === */
.link-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-md) var(--space-lg);
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
color: var(--color-text);
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.link-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-md);
padding: 2px;
background: var(--gradient-btn-secondary);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: all var(--transition-base);
}
.link-button:hover {
background: var(--color-btn-accent);
box-shadow: var(--glow-accent);
transform: translateY(-2px);
}
.link-button:hover::before {
opacity: 0.8;
}
.link-button:focus-visible {
outline: 2px solid var(--color-link-primary);
outline-offset: 2px;
}
/* === Lightbox === */
.lightbox-backdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.85);
z-index: 400;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-lg);
backdrop-filter: blur(4px);
}
.lightbox-backdrop.active {
display: flex;
}
.lightbox {
position: relative;
background-color: var(--color-bg-primary);
border-radius: var(--radius-lg);
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
z-index: 500;
}
.lightbox::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
padding: 4px;
background: var(--gradient-card-border);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
filter: drop-shadow(var(--glow-primary));
}
.lightbox-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg);
border-bottom: 2px solid var(--color-border-1);
position: relative;
z-index: 1;
}
.lightbox-title {
color: var(--color-h2);
font-family: var(--font-h1-h2);
font-size: 1.5rem;
text-transform: uppercase;
margin: 0;
flex: 1;
}
.lightbox-url {
color: var(--color-link-primary);
font-size: 0.8rem;
opacity: 0.8;
word-break: break-all;
margin-top: var(--space-sm);
display: block;
}
.lightbox-close {
background: none;
border: none;
color: var(--color-text);
font-size: 1.8rem;
cursor: pointer;
padding: var(--space-xs);
transition: all var(--transition-fast);
line-height: 1;
margin-left: var(--space-lg);
}
.lightbox-close:hover {
color: var(--color-link-primary);
text-shadow: var(--glow-primary);
transform: rotate(90deg);
}
.lightbox-body {
padding: var(--space-lg);
position: relative;
z-index: 1;
}
.lightbox-category {
display: inline-block;
background: rgba(94, 154, 14, 0.2);
color: var(--color-h3);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-xl);
font-size: 0.8rem;
margin-bottom: var(--space-md);
border: 1px solid var(--color-border-3);
}
.lightbox-description {
color: var(--color-text);
line-height: 1.8;
margin-bottom: var(--space-lg);
font-size: 1rem;
}
.lightbox-footer {
display: flex;
gap: var(--space-md);
justify-content: flex-end;
padding: var(--space-lg);
border-top: 2px solid var(--color-border-1);
position: relative;
z-index: 1;
flex-wrap: wrap;
}
/* === Lightbox Buttons === */
.lightbox-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
overflow: hidden;
}
.lightbox-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-md);
padding: 2px;
background: var(--gradient-btn-primary);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
transition: all var(--transition-base);
}
.lightbox-button {
color: var(--color-text);
}
.lightbox-button:hover {
background: var(--color-btn-accent);
box-shadow: var(--glow-accent);
transform: translateY(-2px);
}
.lightbox-button:focus-visible {
outline: 2px solid var(--color-link-primary);
outline-offset: 2px;
}
/* === Footer === */
footer {
padding: var(--space-xl) 0;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(242, 242, 188, 0.1);
text-align: center;
}
footer p {
color: var(--color-text);
font-size: 0.9rem;
margin-bottom: var(--space-sm);
}
/* === Responsive === */
@media (max-width: 768px) {
.links-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-sm);
}
.lightbox {
max-height: 95vh;
}
.lightbox-footer {
flex-direction: column;
}
.lightbox-button {
width: 100%;
}
}
/* === Scrollbar === */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--color-h3), var(--color-link-primary));
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--color-link-primary), var(--color-h1));
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1>FOSS Tools Galaxy</h1>
<p class="subtitle">Your complete curated collection of 100+ open-source tools</p>
</div>
</div>
<div class="container">
<div id="categories-container"></div>
</div>
<div class="lightbox-backdrop" id="lightbox">
<div class="lightbox">
<div id="lightbox-inner"></div>
</div>
</div>
<footer>
<div class="container">
<p>FOSS Tools Collection | Open-Source Software Discovery</p>
<p style="font-size: 0.8rem; opacity: 0.7;">Restyled with JL Design System</p>
</div>
</footer>
<script>
const toolMetadata = {
"https://www.gimp.org/": { title: "GIMP", description: "Powerful raster graphics editor for photo retouching, image composition, and authoring. Cross-platform Photoshop alternative with layers, filters, and customizable brushes.", category: "Graphics" },
"https://krita.org/en/": { title: "Krita", description: "Professional digital painting application designed by artists. Features brush stabilizers, advanced layer management, and animation tools for concept art and illustrations.", category: "Digital Art" },
"https://inkscape.org/": { title: "Inkscape", description: "Professional vector graphics software for SVG files. Create logos, illustrations, diagrams with bezier tools, text manipulation, and precision object control.", category: "Vector Graphics" },
"https://www.darktable.org/": { title: "darktable", description: "Photography workflow application and RAW developer. Manage digital negatives in a database with non-destructive editing tools.", category: "Photography" },
"https://www.blender.org/": { title: "Blender", description: "Complete 3D creation suite for modeling, rigging, animation, simulation, rendering, compositing, and motion tracking. Used by studios worldwide.", category: "3D Graphics" },
"https://www.freecad.org/": { title: "FreeCAD", description: "Parametric 3D CAD modeler for real-life object design. Modular architecture for mechanical engineering, architecture, and product design.", category: "CAD" },
"https://www.drawio.com/": { title: "draw.io", description: "Free diagram software for flowcharts, process diagrams, org charts, UML, and network diagrams. Works offline with cloud storage integration.", category: "Diagramming" },
"https://www.shutterencoder.com/en/": { title: "Shutter Encoder", description: "Professional video/audio converter with extensive codec support, batch processing, custom encoding settings, and advanced filters.", category: "Video" },
"https://ffmpeg.org/": { title: "FFmpeg", description: "Essential command-line multimedia framework for recording, converting, and streaming. Industry-standard codec library for batch processing.", category: "Multimedia" },
"https://handbrake.fr/": { title: "HandBrake", description: "User-friendly video transcoder with device presets. Converts video from nearly any format with quality and size optimization.", category: "Video" },
"https://kdenlive.org/": { title: "Kdenlive", description: "Powerful multi-track video editor with effects, transitions, and color correction. Supports proxy editing for smooth high-res playback.", category: "Video Editing" },
"https://www.shotcut.org/": { title: "Shotcut", description: "Cross-platform video editor with native timeline, wide format support, and 4K handling. Includes color grading and audio filters.", category: "Video Editing" },
"https://obsproject.com/": { title: "OBS Studio", description: "Industry-standard software for video recording and live streaming. Real-time capture with scene composition and mixing. Powers countless streams.", category: "Streaming" },
"https://clipgrab.org/": { title: "ClipGrab", description: "Simple downloader and converter for YouTube, Vimeo, and other video sites. Various formats and quality options for offline viewing.", category: "Utilities" },
"https://kodi.tv/": { title: "Kodi", description: "Award-winning media center organizing video, music, and photos. Extensible through add-ons, perfect for home theater PCs.", category: "Media Center" },
"https://mpv.io/": { title: "mpv", description: "Minimalist keyboard-driven media player with high-quality output. Supports virtually all formats, hardware decoding, and scripting.", category: "Media Player" },
"https://jellyfin.org/": { title: "Jellyfin", description: "Free media server for hosting and streaming personal collections. No premium licenses or tracking - completely free Plex alternative.", category: "Media Server" },
"https://freetubeapp.io/": { title: "FreeTube", description: "Private desktop YouTube client. Watch videos without ads or tracking, subscribe locally, export subscriptions. No Google account needed.", category: "Privacy" },
"https://tenacityaudio.org/": { title: "Tenacity", description: "Modern Audacity fork focused on features and community. Multi-track audio editor with effects, analysis tools, and plugin support.", category: "Audio" },
"https://www.audacityteam.org/": { title: "Audacity", description: "Legendary multi-track audio editor and recorder. Used by millions for podcasting, music production, and restoration.", category: "Audio" },
"https://lmms.io/": { title: "LMMS", description: "Complete digital audio workstation for music production. Includes synthesizers, samples, effects, and MIDI support.", category: "Music" },
"https://mixxx.org/": { title: "Mixxx", description: "Professional DJ software with 4 decks, powerful mixing engine, effects, and hardware controller support for live performances.", category: "DJ Software" },
"https://musescore.org/en": { title: "MuseScore", description: "Professional music notation software for composing and editing sheet music. WYSIWYG interface with playback and export options.", category: "Music Notation" },
"https://www.musehub.com/": { title: "MuseHub", description: "Central hub for MuseScore plugins, sounds, and samples. Extends MuseScore with professional sound libraries and tools.", category: "Music" },
"https://docusaurus.io/": { title: "Docusaurus", description: "Modern static website generator for technical documentation. Built with React, featuring versioning, search, and i18n out of the box.", category: "Documentation" },
"https://vuepress.vuejs.org/": { title: "VuePress", description: "Vue-powered static site generator focused on documentation. Markdown-centered with built-in search and easy theming.", category: "Documentation" },
"https://www.bookstackapp.com/": { title: "BookStack", description: "Self-hosted wiki organizing content into books, chapters, and pages. Simple interface with powerful search and markdown support.", category: "Wiki" },
"https://js.wiki/": { title: "Wiki.js", description: "Powerful modern wiki software built with Node.js. Clean interface, markdown editor, access control, and multiple storage backends.", category: "Wiki" },
"https://vuejs.org/": { title: "Vue.js", description: "Progressive JavaScript framework for building UIs. Easy to learn, performant, versatile - scales from library to full framework.", category: "Framework" },
"https://create.t3.gg/": { title: "Create T3 App", description: "Opinionated full-stack Next.js starter with TypeScript, tRPC, Tailwind, and Prisma. Best practices for type-safe rapid development.", category: "Development" },
"https://pandoc.org/": { title: "Pandoc", description: "Universal document converter for dozens of formats including Markdown, HTML, LaTeX, and Word. Essential for documentation workflows.", category: "Converter" },
"https://miktex.org/": { title: "MiKTeX", description: "Complete TeX/LaTeX typesetting system. Automatic package installation and integrated editor for professional scientific documents.", category: "Publishing" },
"https://logseq.com/": { title: "Logseq", description: "Privacy-first knowledge base on local markdown files. Combines outlining, bidirectional linking, and graph visualization for PKM.", category: "PKM" },
"https://triliumnotes.org/": { title: "Trilium Notes", description: "Hierarchical note-taking for personal knowledge bases. Features scripting, relations, and advanced note organization.", category: "PKM" },
"https://etherpad.org/": { title: "Etherpad", description: "Real-time collaborative document editing in browser. Color-coded authorship, chat, and revision history for remote teams.", category: "Collaboration" },
"https://www.getpublii.com/": { title: "Publii", description: "Desktop app for static websites with CMS interface. One-click sync to hosting services, no server or database required.", category: "Static CMS" },
"https://strapi.io/": { title: "Strapi", description: "Leading open-source headless CMS built with JavaScript. Fully customizable and developer-friendly for modern APIs.", category: "Headless CMS" },
"https://vendure.io/": { title: "Vendure", description: "Open-source headless commerce platform built with Node.js and TypeScript. Modern architecture for custom e-commerce solutions.", category: "E-Commerce" },
"https://www.nopcommerce.com/en": { title: "nopCommerce", description: "Free ASP.NET Core shopping cart platform. Full-featured e-commerce solution with extensive plugin ecosystem.", category: "E-Commerce" },
"https://www.opencart.com/": { title: "OpenCart", description: "PHP-based online store management system. Easy to use with thousands of modules and themes available.", category: "E-Commerce" },
"https://prestashop.com/": { title: "PrestaShop", description: "Popular e-commerce solution powering 300,000+ stores worldwide. Feature-rich with extensive marketplace.", category: "E-Commerce" },
"https://spreecommerce.org/": { title: "Spree Commerce", description: "Modular Ruby on Rails e-commerce platform. API-first design for headless commerce implementations.", category: "E-Commerce" },
"https://www.rocket.chat/": { title: "Rocket.Chat", description: "Open-source team communication platform. Self-hosted alternative to Slack with end-to-end encryption and customization.", category: "Chat" },
"https://zulip.com/": { title: "Zulip", description: "Threaded team chat for organized conversations. Combines email threading with real-time chat for productive async communication.", category: "Chat" },
"https://element.io/": { title: "Element", description: "Secure messaging and collaboration built on Matrix protocol. End-to-end encrypted with federation support.", category: "Chat" },
"https://twake.app/en/": { title: "Twake", description: "All-in-one collaboration platform with messaging, tasks, and documents. Open-source alternative to Microsoft Teams.", category: "Collaboration" },
"https://bigbluebutton.org/": { title: "BigBlueButton", description: "Virtual classroom software for online learning. Built-in screen sharing, whiteboard, breakout rooms, and recording.", category: "Video Conference" },
"https://sfu.mirotalk.com/": { title: "MiroTalk SFU", description: "Free WebRTC video calls with screen sharing and messaging. Privacy-focused with no registration required.", category: "Video Conference" },
"https://brie.fi/ng": { title: "Briefing", description: "Simple, secure, anonymous video chat. No account, no tracking, ephemeral rooms for private conversations.", category: "Video Conference" },
"https://www.metabase.com/": { title: "Metabase", description: "Business intelligence tool that lets anyone query data and build dashboards. No SQL required for basic queries.", category: "Business Intelligence" },
"https://redash.io/": { title: "Redash", description: "Connect and query your data sources, visualize results, and share insights. SQL-based data visualization platform.", category: "Business Intelligence" },
"https://matomo.org/": { title: "Matomo", description: "Ethical web analytics platform respecting user privacy. Full data ownership, GDPR compliant Google Analytics alternative.", category: "Analytics" },
"https://plane.so/": { title: "Plane", description: "Open-source project management tool. Issue tracking, sprints, and cycles with a clean, modern interface.", category: "Project Management" },
"https://www.focalboard.com/": { title: "Focalboard", description: "Open-source alternative to Trello and Notion. Organize tasks with kanban boards, tables, and calendar views.", category: "Project Management" },
"https://www.tooljet.ai/": { title: "ToolJet", description: "Low-code platform to build internal tools. Connect databases, APIs, and build UIs quickly with drag-and-drop.", category: "Low-Code" },
"https://www.firefly-iii.org/": { title: "Firefly III", description: "Self-hosted personal finance manager. Track expenses, budgets, and bills with beautiful charts and reports.", category: "Finance" },
"https://developer.hashicorp.com/vault": { title: "Vault", description: "Secure secrets management and data protection. Encrypt data, manage access, and provide auditing for sensitive information.", category: "Security" },
"https://www.keycloak.org/": { title: "Keycloak", description: "Open-source identity and access management. SSO, social login, user federation, and fine-grained authorization.", category: "Authentication" },
"https://zitadel.com/": { title: "ZITADEL", description: "Cloud-native identity platform combining best of Auth0 and Keycloak. Built for modern applications with focus on security.", category: "Authentication" },
"https://keepassxc.org/": { title: "KeePassXC", description: "Cross-platform password manager. Secure local storage with strong encryption, auto-type, and browser integration.", category: "Password Manager" },
"https://cryptomator.org/": { title: "Cryptomator", description: "Client-side encryption for cloud storage. Transparent encryption for Dropbox, Google Drive, and other cloud services.", category: "Encryption" },
"https://nextcloud.com/": { title: "Nextcloud", description: "Self-hosted file sync and share platform. Collaboration suite with calendar, contacts, mail, and extensive apps.", category: "File Sync" },
"https://owncloud.com/": { title: "ownCloud", description: "Enterprise file sync and share platform. Secure collaboration with granular permissions and compliance features.", category: "File Sync" },
"https://www.seafile.com/": { title: "Seafile", description: "High-performance file syncing and sharing. Block-level sync, encryption, and efficient handling of large files.", category: "File Sync" },
"https://typesense.org/": { title: "Typesense", description: "Fast, typo-tolerant search engine. Open-source alternative to Algolia with instant search and simple setup.", category: "Search" },
"https://opensearch.org/": { title: "OpenSearch", description: "Community-driven search and analytics suite derived from Elasticsearch. Distributed, scalable, and Apache 2.0 licensed.", category: "Search" },
"https://www.nocodb.com/": { title: "NocoDB", description: "Turn databases into smart spreadsheets. Open-source Airtable alternative with API generation and collaboration features.", category: "Database" },
"https://labelstud.io/": { title: "Label Studio", description: "Data labeling platform for machine learning. Annotate images, text, audio, and video with configurable interfaces.", category: "ML Tools" },
"https://tdengine.com/": { title: "TDengine", description: "High-performance time-series database designed for IoT, Industrial IoT, and IT infrastructure monitoring.", category: "Database" },
"https://chat.z.ai/": { title: "Z.ai Chat", description: "Free AI chat powered by GLM-4.6 and GLM-4.5 models. Advanced language model with multilingual capabilities.", category: "AI Chat" },
"https://chat.deepseek.com/": { title: "DeepSeek", description: "AI assistant powered by DeepSeek models. Strong reasoning capabilities for coding, analysis, and conversation.", category: "AI Chat" },
"https://t3.chat/": { title: "T3 Chat", description: "Chat interface for testing and exploring T3 stack applications. Developer-focused AI interaction tool.", category: "AI Chat" },
"https://join-lemmy.org/": { title: "Lemmy", description: "Federated link aggregator and forum. Open-source Reddit alternative that's part of the Fediverse.", category: "Social" },
"https://joinpeertube.org/": { title: "PeerTube", description: "Decentralized video hosting network. Federation allows instances to follow each other, creating a federated YouTube alternative.", category: "Video Platform" },
"https://lbry.com/": { title: "LBRY", description: "Blockchain-based content sharing platform. Censorship-resistant publishing with cryptocurrency rewards for creators.", category: "Content Platform" },
"https://forem.com/": { title: "Forem", description: "Platform for building communities. Powers DEV and other niche communities with customizable features.", category: "Community" },
"https://avideo.tube/": { title: "AVideo", description: "Open-source video platform for building YouTube-like sites. Live streaming, VOD, and monetization features.", category: "Video Platform" },
"https://netbird.io/": { title: "NetBird", description: "Open-source zero trust networking. WireGuard-based mesh VPN with centralized management and no complex configs.", category: "Networking" },
"https://www.rrweb.io/": { title: "rrweb", description: "Record and replay web sessions. Open-source session replay library for debugging and analytics.", category: "Analytics" },
"https://mautic.org/": { title: "Mautic", description: "Open-source marketing automation platform. Email campaigns, landing pages, forms, and lead scoring.", category: "Marketing" },
"https://dub.co/": { title: "Dub", description: "Open-source link management for modern marketing teams. Branded short links with analytics and API.", category: "Marketing" },
"https://antmedia.io/": { title: "Ant Media Server", description: "Scalable streaming platform supporting WebRTC, RTMP, HLS. Ultra-low latency streaming for broadcasting.", category: "Streaming" },
"https://invidious.io/": { title: "Invidious", description: "Alternative YouTube frontend focused on privacy. No ads, no tracking, lightweight interface with subscriptions.", category: "Privacy" },
"https://docs.projectdiscovery.io/": { title: "ProjectDiscovery", description: "Suite of security tools for vulnerability scanning and reconnaissance. Nuclei, httpx, subfinder for security research.", category: "Security" },
"https://www.onlyoffice.com/": { title: "ONLYOFFICE", description: "Office suite with document, spreadsheet, and presentation editors. Strong MS Office compatibility and collaboration.", category: "Office Suite" },
"https://apps.ankiweb.net/": { title: "Anki", description: "Powerful flashcard program using spaced repetition. Proven effective for learning languages, medicine, and more.", category: "Education" },
"https://www.7-zip.org/": { title: "7-Zip", description: "High compression ratio file archiver supporting 7z, ZIP, RAR, and many formats. Essential utility with better compression than most commercial tools.", category: "Utilities" },
"https://getsharex.com/": { title: "ShareX", description: "Feature-rich screenshot and screen recording tool. Automatic upload to dozens of services with annotation tools.", category: "Utilities" },
"https://uptime.kuma.pet/": { title: "Uptime Kuma", description: "Self-hosted monitoring tool with beautiful interface. Monitor HTTP(s), TCP, ping with status pages and notifications.", category: "Monitoring" },
"https://organicmaps.app/": { title: "Organic Maps", description: "Privacy-focused offline maps for travelers and cyclists. Based on OpenStreetMap with no tracking or ads.", category: "Navigation" },
"https://www.meshcommander.com/meshcentral2": { title: "MeshCentral", description: "Remote management and monitoring platform. Full remote desktop, terminal, file transfer for IT administration.", category: "Remote Management" },
"https://opensourcealternative.to/": { title: "Open Source Alternative", description: "Discover open-source alternatives to popular proprietary software. Curated directory with comparisons and reviews.", category: "Directory" }
};
const categories = {
"Creative & Design": [
{ name: "GIMP", url: "https://www.gimp.org/" },
{ name: "Krita", url: "https://krita.org/en/" },
{ name: "Inkscape", url: "https://inkscape.org/" },
{ name: "darktable", url: "https://www.darktable.org/" },
{ name: "Blender", url: "https://www.blender.org/" },
{ name: "FreeCAD", url: "https://www.freecad.org/" },
{ name: "draw.io", url: "https://www.drawio.com/" }
],
"Video & Audio Production": [
{ name: "Shutter Encoder", url: "https://www.shutterencoder.com/en/" },
{ name: "FFmpeg", url: "https://ffmpeg.org/" },
{ name: "Handbrake", url: "https://handbrake.fr/" },
{ name: "Kdenlive", url: "https://kdenlive.org/" },
{ name: "Shotcut", url: "https://www.shotcut.org/" },
{ name: "OBS Studio", url: "https://obsproject.com/" },
{ name: "Tenacity", url: "https://tenacityaudio.org/" },
{ name: "Audacity", url: "https://www.audacityteam.org/" },
{ name: "LMMS", url: "https://lmms.io/" },
{ name: "Mixxx", url: "https://mixxx.org/" },
{ name: "MuseScore", url: "https://musescore.org/en" },
{ name: "MuseHub", url: "https://www.musehub.com/" }
],
"Media & Streaming": [
{ name: "Clipgrab", url: "https://clipgrab.org/" },
{ name: "Kodi", url: "https://kodi.tv/" },
{ name: "mpv", url: "https://mpv.io/" },
{ name: "Jellyfin", url: "https://jellyfin.org/" },
{ name: "FreeTube", url: "https://freetubeapp.io/" },
{ name: "Ant Media Server", url: "https://antmedia.io/" }
],
"Development & Documentation": [
{ name: "Docusaurus", url: "https://docusaurus.io/" },
{ name: "VuePress", url: "https://vuepress.vuejs.org/" },
{ name: "BookStack", url: "https://www.bookstackapp.com/" },
{ name: "Wiki.js", url: "https://js.wiki/" },
{ name: "Vue.js", url: "https://vuejs.org/" },
{ name: "Create T3 App", url: "https://create.t3.gg/" },
{ name: "Pandoc", url: "https://pandoc.org/" },
{ name: "MiKTeX", url: "https://miktex.org/" }
],
"Knowledge Management": [
{ name: "Logseq", url: "https://logseq.com/" },
{ name: "Trilium Notes", url: "https://triliumnotes.org/" },
{ name: "Etherpad", url: "https://etherpad.org/" }
],
"Web & CMS": [
{ name: "Publii", url: "https://www.getpublii.com/" },
{ name: "Strapi", url: "https://strapi.io/" }
],
"E-Commerce": [
{ name: "Vendure", url: "https://vendure.io/" },
{ name: "nopCommerce", url: "https://www.nopcommerce.com/en" },
{ name: "OpenCart", url: "https://www.opencart.com/" },
{ name: "PrestaShop", url: "https://prestashop.com/" },
{ name: "Spree Commerce", url: "https://spreecommerce.org/" }
],
"Communication & Collaboration": [
{ name: "Rocket.Chat", url: "https://www.rocket.chat/" },
{ name: "Zulip", url: "https://zulip.com/" },
{ name: "Element", url: "https://element.io/" },
{ name: "Twake", url: "https://twake.app/en/" },
{ name: "BigBlueButton", url: "https://bigbluebutton.org/" },
{ name: "MiroTalk", url: "https://sfu.mirotalk.com/" },
{ name: "Briefing", url: "https://brie.fi/ng" }
],
"Business & Analytics": [
{ name: "Metabase", url: "https://www.metabase.com/" },
{ name: "Redash", url: "https://redash.io/" },
{ name: "Matomo", url: "https://matomo.org/" },
{ name: "Plane", url: "https://plane.so/" },
{ name: "Focalboard", url: "https://www.focalboard.com/" },
{ name: "ToolJet", url: "https://www.tooljet.ai/" },
{ name: "Firefly III", url: "https://www.firefly-iii.org/" }
],
"Security & Authentication": [
{ name: "Vault", url: "https://developer.hashicorp.com/vault" },
{ name: "Keycloak", url: "https://www.keycloak.org/" },
{ name: "ZITADEL", url: "https://zitadel.com/" },
{ name: "KeePassXC", url: "https://keepassxc.org/" },
{ name: "Cryptomator", url: "https://cryptomator.org/" }
],
"File Storage & Sync": [
{ name: "Nextcloud", url: "https://nextcloud.com/" },
{ name: "ownCloud", url: "https://owncloud.com/" },
{ name: "Seafile", url: "https://www.seafile.com/" }
],
"Search & Data": [
{ name: "Typesense", url: "https://typesense.org/" },
{ name: "OpenSearch", url: "https://opensearch.org/" },
{ name: "NocoDB", url: "https://www.nocodb.com/" },
{ name: "Label Studio", url: "https://labelstud.io/" },
{ name: "TDengine", url: "https://tdengine.com/" }
],
"AI & Chat": [
{ name: "Z.ai Chat", url: "https://chat.z.ai/" },
{ name: "DeepSeek", url: "https://chat.deepseek.com/" },
{ name: "T3 Chat", url: "https://t3.chat/" }
],
"Social & Community": [
{ name: "Lemmy", url: "https://join-lemmy.org/" },
{ name: "PeerTube", url: "https://joinpeertube.org/" },
{ name: "LBRY", url: "https://lbry.com/" },
{ name: "Forem", url: "https://forem.com/" },
{ name: "AVideo", url: "https://avideo.tube/" }
],
"System & Utilities": [
{ name: "7-Zip", url: "https://www.7-zip.org/" },
{ name: "ShareX", url: "https://getsharex.com/" },
{ name: "Uptime Kuma", url: "https://uptime.kuma.pet/" },
{ name: "MeshCentral", url: "https://www.meshcommander.com/meshcentral2" },
{ name: "NetBird", url: "https://netbird.io/" }
],
"Privacy & Alternatives": [
{ name: "Invidious", url: "https://invidious.io/" },
{ name: "Organic Maps", url: "https://organicmaps.app/" }
],
"Other Tools": [
{ name: "rrweb", url: "https://www.rrweb.io/" },
{ name: "Mautic", url: "https://mautic.org/" },
{ name: "Dub", url: "https://dub.co/" },
{ name: "ProjectDiscovery", url: "https://docs.projectdiscovery.io/" },
{ name: "ONLYOFFICE", url: "https://www.onlyoffice.com/" },
{ name: "Anki", url: "https://apps.ankiweb.net/" },
{ name: "Open Source Alternative", url: "https://opensourcealternative.to/" }
]
};
const container = document.getElementById('categories-container');
const lightbox = document.getElementById('lightbox');
const lightboxInner = document.getElementById('lightbox-inner');
Object.entries(categories).forEach(([category, links]) => {
const card = document.createElement('div');
card.className = 'category-card';
const title = document.createElement('h2');
title.className = 'category-title';
title.textContent = category;
card.appendChild(title);
const grid = document.createElement('div');
grid.className = 'links-grid';
links.forEach(link => {
const button = document.createElement('button');
button.className = 'link-button';
button.textContent = link.name;
button.onclick = () => openLightbox(link.url, link.name);
grid.appendChild(button);
});
card.appendChild(grid);
container.appendChild(card);
});
function openLightbox(url, fallbackName) {
const metadata = toolMetadata[url] || {
title: fallbackName,
description: `Visit the official website to learn more about ${fallbackName}.`,
category: "Software"
};
lightbox.classList.add('active');
lightboxInner.innerHTML = `
<div class="lightbox-header">
<div>
<h2 class="lightbox-title">${metadata.title}</h2>
<span class="lightbox-url">${url}</span>
</div>
<button class="lightbox-close" onclick="closeLightbox()" aria-label="Close">&times;</button>
</div>
<div class="lightbox-body">
<span class="lightbox-category">${metadata.category}</span>
<p class="lightbox-description">${metadata.description}</p>
</div>
<div class="lightbox-footer">
<button class="lightbox-button" onclick="window.open('${url}', '_blank')">Visit Site →</button>
<button class="lightbox-button" onclick="closeLightbox()">Close</button>
</div>
`;
}
function closeLightbox() {
lightbox.classList.remove('active');
}
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) closeLightbox();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && lightbox.classList.contains('active')) closeLightbox();
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink