commit 81ebec9c760af9955de04d15d19819c53f4ed073
Author: root <root@hub.scroll.pub>
Date: 2025-01-08 10:45:23 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..fb3c82c
--- /dev/null
+++ b/body.html
@@ -0,0 +1,55 @@
+<header>
+ <nav>
+ <div class="logo">AXXXAGENT</div>
+ <div class="nav-links">
+ <a href="https://github.com/e2b-dev/awesome-ai-agents" target="_blank" class="github-btn">GitHub</a>
+ <a href="https://x.com/pumpdotnews" target="_blank" class="x-btn">X</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="hero-content">
+ <h1>Discover Next-Gen AI Agents</h1>
+ <p>Your centralized hub for cutting-edge AI technology</p>
+ <div class="hero-buttons">
+ <a href="#agents" class="cta-btn">Explore Agents</a>
+ </div>
+ </div>
+ <div class="hero-graphic"></div>
+ </section>
+
+ <section id="agents" class="agents-section">
+ <h2>Featured AI Agents</h2>
+ <div class="agents-grid">
+ <div class="agent-card">
+ <div class="agent-icon"></div>
+ <h3>Language Models</h3>
+ <p>Advanced NLP agents for text generation and analysis</p>
+ </div>
+ <div class="agent-card">
+ <div class="agent-icon"></div>
+ <h3>Computer Vision</h3>
+ <p>Image recognition and processing AI solutions</p>
+ </div>
+ <div class="agent-card">
+ <div class="agent-icon"></div>
+ <h3>Automation</h3>
+ <p>Task automation and workflow optimization agents</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="https://github.com/e2b-dev/awesome-ai-agents" target="_blank">GitHub</a>
+ <a href="https://x.com/pumpdotnews" target="_blank">X</a>
+ </div>
+ <div class="footer-contact">
+ <p>Contact: info@aiagents.scroll.pub</p>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9c11ca8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://aiagents.scroll.pub
+metaTags
+editButton /edit.html
+title AXXXAGENT - The AI Agents Hub
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..9c31e47
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01NMb2B5RdiqpWvsX61R2HxN",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll suggest the domain \"aiagents.scroll.pub\" - it's short, descriptive, and matches the website's purpose.\n\n---domain---\naiagents.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://aiagents.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AXXXAGENT - The AI Agents Hub\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">AXXXAGENT</div>\n <div class=\"nav-links\">\n <a href=\"https://github.com/e2b-dev/awesome-ai-agents\" target=\"_blank\" class=\"github-btn\">GitHub</a>\n <a href=\"https://x.com/pumpdotnews\" target=\"_blank\" class=\"x-btn\">X</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Discover Next-Gen AI Agents</h1>\n <p>Your centralized hub for cutting-edge AI technology</p>\n <div class=\"hero-buttons\">\n <a href=\"#agents\" class=\"cta-btn\">Explore Agents</a>\n </div>\n </div>\n <div class=\"hero-graphic\"></div>\n </section>\n\n <section id=\"agents\" class=\"agents-section\">\n <h2>Featured AI Agents</h2>\n <div class=\"agents-grid\">\n <div class=\"agent-card\">\n <div class=\"agent-icon\"></div>\n <h3>Language Models</h3>\n <p>Advanced NLP agents for text generation and analysis</p>\n </div>\n <div class=\"agent-card\">\n <div class=\"agent-icon\"></div>\n <h3>Computer Vision</h3>\n <p>Image recognition and processing AI solutions</p>\n </div>\n <div class=\"agent-card\">\n <div class=\"agent-icon\"></div>\n <h3>Automation</h3>\n <p>Task automation and workflow optimization agents</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"https://github.com/e2b-dev/awesome-ai-agents\" target=\"_blank\">GitHub</a>\n <a href=\"https://x.com/pumpdotnews\" target=\"_blank\">X</a>\n </div>\n <div class=\"footer-contact\">\n <p>Contact: info@aiagents.scroll.pub</p>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary: #0a1f44;\n --background: #000000;\n --accent: #1faaff;\n --text: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n background-color: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\n/* Typography */\nh1, h2, h3, .logo {\n font-family: 'Orbitron', sans-serif;\n letter-spacing: 2px;\n}\n\n/* Header */\nheader {\n background-color: var(--primary);\n padding: 1rem 2rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n backdrop-filter: blur(10px);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--text), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n transition: all 0.3s ease;\n}\n\n.github-btn, .x-btn {\n border: 1px solid var(--accent);\n}\n\n.nav-links a:hover {\n background-color: var(--accent);\n color: var(--background);\n}\n\n/* Hero Section */\n.hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6rem 2rem 2rem;\n background: linear-gradient(135deg, var(--primary), var(--background));\n position: relative;\n overflow: hidden;\n}\n\n.hero-content {\n max-width: 600px;\n z-index: 1;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--text), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero-graphic {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 500px;\n height: 500px;\n background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);\n opacity: 0.1;\n animation: pulse 4s infinite;\n}\n\n/* Agents Section */\n.agents-section {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.agents-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.agent-card {\n background: linear-gradient(145deg, var(--primary), rgba(10, 31, 68, 0.3));\n padding: 2rem;\n border-radius: 10px;\n transition: transform 0.3s ease;\n cursor: pointer;\n border: 1px solid transparent;\n}\n\n.agent-card:hover {\n transform: translateY(-5px);\n border-color: var(--accent);\n}\n\n/* Footer */\nfooter {\n background-color: var(--primary);\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.footer-links a {\n margin-right: 2rem;\n color: var(--text);\n text-decoration: none;\n}\n\n/* Animations */\n@keyframes pulse {\n 0% { transform: translateY(-50%) scale(1); opacity: 0.1; }\n 50% { transform: translateY(-50%) scale(1.1); opacity: 0.2; }\n 100% { transform: translateY(-50%) scale(1); opacity: 0.1; }\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .hero {\n flex-direction: column;\n text-align: center;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n\n .hero-graphic {\n width: 300px;\n height: 300px;\n }\n\n .nav-links a {\n margin-left: 1rem;\n padding: 0.3rem 0.7rem;\n }\n\n .footer-content {\n flex-direction: column;\n text-align: center;\n gap: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Add parallax effect to hero section\n window.addEventListener('scroll', function() {\n const heroGraphic = document.querySelector('.hero-graphic');\n const scrolled = window.pageYOffset;\n heroGraphic.style.transform = `translateY(calc(-50% + ${scrolled * 0.5}px))`;\n });\n\n // Add intersection observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n\n document.querySelectorAll('.agent-card').forEach((card) => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(card);\n });\n});\n---end---\n\nThis implementation features:\n- Clean, semantic HTML5 structure\n- Modern CSS with variables, gradients, and animations\n- Smooth scrolling and parallax effects\n- Intersection Observer for scroll animations\n- Mobile-responsive design\n- Accessible navigation\n- Performance-optimized animations\n- SEO-friendly structure\n- Beautiful gradient effects and hover states\n- Futuristic design elements while maintaining readability\n\nThe website maintains a professional look while incorporating engaging visual elements that emphasize the tech-focused nature of the content."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 607,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2551
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..6a61125
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# aiagents4.scroll.pub
+
+website generated by Claude from prompt: Create a website Theme: Dark blue and black, modern, and sleek design. Name: "AXXXAGENT" (Stylized in uppercase). Description: AXXXAGENT is a centralized hub showcasing the latest AI agents. The website should feel cutting-edge and futuristic, appealing to tech-savvy users. Requirements: Integrate links: GitHub link: https://github.com/e2b-dev/awesome-ai-agents. X link (formerly Twitter): https://x.com/pumpdotnews. Design features: A visually striking hero section with an animated or futuristic AI graphic. Clear call-to-action buttons linking to GitHub and X prominently in the header. A section listing or categorizing AI agents with brief descriptions. Responsive design that looks great on mobile, tablet, and desktop. Cool hover effects on buttons and links, emphasizing an advanced tech feel. Color palette: Dark blue (#0a1f44) as the primary color. Black (#000000) as the background. Accent color: Neon blue (#1faaff) for highlights and buttons. Typography: Use a clean, futuristic font for the logo and headers (e.g., Orbitron, Bebas Neue). A simple sans-serif font for body text for readability. Footer: Include contact info and links to GitHub and X again. Overall vibe: Sleek, minimalist, and professional, with subtle animations or interactive elements that scream "next-gen AI."
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f9a3d4a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Smooth scroll for anchor links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add parallax effect to hero section
+ window.addEventListener('scroll', function() {
+ const heroGraphic = document.querySelector('.hero-graphic');
+ const scrolled = window.pageYOffset;
+ heroGraphic.style.transform = `translateY(calc(-50% + ${scrolled * 0.5}px))`;
+ });
+
+ // Add intersection observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ document.querySelectorAll('.agent-card').forEach((card) => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(card);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ac7821d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,191 @@
+:root {
+ --primary: #0a1f44;
+ --background: #000000;
+ --accent: #1faaff;
+ --text: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+/* Typography */
+h1, h2, h3, .logo {
+ font-family: 'Orbitron', sans-serif;
+ letter-spacing: 2px;
+}
+
+/* Header */
+header {
+ background-color: var(--primary);
+ padding: 1rem 2rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ backdrop-filter: blur(10px);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.8rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--text), var(--accent));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text);
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ transition: all 0.3s ease;
+}
+
+.github-btn, .x-btn {
+ border: 1px solid var(--accent);
+}
+
+.nav-links a:hover {
+ background-color: var(--accent);
+ color: var(--background);
+}
+
+/* Hero Section */
+.hero {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6rem 2rem 2rem;
+ background: linear-gradient(135deg, var(--primary), var(--background));
+ position: relative;
+ overflow: hidden;
+}
+
+.hero-content {
+ max-width: 600px;
+ z-index: 1;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--text), var(--accent));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.hero-graphic {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle at center, var(--accent) 0%, transparent 70%);
+ opacity: 0.1;
+ animation: pulse 4s infinite;
+}
+
+/* Agents Section */
+.agents-section {
+ padding: 4rem 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.agents-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.agent-card {
+ background: linear-gradient(145deg, var(--primary), rgba(10, 31, 68, 0.3));
+ padding: 2rem;
+ border-radius: 10px;
+ transition: transform 0.3s ease;
+ cursor: pointer;
+ border: 1px solid transparent;
+}
+
+.agent-card:hover {
+ transform: translateY(-5px);
+ border-color: var(--accent);
+}
+
+/* Footer */
+footer {
+ background-color: var(--primary);
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.footer-links a {
+ margin-right: 2rem;
+ color: var(--text);
+ text-decoration: none;
+}
+
+/* Animations */
+@keyframes pulse {
+ 0% { transform: translateY(-50%) scale(1); opacity: 0.1; }
+ 50% { transform: translateY(-50%) scale(1.1); opacity: 0.2; }
+ 100% { transform: translateY(-50%) scale(1); opacity: 0.1; }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .hero {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-graphic {
+ width: 300px;
+ height: 300px;
+ }
+
+ .nav-links a {
+ margin-left: 1rem;
+ padding: 0.3rem 0.7rem;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+}
\ No newline at end of file