commit dc5406231b1427d99826c534392caa62ba9c5013
Author: root <root@hub.scroll.pub>
Date: 2025-01-01 10:50:39 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..49efade
--- /dev/null
+++ b/body.html
@@ -0,0 +1,81 @@
+<header>
+ <nav id="main-nav">
+ <div class="logo">龍</div>
+ <button class="menu-toggle" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#about">About</a></li>
+ <li><a href="#symbolism">Symbolism</a></li>
+ <li><a href="#types">Types</a></li>
+ <li><a href="#culture">Culture</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero">
+ <div class="dragon-animation">
+ <div class="dragon-body"></div>
+ </div>
+ <h1>The Chinese Dragon</h1>
+ <p class="subtitle">Guardian of Wisdom & Fortune</p>
+ </section>
+
+ <section id="about">
+ <h2>About Loong</h2>
+ <div class="content-wrapper">
+ <p>The Chinese dragon, known as Loong (龍), is a legendary creature in Chinese mythology and culture. Unlike Western dragons, Chinese dragons are benevolent and symbolize power, strength, and good fortune.</p>
+ </div>
+ </section>
+
+ <section id="symbolism">
+ <h2>Symbolism</h2>
+ <div class="symbol-grid">
+ <div class="symbol-item">
+ <h3>Power</h3>
+ <div class="symbol-icon power"></div>
+ <p>Symbol of imperial authority</p>
+ </div>
+ <div class="symbol-item">
+ <h3>Prosperity</h3>
+ <div class="symbol-icon prosperity"></div>
+ <p>Bringer of wealth and abundance</p>
+ </div>
+ <div class="symbol-item">
+ <h3>Wisdom</h3>
+ <div class="symbol-icon wisdom"></div>
+ <p>Source of knowledge and wisdom</p>
+ </div>
+ </div>
+ </section>
+
+ <section id="types">
+ <h2>Types of Dragons</h2>
+ <div class="dragon-types">
+ <div class="type-card">
+ <h3>Celestial Dragon</h3>
+ <p>Guardian of the heavenly realms</p>
+ </div>
+ <div class="type-card">
+ <h3>Earth Dragon</h3>
+ <p>Master of rivers and waters</p>
+ </div>
+ <div class="type-card">
+ <h3>Spiritual Dragon</h3>
+ <p>Bringer of wind and rain</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <p>Explore the mystical world of Chinese dragons</p>
+ <nav class="footer-nav">
+ <a href="#about">About</a>
+ <a href="#symbolism">Symbolism</a>
+ <a href="#types">Types</a>
+ </nav>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..90ed715
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://loong.scroll.pub
+metaTags
+editButton /edit.html
+title The Majestic Chinese Dragon (Loong) - Symbol of Power & Prosperity
+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..737bf16
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Kz8rojqnEZ32rpAcZmcsSQ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website about the majestic Chinese dragon (Loong).\n\n---domain---\nloong.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://loong.scroll.pub\nmetaTags\neditButton /edit.html\ntitle The Majestic Chinese Dragon (Loong) - Symbol of Power & Prosperity\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav id=\"main-nav\">\n <div class=\"logo\">龍</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#symbolism\">Symbolism</a></li>\n <li><a href=\"#types\">Types</a></li>\n <li><a href=\"#culture\">Culture</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <div class=\"dragon-animation\">\n <div class=\"dragon-body\"></div>\n </div>\n <h1>The Chinese Dragon</h1>\n <p class=\"subtitle\">Guardian of Wisdom & Fortune</p>\n </section>\n\n <section id=\"about\">\n <h2>About Loong</h2>\n <div class=\"content-wrapper\">\n <p>The Chinese dragon, known as Loong (龍), is a legendary creature in Chinese mythology and culture. Unlike Western dragons, Chinese dragons are benevolent and symbolize power, strength, and good fortune.</p>\n </div>\n </section>\n\n <section id=\"symbolism\">\n <h2>Symbolism</h2>\n <div class=\"symbol-grid\">\n <div class=\"symbol-item\">\n <h3>Power</h3>\n <div class=\"symbol-icon power\"></div>\n <p>Symbol of imperial authority</p>\n </div>\n <div class=\"symbol-item\">\n <h3>Prosperity</h3>\n <div class=\"symbol-icon prosperity\"></div>\n <p>Bringer of wealth and abundance</p>\n </div>\n <div class=\"symbol-item\">\n <h3>Wisdom</h3>\n <div class=\"symbol-icon wisdom\"></div>\n <p>Source of knowledge and wisdom</p>\n </div>\n </div>\n </section>\n\n <section id=\"types\">\n <h2>Types of Dragons</h2>\n <div class=\"dragon-types\">\n <div class=\"type-card\">\n <h3>Celestial Dragon</h3>\n <p>Guardian of the heavenly realms</p>\n </div>\n <div class=\"type-card\">\n <h3>Earth Dragon</h3>\n <p>Master of rivers and waters</p>\n </div>\n <div class=\"type-card\">\n <h3>Spiritual Dragon</h3>\n <p>Bringer of wind and rain</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>Explore the mystical world of Chinese dragons</p>\n <nav class=\"footer-nav\">\n <a href=\"#about\">About</a>\n <a href=\"#symbolism\">Symbolism</a>\n <a href=\"#types\">Types</a>\n </nav>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #e60012;\n --secondary-color: #ffd700;\n --text-color: #333;\n --background-color: #fff;\n --accent-color: #1a1a1a;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Segoe UI\", system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n overflow-x: hidden;\n}\n\n/* Header & Navigation */\nheader {\n position: fixed;\n width: 100%;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n}\n\n.logo {\n font-size: 2.5rem;\n color: var(--primary-color);\n}\n\n#main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\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/* Hero Section */\n#hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: linear-gradient(135deg, #fff1f1, #fff);\n position: relative;\n overflow: hidden;\n}\n\n.dragon-animation {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0.1;\n}\n\nh1 {\n font-size: 4rem;\n color: var(--primary-color);\n text-align: center;\n margin-bottom: 1rem;\n z-index: 1;\n}\n\n.subtitle {\n font-size: 1.5rem;\n color: var(--accent-color);\n z-index: 1;\n}\n\n/* Content Sections */\nsection {\n padding: 5rem 2rem;\n}\n\nh2 {\n font-size: 2.5rem;\n color: var(--primary-color);\n margin-bottom: 2rem;\n text-align: center;\n}\n\n.content-wrapper {\n max-width: 800px;\n margin: 0 auto;\n}\n\n/* Symbol Grid */\n.symbol-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.symbol-item {\n text-align: center;\n padding: 2rem;\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.symbol-item:hover {\n transform: translateY(-5px);\n}\n\n/* Dragon Types */\n.dragon-types {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.type-card {\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: white;\n padding: 2rem;\n border-radius: 10px;\n text-align: center;\n transition: transform 0.3s ease;\n}\n\n.type-card:hover {\n transform: scale(1.05);\n}\n\n/* Footer */\nfooter {\n background: var(--accent-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-nav {\n margin-top: 1rem;\n}\n\n.footer-nav a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n background: white;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n flex-direction: column;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n\n .subtitle {\n font-size: 1.2rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n\n menuToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Smooth scrolling for navigation 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 target.scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Dragon animation\n const dragonBody = document.querySelector('.dragon-body');\n let position = 0;\n\n function animateDragon() {\n position += 1;\n dragonBody.style.transform = `translateX(${Math.sin(position * 0.02) * 50}px) \n translateY(${Math.cos(position * 0.02) * 30}px)`;\n requestAnimationFrame(animateDragon);\n }\n\n animateDragon();\n\n // Intersection Observer for fade-in animations\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, {\n threshold: 0.1\n });\n\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n---end---\n\nThis website features:\n1. A fixed header with smooth navigation\n2. A dramatic hero section with animated dragon\n3. Sections about Chinese dragons with beautiful layouts\n4. Responsive design that works on all devices\n5. Smooth scrolling and animations\n6. Interactive elements with hover effects\n7. Modern gradient backgrounds\n8. Elegant typography\n9. Clean semantic HTML structure\n10. Accessible navigation and content\n\nThe design uses traditional Chinese colors (red and gold) while maintaining a modern aesthetic. The animations and transitions create an engaging experience without being overwhelming."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 278,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2698
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..8f5c9b0
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# loong.scroll.pub
+Website generated by Claude from prompt: a website about Chinese dragon - loong
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..43a4feb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Dragon animation
+ const dragonBody = document.querySelector('.dragon-body');
+ let position = 0;
+
+ function animateDragon() {
+ position += 1;
+ dragonBody.style.transform = `translateX(${Math.sin(position * 0.02) * 50}px)
+ translateY(${Math.cos(position * 0.02) * 30}px)`;
+ requestAnimationFrame(animateDragon);
+ }
+
+ animateDragon();
+
+ // Intersection Observer for fade-in animations
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, {
+ threshold: 0.1
+ });
+
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a93dd4c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,198 @@
+:root {
+ --primary-color: #e60012;
+ --secondary-color: #ffd700;
+ --text-color: #333;
+ --background-color: #fff;
+ --accent-color: #1a1a1a;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Segoe UI", system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ overflow-x: hidden;
+}
+
+/* Header & Navigation */
+header {
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+}
+
+.logo {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+}
+
+#main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.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);
+}
+
+/* Hero Section */
+#hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(135deg, #fff1f1, #fff);
+ position: relative;
+ overflow: hidden;
+}
+
+.dragon-animation {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ opacity: 0.1;
+}
+
+h1 {
+ font-size: 4rem;
+ color: var(--primary-color);
+ text-align: center;
+ margin-bottom: 1rem;
+ z-index: 1;
+}
+
+.subtitle {
+ font-size: 1.5rem;
+ color: var(--accent-color);
+ z-index: 1;
+}
+
+/* Content Sections */
+section {
+ padding: 5rem 2rem;
+}
+
+h2 {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 2rem;
+ text-align: center;
+}
+
+.content-wrapper {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+/* Symbol Grid */
+.symbol-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.symbol-item {
+ text-align: center;
+ padding: 2rem;
+ background: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.symbol-item:hover {
+ transform: translateY(-5px);
+}
+
+/* Dragon Types */
+.dragon-types {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+}
+
+.type-card {
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 2rem;
+ border-radius: 10px;
+ text-align: center;
+ transition: transform 0.3s ease;
+}
+
+.type-card:hover {
+ transform: scale(1.05);
+}
+
+/* Footer */
+footer {
+ background: var(--accent-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+}
+
+.footer-nav {
+ margin-top: 1rem;
+}
+
+.footer-nav a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: block;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: white;
+ padding: 1rem;
+ }
+
+ .nav-links.active {
+ display: flex;
+ flex-direction: column;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ .subtitle {
+ font-size: 1.2rem;
+ }
+}
\ No newline at end of file