Files
TORCH/landing/index.html
T
google-labs-jules[bot]andPR0M3TH3AN 6425f573fd Remove Mermaid diagram section from landing page
Removes the "Autonomous Improvement Cycle" section, including the HTML block, Mermaid.js script import, and associated CSS styles, to simplify the landing page.

Co-authored-by: PR0M3TH3AN <[email protected]>
2026-02-17 03:18:28 +00:00

899 lines
29 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TORCH: AI Workforce Orchestration</title>
<link rel="icon" type="image/svg+xml" href="../assets/favicon.svg">
<link rel="stylesheet" href="../dashboard/styles.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
/* Landing Page Specific Overrides & Additions */
body {
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
padding: 2rem 5%;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, var(--surface-alt), transparent);
}
.logo-container {
display: flex;
align-items: center;
gap: 1rem;
font-weight: 700;
font-size: 1.5rem;
color: var(--text-strong);
letter-spacing: -0.02em;
}
.hero {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 1rem;
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 3.5rem;
line-height: 1.1;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--text-strong) 0%, var(--info) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.03em;
}
.hero p {
font-size: 1.25rem;
color: var(--muted);
margin-bottom: 2.5rem;
line-height: 1.6;
max-width: 60ch;
}
.actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.cta-button {
display: inline-flex;
align-items: center;
padding: 0.75rem 2rem;
border-radius: 9999px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
font-size: 1rem;
cursor: pointer;
border: 1px solid transparent;
}
.cta-button.primary {
background: var(--accent);
color: white;
box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
}
.cta-button.primary:hover {
background: var(--accent-strong);
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(79, 140, 255, 0.4);
}
.cta-button.secondary {
background: rgba(255, 255, 255, 0.05);
color: var(--text);
border-color: var(--border);
}
.cta-button.secondary:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-strong);
}
/* Feature Grid */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.feature-card {
background: var(--surface-alt);
border: 1px solid var(--border);
padding: 2rem;
border-radius: 1rem;
transition: transform 0.2s;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--accent);
}
.feature-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-strong);
}
.feature-desc {
font-size: 0.9rem;
color: var(--muted);
}
/* Meta Prompts Section */
.meta-prompts {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
width: 100%;
}
.meta-prompts h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: var(--text-strong);
}
.prompts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.prompt-card {
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
.prompt-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0,0,0,0.2);
}
.prompt-title {
font-weight: 600;
color: var(--text-strong);
}
.copy-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
}
.copy-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.prompt-content {
padding: 0;
margin: 0;
background: #0d1117;
overflow: auto;
max-height: 400px;
flex: 1;
}
.prompt-content pre {
margin: 0;
padding: 1.5rem;
}
.prompt-content code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.85rem;
color: #e6edf3;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-all;
}
footer {
margin-top: auto;
padding: 2rem;
text-align: center;
color: var(--muted);
font-size: 0.875rem;
border-top: 1px solid var(--border);
}
/* Install CTA Section */
.install-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto 4rem;
text-align: center;
width: 100%;
max-width: 600px;
padding: 0 1rem;
animation: fadeIn 0.8s ease-out forwards;
opacity: 0;
transform: translateY(10px);
}
@keyframes fadeIn {
to { opacity: 1; transform: translateY(0); }
}
.install-label {
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.install-code-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(11, 16, 32, 0.8);
border: 1px solid var(--border);
border-radius: 12px;
padding: 0.75rem 1rem;
width: 100%;
max-width: 450px;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
.install-code-wrapper:hover {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(79, 140, 255, 0.2);
transform: translateY(-2px);
}
.install-code-wrapper code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 1rem;
color: var(--text-strong);
background: transparent;
padding: 0;
margin-right: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
flex: 1;
}
.install-code-wrapper code::before {
content: "$ ";
color: var(--muted);
user-select: none;
}
.install-code-wrapper.multiline {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
max-width: 800px; /* Wider for multiline prompt */
}
.install-code-wrapper.multiline code {
white-space: pre-wrap;
word-break: break-word;
margin-right: 0;
width: 100%;
font-size: 0.95rem;
line-height: 1.6;
color: #a5d6ff; /* Slightly lighter/blue tint for prompt text */
}
.install-code-wrapper.multiline code::before {
content: none;
}
.install-code-wrapper.multiline .copy-install-btn {
align-self: flex-end;
}
/* Agent Selector Styles */
.agent-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
width: 100%;
max-width: 900px;
margin-bottom: 3rem;
}
.agent-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
text-align: left;
text-decoration: none;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
position: relative;
overflow: hidden;
}
.agent-card.active {
border-color: var(--accent);
background: rgba(79, 140, 255, 0.08);
box-shadow: 0 0 30px rgba(79, 140, 255, 0.1);
}
.agent-card.active:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(79, 140, 255, 0.2);
background: rgba(79, 140, 255, 0.12);
}
.agent-card.disabled {
opacity: 0.6;
cursor: not-allowed;
background: rgba(0, 0, 0, 0.2);
border-style: dashed;
}
.agent-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.agent-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-strong);
display: flex;
align-items: center;
gap: 0.5rem;
}
.agent-status {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.2rem 0.6rem;
border-radius: 99px;
font-weight: 600;
}
.agent-card.active .agent-status {
color: var(--surface);
background: var(--accent);
}
.agent-card.disabled .agent-status {
background: rgba(255,255,255,0.1);
color: var(--muted);
}
.agent-desc {
font-size: 0.9rem;
color: var(--muted);
line-height: 1.5;
}
.copy-install-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--text);
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
flex-shrink: 0;
line-height: 1;
}
.copy-install-btn:hover {
background: var(--surface-alt);
color: var(--text-strong);
border-color: var(--accent);
}
.copy-install-btn:active {
transform: scale(0.98);
}
/* Acknowledgement Modal Styles */
#ackModal .modal-content {
border-color: var(--danger);
max-width: 500px;
text-align: center;
}
#ackModal h2 {
color: var(--danger);
margin-top: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
#ackModal .modal-body {
font-size: 1.1rem;
color: var(--text);
margin: 1.5rem 0;
line-height: 1.6;
}
#ackModal .modal-actions {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
#ackModal .btn-cancel {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
padding: 0.75rem 1.5rem;
border-radius: 9999px;
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
#ackModal .btn-cancel:hover {
background: var(--surface-alt);
color: var(--text-strong);
}
#ackModal .btn-confirm {
background: var(--danger);
border: 1px solid var(--danger);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
box-shadow: 0 4px 12px rgba(255, 50, 50, 0.3);
}
#ackModal .btn-confirm:hover {
background: #ff4d4d; /* lighter red */
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 50, 50, 0.4);
}
/* Define danger color if not exists in dashboard/styles.css */
:root {
--danger: #ef4444;
}
/* Core Capabilities Section */
.core-capabilities {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
}
.core-capabilities h2 {
font-size: 2.5rem;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--text-strong) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.capability-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.capability-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 1.5rem;
padding: 2.5rem;
text-align: left;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.capability-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(79, 140, 255, 0.1), transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
}
.capability-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}
.capability-card:hover::before {
opacity: 1;
}
.cap-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
background: rgba(79, 140, 255, 0.1);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1rem;
color: var(--accent);
}
.capability-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-strong);
}
.capability-card p {
color: var(--muted);
line-height: 1.6;
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="../assets/logo.svg" alt="TORCH Logo" width="32" height="32">
TORCH
</div>
<nav>
<a href="https://github.com/PR0M3TH3AN/TORCH" class="text-muted hover:text-info-strong transition-colors">GitHub</a>
</nav>
</header>
<main>
<section class="hero">
<h1>The Operating System for Your AI Workforce.</h1>
<p>
A simple drag-and-drop folder that grants every project autonomous AI agents that learn, adapt, and evolve over time.
</p>
<div class="actions">
<a href="../dashboard/" class="cta-button primary">Launch Dashboard</a>
<button id="openDocs" class="cta-button secondary">Read Documentation</button>
</div>
</section>
<div class="install-container">
<h2 style="font-size: 2rem; margin-bottom: 2rem; color: var(--text-strong);">Choose Your Agent</h2>
<div class="agent-selector">
<a href="https://jules.google/" target="_blank" class="agent-card active">
<div class="agent-header">
<span class="agent-name">Jules</span>
<span class="agent-status">Active</span>
</div>
<p class="agent-desc">Optimized for Google's latest coding agent. Click to learn more.</p>
</a>
<div class="agent-card disabled">
<div class="agent-header">
<span class="agent-name">Codex</span>
<span class="agent-status">Coming Soon</span>
</div>
<p class="agent-desc">Advanced reasoning for complex tasks.</p>
</div>
<div class="agent-card disabled">
<div class="agent-header">
<span class="agent-name">Claude</span>
<span class="agent-status">Coming Soon</span>
</div>
<p class="agent-desc">Long-context understanding and safety.</p>
</div>
</div>
<p class="install-label" style="margin-top: 1rem;">Copy this prompt to onboard TORCH:</p>
<div class="install-code-wrapper multiline">
<code id="install-cmd">Hey Jules, can you install and setup TORCH into this repo? Here is the install command:
npm install https://github.com/PR0M3TH3AN/TORCH/archive/refs/heads/main.tar.gz && npx torch-lock init</code>
<button class="copy-install-btn" onclick="copyToClipboard('install-cmd', this, true)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
Copy
</button>
</div>
</div>
<section class="features">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Instant Setup</div>
<div class="feature-desc">Just drop the folder into your project. No complex configuration pipelines.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<div class="feature-title">Self-Evolving Agents</div>
<div class="feature-desc">Agents automatically adapt to your codebase and workflow patterns.</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<div class="feature-title">Decentralized Locking</div>
<div class="feature-desc">Powered by Nostr for secure, distributed task orchestration.</div>
</div>
</section>
<section class="core-capabilities">
<h2>Why Run TORCH?</h2>
<div class="capability-grid">
<div class="capability-card">
<div class="cap-icon">🧠</div>
<h3>Drop-in Divinity</h3>
<p>Transform any LLM session into a project manager. Just paste a meta-prompt, and watch it coordinate tasks autonomously.</p>
</div>
<div class="capability-card">
<div class="cap-icon">✅</div>
<h3>Verifiable Handoffs</h3>
<p>Code doesn't ship unless it works. Agents must pass your specific tests and linters before releasing the lock.</p>
</div>
<div class="capability-card">
<div class="cap-icon">🌐</div>
<h3>Decentralized State</h3>
<p>Serverless coordination via Nostr. No databases to manage, just pure, distributed task locking across agents.</p>
</div>
<div class="capability-card">
<div class="cap-icon">📚</div>
<h3>Persistent Memory</h3>
<p>Agents that remember. TORCH maintains a semantic history of decisions, preventing loops and regressions.</p>
</div>
</div>
</section>
<section class="meta-prompts">
<h2>Scheduler Meta Prompts</h2>
<div class="prompts-grid">
<div class="prompt-card">
<div class="prompt-header">
<span class="prompt-title">Daily Scheduler</span>
<button class="copy-btn" onclick="copyToClipboard('daily-code', this)">Copy</button>
</div>
<div class="prompt-content">
<pre><code id="daily-code">Loading...</code></pre>
</div>
</div>
<div class="prompt-card">
<div class="prompt-header">
<span class="prompt-title">Weekly Scheduler</span>
<button class="copy-btn" onclick="copyToClipboard('weekly-code', this)">Copy</button>
</div>
<div class="prompt-content">
<pre><code id="weekly-code">Loading...</code></pre>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>&copy; TORCH Project. Built for the future of AI-driven development.</p>
<p>
<a href="https://tipjar.bitvid.network/?n=npub15jnttpymeytm80hatjqcvhhqhzrhx6gxp8pq0wn93rhnu8s9h9dsha32lx" class="text-muted hover:text-info-strong transition-colors">Support TORCH via Tipjar</a>
</p>
</footer>
<!-- Documentation Modal -->
<div id="docsModal" class="modal">
<div class="modal-content">
<span class="close-modal">&times;</span>
<div id="markdown-content">
<p class="text-muted">Loading documentation...</p>
</div>
</div>
</div>
<!-- Acknowledgement Modal -->
<div id="ackModal" class="modal">
<div class="modal-content">
<h2>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
Warning: Vibecoded Project
</h2>
<div class="modal-body">
This is a freshly vibecoded project and that using this in a valuable production repo is reckless.
</div>
<div class="modal-actions">
<button class="btn-cancel" onclick="dismissAckModal()">Cancel</button>
<button class="btn-confirm" onclick="confirmAck()">I Understand, Copy</button>
</div>
</div>
</div>
<script>
// Modal Logic
const modal = document.getElementById("docsModal");
const btn = document.getElementById("openDocs");
const span = document.getElementsByClassName("close-modal")[0];
const contentDiv = document.getElementById("markdown-content");
let docsLoaded = false;
btn.onclick = function() {
modal.classList.add("show");
if (!docsLoaded) {
fetchDocs();
}
}
span.onclick = function() {
modal.classList.remove("show");
}
window.onclick = function(event) {
if (event.target == modal) {
modal.classList.remove("show");
}
if (event.target == ackModal) {
dismissAckModal();
}
}
// Fetch and Render Markdown
async function fetchDocs() {
try {
const response = await fetch('../src/docs/TORCH.md');
if (!response.ok) {
throw new Error('Failed to load documentation');
}
const text = await response.text();
// Configure marked options if needed (e.g., highlighting)
// Using simple rendering for now
contentDiv.innerHTML = marked.parse(text);
docsLoaded = true;
} catch (error) {
console.error(error);
contentDiv.innerHTML = `<p class="text-danger">Error loading documentation: ${error.message}</p>`;
}
}
// Meta Prompts Logic
async function fetchMetaPrompts() {
try {
const response = await fetch('../src/prompts/META_PROMPTS.md');
if (!response.ok) throw new Error('Failed to load prompts');
const text = await response.text();
// Regex to capture content between ```text and ``` inside the headers
// strict on the header, loose on the code block language (text, markdown, or none)
const dailyMatch = text.match(/## Daily Scheduler Meta Prompt[\s\S]*?```\w*([\s\S]*?)```/);
const weeklyMatch = text.match(/## Weekly Scheduler Meta Prompt[\s\S]*?```\w*([\s\S]*?)```/);
if (dailyMatch && dailyMatch[1]) {
document.getElementById('daily-code').textContent = dailyMatch[1].trim();
}
if (weeklyMatch && weeklyMatch[1]) {
document.getElementById('weekly-code').textContent = weeklyMatch[1].trim();
}
} catch (error) {
console.error('Error fetching meta prompts:', error);
document.getElementById('daily-code').textContent = 'Error loading prompt.';
document.getElementById('weekly-code').textContent = 'Error loading prompt.';
}
}
// Acknowledgement Logic
let hasAcknowledged = false;
let pendingCopy = null;
const ackModal = document.getElementById('ackModal');
function showAckModal(callback) {
pendingCopy = callback;
ackModal.classList.add('show');
}
function dismissAckModal() {
ackModal.classList.remove('show');
pendingCopy = null;
}
function confirmAck() {
hasAcknowledged = true;
ackModal.classList.remove('show');
if (pendingCopy) {
pendingCopy();
pendingCopy = null;
}
}
function copyToClipboard(elementId, btn, requiresAck = false) {
if (requiresAck && !hasAcknowledged) {
showAckModal(() => copyToClipboard(elementId, btn, false));
return;
}
const code = document.getElementById(elementId).textContent;
navigator.clipboard.writeText(code).then(() => {
const originalContent = btn.innerHTML;
btn.textContent = 'Copied!';
btn.style.borderColor = 'var(--success)';
btn.style.color = 'var(--success)';
setTimeout(() => {
btn.innerHTML = originalContent;
btn.style.borderColor = '';
btn.style.color = '';
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
// Initialize Meta Prompts
fetchMetaPrompts();
</script>
</body>
</html>