commit 904220cd4684805091c1846c486c7f1c4a5bc3f3
Author: root <root@hub.scroll.pub> Date: 2024-12-27 10:16:19 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..617756e --- /dev/null +++ b/body.html @@ -0,0 +1,63 @@ +<header> + <nav> + <div class="logo">AI Quest</div> + <div class="nav-links"> + <a href="#play">Play Now</a> + <a href="#features">Features</a> + <a href="#about">About</a> + </div> + </nav> +</header> + +<main> + <section id="hero"> + <div class="hero-content"> + <h1>Welcome to AI Quest</h1> + <p>Where artificial intelligence meets epic adventure</p> + <button class="cta-button" aria-label="Start your journey">Begin Adventure</button> + </div> + <div class="hero-backdrop"></div> + </section> + + <section id="features"> + <h2>Game Features</h2> + <div class="feature-grid"> + <div class="feature-card"> + <div class="feature-icon" aria-hidden="true">🤖</div> + <h3>Adaptive AI</h3> + <p>NPCs that learn and evolve based on your choices</p> + </div> + <div class="feature-card"> + <div class="feature-icon" aria-hidden="true">🌍</div> + <h3>Dynamic World</h3> + <p>Procedurally generated landscapes that never repeat</p> + </div> + <div class="feature-card"> + <div class="feature-icon" aria-hidden="true">⚔️</div> + <h3>Strategic Combat</h3> + <p>Intelligent battle system that adapts to your style</p> + </div> + <div class="feature-card"> + <div class="feature-icon" aria-hidden="true">📖</div> + <h3>Endless Stories</h3> + <p>AI-generated quests that create unique narratives</p> + </div> + </div> + </section> + + <section id="about"> + <h2>About AI Quest</h2> + <p>Experience a revolutionary RPG where every decision matters and every playthrough is unique. Our advanced AI creates personalized adventures that adapt to your playstyle.</p> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-links"> + <a href="#privacy">Privacy Policy</a> + <a href="#terms">Terms of Service</a> + <a href="#contact">Contact</a> + </div> + <p>Made with passion by AI Quest Team</p> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..70d26c5 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://aiquest.scroll.pub +metaTags +editButton /edit.html +title AI Quest - The Intelligent RPG Experience +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..3073fde --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# aiquest.scroll.pub +Website generated by Claude from prompt: Ai rpg \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5244491 --- /dev/null +++ b/script.js @@ -0,0 +1,45 @@ +document.addEventListener('DOMContentLoaded', () => { + // Smooth scroll for navigation 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 + const hero = document.querySelector('#hero'); + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + hero.style.transform = `translateY(${scrolled * 0.5}px)`; + }); + + // Animate feature cards on scroll + const cards = document.querySelectorAll('.feature-card'); + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); + }, { threshold: 0.1 }); + + cards.forEach(card => { + card.style.opacity = '0'; + card.style.transform = 'translateY(20px)'; + card.style.transition = 'all 0.6s ease-out'; + observer.observe(card); + }); + + // Add hover effect to CTA button + const ctaButton = document.querySelector('.cta-button'); + ctaButton.addEventListener('mouseenter', () => { + ctaButton.style.transform = 'scale(1.05)'; + }); + ctaButton.addEventListener('mouseleave', () => { + ctaButton.style.transform = 'scale(1)'; + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..3242ca7 --- /dev/null +++ b/style.css @@ -0,0 +1,197 @@ +:root { + --primary-color: #6e44ff; + --secondary-color: #2a1b3d; + --accent-color: #ff44a4; + --text-light: #ffffff; + --text-dark: #1a1a1a; + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + color: var(--text-dark); + background: linear-gradient(135deg, #1a1a1a, #2a1b3d); + min-height: 100vh; +} + +header { + position: fixed; + width: 100%; + z-index: 1000; + background: rgba(42, 27, 61, 0.95); + backdrop-filter: blur(10px); +} + +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: bold; + color: var(--text-light); + text-shadow: 0 0 10px var(--accent-color); +} + +.nav-links a { + color: var(--text-light); + text-decoration: none; + margin-left: 2rem; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--accent-color); +} + +#hero { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.hero-content { + text-align: center; + color: var(--text-light); + z-index: 2; +} + +.hero-backdrop { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient(circle at center, var(--primary-color) 0%, transparent 70%); + opacity: 0.3; + animation: pulse 4s infinite; +} + +h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + text-shadow: 0 0 20px var(--primary-color); +} + +.cta-button { + padding: 1rem 2rem; + font-size: 1.2rem; + background: var(--accent-color); + border: none; + border-radius: 30px; + color: var(--text-light); + cursor: pointer; + transition: var(--transition); + box-shadow: 0 0 20px rgba(255, 68, 164, 0.3); +} + +.cta-button:hover { + transform: scale(1.05); + box-shadow: 0 0 30px rgba(255, 68, 164, 0.5); +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + padding: 2rem 5%; + max-width: 1200px; + margin: 0 auto; +} + +.feature-card { + background: rgba(255, 255, 255, 0.1); + padding: 2rem; + border-radius: 15px; + backdrop-filter: blur(10px); + transition: var(--transition); + color: var(--text-light); +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 30px rgba(110, 68, 255, 0.2); +} + +.feature-icon { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +section { + padding: 5rem 1rem; +} + +h2 { + text-align: center; + color: var(--text-light); + margin-bottom: 2rem; + font-size: 2.5rem; +} + +footer { + background: rgba(42, 27, 61, 0.95); + padding: 2rem 5%; + color: var(--text-light); +} + +.footer-content { + max-width: 1200px; + margin: 0 auto; + text-align: center; +} + +.footer-links { + margin-bottom: 1rem; +} + +.footer-links a { + color: var(--text-light); + text-decoration: none; + margin: 0 1rem; + transition: var(--transition); +} + +.footer-links a:hover { + color: var(--accent-color); +} + +@keyframes pulse { + 0% { opacity: 0.3; } + 50% { opacity: 0.5; } + 100% { opacity: 0.3; } +} + +@media (max-width: 768px) { + nav { + flex-direction: column; + gap: 1rem; + } + + .nav-links a { + margin: 0 1rem; + } + + h1 { + font-size: 2.5rem; + } + + .feature-grid { + grid-template-columns: 1fr; + } +}