commit c084d06566e51402e81264471dc724edb6e07388
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 13:25:19 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8c27db7
--- /dev/null
+++ b/body.html
@@ -0,0 +1,64 @@
+<header>
+ <nav>
+ <div class="logo">DoggoMarket</div>
+ <div class="nav-links">
+ <a href="#browse">Browse Dogs</a>
+ <a href="#sell">Sell a Dog</a>
+ <a href="#about">About Us</a>
+ <button class="login-btn">Login</button>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Find Your Perfect Furry Friend</h1>
+ <p>Safe, trusted dog marketplace with verified breeders</p>
+ <div class="search-container">
+ <input type="text" placeholder="Search by breed, age, or location..." aria-label="Search dogs">
+ <button class="search-btn">Search</button>
+ </div>
+ </section>
+
+ <section id="featured" class="featured">
+ <h2>Featured Dogs</h2>
+ <div class="dog-grid">
+ <article class="dog-card">
+ <div class="dog-image"></div>
+ <h3>Golden Retriever</h3>
+ <p>3 months old</p>
+ <p class="price">$1,200</p>
+ <button class="view-btn">View Details</button>
+ </article>
+ <article class="dog-card">
+ <div class="dog-image"></div>
+ <h3>Siberian Husky</h3>
+ <p>2 months old</p>
+ <p class="price">$1,500</p>
+ <button class="view-btn">View Details</button>
+ </article>
+ <article class="dog-card">
+ <div class="dog-image"></div>
+ <h3>French Bulldog</h3>
+ <p>4 months old</p>
+ <p class="price">$2,000</p>
+ <button class="view-btn">View Details</button>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>DoggoMarket</h4>
+ <p>Connecting dog lovers with responsible breeders</p>
+ </div>
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <a href="#terms">Terms of Service</a>
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#contact">Contact Us</a>
+ </div>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..a97c7c0
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://doggo.scroll.pub
+metaTags
+editButton /edit.html
+title DoggoMarket - Your Trusted Dog Marketplace
+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..ffd7cfe
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01VAzkEktMsHThKHdxVRFiyS",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a dog trading/marketplace website with a clean, modern design.\n\nSuggested domain name: doggo.scroll.pub\n\n---domain---\ndoggo.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://doggo.scroll.pub\nmetaTags\neditButton /edit.html\ntitle DoggoMarket - Your Trusted Dog Marketplace\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">DoggoMarket</div>\n <div class=\"nav-links\">\n <a href=\"#browse\">Browse Dogs</a>\n <a href=\"#sell\">Sell a Dog</a>\n <a href=\"#about\">About Us</a>\n <button class=\"login-btn\">Login</button>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Find Your Perfect Furry Friend</h1>\n <p>Safe, trusted dog marketplace with verified breeders</p>\n <div class=\"search-container\">\n <input type=\"text\" placeholder=\"Search by breed, age, or location...\" aria-label=\"Search dogs\">\n <button class=\"search-btn\">Search</button>\n </div>\n </section>\n\n <section id=\"featured\" class=\"featured\">\n <h2>Featured Dogs</h2>\n <div class=\"dog-grid\">\n <article class=\"dog-card\">\n <div class=\"dog-image\"></div>\n <h3>Golden Retriever</h3>\n <p>3 months old</p>\n <p class=\"price\">$1,200</p>\n <button class=\"view-btn\">View Details</button>\n </article>\n <article class=\"dog-card\">\n <div class=\"dog-image\"></div>\n <h3>Siberian Husky</h3>\n <p>2 months old</p>\n <p class=\"price\">$1,500</p>\n <button class=\"view-btn\">View Details</button>\n </article>\n <article class=\"dog-card\">\n <div class=\"dog-image\"></div>\n <h3>French Bulldog</h3>\n <p>4 months old</p>\n <p class=\"price\">$2,000</p>\n <button class=\"view-btn\">View Details</button>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>DoggoMarket</h4>\n <p>Connecting dog lovers with responsible breeders</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <a href=\"#terms\">Terms of Service</a>\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#contact\">Contact Us</a>\n </div>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #4A90E2;\n --secondary-color: #2C3E50;\n --accent-color: #E74C3C;\n --background-color: #F5F6FA;\n --text-color: #2C3E50;\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 background-color: var(--background-color);\n}\n\nheader {\n background: white;\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\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\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.login-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 0.5rem 1.5rem;\n border-radius: 25px;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.login-btn:hover {\n transform: translateY(-2px);\n}\n\n.hero {\n margin-top: 80px;\n padding: 4rem 2rem;\n text-align: center;\n background: linear-gradient(135deg, #4A90E2 0%, #67B26F 100%);\n color: white;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.search-container {\n max-width: 600px;\n margin: 2rem auto;\n display: flex;\n gap: 1rem;\n}\n\n.search-container input {\n flex: 1;\n padding: 1rem;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n}\n\n.search-btn {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 0 2rem;\n border-radius: 25px;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.search-btn:hover {\n background: #c0392b;\n}\n\n.featured {\n max-width: 1200px;\n margin: 4rem auto;\n padding: 0 2rem;\n}\n\n.featured h2 {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.dog-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.dog-card {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.dog-card:hover {\n transform: translateY(-5px);\n}\n\n.dog-image {\n height: 200px;\n background: #ddd;\n background-size: cover;\n background-position: center;\n}\n\n.dog-card h3, .dog-card p {\n padding: 0.5rem 1rem;\n}\n\n.price {\n color: var(--accent-color);\n font-weight: bold;\n}\n\n.view-btn {\n width: 100%;\n padding: 1rem;\n background: var(--primary-color);\n color: white;\n border: none;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.view-btn:hover {\n background: #357ABD;\n}\n\nfooter {\n background: var(--secondary-color);\n color: white;\n padding: 3rem 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.footer-section a {\n display: block;\n color: white;\n text-decoration: none;\n margin: 0.5rem 0;\n opacity: 0.8;\n transition: opacity 0.3s ease;\n}\n\n.footer-section a:hover {\n opacity: 1;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n \n .search-container {\n flex-direction: column;\n }\n \n .search-btn {\n width: 100%;\n padding: 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Random dog images for demo\n const dogImages = [\n 'url(\"data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' fill=\\'%23ddd\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath d=\\'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\'/%3E%3C/svg%3E\")',\n 'url(\"data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' fill=\\'%23ddd\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath d=\\'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\'/%3E%3C/svg%3E\")',\n 'url(\"data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' fill=\\'%23ddd\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath d=\\'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\'/%3E%3C/svg%3E\")'\n ];\n\n const dogImageDivs = document.querySelectorAll('.dog-image');\n dogImageDivs.forEach((div, index) => {\n div.style.backgroundImage = dogImages[index];\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 // Simple form validation\n const searchInput = document.querySelector('.search-container input');\n const searchBtn = document.querySelector('.search-btn');\n\n searchBtn.addEventListener('click', function() {\n if (searchInput.value.trim() === '') {\n searchInput.style.border = '2px solid var(--accent-color)';\n setTimeout(() => {\n searchInput.style.border = 'none';\n }, 2000);\n }\n });\n});\n---end---\n\nThis creates a modern, responsive dog marketplace website with:\n\n1. Fixed header with navigation\n2. Hero section with search functionality\n3. Featured dogs grid with hover effects\n4. Responsive footer\n5. Clean animations and transitions\n6. Mobile-friendly design\n7. Accessibility features\n8. SEO-friendly structure\n9. Modern gradient backgrounds\n10. Card-based layout for dog listings\n\nThe design uses a clean color scheme with blue as primary color and includes subtle animations for better user experience. The layout is fully responsive and works well on all screen sizes."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 282,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3162
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c392e40
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# doggo.scroll.pub
+Website generated by Claude from prompt: 创建一个狗狗交易网站
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..be229dc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Random dog images for demo
+ const dogImages = [
+ 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23ddd\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\'/%3E%3C/svg%3E")',
+ 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23ddd\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\'/%3E%3C/svg%3E")',
+ 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23ddd\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\'/%3E%3C/svg%3E")'
+ ];
+
+ const dogImageDivs = document.querySelectorAll('.dog-image');
+ dogImageDivs.forEach((div, index) => {
+ div.style.backgroundImage = dogImages[index];
+ });
+
+ // 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'
+ });
+ });
+ });
+
+ // Simple form validation
+ const searchInput = document.querySelector('.search-container input');
+ const searchBtn = document.querySelector('.search-btn');
+
+ searchBtn.addEventListener('click', function() {
+ if (searchInput.value.trim() === '') {
+ searchInput.style.border = '2px solid var(--accent-color)';
+ setTimeout(() => {
+ searchInput.style.border = 'none';
+ }, 2000);
+ }
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7803764
--- /dev/null
+++ b/style.css
@@ -0,0 +1,222 @@
+:root {
+ --primary-color: #4A90E2;
+ --secondary-color: #2C3E50;
+ --accent-color: #E74C3C;
+ --background-color: #F5F6FA;
+ --text-color: #2C3E50;
+}
+
+* {
+ 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);
+ background-color: var(--background-color);
+}
+
+header {
+ background: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.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);
+}
+
+.login-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1.5rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+}
+
+.login-btn:hover {
+ transform: translateY(-2px);
+}
+
+.hero {
+ margin-top: 80px;
+ padding: 4rem 2rem;
+ text-align: center;
+ background: linear-gradient(135deg, #4A90E2 0%, #67B26F 100%);
+ color: white;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.search-container {
+ max-width: 600px;
+ margin: 2rem auto;
+ display: flex;
+ gap: 1rem;
+}
+
+.search-container input {
+ flex: 1;
+ padding: 1rem;
+ border: none;
+ border-radius: 25px;
+ font-size: 1rem;
+}
+
+.search-btn {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 0 2rem;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+.search-btn:hover {
+ background: #c0392b;
+}
+
+.featured {
+ max-width: 1200px;
+ margin: 4rem auto;
+ padding: 0 2rem;
+}
+
+.featured h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.dog-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.dog-card {
+ background: white;
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.dog-card:hover {
+ transform: translateY(-5px);
+}
+
+.dog-image {
+ height: 200px;
+ background: #ddd;
+ background-size: cover;
+ background-position: center;
+}
+
+.dog-card h3, .dog-card p {
+ padding: 0.5rem 1rem;
+}
+
+.price {
+ color: var(--accent-color);
+ font-weight: bold;
+}
+
+.view-btn {
+ width: 100%;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ cursor: pointer;
+ transition: background 0.3s ease;
+}
+
+.view-btn:hover {
+ background: #357ABD;
+}
+
+footer {
+ background: var(--secondary-color);
+ color: white;
+ padding: 3rem 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section a {
+ display: block;
+ color: white;
+ text-decoration: none;
+ margin: 0.5rem 0;
+ opacity: 0.8;
+ transition: opacity 0.3s ease;
+}
+
+.footer-section a:hover {
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .search-container {
+ flex-direction: column;
+ }
+
+ .search-btn {
+ width: 100%;
+ padding: 1rem;
+ }
+}
\ No newline at end of file