Changes to tales.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+

StoryLane

+
+
+ Features
+ Pricing
+ Examples
+
+
+
+
+
+
+
+
+
+
+
+

Create Beautiful Stories That Convert

+

Turn your content into engaging visual stories that drive results

+
+
+
+
+
+
+
+
+
+
+
+
+
+

Why Choose StoryLane

+
+
+
📱
+

Mobile Responsive

+

Stories that look perfect on every device

+
+
+
🎨
+

Easy Editor

+

Create stories with our intuitive drag-and-drop editor

+
+
+
📊
+

Analytics

+

Track performance with detailed insights

+
+
+
+
+
+
+
+
+

StoryLane

+

Create stories that convert

+
+
+

Product

+ Features
+ Pricing
+ Examples
+
+
+

Company

+ About
+ Blog
+ Careers
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://tales.scroll.pub
+ metaTags
+ editButton /edit.html
+ title StoryLane - Share Your Stories
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01DnYiuCJiVQwfoPLsQYX8CF",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a StoryLane clone. For the domain, I suggest:\n\n---domain---\ntales.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://tales.scroll.pub\nmetaTags\neditButton /edit.html\ntitle StoryLane - Share Your Stories\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n \n
\n\n
\n
\n
\n

Create Beautiful Stories That Convert

\n

Turn your content into engaging visual stories that drive results

\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n

Why Choose StoryLane

\n
\n
\n
📱
\n

Mobile Responsive

\n

Stories that look perfect on every device

\n
\n
\n
🎨
\n

Easy Editor

\n

Create stories with our intuitive drag-and-drop editor

\n
\n
\n
📊
\n

Analytics

\n

Track performance with detailed insights

\n
\n
\n
\n
\n\n\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --secondary-color: #818cf8;\n --text-color: #1f2937;\n --background-color: #ffffff;\n --accent-color: #c7d2fe;\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 padding: 1rem 2rem;\n background: var(--background-color);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\n.nav-container {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo h1 {\n font-size: 1.8rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-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 font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.cta-button, .primary-button {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n border-radius: 25px;\n cursor: pointer;\n font-weight: 600;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.cta-button:hover, .primary-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);\n}\n\n.hero {\n margin-top: 80px;\n padding: 4rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 1200px;\n margin: 80px auto 0;\n min-height: 80vh;\n}\n\n.hero-content {\n flex: 1;\n padding-right: 2rem;\n}\n\n.hero-content h2 {\n font-size: 3.5rem;\n margin-bottom: 1.5rem;\n line-height: 1.2;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero-image {\n flex: 1;\n position: relative;\n height: 500px;\n}\n\n.floating-card {\n position: absolute;\n background: white;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n animation: float 6s ease-in-out infinite;\n}\n\n.card-1 {\n width: 300px;\n height: 400px;\n top: 0;\n right: 50px;\n animation-delay: 0s;\n}\n\n.card-2 {\n width: 250px;\n height: 350px;\n top: 100px;\n right: 250px;\n animation-delay: -3s;\n}\n\n@keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\n 100% { transform: translateY(0px); }\n}\n\n.features {\n padding: 4rem 2rem;\n background: linear-gradient(135deg, #f8fafc, #f1f5f9);\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2.5rem;\n}\n\n.features-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: 15px;\n text-align: center;\n transition: transform 0.3s ease;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\nfooter {\n background: var(--text-color);\n color: white;\n padding: 4rem 2rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-section a {\n display: block;\n color: #e5e7eb;\n text-decoration: none;\n margin: 0.5rem 0;\n transition: color 0.3s ease;\n}\n\n.footer-section a:hover {\n color: var(--accent-color);\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero {\n flex-direction: column;\n text-align: center;\n padding: 2rem 1rem;\n }\n \n .hero-content {\n padding-right: 0;\n margin-bottom: 2rem;\n }\n \n .hero-content h2 {\n font-size: 2.5rem;\n }\n \n .hero-image {\n height: 300px;\n }\n \n .floating-card {\n transform: scale(0.8);\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 mobileMenu.classList.toggle('active');\n navLinks.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 const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\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 observer.unobserve(entry.target);\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('.feature-card').forEach(card => {\n observer.observe(card);\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive clone of StoryLane with smooth animations, gradient effects, and interactive elements. Key features include:\n\n1. Floating card animation in the hero section\n2. Smooth scrolling navigation\n3. Responsive design with mobile menu\n4. Gradient text effects\n5. Card hover animations\n6. Intersection Observer for scroll animations\n7. Modern CSS grid and flexbox layouts\n8. Accessible navigation and semantic HTML\n9. Performance optimized animations\n10. Clean, maintainable code structure\n\nThe design uses a modern color scheme with gradients and subtle animations to create an engaging user experience while maintaining professional aesthetics."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 279,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3064
+ }
+ }
readme.scroll
Changed around line 1
+ # tales.scroll.pub
+ Website generated by Claude from prompt: Create a website clone of storylane.io
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu functionality
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu?.addEventListener('click', () => {
+ mobileMenu.classList.toggle('active');
+ navLinks.classList.toggle('active');
+ });
+
+ // Smooth scroll for anchor 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'
+ });
+ }
+ });
+ });
+
+ // 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');
+ observer.unobserve(entry.target);
+ }
+ });
+ }, observerOptions);
+
+ document.querySelectorAll('.feature-card').forEach(card => {
+ observer.observe(card);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #6366f1;
+ --secondary-color: #818cf8;
+ --text-color: #1f2937;
+ --background-color: #ffffff;
+ --accent-color: #c7d2fe;
+ }
+
+ * {
+ 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 {
+ padding: 1rem 2rem;
+ background: var(--background-color);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ }
+
+ .nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo h1 {
+ font-size: 1.8rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: color 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ color: var(--primary-color);
+ }
+
+ .cta-button, .primary-button {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: 25px;
+ cursor: pointer;
+ font-weight: 600;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .cta-button:hover, .primary-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+ }
+
+ .hero {
+ margin-top: 80px;
+ padding: 4rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 1200px;
+ margin: 80px auto 0;
+ min-height: 80vh;
+ }
+
+ .hero-content {
+ flex: 1;
+ padding-right: 2rem;
+ }
+
+ .hero-content h2 {
+ font-size: 3.5rem;
+ margin-bottom: 1.5rem;
+ line-height: 1.2;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .hero-image {
+ flex: 1;
+ position: relative;
+ height: 500px;
+ }
+
+ .floating-card {
+ position: absolute;
+ background: white;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ animation: float 6s ease-in-out infinite;
+ }
+
+ .card-1 {
+ width: 300px;
+ height: 400px;
+ top: 0;
+ right: 50px;
+ animation-delay: 0s;
+ }
+
+ .card-2 {
+ width: 250px;
+ height: 350px;
+ top: 100px;
+ right: 250px;
+ animation-delay: -3s;
+ }
+
+ @keyframes float {
+ 0% { transform: translateY(0px); }
+ 50% { transform: translateY(-20px); }
+ 100% { transform: translateY(0px); }
+ }
+
+ .features {
+ padding: 4rem 2rem;
+ background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+ }
+
+ .features h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ font-size: 2.5rem;
+ }
+
+ .features-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: 15px;
+ text-align: center;
+ transition: transform 0.3s ease;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .feature-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .feature-icon {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ footer {
+ background: var(--text-color);
+ color: white;
+ padding: 4rem 2rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ }
+
+ .footer-section a {
+ display: block;
+ color: #e5e7eb;
+ text-decoration: none;
+ margin: 0.5rem 0;
+ transition: color 0.3s ease;
+ }
+
+ .footer-section a:hover {
+ color: var(--accent-color);
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero {
+ flex-direction: column;
+ text-align: center;
+ padding: 2rem 1rem;
+ }
+
+ .hero-content {
+ padding-right: 0;
+ margin-bottom: 2rem;
+ }
+
+ .hero-content h2 {
+ font-size: 2.5rem;
+ }
+
+ .hero-image {
+ height: 300px;
+ }
+
+ .floating-card {
+ transform: scale(0.8);
+ }
+ }