A continuation of index.html. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓1,798 lines · 60.7 KB
</div>
</div>
</div>
<div class="demo-input-area">
<input type="text" class="demo-input" placeholder="Ask anything..." id="demo-input">
<button class="demo-send" onclick="sendDemo()">Send</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Activity Graph Section -->
<section class="activity-section">
<div class="container">
<div class="activity-header">
<h3 class="activity-title">Platform Activity</h3>
<div class="activity-legend">
<span>Less</span>
<div class="legend-scale">
<div class="legend-box" style="background: var(--bg-tertiary);"></div>
<div class="legend-box" style="background: rgba(63, 185, 80, 0.25);"></div>
<div class="legend-box" style="background: rgba(63, 185, 80, 0.5);"></div>
<div class="legend-box" style="background: rgba(63, 185, 80, 0.75);"></div>
<div class="legend-box" style="background: var(--green);"></div>
</div>
<span>More</span>
</div>
</div>
<div class="contribution-graph" id="contribution-graph"></div>
</div>
</section>
<!-- Pricing Section -->
<section class="pricing-section" id="pricing">
<div class="container">
<div class="section-header">
<span class="section-label">Pricing</span>
<h2 class="section-title">Start Free, Scale as You Grow</h2>
<p class="section-desc">Transparent pricing with no hidden fees. Choose the plan that fits your needs.</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-tier">Free</div>
<p class="pricing-desc">Perfect for side projects and experimentation</p>
<div class="pricing-price">
<span class="pricing-amount">$0</span>
<span class="pricing-period">/ month</span>
</div>
<ul class="pricing-features">
<li>1,000 API requests / month</li>
<li>Access to all models</li>
<li>Community support</li>
<li>Basic analytics</li>
<li>Rate limited to 10 req/min</li>
</ul>
<a href="#" class="btn btn-secondary">Get Started Free</a>
</div>
<div class="pricing-card featured">
<div class="pricing-tier">Pro</div>
<p class="pricing-desc">For professional developers and small teams</p>
<div class="pricing-price">
<span class="pricing-amount">$19</span>
<span class="pricing-period">/ month</span>
</div>
<ul class="pricing-features">
<li>100,000 API requests / month</li>
<li>Priority model access</li>
<li>Email support</li>
<li>Advanced analytics</li>
<li>100 req/min rate limit</li>
</ul>
<a href="#" class="btn btn-primary">Upgrade to Pro</a>
</div>
<div class="pricing-card">
<div class="pricing-tier">Team</div>
<p class="pricing-desc">For teams that need collaboration features</p>
<div class="pricing-price">
<span class="pricing-amount">$49</span>
<span class="pricing-period">/ month</span>
</div>
<ul class="pricing-features">
<li>1,000,000 API requests / month</li>
<li>Dedicated support</li>
<li>Team collaboration</li>
<li>Custom integrations</li>
<li>Unlimited rate limit</li>
</ul>
<a href="#" class="btn btn-secondary">Contact Sales</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<a href="https://thataiguy.org" class="logo">
<div class="logo-icon">AI</div>
That AI Guy
</a>
<p>Building the future of AI-powered development tools. Built by developers, for developers.</p>
<div class="social-links">
<a href="#" class="social-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
</a>
<a href="#" class="social-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
</a>
<a href="#" class="social-link">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</div>
<div class="footer-column">
<h4>Product</h4>
<ul>
<li><a href="#tools">AI Tools</a></li>
<li><a href="#api">API Reference</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#">Changelog</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="https://thataiguy.org">Blog</a></li>
<li><a href="#">Status</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Company</h4>
<ul>
<li><a href="https://thataiguy.org">About</a></li>
<li><a href="mailto:[author/contact email redacted]">Contact</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press Kit</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 That AI Guy. All rights reserved.</p>
<div class="footer-legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Copy code functionality
function copyCode(btn) {
const codeBlock = btn.closest('.code-block');
const code = codeBlock.querySelector('code').innerText;
navigator.clipboard.writeText(code).then(() => {
btn.classList.add('copied');
btn.innerHTML = `
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
Copied!
`;
setTimeout(() => {
btn.classList.remove('copied');
btn.innerHTML = `
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
Copy
`;
}, 2000);
});
}
// Demo chat functionality
const demoResponses = [
"I can help you with that! Based on your query, here's a comprehensive solution that follows best practices...",
"Great question! Let me break this down step by step for you...",
"Here's an optimized approach using modern techniques that will improve performance by 40%...",
"I've analyzed your request and found the most efficient solution. Here's the implementation..."
];
function sendDemo() {
const input = document.getElementById('demo-input');
const messages = document.getElementById('demo-messages');
const userText = input.value.trim();
if (!userText) return;
// Add user message
const userMsg = document.createElement('div');
userMsg.className = 'demo-message';
userMsg.innerHTML = `
<div class="demo-avatar user">U</div>
<div class="demo-bubble">
<div class="demo-bubble-header">
<span class="demo-name">You</span>
<span class="demo-time">just now</span>
</div>
<div class="demo-text">${userText}</div>
</div>
`;
messages.appendChild(userMsg);
input.value = '';
// Simulate AI response
setTimeout(() => {
const aiMsg = document.createElement('div');
aiMsg.className = 'demo-message';
const response = demoResponses[Math.floor(Math.random() * demoResponses.length)];
aiMsg.innerHTML = `
<div class="demo-avatar ai">AI</div>
<div class="demo-bubble">
<div class="demo-bubble-header">
<span class="demo-name">That AI Guy</span>
<span class="demo-time">just now</span>
</div>
<div class="demo-text">${response}</div>
</div>
`;
messages.appendChild(aiMsg);
messages.scrollTop = messages.scrollHeight;
}, 1000);
}
// Enter key to send
document.getElementById('demo-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendDemo();
});
// Generate contribution graph
function generateContributionGraph() {
const graph = document.getElementById('contribution-graph');
const weeks = 52;
const days = 7;
for (let w = 0; w < weeks; w++) {
const week = document.createElement('div');
week.className = 'contribution-week';
for (let d = 0; d < days; d++) {
const day = document.createElement('div');
day.className = 'contribution-day';
// Random activity level
const rand = Math.random();
if (rand > 0.7) day.classList.add('level-4');
else if (rand > 0.5) day.classList.add('level-3');
else if (rand > 0.3) day.classList.add('level-2');
else if (rand > 0.15) day.classList.add('level-1');
week.appendChild(day);
}
graph.appendChild(week);
}
}
generateContributionGraph();
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Terminal typing animation
const terminalCommands = [
{ type: 'command', text: 'thataiguy analyze ./src' },
{ type: 'output', text: 'Analyzing 47 files...', color: 'var(--cyan)' },
{ type: 'output', text: '> Found 3 potential optimizations', color: 'var(--green)' },
{ type: 'output', text: '> Code quality score: 94/100', color: 'var(--green)' }
];
// Add nav scroll effect
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.style.background = 'rgba(13, 17, 23, 0.95)';
} else {
nav.style.background = 'rgba(13, 17, 23, 0.8)';
}
});
</script>
</body>
</html>