Created
May 23, 2025 23:48
-
-
Save unforced/7c23e9c119b7bf036faa1205ee9bb464 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Confluence - A Vision for Sovereign Knowledge</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-bg { | |
| background-image: url('https://placehold.co/1920x1080/2c3e50/ecf0f1?text=Abstract+Network+Visualization'); /* Placeholder for abstract network animation */ | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .section-fade-in { /* Simple conceptual fade-in, real fade-ins would need JS */ | |
| opacity: 1; | |
| transition: opacity 0.5s ease-in-out; | |
| } | |
| .card { | |
| transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -20px; /* Adjust based on icon size */ | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 12px; | |
| height: 12px; | |
| background-color: #3498db; /* Tailwind blue-500 */ | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| } | |
| .timeline-line { | |
| position: absolute; | |
| left: -15px; /* Center with the dot */ | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background-color: #e5e7eb; /* Tailwind gray-200 */ | |
| z-index: -1; | |
| } | |
| /* Ensure buttons are easily tappable */ | |
| .btn { | |
| padding: 0.75rem 1.5rem; /* py-3 px-6 */ | |
| border-radius: 0.5rem; /* rounded-lg */ | |
| font-weight: 500; /* font-medium */ | |
| transition: background-color 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-700 antialiased"> | |
| <nav class="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50"> | |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-slate-800">Confluence</a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#vision" class="text-slate-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Vision</a> | |
| <a href="#blueprint" class="text-slate-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Blueprint</a> | |
| <a href="#roadmap" class="text-slate-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Roadmap</a> | |
| <a href="#join" class="text-slate-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Join Us</a> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="bg-slate-100 inline-flex items-center justify-center p-2 rounded-md text-slate-500 hover:text-slate-600 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#vision" class="text-slate-600 hover:bg-blue-50 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">Vision</a> | |
| <a href="#blueprint" class="text-slate-600 hover:bg-blue-50 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">Blueprint</a> | |
| <a href="#roadmap" class="text-slate-600 hover:bg-blue-50 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">Roadmap</a> | |
| <a href="#join" class="text-slate-600 hover:bg-blue-50 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium">Join Us</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <header class="hero-bg pt-16 min-h-screen flex items-center justify-center text-white section-fade-in"> | |
| <div class="bg-black/60 absolute inset-0"></div> <div class="relative max-w-4xl mx-auto text-center p-6 sm:p-8"> | |
| <h1 class="text-5xl sm:text-6xl md:text-7xl font-bold mb-6 leading-tight"> | |
| Confluence | |
| </h1> | |
| <p class="text-xl sm:text-2xl mb-10 font-light"> | |
| Your thoughts, connected. Your data, sovereign. | |
| </p> | |
| <p class="text-lg sm:text-xl mb-12 max-w-2xl mx-auto"> | |
| An open vision for a knowledge system that understands you, built on a foundation of trust, privacy, and true ownership. This is not a product you can download today. It is a blueprint for a future we can build together. | |
| </p> | |
| <div class="space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="#vision" class="btn bg-blue-600 hover:bg-blue-700 text-white inline-block w-full sm:w-auto">Glimpse the Vision</a> | |
| <a href="#blueprint" class="btn bg-transparent hover:bg-white/20 border-2 border-white text-white inline-block w-full sm:w-auto">Explore the Blueprint</a> | |
| </div> | |
| </div> | |
| </header> | |
| <section id="vision" class="py-16 sm:py-24 bg-white section-fade-in"> | |
| <div class="max-w-4xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-4">The Story: A Glimpse Into Your Day</h2> | |
| <p class="text-lg text-slate-600 max-w-2xl mx-auto">Imagine a technology that adapts to you, not the other way around.</p> | |
| </div> | |
| <div class="md:flex md:items-center md:space-x-12"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://placehold.co/600x400/a7f3d0/1e40af?text=Quiet+Natural+Landscape" alt="Person walking in nature" class="rounded-xl shadow-xl w-full h-auto object-cover"> | |
| </div> | |
| <div class="md:w-1/2 text-slate-600 space-y-6 leading-relaxed"> | |
| <p>The trail is quiet today, the air crisp with the scent of pine. As you walk, a thought surfaces—a fleeting connection. You speak a quiet command to the simple interface in your hand.</p> | |
| <p>"I just had an idea... The way this forest floor shares resources through fungal networks is a perfect model for the resilient supply chain I'm designing for Project Phoenix."</p> | |
| <p>A faint, haptic confirmation. <em class="text-blue-600 font-medium">Captured.</em></p> | |
| <p>In the background, on your private server, Confluence gets to work. It recognizes this as an <code class="bg-blue-100 text-blue-700 px-1 py-0.5 rounded text-sm">#inspiration</code>. It extracts key entities and automatically links this new thought to your "Project Phoenix" node. It even notes the book on mycology you've been reading. You didn’t have to tell it to. After months of interaction—of you simply talking to it, confirming its connections—it has learned how you think.</p> | |
| <p>Later, you ask, "What was that documentary Kai recommended we watch about AI?"</p> | |
| <p>Confluence understands. It doesn't just search keywords; it queries the graph of your life. "Kai recommended <em class="text-blue-600 font-medium">The Social Dilemma</em>. You messaged about it last Tuesday. Shall I add it to your media queue?"</p> | |
| <p>This is a system you are in a relationship with. One that uses its powerful backend not to overwhelm you, but to provide an experience of effortless, intuitive connection.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-16 sm:py-24 bg-slate-100 section-fade-in"> | |
| <div class="max-w-5xl mx-auto px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-2 gap-12 items-start"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-semibold text-slate-800 mb-4">The Problem: The Modern Knowledge Cage</h3> | |
| <p class="text-slate-600 leading-relaxed"> | |
| Many of today's powerful tools are like beautiful, gilded cages. They offer AI-native features and flexible ways to organize your thoughts, but at a cost. Your data—your most personal knowledge—is stored on their cloud servers. Exporting your life's work often results in unusable files, requiring custom scripts to feel like your own again. You face a steep learning curve and are ultimately locked into a proprietary ecosystem. | |
| </p> | |
| </div> | |
| <div class="bg-blue-600 text-white p-8 rounded-xl shadow-lg"> | |
| <h3 class="text-2xl font-semibold mb-4">The Promise: Confluence</h3> | |
| <p class="leading-relaxed opacity-90"> | |
| Confluence is the key to that cage. It is built on a single, paramount principle: <strong class="font-bold">user agency</strong>. It is a robust alternative, designed to emulate the strengths of modern tools while decisively solving their weaknesses. You get the power of dynamic, AI-assisted knowledge management without sacrificing ownership. Your data is yours, period. Stored where you want, accessible how you want, and controlled only by you. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="blueprint" class="py-16 sm:py-24 bg-white section-fade-in"> | |
| <div class="max-w-6xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-4">The Blueprint: How It Works</h2> | |
| <p class="text-lg text-slate-600 max-w-3xl mx-auto">Our architecture is designed from the ground up for sovereignty and intelligence. This is a conceptual overview.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-2 gap-8"> | |
| <div class="card bg-slate-50 p-8 rounded-xl shadow-lg border border-slate-200"> | |
| <div class="flex items-center mb-4"> | |
| <svg class="h-10 w-10 text-blue-600 mr-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" /> | |
| </svg> | |
| <h3 class="text-xl font-semibold text-slate-800">A Foundation of Relationships</h3> | |
| </div> | |
| <p class="text-slate-600 mb-3">Your knowledge isn't just documents; it's a network. Confluence uses a <strong>Property Graph Database</strong> (e.g., Neo4j with Cypher) to treat relationships as first-class citizens.</p> | |
| <p class="text-slate-600">Inspired by "Supertags," dynamically categorize information, defining properties and relationships in a flexible "meta-model" where your schema is part of the graph.</p> | |
| </div> | |
| <div class="card bg-slate-50 p-8 rounded-xl shadow-lg border border-slate-200"> | |
| <div class="flex items-center mb-4"> | |
| <svg class="h-10 w-10 text-blue-600 mr-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-7.5h12V12h-12v-1.5Z" /> | |
| </svg> | |
| <h3 class="text-xl font-semibold text-slate-800">An Intelligence That Understands</h3> | |
| </div> | |
| <p class="text-slate-600 mb-3">Confluence understands you through conversation. Our <strong>GraphRAG Core</strong> allows intuitive natural language querying.</p> | |
| <p class="text-slate-600">Your question becomes a Cypher query, combined with vector search, retrieving context. An LLM synthesizes answers grounded *only* in your data. (Frameworks: LangChain, LlamaIndex, inspired by Graphiti).</p> | |
| </div> | |
| <div class="card bg-slate-50 p-8 rounded-xl shadow-lg border border-slate-200"> | |
| <div class="flex items-center mb-4"> | |
| <svg class="h-10 w-10 text-blue-600 mr-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> | |
| </svg> | |
| <h3 class="text-xl font-semibold text-slate-800">Automation That Empowers</h3> | |
| </div> | |
| <p class="text-slate-600 mb-3">Automate your life with workflows created through natural language. Confluence integrates an open-source automation engine (e.g., n8n).</p> | |
| <p class="text-slate-600">Describe what you want: "When I create a high-priority task, send a reminder." Confluence generates the workflow. Definitions are stored in your graph.</p> | |
| </div> | |
| <div class="card bg-slate-50 p-8 rounded-xl shadow-lg border border-slate-200"> | |
| <div class="flex items-center mb-4"> | |
| <svg class="h-10 w-10 text-blue-600 mr-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /> | |
| </svg> | |
| <h3 class="text-xl font-semibold text-slate-800">An Open, Connected Ecosystem</h3> | |
| </div> | |
| <p class="text-slate-600 mb-3">Your knowledge shouldn't be trapped. Confluence is designed as an interoperable hub, featuring a comprehensive <strong>GraphQL API</strong>.</p> | |
| <p class="text-slate-600">Integrate with bots (e.g., Telegram) for quick capture and queries. Data liberation is key: export in Markdown, JSON-LD, CSV, and OPML.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="roadmap" class="py-16 sm:py-24 bg-slate-100 section-fade-in"> | |
| <div class="max-w-4xl mx-auto px-6 lg:px-8"> | |
| <div class="text-center mb-12 sm:mb-16"> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 mb-4">The Roadmap to a New Reality</h2> | |
| <p class="text-lg text-slate-600 max-w-2xl mx-auto">Confluence is a grand vision, to be built iteratively with community feedback at every stage.</p> | |
| </div> | |
| <div class="relative pl-8"> <div class="timeline-line"></div> <div class="space-y-12"> | |
| <div class="relative timeline-item pl-8"> | |
| <h4 class="text-xl font-semibold text-blue-700 mb-2">Phase 1: Core Knowledge Graph (MVP)</h4> | |
| <ul class="list-disc list-inside text-slate-600 space-y-1"> | |
| <li>Establish Neo4j backend & dynamic "Supertag" system.</li> | |
| <li>Core UI/API for creating and connecting notes.</li> | |
| <li>Basic Docker Compose setup for self-hosting.</li> | |
| </ul> | |
| </div> | |
| <div class="relative timeline-item pl-8"> | |
| <h4 class="text-xl font-semibold text-blue-700 mb-2">Phase 2: The Emergence of Intelligence</h4> | |
| <ul class="list-disc list-inside text-slate-600 space-y-1"> | |
| <li>Integrate full GraphRAG engine & vector search.</li> | |
| <li>Develop comprehensive GraphQL API.</li> | |
| </ul> | |
| </div> | |
| <div class="relative timeline-item pl-8"> | |
| <h4 class="text-xl font-semibold text-blue-700 mb-2">Phase 3: The Dawn of Automation</h4> | |
| <ul class="list-disc list-inside text-slate-600 space-y-1"> | |
| <li>Integrate n8n workflow engine with AI-assisted creation.</li> | |
| <li>Develop first Telegram bot for capture and query.</li> | |
| </ul> | |
| </div> | |
| <div class="relative timeline-item pl-8"> | |
| <h4 class="text-xl font-semibold text-blue-700 mb-2">Phase 4: A Thriving Ecosystem</h4> | |
| <ul class="list-disc list-inside text-slate-600 space-y-1"> | |
| <li>Design formal plugin architecture for community extensions.</li> | |
| <li>Develop PWA for mobile access.</li> | |
| <li>Continuous refinement and performance tuning.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="join" class="py-16 sm:py-24 bg-blue-700 text-white section-fade-in"> | |
| <div class="max-w-3xl mx-auto px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-6">Join the Vision</h2> | |
| <p class="text-lg opacity-90 mb-8"> | |
| Confluence is more than a blueprint; it's a vision for a future where technology enhances human intelligence and respects user sovereignty. It’s a commitment to building tools that serve us, not the other way around. This vision is alive, but it requires a community to make it a reality. | |
| </p> | |
| <form class="max-w-lg mx-auto mb-8"> | |
| <label for="email-signup" class="sr-only">Email for updates</label> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <input type="email" id="email-signup" name="email" placeholder="Enter your email for updates" class="flex-grow p-3 rounded-md text-slate-800 focus:ring-2 focus:ring-blue-300 outline-none" required> | |
| <button type="submit" class="btn bg-slate-50 hover:bg-slate-200 text-blue-700 w-full sm:w-auto">Follow the Journey</button> | |
| </div> | |
| </form> | |
| <p class="text-sm opacity-80 mb-2">Conceptual links:</p> | |
| <div class="space-x-6"> | |
| <a href="#" class="hover:underline opacity-90 hover:opacity-100">GitHub Project (Conceptual)</a> | |
| <a href="#" class="hover:underline opacity-90 hover:opacity-100">Community Chat (Conceptual)</a> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="py-12 bg-slate-800 text-slate-300 text-center"> | |
| <div class="max-w-6xl mx-auto px-6 lg:px-8"> | |
| <p class="mb-3">Project Confluence: An Open Vision for Sovereign Knowledge.</p> | |
| <p class="mb-3">Conceptual License: Apache 2.0</p> | |
| <div class="mb-4 space-x-4"> | |
| <a href="#vision" class="hover:text-white">Vision</a> | |
| <span>•</span> | |
| <a href="#blueprint" class="hover:text-white">Blueprint</a> | |
| <span>•</span> | |
| <a href="#roadmap" class="hover:text-white">Roadmap</a> | |
| <span>•</span> | |
| <a href="#join" class="hover:text-white">Community</a> | |
| </div> | |
| <p class="text-sm">© <span id="currentYear"></span> The Confluence Project Contributors (Conceptual)</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Set current year in footer | |
| document.getElementById('currentYear').textContent = new Date().getFullYear(); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const svgs = mobileMenuButton.querySelectorAll('svg'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| svgs.forEach(svg => svg.classList.toggle('hidden')); | |
| const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false; | |
| mobileMenuButton.setAttribute('aria-expanded', !isExpanded); | |
| }); | |
| // Smooth scroll for anchor links in nav | |
| document.querySelectorAll('nav a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // If mobile menu is open, close it | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| svgs.forEach(svg => svg.classList.toggle('hidden')); | |
| mobileMenuButton.setAttribute('aria-expanded', 'false'); | |
| } | |
| // Scroll to element | |
| const offset = document.querySelector('nav').offsetHeight; // Get nav height | |
| const bodyRect = document.body.getBoundingClientRect().top; | |
| const elementRect = targetElement.getBoundingClientRect().top; | |
| const elementPosition = elementRect - bodyRect; | |
| const offsetPosition = elementPosition - offset; | |
| window.scrollTo({ | |
| top: offsetPosition, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment