mirror of
https://github.com/PR0M3TH3AN/TORCH.git
synced 2026-10-27 07:51:52 +00:00
google-labs-jules[bot]andPR0M3TH3AN
c7e48e6b69
Adds a stylized 'Install via NPM' code block with a copy button to the landing page, positioned between the hero and features sections. - Updates landing/index.html with new HTML structure and CSS styles. - Refactors copyToClipboard function to preserve button innerHTML (icon support). Co-authored-by: PR0M3TH3AN <[email protected]>
635 lines
20 KiB
HTML
635 lines
20 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);
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(11, 16, 32, 0.8);
|
|
backdrop-filter: blur(5px);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
opacity: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--surface);
|
|
margin: auto;
|
|
padding: 2rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 1rem;
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
animation: modalSlideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes modalSlideIn {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.close-modal {
|
|
color: var(--muted);
|
|
position: sticky;
|
|
top: 0;
|
|
float: right;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
background: var(--surface);
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.close-modal:hover,
|
|
.close-modal:focus {
|
|
color: var(--text-strong);
|
|
background: var(--surface-alt);
|
|
}
|
|
|
|
/* Markdown Content Styling within Modal */
|
|
#markdown-content {
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
}
|
|
#markdown-content h1, #markdown-content h2, #markdown-content h3 {
|
|
color: var(--text-strong);
|
|
margin-top: 1.5em;
|
|
}
|
|
#markdown-content code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
background: var(--surface-alt);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
}
|
|
#markdown-content pre {
|
|
background: var(--surface-alt);
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border);
|
|
}
|
|
#markdown-content pre code {
|
|
background: transparent;
|
|
padding: 0;
|
|
color: var(--info);
|
|
}
|
|
#markdown-content a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
#markdown-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
</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">
|
|
<p class="install-label">Install via NPM</p>
|
|
<div class="install-code-wrapper">
|
|
<code id="install-cmd">npm install torch-lock</code>
|
|
<button class="copy-install-btn" onclick="copyToClipboard('install-cmd', this)">
|
|
<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="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>© 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">×</span>
|
|
<div id="markdown-content">
|
|
<p class="text-muted">Loading documentation...</p>
|
|
</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");
|
|
}
|
|
}
|
|
|
|
// 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.';
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(elementId, btn) {
|
|
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>
|