commit d940763db688514c46ae34e9a577d04fdb838fb5
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 08:17:17 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..a879d79
--- /dev/null
+++ b/body.html
@@ -0,0 +1,76 @@
+<header class="main-header">
+ <nav>
+ <div class="logo">NexAI</div>
+ <div class="nav-links">
+ <a href="#research">Research</a>
+ <a href="#products">Products</a>
+ <a href="#about">About</a>
+ <button class="cta-button">Get Started</button>
+ </div>
+ <button class="mobile-menu" aria-label="Menu">
+ <span></span><span></span><span></span>
+ </button>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Advancing AI Technology</h1>
+ <p>Building safe and accessible artificial intelligence to benefit humanity</p>
+ <div class="hero-cta">
+ <button class="primary-button">Explore AI Solutions</button>
+ <button class="secondary-button">View Research</button>
+ </div>
+ <div class="hero-graphic"></div>
+ </section>
+
+ <section id="research" class="features">
+ <h2>Breakthrough Research</h2>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="feature-icon">🧠</div>
+ <h3>Neural Networks</h3>
+ <p>Advanced deep learning models pushing the boundaries of AI capabilities</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🔍</div>
+ <h3>Natural Language</h3>
+ <p>Revolutionary language processing and generation systems</p>
+ </div>
+ <div class="feature-card">
+ <div class="feature-icon">🎯</div>
+ <h3>Computer Vision</h3>
+ <p>State-of-the-art image recognition and processing</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="cta-section">
+ <h2>Ready to Get Started?</h2>
+ <p>Join us in shaping the future of artificial intelligence</p>
+ <button class="primary-button">Contact Us</button>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>Company</h4>
+ <a href="#about">About</a>
+ <a href="#careers">Careers</a>
+ <a href="#contact">Contact</a>
+ </div>
+ <div class="footer-section">
+ <h4>Resources</h4>
+ <a href="#blog">Blog</a>
+ <a href="#docs">Documentation</a>
+ <a href="#research">Research</a>
+ </div>
+ <div class="footer-section">
+ <h4>Legal</h4>
+ <a href="#privacy">Privacy</a>
+ <a href="#terms">Terms</a>
+ <a href="#security">Security</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..d90b413
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://nexai.scroll.pub
+metaTags
+ description "Experience the future of AI with NexAI - Advancing artificial intelligence for everyone"
+ keywords "AI, artificial intelligence, machine learning, future technology"
+ author "NexAI"
+editButton /edit.html
+title NexAI - Advanced Artificial Intelligence Solutions
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..ccf542c
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01KZUskUqtUyx6kEUP5BMnSR",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create an OpenAI-inspired landing page. For the domain, I suggest:\n\n---domain---\nnexai.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://nexai.scroll.pub\nmetaTags\n description \"Experience the future of AI with NexAI - Advancing artificial intelligence for everyone\"\n keywords \"AI, artificial intelligence, machine learning, future technology\"\n author \"NexAI\"\neditButton /edit.html\ntitle NexAI - Advanced Artificial Intelligence Solutions\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header class=\"main-header\">\n <nav>\n <div class=\"logo\">NexAI</div>\n <div class=\"nav-links\">\n <a href=\"#research\">Research</a>\n <a href=\"#products\">Products</a>\n <a href=\"#about\">About</a>\n <button class=\"cta-button\">Get Started</button>\n </div>\n <button class=\"mobile-menu\" aria-label=\"Menu\">\n <span></span><span></span><span></span>\n </button>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Advancing AI Technology</h1>\n <p>Building safe and accessible artificial intelligence to benefit humanity</p>\n <div class=\"hero-cta\">\n <button class=\"primary-button\">Explore AI Solutions</button>\n <button class=\"secondary-button\">View Research</button>\n </div>\n <div class=\"hero-graphic\"></div>\n </section>\n\n <section id=\"research\" class=\"features\">\n <h2>Breakthrough Research</h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🧠</div>\n <h3>Neural Networks</h3>\n <p>Advanced deep learning models pushing the boundaries of AI capabilities</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🔍</div>\n <h3>Natural Language</h3>\n <p>Revolutionary language processing and generation systems</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\">🎯</div>\n <h3>Computer Vision</h3>\n <p>State-of-the-art image recognition and processing</p>\n </div>\n </div>\n </section>\n\n <section class=\"cta-section\">\n <h2>Ready to Get Started?</h2>\n <p>Join us in shaping the future of artificial intelligence</p>\n <button class=\"primary-button\">Contact Us</button>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>Company</h4>\n <a href=\"#about\">About</a>\n <a href=\"#careers\">Careers</a>\n <a href=\"#contact\">Contact</a>\n </div>\n <div class=\"footer-section\">\n <h4>Resources</h4>\n <a href=\"#blog\">Blog</a>\n <a href=\"#docs\">Documentation</a>\n <a href=\"#research\">Research</a>\n </div>\n <div class=\"footer-section\">\n <h4>Legal</h4>\n <a href=\"#privacy\">Privacy</a>\n <a href=\"#terms\">Terms</a>\n <a href=\"#security\">Security</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #10a37f;\n --secondary-color: #0e8d6f;\n --background-color: #ffffff;\n --text-color: #353740;\n --gradient-start: #10a37f;\n --gradient-end: #0e8d6f;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.main-header {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(var(--gradient-start), var(--gradient-end));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n align-items: center;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\nmain {\n padding-top: 80px;\n}\n\n.hero {\n min-height: 80vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem 5%;\n position: relative;\n overflow: hidden;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(var(--gradient-start), var(--gradient-end));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.hero p {\n font-size: 1.25rem;\n max-width: 600px;\n margin-bottom: 2rem;\n}\n\n.hero-graphic {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(circle at 50% 50%, rgba(16, 163, 127, 0.1) 0%, rgba(255, 255, 255, 0) 70%);\n z-index: -1;\n}\n\n.button {\n padding: 0.8rem 1.6rem;\n border-radius: 8px;\n border: none;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.primary-button {\n background: var(--primary-color);\n color: white;\n padding: 0.8rem 1.6rem;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.primary-button:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(16, 163, 127, 0.2);\n}\n\n.secondary-button {\n background: transparent;\n border: 2px solid var(--primary-color);\n color: var(--primary-color);\n padding: 0.8rem 1.6rem;\n border-radius: 8px;\n font-size: 1rem;\n cursor: pointer;\n margin-left: 1rem;\n transition: all 0.3s ease;\n}\n\n.secondary-button:hover {\n background: rgba(16, 163, 127, 0.1);\n transform: translateY(-2px);\n}\n\n.features {\n padding: 5rem 5%;\n background: #f7f7f8;\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2.5rem;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.cta-section {\n text-align: center;\n padding: 5rem 5%;\n background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));\n color: white;\n}\n\nfooter {\n background: #f7f7f8;\n padding: 3rem 5%;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.footer-section {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.footer-section h4 {\n margin-bottom: 1rem;\n}\n\n.footer-section a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: var(--primary-color);\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n\n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 2px;\n background: var(--text-color);\n transition: 0.3s ease;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n\n .hero-cta {\n flex-direction: column;\n gap: 1rem;\n }\n\n .secondary-button {\n margin-left: 0;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu functionality\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n \n mobileMenu.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n mobileMenu.classList.toggle('active');\n });\n\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 // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.feature-card').forEach(card => {\n observer.observe(card);\n });\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, semantic HTML5 structure\n2. Modern CSS with variables, flexbox, and grid\n3. Smooth animations and transitions\n4. Mobile-responsive design\n5. Accessibility features\n6. SEO-friendly meta tags\n7. Interactive elements with JavaScript\n8. Beautiful gradient effects and subtle animations\n9. Professional typography and spacing\n10. Performance optimized code\n\nThe design maintains simplicity while incorporating modern visual elements like subtle gradients, card hover effects, and smooth animations. The color scheme is inspired by OpenAI but unique enough to stand on its own."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 277,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3268
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..e74b4c9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# nexai.scroll.pub
+Website generated by Claude from prompt: A landing page similar to openai
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1ffa541
--- /dev/null
+++ b/script.js
@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu functionality
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ mobileMenu.classList.toggle('active');
+ });
+
+ // 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'
+ });
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.feature-card').forEach(card => {
+ observer.observe(card);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1861855
--- /dev/null
+++ b/style.css
@@ -0,0 +1,261 @@
+:root {
+ --primary-color: #10a37f;
+ --secondary-color: #0e8d6f;
+ --background-color: #ffffff;
+ --text-color: #353740;
+ --gradient-start: #10a37f;
+ --gradient-end: #0e8d6f;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+.main-header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ background: linear-gradient(var(--gradient-start), var(--gradient-end));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+main {
+ padding-top: 80px;
+}
+
+.hero {
+ min-height: 80vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem 5%;
+ position: relative;
+ overflow: hidden;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(var(--gradient-start), var(--gradient-end));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.hero p {
+ font-size: 1.25rem;
+ max-width: 600px;
+ margin-bottom: 2rem;
+}
+
+.hero-graphic {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at 50% 50%, rgba(16, 163, 127, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+ z-index: -1;
+}
+
+.button {
+ padding: 0.8rem 1.6rem;
+ border-radius: 8px;
+ border: none;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.primary-button {
+ background: var(--primary-color);
+ color: white;
+ padding: 0.8rem 1.6rem;
+ border: none;
+ border-radius: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.primary-button:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(16, 163, 127, 0.2);
+}
+
+.secondary-button {
+ background: transparent;
+ border: 2px solid var(--primary-color);
+ color: var(--primary-color);
+ padding: 0.8rem 1.6rem;
+ border-radius: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ margin-left: 1rem;
+ transition: all 0.3s ease;
+}
+
+.secondary-button:hover {
+ background: rgba(16, 163, 127, 0.1);
+ transform: translateY(-2px);
+}
+
+.features {
+ padding: 5rem 5%;
+ background: #f7f7f8;
+}
+
+.features h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ font-size: 2.5rem;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.feature-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+}
+
+.feature-icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.cta-section {
+ text-align: center;
+ padding: 5rem 5%;
+ background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
+ color: white;
+}
+
+footer {
+ background: #f7f7f8;
+ padding: 3rem 5%;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.footer-section {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.footer-section h4 {
+ margin-bottom: 1rem;
+}
+
+.footer-section a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.footer-section a:hover {
+ color: var(--primary-color);
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .mobile-menu {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 2px;
+ background: var(--text-color);
+ transition: 0.3s ease;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero-cta {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .secondary-button {
+ margin-left: 0;
+ }
+}