commit dc6ddba3680a4f42c5a981bff888e7eb7da42383
Author: root <root@hub.scroll.pub>
Date: 2024-12-31 13:48:31 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c8d0c12
--- /dev/null
+++ b/body.html
@@ -0,0 +1,62 @@
+<header>
+ <nav>
+ <div class="logo">HomeFinder</div>
+ <div class="nav-links">
+ <a href="#" class="active">Buy</a>
+ <a href="#">Rent</a>
+ <a href="#">Sell</a>
+ <a href="#">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Find Your Dream Home</h1>
+ <div class="search-container">
+ <input type="text" id="search" placeholder="Enter location, zip code, or address">
+ <button id="searchBtn">Search</button>
+ </div>
+ <div class="filters">
+ <select id="propertyType">
+ <option value="">Property Type</option>
+ <option value="house">House</option>
+ <option value="apartment">Apartment</option>
+ <option value="condo">Condo</option>
+ </select>
+ <select id="priceRange">
+ <option value="">Price Range</option>
+ <option value="0-300000">$0 - $300,000</option>
+ <option value="300001-600000">$300,001 - $600,000</option>
+ <option value="600001+">$600,001+</option>
+ </select>
+ <select id="beds">
+ <option value="">Beds</option>
+ <option value="1">1+</option>
+ <option value="2">2+</option>
+ <option value="3">3+</option>
+ <option value="4">4+</option>
+ </select>
+ </div>
+ </section>
+
+ <section class="listings" id="listings">
+ <!-- Listings will be populated by JavaScript -->
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h3>Contact</h3>
+ <p>info@homefinder.scroll.pub</p>
+ <p>1-800-HOMES</p>
+ </div>
+ <div class="footer-section">
+ <h3>Quick Links</h3>
+ <a href="#">Terms of Service</a>
+ <a href="#">Privacy Policy</a>
+ <a href="#">Contact Us</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9f2e062
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://homefinder.scroll.pub
+metaTags
+ title "HomeFinder - Find Your Dream Home"
+ description "Browse and search thousands of properties for sale and rent. Find your perfect home today."
+ keywords "real estate, homes for sale, property listings, houses, apartments, real estate search"
+editButton /edit.html
+title HomeFinder - Find Your Dream Home
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..aa0fa81
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01D5VY1vh3Zbwp9yTJpmkFhS",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a modern real estate web app with property listings, search, and filtering capabilities.\n\n---domain---\nhomefinder.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://homefinder.scroll.pub\nmetaTags\n title \"HomeFinder - Find Your Dream Home\"\n description \"Browse and search thousands of properties for sale and rent. Find your perfect home today.\"\n keywords \"real estate, homes for sale, property listings, houses, apartments, real estate search\"\neditButton /edit.html\ntitle HomeFinder - Find Your Dream Home\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">HomeFinder</div>\n <div class=\"nav-links\">\n <a href=\"#\" class=\"active\">Buy</a>\n <a href=\"#\">Rent</a>\n <a href=\"#\">Sell</a>\n <a href=\"#\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Find Your Dream Home</h1>\n <div class=\"search-container\">\n <input type=\"text\" id=\"search\" placeholder=\"Enter location, zip code, or address\">\n <button id=\"searchBtn\">Search</button>\n </div>\n <div class=\"filters\">\n <select id=\"propertyType\">\n <option value=\"\">Property Type</option>\n <option value=\"house\">House</option>\n <option value=\"apartment\">Apartment</option>\n <option value=\"condo\">Condo</option>\n </select>\n <select id=\"priceRange\">\n <option value=\"\">Price Range</option>\n <option value=\"0-300000\">$0 - $300,000</option>\n <option value=\"300001-600000\">$300,001 - $600,000</option>\n <option value=\"600001+\">$600,001+</option>\n </select>\n <select id=\"beds\">\n <option value=\"\">Beds</option>\n <option value=\"1\">1+</option>\n <option value=\"2\">2+</option>\n <option value=\"3\">3+</option>\n <option value=\"4\">4+</option>\n </select>\n </div>\n </section>\n\n <section class=\"listings\" id=\"listings\">\n <!-- Listings will be populated by JavaScript -->\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h3>Contact</h3>\n <p>info@homefinder.scroll.pub</p>\n <p>1-800-HOMES</p>\n </div>\n <div class=\"footer-section\">\n <h3>Quick Links</h3>\n <a href=\"#\">Terms of Service</a>\n <a href=\"#\">Privacy Policy</a>\n <a href=\"#\">Contact Us</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #333;\n --light-gray: #f5f6fa;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.nav-links a.active {\n color: var(--accent-color);\n}\n\nmain {\n margin-top: 4rem;\n}\n\n.hero {\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('data:image/jpeg;base64,/9j/4AAQSkZJRg==');\n background-size: cover;\n background-position: center;\n height: 60vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n color: white;\n padding: 2rem;\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 2rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n}\n\n.search-container {\n width: 100%;\n max-width: 600px;\n margin-bottom: 1rem;\n}\n\ninput[type=\"text\"] {\n width: 70%;\n padding: 1rem;\n border: none;\n border-radius: 4px 0 0 4px;\n font-size: 1rem;\n}\n\nbutton {\n width: 30%;\n padding: 1rem;\n background: var(--accent-color);\n border: none;\n color: white;\n border-radius: 0 4px 4px 0;\n cursor: pointer;\n transition: var(--transition);\n}\n\nbutton:hover {\n background: #c0392b;\n}\n\n.filters {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\nselect {\n padding: 0.5rem;\n border: none;\n border-radius: 4px;\n background: white;\n cursor: pointer;\n}\n\n.listings {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.property-card {\n background: white;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.property-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.property-image {\n width: 100%;\n height: 200px;\n object-fit: cover;\n}\n\n.property-info {\n padding: 1rem;\n}\n\n.property-price {\n color: var(--accent-color);\n font-size: 1.5rem;\n font-weight: bold;\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 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 h3 {\n margin-bottom: 1rem;\n}\n\n.footer-section a {\n color: white;\n text-decoration: none;\n display: block;\n margin-bottom: 0.5rem;\n transition: var(--transition);\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 height: 70vh;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .filters {\n flex-direction: column;\n }\n \n .search-container {\n flex-direction: column;\n }\n \n input[type=\"text\"], button {\n width: 100%;\n border-radius: 4px;\n }\n \n button {\n margin-top: 0.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Sample property data\n const properties = [\n {\n id: 1,\n image: 'data:image/jpeg;base64,/9j/4AAQSkZJRg==',\n price: 450000,\n address: '123 Main St, Anytown, USA',\n beds: 3,\n baths: 2,\n sqft: 2000,\n type: 'house'\n },\n // Add more properties here\n ];\n\n const listingsContainer = document.getElementById('listings');\n const searchBtn = document.getElementById('searchBtn');\n const searchInput = document.getElementById('search');\n const propertyTypeSelect = document.getElementById('propertyType');\n const priceRangeSelect = document.getElementById('priceRange');\n const bedsSelect = document.getElementById('beds');\n\n function createPropertyCard(property) {\n return `\n <div class=\"property-card\">\n <img src=\"${property.image}\" alt=\"Property\" class=\"property-image\">\n <div class=\"property-info\">\n <div class=\"property-price\">$${property.price.toLocaleString()}</div>\n <p>${property.address}</p>\n <p>${property.beds} beds | ${property.baths} baths | ${property.sqft} sqft</p>\n </div>\n </div>\n `;\n }\n\n function filterProperties() {\n const searchTerm = searchInput.value.toLowerCase();\n const propertyType = propertyTypeSelect.value;\n const priceRange = priceRangeSelect.value;\n const minBeds = parseInt(bedsSelect.value) || 0;\n\n const filtered = properties.filter(property => {\n const matchesSearch = property.address.toLowerCase().includes(searchTerm);\n const matchesType = !propertyType || property.type === propertyType;\n const matchesBeds = property.beds >= minBeds;\n \n let matchesPrice = true;\n if (priceRange) {\n const [min, max] = priceRange.split('-').map(Number);\n matchesPrice = property.price >= min && (!max || property.price <= max);\n }\n\n return matchesSearch && matchesType && matchesBeds && matchesPrice;\n });\n\n listingsContainer.innerHTML = filtered.map(createPropertyCard).join('');\n }\n\n // Event listeners\n searchBtn.addEventListener('click', filterProperties);\n searchInput.addEventListener('keyup', event => {\n if (event.key === 'Enter') filterProperties();\n });\n propertyTypeSelect.addEventListener('change', filterProperties);\n priceRangeSelect.addEventListener('change', filterProperties);\n bedsSelect.addEventListener('change', filterProperties);\n\n // Initial load\n filterProperties();\n});\n\n---end---\n\nThis creates a modern, responsive real estate web app with:\n- Fixed header with navigation\n- Hero section with search and filters\n- Property listings grid with cards\n- Smooth animations and transitions\n- Mobile-responsive design\n- Property filtering functionality\n- Clean, semantic HTML\n- Accessible form controls\n- Modern CSS with variables and flexbox/grid\n- Interactive JavaScript filtering\n- Professional footer with contact info\n\nThe design is clean and professional while being visually appealing with hover effects, shadows, and smooth transitions. The layout adapts seamlessly to different screen sizes."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3088
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..adbd1a3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# homefinder.scroll.pub
+Website generated by Claude from prompt: create real estate app
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8e7cf83
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Sample property data
+ const properties = [
+ {
+ id: 1,
+ image: 'data:image/jpeg;base64,/9j/4AAQSkZJRg==',
+ price: 450000,
+ address: '123 Main St, Anytown, USA',
+ beds: 3,
+ baths: 2,
+ sqft: 2000,
+ type: 'house'
+ },
+ // Add more properties here
+ ];
+
+ const listingsContainer = document.getElementById('listings');
+ const searchBtn = document.getElementById('searchBtn');
+ const searchInput = document.getElementById('search');
+ const propertyTypeSelect = document.getElementById('propertyType');
+ const priceRangeSelect = document.getElementById('priceRange');
+ const bedsSelect = document.getElementById('beds');
+
+ function createPropertyCard(property) {
+ return `
+ <div class="property-card">
+ <img src="${property.image}" alt="Property" class="property-image">
+ <div class="property-info">
+ <div class="property-price">$${property.price.toLocaleString()}</div>
+ <p>${property.address}</p>
+ <p>${property.beds} beds | ${property.baths} baths | ${property.sqft} sqft</p>
+ </div>
+ </div>
+ `;
+ }
+
+ function filterProperties() {
+ const searchTerm = searchInput.value.toLowerCase();
+ const propertyType = propertyTypeSelect.value;
+ const priceRange = priceRangeSelect.value;
+ const minBeds = parseInt(bedsSelect.value) || 0;
+
+ const filtered = properties.filter(property => {
+ const matchesSearch = property.address.toLowerCase().includes(searchTerm);
+ const matchesType = !propertyType || property.type === propertyType;
+ const matchesBeds = property.beds >= minBeds;
+
+ let matchesPrice = true;
+ if (priceRange) {
+ const [min, max] = priceRange.split('-').map(Number);
+ matchesPrice = property.price >= min && (!max || property.price <= max);
+ }
+
+ return matchesSearch && matchesType && matchesBeds && matchesPrice;
+ });
+
+ listingsContainer.innerHTML = filtered.map(createPropertyCard).join('');
+ }
+
+ // Event listeners
+ searchBtn.addEventListener('click', filterProperties);
+ searchInput.addEventListener('keyup', event => {
+ if (event.key === 'Enter') filterProperties();
+ });
+ propertyTypeSelect.addEventListener('change', filterProperties);
+ priceRangeSelect.addEventListener('change', filterProperties);
+ bedsSelect.addEventListener('change', filterProperties);
+
+ // Initial load
+ filterProperties();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..09243ba
--- /dev/null
+++ b/style.css
@@ -0,0 +1,226 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --light-gray: #f5f6fa;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+header {
+ background: var(--primary-color);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.nav-links a.active {
+ color: var(--accent-color);
+}
+
+main {
+ margin-top: 4rem;
+}
+
+.hero {
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('data:image/jpeg;base64,/9j/4AAQSkZJRg==');
+ background-size: cover;
+ background-position: center;
+ height: 60vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: white;
+ padding: 2rem;
+}
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 2rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+.search-container {
+ width: 100%;
+ max-width: 600px;
+ margin-bottom: 1rem;
+}
+
+input[type="text"] {
+ width: 70%;
+ padding: 1rem;
+ border: none;
+ border-radius: 4px 0 0 4px;
+ font-size: 1rem;
+}
+
+button {
+ width: 30%;
+ padding: 1rem;
+ background: var(--accent-color);
+ border: none;
+ color: white;
+ border-radius: 0 4px 4px 0;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+button:hover {
+ background: #c0392b;
+}
+
+.filters {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+select {
+ padding: 0.5rem;
+ border: none;
+ border-radius: 4px;
+ background: white;
+ cursor: pointer;
+}
+
+.listings {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.property-card {
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.property-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.property-image {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+}
+
+.property-info {
+ padding: 1rem;
+}
+
+.property-price {
+ color: var(--accent-color);
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 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 h3 {
+ margin-bottom: 1rem;
+}
+
+.footer-section a {
+ color: white;
+ text-decoration: none;
+ display: block;
+ margin-bottom: 0.5rem;
+ transition: var(--transition);
+}
+
+.footer-section a:hover {
+ color: var(--accent-color);
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero {
+ height: 70vh;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .filters {
+ flex-direction: column;
+ }
+
+ .search-container {
+ flex-direction: column;
+ }
+
+ input[type="text"], button {
+ width: 100%;
+ border-radius: 4px;
+ }
+
+ button {
+ margin-top: 0.5rem;
+ }
+}