Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | index.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/index.html |
| Original SHA-256 | c18239ed490f52f1bf3723569d55ecea280b43841259060d0d4b2992ecccad6e |
| Reading-copy SHA-256 | c18239ed490f52f1bf3723569d55ecea280b43841259060d0d4b2992ecccad6e |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/index.html"} |
Every recorded occurrence
These 2 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| index.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/index.html"} | libsrc-f42ae15c102f | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/deploy_697597efc7c59a3a07e05318/index.html |
| ba974d820a1af518dc017127712685f623e0993f | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/.content_store/ba/ba974d820a1af518dc017127712685f623e0993f"} | libsrc-5ae43f790642 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__thataiguy-api-clean-1__8b5c9eb1-e75c-4f8a-a9f0-6f8d4ae4a3d5/originals/.content_store/ba/ba974d820a1af518dc017127712685f623e0993f |
Recovered source transcript
Download complete source text ↓454 lines · 16.8 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>ThatAIGuy | AGI Web Services</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
:root {
--sunset-deep-purple: #1a0a2e;
--sunset-plum: #4a1942;
--sunset-burgundy: #6b2040;
--sunset-crimson: #9c2935;
--sunset-burnt-orange: #d4442a;
--sunset-orange: #f4721a;
--sunset-golden: #ffa126;
--sunset-gold: #ffc857;
--sunset-pale-gold: #ffe4a0;
--cyan-glow: #00d4ff;
--purple-glow: #7b2fff;
--pink-glow: #ff2d92;
--bg-deep: #050510;
--bg-dark: #0a0a1a;
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.4);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Outfit', sans-serif;
background: var(--bg-deep);
color: var(--text-primary);
overflow-x: hidden;
min-height: 100vh;
}
.loader {
position: fixed;
inset: 0;
background: var(--bg-deep);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader-helix {
width: 60px;
height: 60px;
position: relative;
}
.loader-helix::before, .loader-helix::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
animation: loaderOrbit 1.2s ease-in-out infinite;
}
.loader-helix::before {
background: var(--sunset-gold);
box-shadow: 0 0 20px var(--sunset-gold);
}
.loader-helix::after {
background: var(--cyan-glow);
box-shadow: 0 0 20px var(--cyan-glow);
animation-delay: -0.6s;
}
@keyframes loaderOrbit {
0%, 100% { top: 0; left: 50%; transform: translateX(-50%) scale(1); }
25% { top: 50%; left: 100%; transform: translate(-100%, -50%) scale(0.6); }
50% { top: 100%; left: 50%; transform: translate(-50%, -100%) scale(1); }
75% { top: 50%; left: 0; transform: translate(0, -50%) scale(0.6); }
}
.loader-text {
margin-top: 30px;
font-family: 'Orbitron', sans-serif;
font-size: 14px;
letter-spacing: 4px;
color: var(--text-muted);
}
.loader-counter {
font-family: 'Space Mono', monospace;
font-size: 48px;
font-weight: 700;
margin-top: 15px;
background: linear-gradient(90deg, var(--sunset-gold), var(--sunset-orange), var(--sunset-crimson));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: rgba(5, 5, 16, 0.9);
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--sunset-gold), var(--cyan-glow));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
}
.nav-links {
display: flex;
gap: 40px;
list-style: none;
}
.nav-links a {
font-family: 'Space Mono', monospace;
font-size: 0.85rem;
color: var(--text-secondary);
text-decoration: none;
letter-spacing: 1px;
transition: all 0.3s ease;
padding: 8px 0;
}
.nav-links a:hover {
color: var(--sunset-gold);
}
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}
.mobile-menu-btn span {
width: 25px;
height: 2px;
background: var(--sunset-gold);
}
#canvas-container {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.main-content {
position: relative;
z-index: 10;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.floating-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Orbitron', sans-serif;
font-size: clamp(4rem, 15vw, 12rem);
font-weight: 900;
color: rgba(60, 120, 180, 0.35);
white-space: nowrap;
user-select: none;
pointer-events: none;
z-index: 1;
}
.hero {
position: relative;
z-index: 20;
text-align: center;
max-width: 800px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 200, 87, 0.1);
border: 1px solid rgba(255, 200, 87, 0.3);
border-radius: 100px;
font-family: 'Space Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
color: var(--sunset-gold);
margin-bottom: 24px;
}
.hero h1 {
font-family: 'Orbitron', sans-serif;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
background: linear-gradient(135deg, #ffffff, var(--sunset-pale-gold), var(--sunset-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 40px;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 50px;
margin-bottom: 40px;
}
.stat { text-align: center; }
.stat-number {
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--sunset-gold), var(--sunset-orange));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
color: var(--text-muted);
letter-spacing: 2px;
margin-top: 5px;
}
.enter-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 40px;
background: linear-gradient(135deg, var(--sunset-gold), var(--sunset-orange));
border: none;
border-radius: 50px;
font-family: 'Orbitron', sans-serif;
font-size: 0.85rem;
font-weight: 700;
color: var(--bg-deep);
text-decoration: none;
letter-spacing: 2px;
transition: all 0.3s ease;
box-shadow: 0 10px 40px rgba(255, 200, 87, 0.3);
}
.enter-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px rgba(255, 200, 87, 0.4);
}
.enter-btn svg {
width: 20px;
height: 20px;
}
@media (max-width: 768px) {
nav { padding: 15px 20px; }
.mobile-menu-btn { display: flex; }
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(5, 5, 16, 0.98);
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.nav-links.active {
opacity: 1;
visibility: visible;
}
.nav-links a { font-size: 1.2rem; }
.hero-stats { gap: 25px; }
.stat-number { font-size: 2rem; }
.floating-title { font-size: 3rem; }
}
</style>
</head>
<body>
<div class="loader" id="loader">
<div class="loader-helix"></div>
<div class="loader-text">INITIALIZING AGI</div>
<div class="loader-counter" id="loaderCounter">0%</div>
</div>
<nav>
<a href="/" class="logo">ThatAIGuy</a>
<ul class="nav-links">
<li><a href="/portfolio">PORTFOLIO</a></li>
<li><a href="/services">SERVICES</a></li>
<li><a href="/megamind">ABOUT AGI</a></li>
<li><a href="/contact">CONTACT</a></li>
</ul>
<button class="mobile-menu-btn">
<span></span>
<span></span>
<span></span>
</button>
</nav>
<div id="canvas-container"></div>
<div class="main-content">
<div class="floating-title">ThatAIGuy</div>
<div class="hero">
<div class="hero-badge">MEGAMIND AGI v4.0.0 ONLINE</div>
<h1>The Future of<br>Web Development</h1>
<p class="hero-subtitle">
World's first AGI-powered web studio. Every website trains the network.<br>
258 billion neurons. Infinite possibilities.
</p>
<div class="hero-stats">
<div class="stat">
<div class="stat-number">86+</div>
<div class="stat-label">Sites Built</div>
</div>
<div class="stat">
<div class="stat-number">258</div>
<div class="stat-label">Billion Neurons</div>
</div>
<div class="stat">
<div class="stat-number">16</div>
<div class="stat-label">DNA Families</div>
</div>
</div>
<a href="/portfolio" class="enter-btn">
<span>Enter Portfolio</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
</div>
</div>
<script>
let loadProgress = 0;
const loaderCounter = document.getElementById('loaderCounter');
const loader = document.getElementById('loader');
const loadInterval = setInterval(() => {
loadProgress += Math.random() * 15;
if (loadProgress >= 100) {
loadProgress = 100;
clearInterval(loadInterval);
setTimeout(() => loader.classList.add('hidden'), 300);
}
loaderCounter.textContent = Math.floor(loadProgress) + '%';
}, 100);
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
const navLinks = document.querySelector('.nav-links');
mobileMenuBtn.addEventListener('click', () => navLinks.classList.toggle('active'));
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => navLinks.classList.remove('active'));
});
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.getElementById('canvas-container').appendChild(renderer.domElement);
camera.position.z = 30;
const sunsetColors = [0x1a0a2e, 0x4a1942, 0x6b2040, 0x9c2935, 0xd4442a, 0xf4721a, 0xffa126, 0xffc857, 0xffe4a0];
const starGeometry = new THREE.BufferGeometry();
const starPositions = new Float32Array(2000 * 3);
for (let i = 0; i < 2000 * 3; i += 3) {
starPositions[i] = (Math.random() - 0.5) * 200;
starPositions[i + 1] = (Math.random() - 0.5) * 200;
starPositions[i + 2] = (Math.random() - 0.5) * 200;
}
starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
const stars = new THREE.Points(starGeometry, new THREE.PointsMaterial({ color: 0xffffff, size: 0.5, transparent: true, opacity: 0.8 }));
scene.add(stars);
const helixGroup = new THREE.Group();
const numPoints = 100, helixRadius = 4, helixHeight = 40, turns = 3;
function createStrand(phaseOffset) {
const points = [];
for (let i = 0; i <= numPoints; i++) {
const t = i / numPoints;
const angle = t * Math.PI * 2 * turns + phaseOffset;
points.push(new THREE.Vector3(Math.cos(angle) * helixRadius, (t - 0.5) * helixHeight, Math.sin(angle) * helixRadius));
}
return points;
}
function createTube(points, colorIdx) {
const curve = new THREE.CatmullRomCurve3(points);
return new THREE.Mesh(new THREE.TubeGeometry(curve, 100, 0.15, 8, false), new THREE.MeshBasicMaterial({ color: sunsetColors[colorIdx], transparent: true, opacity: 0.9 }));
}
helixGroup.add(createTube(createStrand(0), 7));
helixGroup.add(createTube(createStrand(Math.PI), 4));
for (let i = 0; i < numPoints; i += 3) {
const t = i / numPoints, angle = t * Math.PI * 2 * turns, y = (t - 0.5) * helixHeight;
const x1 = Math.cos(angle) * helixRadius, z1 = Math.sin(angle) * helixRadius;
const x2 = Math.cos(angle + Math.PI) * helixRadius, z2 = Math.sin(angle + Math.PI) * helixRadius;
const len = Math.sqrt((x2-x1)**2 + (z2-z1)**2);
const bond = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, len, 8), new THREE.MeshBasicMaterial({ color: sunsetColors[Math.floor(t * 8)], transparent: true, opacity: 0.6 }));
bond.position.set((x1+x2)/2, y, (z1+z2)/2);
bond.rotation.z = Math.PI / 2;
helixGroup.add(bond);
const nodeMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.9 });
const n1 = new THREE.Mesh(new THREE.SphereGeometry(0.3, 16, 16), nodeMat);
n1.position.set(x1, y, z1);
helixGroup.add(n1);
const n2 = new THREE.Mesh(new THREE.SphereGeometry(0.3, 16, 16), nodeMat);
n2.position.set(x2, y, z2);
helixGroup.add(n2);
}
scene.add(helixGroup);
let time = 0;
function animate() {
requestAnimationFrame(animate);
time += 0.01;
stars.rotation.y += 0.0001;
helixGroup.rotation.y += 0.003;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>