Changes to homefinder.scroll.pub

root

21 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     HomeFinder
+     
+       Buy
+       Rent
+       Sell
+       About
+     
+   
+ 
+ 
+ 
+   
+     Find Your Dream Home
+     
+       
+       
+     
+     
+       
+       
+       
+     
+   
+ 
+   
+     
+   
+ 
+ 
+ 
+   
+     
+       Contact
+       info@homefinder.scroll.pub
+       1-800-HOMES
+     
+     
+       Quick Links
+       Terms of Service
+       Privacy Policy
+       Contact Us
+     
+   
+ 

index.scroll

Changed around line 1
+ 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

prompt.json

Changed around line 1
+ {
+   "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\n  \n    HomeFinder
\n    \n      Buy\n      Rent\n      Sell\n      About\n    
\n  \n\n\n\n  \n    Find Your Dream Home\n    \n      \n      \n    
\n    \n      \n      \n      \n    
\n  \n\n  \n    \n  \n\n\n\n  \n    \n      Contact\n      info@homefinder.scroll.pub
\n      1-800-HOMES
\n    
\n    \n      Quick Links\n      Terms of Service\n      Privacy Policy\n      Contact Us\n    
\n  
\n\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      \n        \n        \n          $${property.price.toLocaleString()}
\n          ${property.address}
\n          ${property.beds} beds | ${property.baths} baths | ${property.sqft} sqft
\n        
\n      
\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 in, 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
+   }
+ }

readme.scroll

Changed around line 1

+ # homefinder.scroll.pub

+ Website generated by Claude from prompt: create real estate app

script.js

Changed around line 1
+ 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 `
+       
+         
+         
+           $${property.price.toLocaleString()}
+           ${property.address}
+           ${property.beds} beds | ${property.baths} baths | ${property.sqft} sqft
+         
+       
+     `;
+   }
+ 
+   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 in, 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();
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }