Changes to beachfinder.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   Beach Finder
+   Discover Your Perfect Philippine Beach Getaway
+ 
+ 
+ 
+   
+     
+       What are you looking for in a beach?
+       
+       
+     
+   
+ 
+   
+     Your Perfect Beach
+     
+       
+       
+         Beach Name
+         Beach description goes here
+         
+           Feature 1
+           Feature 2
+           Feature 3
+         
+       
+     
+   
+ 
+ 
+ 
+   Explore the beautiful beaches of the Philippines
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://beachfinder.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Beach Finder - Discover Your Perfect Philippine Beach Getaway
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "790f2530-9f77-4c77-bd6a-5a0a4e29aaa2",
+   "object": "chat.completion",
+   "created": 1735359272,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nbeachfinder.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://beachfinder.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Beach Finder - Discover Your Perfect Philippine Beach Getaway\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  Beach Finder\n  Discover Your Perfect Philippine Beach Getaway
\n\n\n\n  \n    \n      What are you looking for in a beach?\n      \n      \n    
\n  \n\n  \n    Your Perfect Beach\n    \n      \n      \n        Beach Name\n        Beach description goes here
\n        \n          Feature 1
\n          Feature 2
\n          Feature 3
\n        \n      
\n    
\n  \n\n\n\n  Explore the beautiful beaches of the Philippines
\n\n---style.css---\n:root {\n  --primary-color: #0077b6;\n  --secondary-color: #00b4d8;\n  --background-color: #f0f8ff;\n  --text-color: #333;\n  --white: #fff;\n}\n\nbody {\n  font-family: 'Segoe UI', sans-serif;\n  line-height: 1.6;\n  color: var(--text-color);\n  background-color: var(--background-color);\n  margin: 0;\n  padding: 0;\n}\n\nheader {\n  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n  color: var(--white);\n  padding: 2rem;\n  text-align: center;\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.search-section {\n  padding: 2rem;\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.search-container {\n  background: var(--white);\n  padding: 2rem;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nlabel {\n  display: block;\n  margin-bottom: 1rem;\n  font-weight: bold;\n}\n\nselect {\n  width: 100%;\n  padding: 0.8rem;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n  margin-bottom: 1rem;\n}\n\nbutton {\n  background: var(--primary-color);\n  color: var(--white);\n  padding: 0.8rem 2rem;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\nbutton:hover {\n  background: var(--secondary-color);\n}\n\n.results-section {\n  padding: 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.beach-card {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 2rem;\n  background: var(--white);\n  padding: 2rem;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.beach-image {\n  width: 100%;\n  height: 300px;\n  object-fit: cover;\n  border-radius: 5px;\n}\n\n.beach-info {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.beach-name {\n  font-size: 2rem;\n  margin-bottom: 1rem;\n}\n\n.beach-description {\n  margin-bottom: 1rem;\n}\n\n.beach-features {\n  list-style: none;\n  padding: 0;\n}\n\n.beach-features li {\n  margin-bottom: 0.5rem;\n}\n\nfooter {\n  background: var(--primary-color);\n  color: var(--white);\n  text-align: center;\n  padding: 1rem;\n  margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n  .beach-card {\n    grid-template-columns: 1fr;\n  }\n  \n  h1 {\n    font-size: 2rem;\n  }\n}\n---script.js---\nconst beaches = {\n  quiet: {\n    name: \"Nacpan Beach, El Nido\",\n    description: \"A serene 4km stretch of white sand beach with crystal clear waters, perfect for relaxation.\",\n    features: [\n      \"Secluded location\",\n      \"Pristine white sand\",\n      \"Crystal clear waters\",\n      \"Fewer crowds\"\n    ]\n  },\n  party: {\n    name: \"Boracay White Beach\",\n    description: \"The most famous beach in the Philippines, known for its vibrant nightlife and water activities.\",\n    features: [\n      \"Lively beach bars\",\n      \"Water sports\",\n      \"Fire dancing shows\",\n      \"Social atmosphere\"\n    ]\n  },\n  family: {\n    name: \"Alona Beach, Panglao\",\n    description: \"A family-friendly beach with calm waters and plenty of nearby resorts and restaurants.\",\n    features: [\n      \"Safe for children\",\n      \"Variety of accommodations\",\n      \"Family-oriented activities\",\n      \"Gentle waves\"\n    ]\n  },\n  adventure: {\n    name: \"Port Barton, Palawan\",\n    description: \"A paradise for adventurers with island hopping, snorkeling, and jungle trekking opportunities.\",\n    features: [\n      \"Island hopping tours\",\n      \"Snorkeling spots\",\n      \"Jungle waterfalls\",\n      \"Kayaking\"\n    ]\n  },\n  luxury: {\n    name: \"Amanpulo, Pamalican Island\",\n    description: \"An exclusive private island resort offering ultimate luxury and privacy.\",\n    features: [\n      \"Private villas\",\n      \"World-class spa\",\n      \"Fine dining\",\n      \"Personalized service\"\n    ]\n  },\n  budget: {\n    name: \"Saud Beach, Pagudpud\",\n    description: \"A beautiful beach with affordable accommodations and stunning views.\",\n    features: [\n      \"Budget-friendly stays\",\n      \"Long sandy beach\",\n      \"Local food options\",\n      \"Scenic views\"\n    ]\n  }\n};\n\ndocument.getElementById('findBeach').addEventListener('click', function() {\n  const preference = document.getElementById('preferences').value;\n  if (preference) {\n    const beach = beaches[preference];\n    document.querySelector('.beach-name').textContent = beach.name;\n    document.querySelector('.beach-description').textContent = beach.description;\n    const featuresList = document.querySelector('.beach-features');\n    featuresList.innerHTML = beach.features.map(feature => `${feature}
`).join('');\n    document.getElementById('results').removeAttribute('hidden');\n    window.scrollTo({\n      top: document.getElementById('results').offsetTop,\n      behavior: 'smooth'\n    });\n  }\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 248,
+     "completion_tokens": 1720,
+     "total_tokens": 1968,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 248
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # beachfinder.scroll.pub

+ Website generated by DeepSeek from prompt: I need a website that helps me decide what beach to vacation in Philippines

script.js

Changed around line 1
+ const beaches = {
+   quiet: {
+     name: "Nacpan Beach, El Nido",
+     description: "A serene 4km stretch of white sand beach with crystal clear waters, perfect for relaxation.",
+     features: [
+       "Secluded location",
+       "Pristine white sand",
+       "Crystal clear waters",
+       "Fewer crowds"
+     ]
+   },
+   party: {
+     name: "Boracay White Beach",
+     description: "The most famous beach in the Philippines, known for its vibrant nightlife and water activities.",
+     features: [
+       "Lively beach bars",
+       "Water sports",
+       "Fire dancing shows",
+       "Social atmosphere"
+     ]
+   },
+   family: {
+     name: "Alona Beach, Panglao",
+     description: "A family-friendly beach with calm waters and plenty of nearby resorts and restaurants.",
+     features: [
+       "Safe for children",
+       "Variety of accommodations",
+       "Family-oriented activities",
+       "Gentle waves"
+     ]
+   },
+   adventure: {
+     name: "Port Barton, Palawan",
+     description: "A paradise for adventurers with island hopping, snorkeling, and jungle trekking opportunities.",
+     features: [
+       "Island hopping tours",
+       "Snorkeling spots",
+       "Jungle waterfalls",
+       "Kayaking"
+     ]
+   },
+   luxury: {
+     name: "Amanpulo, Pamalican Island",
+     description: "An exclusive private island resort offering ultimate luxury and privacy.",
+     features: [
+       "Private villas",
+       "World-class spa",
+       "Fine dining",
+       "Personalized service"
+     ]
+   },
+   budget: {
+     name: "Saud Beach, Pagudpud",
+     description: "A beautiful beach with affordable accommodations and stunning views.",
+     features: [
+       "Budget-friendly stays",
+       "Long sandy beach",
+       "Local food options",
+       "Scenic views"
+     ]
+   }
+ };
+ 
+ document.getElementById('findBeach').addEventListener('click', function() {
+   const preference = document.getElementById('preferences').value;
+   if (preference) {
+     const beach = beaches[preference];
+     document.querySelector('.beach-name').textContent = beach.name;
+     document.querySelector('.beach-description').textContent = beach.description;
+     const featuresList = document.querySelector('.beach-features');
+     featuresList.innerHTML = beach.features.map(feature => `${feature}
`).join('');
+     document.getElementById('results').removeAttribute('hidden');
+     window.scrollTo({
+       top: document.getElementById('results').offsetTop,
+       behavior: 'smooth'
+     });
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #0077b6;
+   --secondary-color: #00b4d8;
+   --background-color: #f0f8ff;
+   --text-color: #333;
+   --white: #fff;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+   background-color: var(--background-color);
+   margin: 0;
+   padding: 0;
+ }
+ 
+ header {
+   background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+   color: var(--white);
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+ }
+ 
+ .search-section {
+   padding: 2rem;
+   max-width: 800px;
+   margin: 0 auto;
+ }
+ 
+ .search-container {
+   background: var(--white);
+   padding: 2rem;
+   border-radius: 10px;
+   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ label {
+   display: block;
+   margin-bottom: 1rem;
+   font-weight: bold;
+ }
+ 
+ select {
+   width: 100%;
+   padding: 0.8rem;
+   border: 1px solid #ddd;
+   border-radius: 5px;
+   margin-bottom: 1rem;
+ }
+ 
+ button {
+   background: var(--primary-color);
+   color: var(--white);
+   padding: 0.8rem 2rem;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: background 0.3s ease;
+ }
+ 
+ button:hover {
+   background: var(--secondary-color);
+ }
+ 
+ .results-section {
+   padding: 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .beach-card {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 2rem;
+   background: var(--white);
+   padding: 2rem;
+   border-radius: 10px;
+   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ .beach-image {
+   width: 100%;
+   height: 300px;
+   object-fit: cover;
+   border-radius: 5px;
+ }
+ 
+ .beach-info {
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+ }
+ 
+ .beach-name {
+   font-size: 2rem;
+   margin-bottom: 1rem;
+ }
+ 
+ .beach-description {
+   margin-bottom: 1rem;
+ }
+ 
+ .beach-features {
+   list-style: none;
+   padding: 0;
+ }
+ 
+ .beach-features li {
+   margin-bottom: 0.5rem;
+ }
+ 
+ footer {
+   background: var(--primary-color);
+   color: var(--white);
+   text-align: center;
+   padding: 1rem;
+   margin-top: 2rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .beach-card {
+     grid-template-columns: 1fr;
+   }
+ 
+   h1 {
+     font-size: 2rem;
+   }
+ }