Changes to mapcoords.scroll.pub

root

6 days ago

Initial commit

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://mapcoords.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Map Coordinates Finder
+ style.css
+ 
+ header
+  class hero
+  nav
+   div MapCoords
+    class logo
+   div
+    class nav-links
+    a About
+     href #about
+    a How It Works
+     href #how-it-works
+ main
+  section
+   class map-container
+   div
+    id map
+    class map-display
+   div
+    class coordinates-display
+    p Latitude:
+     span
+      id latitude
+      class coordinate-value 0
+    p Longitude:
+     span
+      id longitude
+      class coordinate-value 0
+  section
+   id about
+   class about-section
+   h2 About MapCoords
+   p Click anywhere on the map to see the exact latitude and longitude coordinates. Perfect for travelers, hikers, and geography enthusiasts!
+  section
+   id how-it-works
+   class how-it-works
+   h2 How It Works
+   div
+    class steps
+    div
+     class step
+     div 1
+      class step-number
+     h3 Open the Map
+     p The map loads automatically using open-source technology
+    div
+     class step
+     div 2
+      class step-number
+     h3 Click Anywhere
+     p Simply click or tap on any location on the map
+    div
+     class step
+     div 3
+      class step-number
+     h3 Get Coordinates
+     p The latitude and longitude will appear instantly
+ footer
+  div
+   class footer-content
+   p Made with ♥ for explorers everywhere
+ 
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "4581e18d-55c9-4bd2-a140-cb42efbed9dc",
+   "object": "chat.completion",
+   "created": 1744521308,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "Here's a complete solution for a map application that shows latitude and longitude when clicking on any location:\n\n---domain---\nmapcoords.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://mapcoords.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Map Coordinates Finder\nstyle.css\n\nheader\n class hero\n nav\n  div MapCoords\n   class logo\n  div\n   class nav-links\n   a About\n    href #about\n   a How It Works\n    href #how-it-works\nmain\n section\n  class map-container\n  div\n   id map\n   class map-display\n  div\n   class coordinates-display\n   p Latitude: \n    span\n     id latitude\n     class coordinate-value 0\n   p Longitude: \n    span\n     id longitude\n     class coordinate-value 0\n section\n  id about\n  class about-section\n  h2 About MapCoords\n  p Click anywhere on the map to see the exact latitude and longitude coordinates. Perfect for travelers, hikers, and geography enthusiasts!\n section\n  id how-it-works\n  class how-it-works\n  h2 How It Works\n  div\n   class steps\n   div\n    class step\n    div 1\n     class step-number\n    h3 Open the Map\n    p The map loads automatically using open-source technology\n   div\n    class step\n    div 2\n     class step-number\n    h3 Click Anywhere\n    p Simply click or tap on any location on the map\n   div\n    class step\n    div 3\n     class step-number\n    h3 Get Coordinates\n    p The latitude and longitude will appear instantly\nfooter\n div\n  class footer-content\n  p Made with ♥ for explorers everywhere\n\nscript.js\n---style.css---\n:root {\n  --primary: #3498db;\n  --secondary: #2ecc71;\n  --dark: #2c3e50;\n  --light: #ecf0f1;\n  --accent: #e74c3c;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n  background-color: var(--light);\n  color: var(--dark);\n  line-height: 1.6;\n}\n\nheader.hero {\n  background: linear-gradient(135deg, var(--primary), var(--secondary));\n  color: white;\n  padding: 2rem 0;\n  text-align: center;\n}\n\n.logo {\n  font-size: 2.5rem;\n  font-weight: bold;\n  margin-bottom: 1rem;\n}\n\n.nav-links {\n  display: flex;\n  justify-content: center;\n  gap: 2rem;\n  margin-top: 1rem;\n}\n\n.nav-links a {\n  color: white;\n  text-decoration: none;\n  font-weight: 500;\n  transition: all 0.3s ease;\n}\n\n.nav-links a:hover {\n  opacity: 0.8;\n  transform: translateY(-2px);\n}\n\n.map-container {\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.map-display {\n  height: 60vh;\n  width: 100%;\n  border-radius: 8px;\n  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n  background-color: #f8f9fa;\n  position: relative;\n  overflow: hidden;\n}\n\n.coordinates-display {\n  background: white;\n  padding: 1rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n  display: flex;\n  gap: 2rem;\n  justify-content: center;\n}\n\n.coordinate-value {\n  font-weight: bold;\n  color: var(--accent);\n}\n\nsection {\n  padding: 3rem 1rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.about-section, .how-it-works {\n  text-align: center;\n}\n\n.how-it-works h2 {\n  margin-bottom: 2rem;\n}\n\n.steps {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.step {\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n  transition: transform 0.3s ease;\n}\n\n.step:hover {\n  transform: translateY(-5px);\n}\n\n.step-number {\n  background: var(--primary);\n  color: white;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto 1rem;\n  font-weight: bold;\n}\n\nfooter {\n  background: var(--dark);\n  color: white;\n  text-align: center;\n  padding: 2rem 0;\n  margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n  .nav-links {\n    flex-direction: column;\n    gap: 1rem;\n  }\n  \n  .coordinates-display {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  \n  .map-display {\n    height: 50vh;\n  }\n}\n---script.js---\n// Initialize the map\nfunction initMap() {\n  // Create a basic map using Leaflet (open-source)\n  const map = L.map('map').setView([0, 0], 2);\n  \n  // Add OpenStreetMap tiles (open-source)\n  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n    attribution: '© OpenStreetMap contributors'\n  }).addTo(map);\n  \n  // Get references to coordinate display elements\n  const latitudeDisplay = document.getElementById('latitude');\n  const longitudeDisplay = document.getElementById('longitude');\n  \n  // Add click event to the map\n  map.on('click', function(e) {\n    const { lat, lng } = e.latlng;\n    \n    // Update the display with the coordinates\n    latitudeDisplay.textContent = lat.toFixed(6);\n    longitudeDisplay.textContent = lng.toFixed(6);\n    \n    // Add a marker at the clicked location\n    if (window.currentMarker) {\n      map.removeLayer(window.currentMarker);\n    }\n    \n    window.currentMarker = L.marker([lat, lng]).addTo(map)\n      .bindPopup(`Lat: ${lat.toFixed(6)}
Lng: ${lng.toFixed(6)}`)\n      .openPopup();\n  });\n  \n  // Try to get user's current location\n  if (navigator.geolocation) {\n    navigator.geolocation.getCurrentPosition(\n      (position) => {\n        const { latitude, longitude } = position.coords;\n        map.setView([latitude, longitude], 13);\n        \n        // Update the display with current location\n        latitudeDisplay.textContent = latitude.toFixed(6);\n        longitudeDisplay.textContent = longitude.toFixed(6);\n        \n        // Add a marker at current location\n        window.currentMarker = L.marker([latitude, longitude]).addTo(map)\n          .bindPopup(`Your location
Lat: ${latitude.toFixed(6)}
Lng: ${longitude.toFixed(6)}`)\n          .openPopup();\n      },\n      (error) => {\n        console.log('Geolocation error:', error);\n        // Default to showing coordinates at center of map\n        const center = map.getCenter();\n        latitudeDisplay.textContent = center.lat.toFixed(6);\n        longitudeDisplay.textContent = center.lng.toFixed(6);\n      }\n    );\n  }\n}\n\n// Load Leaflet dynamically\nfunction loadLeaflet() {\n  return new Promise((resolve) => {\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';\n    link.integrity = 'sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==';\n    link.crossOrigin = '';\n    document.head.appendChild(link);\n    \n    const script = document.createElement('script');\n    script.src = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js';\n    script.integrity = 'sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==';\n    script.crossOrigin = '';\n    script.onload = resolve;\n    document.head.appendChild(script);\n  });\n}\n\n// Initialize the app when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', async function() {\n  await loadLeaflet();\n  initMap();\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 752,
+     "completion_tokens": 2113,
+     "total_tokens": 2865,
+     "prompt_tokens_details": {
+       "cached_tokens": 0
+     },
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 752
+   },
+   "system_fingerprint": "fp_3d5141a69a_prod0225"
+ }

readme.scroll

Changed around line 1
+ # mapcoords.scroll.pub
+ 
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+ 
+ ## User prompt
+ crate react web app with frontend tsx and backend js for a map if user points at any location it should show the latitude and longitude  map should be open sourece
+ 
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "crate react web app with frontend tsx and backend js for a map if user points at any location it should show the latitude and longitude  map should be open sourece"
+ 
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+ 
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+ 
+ For example:
+ 
+ header
+  class hero
+  nav
+   div Scroll
+    class logo
+   div
+    class nav-links
+    a Features
+     href #features
+    a Examples
+     href #examples
+    a Edit
+     href edit.html
+    a GitHub
+     class cta-button
+     href https://github.com/breck7/scroll
+  div
+   class hero-content
+   h1 Write Better with Scroll
+   p The extendible markup language that makes source beautiful and compiles to anything
+   a Get Started
+    class primary-button
+    href https://hub.scroll.pub/
+ main
+  section
+   id features
+   class features
+   h2 Why Scroll?
+   div
+    class feature-grid
+    div
+     class feature-card
+     div ⚡
+      class feature-icon
+     h3 Simple Syntax
+     p Like Markdown, but more powerful. No parentheses needed.
+    div
+     class feature-card
+     div 🧩
+      class feature-icon
+     h3 Extendible
+     p Build your own custom parsers.
+    div
+     class feature-card
+     div 🎨
+      class feature-icon
+     h3 Beautiful Output
+     p Create stunning documents with minimal effort.
+    div
+     class feature-card
+     div 🚀
+      class feature-icon
+     h3 Fast & Light
+     p Built on the efficient PPS Stack.
+  section
+   id examples
+   class code-demo
+   h2 See It In Action
+   div
+    class code-container
+   pre
+    class code-example
+   div
+    class code-output
+ footer
+  div
+   class footer-content
+   div
+    class footer-links
+    a Documentation
+     href https://scroll.pub/tutorial.html
+    a Community
+     href https://www.reddit.com/r/WorldWideScroll/
+    a Blog
+     href https://scroll.pub/blog
+   p Started by Breck Yunits. Evolved by a community.
+    https://twitter.com/breckyunits Breck Yunits
+    https://github.com/breck7/scroll/graphs/contributors community
+ 
+ 
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+ 
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+ 
+ (body content here. no blank lines please.)
+ 
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---

script.js

Changed around line 1
+ // Initialize the map
+ function initMap() {
+   // Create a basic map using Leaflet (open-source)
+   const map = L.map('map').setView([0, 0], 2);
+ 
+   // Add OpenStreetMap tiles (open-source)
+   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+     attribution: '© OpenStreetMap contributors'
+   }).addTo(map);
+ 
+   // Get references to coordinate display elements
+   const latitudeDisplay = document.getElementById('latitude');
+   const longitudeDisplay = document.getElementById('longitude');
+ 
+   // Add click event to the map
+   map.on('click', function(e) {
+     const { lat, lng } = e.latlng;
+ 
+     // Update the display with the coordinates
+     latitudeDisplay.textContent = lat.toFixed(6);
+     longitudeDisplay.textContent = lng.toFixed(6);
+ 
+     // Add a marker at the clicked location
+     if (window.currentMarker) {
+       map.removeLayer(window.currentMarker);
+     }
+ 
+     window.currentMarker = L.marker([lat, lng]).addTo(map)
+       .bindPopup(`Lat: ${lat.toFixed(6)}
Lng: ${lng.toFixed(6)}`)
+       .openPopup();
+   });
+ 
+   // Try to get user's current location
+   if (navigator.geolocation) {
+     navigator.geolocation.getCurrentPosition(
+       (position) => {
+         const { latitude, longitude } = position.coords;
+         map.setView([latitude, longitude], 13);
+ 
+         // Update the display with current location
+         latitudeDisplay.textContent = latitude.toFixed(6);
+         longitudeDisplay.textContent = longitude.toFixed(6);
+ 
+         // Add a marker at current location
+         window.currentMarker = L.marker([latitude, longitude]).addTo(map)
+           .bindPopup(`Your location
Lat: ${latitude.toFixed(6)}
Lng: ${longitude.toFixed(6)}`)
+           .openPopup();
+       },
+       (error) => {
+         console.log('Geolocation error:', error);
+         // Default to showing coordinates at center of map
+         const center = map.getCenter();
+         latitudeDisplay.textContent = center.lat.toFixed(6);
+         longitudeDisplay.textContent = center.lng.toFixed(6);
+       }
+     );
+   }
+ }
+ 
+ // Load Leaflet dynamically
+ function loadLeaflet() {
+   return new Promise((resolve) => {
+     const link = document.createElement('link');
+     link.rel = 'stylesheet';
+     link.href = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';
+     link.integrity = 'sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==';
+     link.crossOrigin = '';
+     document.head.appendChild(link);
+ 
+     const script = document.createElement('script');
+     script.src = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js';
+     script.integrity = 'sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==';
+     script.crossOrigin = '';
+     script.onload = resolve;
+     document.head.appendChild(script);
+   });
+ }
+ 
+ // Initialize the app when DOM is loaded
+ document.addEventListener('DOMContentLoaded', async function() {
+   await loadLeaflet();
+   initMap();
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #3498db;
+   --secondary: #2ecc71;
+   --dark: #2c3e50;
+   --light: #ecf0f1;
+   --accent: #e74c3c;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+ 
+ body {
+   background-color: var(--light);
+   color: var(--dark);
+   line-height: 1.6;
+ }
+ 
+ header.hero {
+   background: linear-gradient(135deg, var(--primary), var(--secondary));
+   color: white;
+   padding: 2rem 0;
+   text-align: center;
+ }
+ 
+ .logo {
+   font-size: 2.5rem;
+   font-weight: bold;
+   margin-bottom: 1rem;
+ }
+ 
+ .nav-links {
+   display: flex;
+   justify-content: center;
+   gap: 2rem;
+   margin-top: 1rem;
+ }
+ 
+ .nav-links a {
+   color: white;
+   text-decoration: none;
+   font-weight: 500;
+   transition: all 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   opacity: 0.8;
+   transform: translateY(-2px);
+ }
+ 
+ .map-container {
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+   display: flex;
+   flex-direction: column;
+   gap: 1rem;
+ }
+ 
+ .map-display {
+   height: 60vh;
+   width: 100%;
+   border-radius: 8px;
+   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+   background-color: #f8f9fa;
+   position: relative;
+   overflow: hidden;
+ }
+ 
+ .coordinates-display {
+   background: white;
+   padding: 1rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+   display: flex;
+   gap: 2rem;
+   justify-content: center;
+ }
+ 
+ .coordinate-value {
+   font-weight: bold;
+   color: var(--accent);
+ }
+ 
+ section {
+   padding: 3rem 1rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .about-section, .how-it-works {
+   text-align: center;
+ }
+ 
+ .how-it-works h2 {
+   margin-bottom: 2rem;
+ }
+ 
+ .steps {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .step {
+   background: white;
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+   transition: transform 0.3s ease;
+ }
+ 
+ .step:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .step-number {
+   background: var(--primary);
+   color: white;
+   width: 40px;
+   height: 40px;
+   border-radius: 50%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   margin: 0 auto 1rem;
+   font-weight: bold;
+ }
+ 
+ footer {
+   background: var(--dark);
+   color: white;
+   text-align: center;
+   padding: 2rem 0;
+   margin-top: 3rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .nav-links {
+     flex-direction: column;
+     gap: 1rem;
+   }
+ 
+   .coordinates-display {
+     flex-direction: column;
+     gap: 0.5rem;
+   }
+ 
+   .map-display {
+     height: 50vh;
+   }
+ }