mirror of
https://github.com/PR0M3TH3AN/TORCH.git
synced 2026-10-27 07:51:52 +00:00
Add landing page with TORCH documentation modal
- Created `landing/` directory with `index.html`. - Implemented a modern landing page design matching the `dashboard/` style. - Added a custom SVG Torch logo. - Integrated `marked.js` to fetch and render `src/docs/TORCH.md` in a modal. - Linked to the existing dashboard. Co-authored-by: PR0M3TH3AN <[email protected]>
This commit is contained in:
google-labs-jules[bot]andPR0M3TH3AN committed
1 parent
51ae32c193
commit
b0f47e4447
2 files changed
+374
No files matched your search
@@ -0,0 +1,371 @@
|
||||
<!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="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;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.875rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<!-- Modern Torch SVG Logo -->
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 2L19 10L24 12L18 16L20 22L16 18L12 22L14 16L8 12L13 10L16 2Z" fill="#F5B84B"/>
|
||||
<path d="M16 18V30" stroke="#4F8CFF" stroke-width="3" stroke-linecap="round"/>
|
||||
<path d="M12 24H20" stroke="#4F8CFF" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="16" cy="10" r="6" stroke="#F5B84B" stroke-width="2" stroke-opacity="0.5"/>
|
||||
</svg>
|
||||
TORCH
|
||||
</div>
|
||||
<nav>
|
||||
<a href="https://github.com/landing-ai/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>
|
||||
|
||||
<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>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 TORCH Project. Built for the future of AI-driven development.</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>`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
127.0.0.1 - - [14/Feb/2026 03:58:05] "GET /landing/index.html HTTP/1.1" 200 -
|
||||
127.0.0.1 - - [14/Feb/2026 03:58:05] "GET /dashboard/styles.css HTTP/1.1" 200 -
|
||||
127.0.0.1 - - [14/Feb/2026 03:58:06] "GET /src/docs/TORCH.md HTTP/1.1" 200 -
|
||||
Reference in new issue
Block a user