commit d192ceb366576918bd4060379329ec70cfcefae8
Author: root <root@hub.scroll.pub> Date: 2024-12-27 15:29:42 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..87d3a8c --- /dev/null +++ b/body.html @@ -0,0 +1,58 @@ +<header> + <nav> + <div class="logo">PropScrap</div> + <div class="menu-toggle"> + <span></span> + <span></span> + <span></span> + </div> + <ul class="nav-links"> + <li><a href="#home">Home</a></li> + <li><a href="#scraper">Scraper</a></li> + <li><a href="#about">About</a></li> + </ul> + </nav> +</header> + +<main> + <section id="home" class="hero"> + <h1>Property24 Data Extractor</h1> + <p>Extract and analyze property data effortlessly</p> + </section> + + <section id="scraper" class="scraper-section"> + <div class="container"> + <h2>Data Scraper</h2> + <div class="scraper-controls"> + <input type="url" id="urlInput" placeholder="Enter Property24 URL" aria-label="Property24 URL"> + <button id="scrapeButton" class="primary-button">Start Scraping</button> + </div> + + <div class="results-container"> + <div class="loading-spinner hidden"></div> + <div class="table-container"> + <table id="resultsTable"> + <thead> + <tr> + <th>Property ID</th> + <th>Price</th> + <th>Location</th> + <th>Bedrooms</th> + <th>Bathrooms</th> + <th>Area</th> + </tr> + </thead> + <tbody></tbody> + </table> + </div> + <button id="exportButton" class="secondary-button hidden">Export to CSV</button> + </div> + </div> + </section> +</main> + +<footer> + <div class="container"> + <p>Made with passion by PropScrap</p> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..6eebb5d --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://propscrap.scroll.pub +metaTags +editButton /edit.html +title PropScrap - Property24 Data Extractor +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..047360d --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01MRSwxT762BV6Vw7MUfQKnX", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll help create a website for property data scraping. For the domain, I suggest:\n\n---domain---\npropscrap.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://propscrap.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PropScrap - Property24 Data Extractor\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">PropScrap</div>\n <div class=\"menu-toggle\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#scraper\">Scraper</a></li>\n <li><a href=\"#about\">About</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <h1>Property24 Data Extractor</h1>\n <p>Extract and analyze property data effortlessly</p>\n </section>\n\n <section id=\"scraper\" class=\"scraper-section\">\n <div class=\"container\">\n <h2>Data Scraper</h2>\n <div class=\"scraper-controls\">\n <input type=\"url\" id=\"urlInput\" placeholder=\"Enter Property24 URL\" aria-label=\"Property24 URL\">\n <button id=\"scrapeButton\" class=\"primary-button\">Start Scraping</button>\n </div>\n \n <div class=\"results-container\">\n <div class=\"loading-spinner hidden\"></div>\n <div class=\"table-container\">\n <table id=\"resultsTable\">\n <thead>\n <tr>\n <th>Property ID</th>\n <th>Price</th>\n <th>Location</th>\n <th>Bedrooms</th>\n <th>Bathrooms</th>\n <th>Area</th>\n </tr>\n </thead>\n <tbody></tbody>\n </table>\n </div>\n <button id=\"exportButton\" class=\"secondary-button hidden\">Export to CSV</button>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <p>Made with passion by PropScrap</p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --accent-color: #e74c3c;\n --background-color: #f9fafb;\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\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n/* Header & Navigation */\nheader {\n background-color: var(--primary-color);\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n}\n\n.nav-links li {\n margin-left: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n/* Hero Section */\n.hero {\n padding: 8rem 2rem 4rem;\n text-align: center;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n/* Scraper Section */\n.scraper-section {\n padding: 4rem 2rem;\n}\n\n.scraper-controls {\n display: flex;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n\ninput[type=\"url\"] {\n flex: 1;\n padding: 0.8rem;\n border: 2px solid #ddd;\n border-radius: 4px;\n font-size: 1rem;\n}\n\n.primary-button {\n background-color: var(--secondary-color);\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.primary-button:hover {\n background-color: #2980b9;\n}\n\n/* Table Styles */\n.table-container {\n overflow-x: auto;\n margin-bottom: 2rem;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #eee;\n}\n\nth {\n background-color: var(--primary-color);\n color: white;\n}\n\ntr:hover {\n background-color: #f5f5f5;\n}\n\n/* Loading Spinner */\n.loading-spinner {\n border: 4px solid #f3f3f3;\n border-top: 4px solid var(--secondary-color);\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n margin: 2rem auto;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.hidden {\n display: none;\n}\n\n/* Mobile Responsiveness */\n.menu-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n}\n\n.menu-toggle span {\n width: 25px;\n height: 3px;\n background-color: white;\n transition: 0.3s;\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background-color: var(--primary-color);\n padding: 1rem;\n }\n\n .nav-links.active {\n display: block;\n }\n\n .nav-links li {\n margin: 1rem 0;\n }\n\n .scraper-controls {\n flex-direction: column;\n }\n\n .hero h1 {\n font-size: 2rem;\n }\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 // Scraping functionality\n const urlInput = document.getElementById('urlInput');\n const scrapeButton = document.getElementById('scrapeButton');\n const exportButton = document.getElementById('exportButton');\n const resultsTable = document.getElementById('resultsTable');\n const loadingSpinner = document.querySelector('.loading-spinner');\n\n scrapeButton.addEventListener('click', async () => {\n const url = urlInput.value;\n if (!url.includes('property24.com')) {\n alert('Please enter a valid Property24 URL');\n return;\n }\n\n // Show loading state\n loadingSpinner.classList.remove('hidden');\n scrapeButton.disabled = true;\n\n try {\n // Simulated scraping delay\n await new Promise(resolve => setTimeout(resolve, 2000));\n\n // Sample data (in real implementation, this would come from the server)\n const sampleData = [\n {id: 'P123', price: 'R2,500,000', location: 'Cape Town', bedrooms: '3', bathrooms: '2', area: '200m²'},\n {id: 'P124', price: 'R1,800,000', location: 'Johannesburg', bedrooms: '2', bathrooms: '1', area: '150m²'}\n ];\n\n updateTable(sampleData);\n exportButton.classList.remove('hidden');\n } catch (error) {\n alert('Error scraping data. Please try again.');\n } finally {\n loadingSpinner.classList.add('hidden');\n scrapeButton.disabled = false;\n }\n });\n\n function updateTable(data) {\n const tbody = resultsTable.querySelector('tbody');\n tbody.innerHTML = '';\n\n data.forEach(item => {\n const row = document.createElement('tr');\n row.innerHTML = `\n <td>${item.id}</td>\n <td>${item.price}</td>\n <td>${item.location}</td>\n <td>${item.bedrooms}</td>\n <td>${item.bathrooms}</td>\n <td>${item.area}</td>\n `;\n tbody.appendChild(row);\n });\n }\n\n exportButton.addEventListener('click', () => {\n // Convert table data to CSV\n const rows = Array.from(resultsTable.querySelectorAll('tr'));\n const csv = rows\n .map(row => {\n return Array.from(row.querySelectorAll('th,td'))\n .map(cell => cell.textContent)\n .join(',');\n })\n .join('\\n');\n\n // Create download link\n const blob = new Blob([csv], { type: 'text/csv' });\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.setAttribute('href', url);\n a.setAttribute('download', 'property_data.csv');\n a.click();\n window.URL.revokeObjectURL(url);\n });\n});\n\n---end---\n\nThis website features:\n1. Clean, modern design with smooth animations\n2. Fully responsive layout\n3. Loading states and error handling\n4. CSV export functionality\n5. Accessible semantic HTML\n6. Mobile-first approach with hamburger menu\n7. Beautiful gradient and shadow effects\n8. Interactive table with hover states\n9. Professional color scheme\n10. Optimized performance with minimal dependencies\n\nNote: The actual scraping functionality would need to be implemented server-side due to CORS restrictions. This frontend implementation includes a simulation of the scraping process." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 300, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2893 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..68d03a1 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# propscrap.scroll.pub +Website generated by Claude from prompt: Create a website that can scap all the information on https://www.property24.com and put it into a table format to import into python \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..9686444 --- /dev/null +++ b/script.js @@ -0,0 +1,86 @@ +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'); + }); + + // Scraping functionality + const urlInput = document.getElementById('urlInput'); + const scrapeButton = document.getElementById('scrapeButton'); + const exportButton = document.getElementById('exportButton'); + const resultsTable = document.getElementById('resultsTable'); + const loadingSpinner = document.querySelector('.loading-spinner'); + + scrapeButton.addEventListener('click', async () => { + const url = urlInput.value; + if (!url.includes('property24.com')) { + alert('Please enter a valid Property24 URL'); + return; + } + + // Show loading state + loadingSpinner.classList.remove('hidden'); + scrapeButton.disabled = true; + + try { + // Simulated scraping delay + await new Promise(resolve => setTimeout(resolve, 2000)); + + // Sample data (in real implementation, this would come from the server) + const sampleData = [ + {id: 'P123', price: 'R2,500,000', location: 'Cape Town', bedrooms: '3', bathrooms: '2', area: '200m²'}, + {id: 'P124', price: 'R1,800,000', location: 'Johannesburg', bedrooms: '2', bathrooms: '1', area: '150m²'} + ]; + + updateTable(sampleData); + exportButton.classList.remove('hidden'); + } catch (error) { + alert('Error scraping data. Please try again.'); + } finally { + loadingSpinner.classList.add('hidden'); + scrapeButton.disabled = false; + } + }); + + function updateTable(data) { + const tbody = resultsTable.querySelector('tbody'); + tbody.innerHTML = ''; + + data.forEach(item => { + const row = document.createElement('tr'); + row.innerHTML = ` + <td>${item.id}</td> + <td>${item.price}</td> + <td>${item.location}</td> + <td>${item.bedrooms}</td> + <td>${item.bathrooms}</td> + <td>${item.area}</td> + `; + tbody.appendChild(row); + }); + } + + exportButton.addEventListener('click', () => { + // Convert table data to CSV + const rows = Array.from(resultsTable.querySelectorAll('tr')); + const csv = rows + .map(row => { + return Array.from(row.querySelectorAll('th,td')) + .map(cell => cell.textContent) + .join(','); + }) + .join('\n'); + + // Create download link + const blob = new Blob([csv], { type: 'text/csv' }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.setAttribute('href', url); + a.setAttribute('download', 'property_data.csv'); + a.click(); + window.URL.revokeObjectURL(url); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..e44264a --- /dev/null +++ b/style.css @@ -0,0 +1,209 @@ +:root { + --primary-color: #2c3e50; + --secondary-color: #3498db; + --accent-color: #e74c3c; + --background-color: #f9fafb; + --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); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header & Navigation */ +header { + background-color: var(--primary-color); + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + position: fixed; + width: 100%; + z-index: 1000; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; +} + +.logo { + color: white; + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links { + display: flex; + list-style: none; +} + +.nav-links li { + margin-left: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--secondary-color); +} + +/* Hero Section */ +.hero { + padding: 8rem 2rem 4rem; + text-align: center; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +/* Scraper Section */ +.scraper-section { + padding: 4rem 2rem; +} + +.scraper-controls { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +input[type="url"] { + flex: 1; + padding: 0.8rem; + border: 2px solid #ddd; + border-radius: 4px; + font-size: 1rem; +} + +.primary-button { + background-color: var(--secondary-color); + color: white; + border: none; + padding: 0.8rem 1.5rem; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.primary-button:hover { + background-color: #2980b9; +} + +/* Table Styles */ +.table-container { + overflow-x: auto; + margin-bottom: 2rem; + background: white; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #eee; +} + +th { + background-color: var(--primary-color); + color: white; +} + +tr:hover { + background-color: #f5f5f5; +} + +/* Loading Spinner */ +.loading-spinner { + border: 4px solid #f3f3f3; + border-top: 4px solid var(--secondary-color); + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + margin: 2rem auto; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.hidden { + display: none; +} + +/* Mobile Responsiveness */ +.menu-toggle { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; +} + +.menu-toggle span { + width: 25px; + height: 3px; + background-color: white; + transition: 0.3s; +} + +@media (max-width: 768px) { + .menu-toggle { + display: flex; + } + + .nav-links { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background-color: var(--primary-color); + padding: 1rem; + } + + .nav-links.active { + display: block; + } + + .nav-links li { + margin: 1rem 0; + } + + .scraper-controls { + flex-direction: column; + } + + .hero h1 { + font-size: 2rem; + } +}