commit ea3322729696d02f9dcdae36ce2a3cd83f1ccc1b
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 04:14:56 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..aed6b7a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,42 @@
+<header>
+ <h1>Beach Finder</h1>
+ <p>Discover Your Perfect Philippine Beach Getaway</p>
+</header>
+
+<main>
+ <section class="search-section">
+ <div class="search-container">
+ <label for="preferences">What are you looking for in a beach?</label>
+ <select id="preferences">
+ <option value="">Select your preference</option>
+ <option value="quiet">Quiet and secluded</option>
+ <option value="party">Lively and social</option>
+ <option value="family">Family-friendly</option>
+ <option value="adventure">Adventure and activities</option>
+ <option value="luxury">Luxury resorts</option>
+ <option value="budget">Budget-friendly</option>
+ </select>
+ <button id="findBeach">Find My Beach</button>
+ </div>
+ </section>
+
+ <section class="results-section" id="results" hidden>
+ <h2>Your Perfect Beach</h2>
+ <div class="beach-card">
+ <img src="/images/beach.jpg" alt="Beach image" class="beach-image">
+ <div class="beach-info">
+ <h3 class="beach-name">Beach Name</h3>
+ <p class="beach-description">Beach description goes here</p>
+ <ul class="beach-features">
+ <li>Feature 1</li>
+ <li>Feature 2</li>
+ <li>Feature 3</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Explore the beautiful beaches of the Philippines</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..165e230
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+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
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..3b03c92
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>Beach Finder</h1>\n <p>Discover Your Perfect Philippine Beach Getaway</p>\n</header>\n\n<main>\n <section class=\"search-section\">\n <div class=\"search-container\">\n <label for=\"preferences\">What are you looking for in a beach?</label>\n <select id=\"preferences\">\n <option value=\"\">Select your preference</option>\n <option value=\"quiet\">Quiet and secluded</option>\n <option value=\"party\">Lively and social</option>\n <option value=\"family\">Family-friendly</option>\n <option value=\"adventure\">Adventure and activities</option>\n <option value=\"luxury\">Luxury resorts</option>\n <option value=\"budget\">Budget-friendly</option>\n </select>\n <button id=\"findBeach\">Find My Beach</button>\n </div>\n </section>\n\n <section class=\"results-section\" id=\"results\" hidden>\n <h2>Your Perfect Beach</h2>\n <div class=\"beach-card\">\n <img src=\"/images/beach.jpg\" alt=\"Beach image\" class=\"beach-image\">\n <div class=\"beach-info\">\n <h3 class=\"beach-name\">Beach Name</h3>\n <p class=\"beach-description\">Beach description goes here</p>\n <ul class=\"beach-features\">\n <li>Feature 1</li>\n <li>Feature 2</li>\n <li>Feature 3</li>\n </ul>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Explore the beautiful beaches of the Philippines</p>\n</footer>\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 => `<li>${feature}</li>`).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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4e980e3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# beachfinder.scroll.pub
+Website generated by DeepSeek from prompt: I need a website that helps me decide what beach to vacation in Philippines
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a4b70fd
--- /dev/null
+++ b/script.js
@@ -0,0 +1,78 @@
+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 => `<li>${feature}</li>`).join('');
+ document.getElementById('results').removeAttribute('hidden');
+ window.scrollTo({
+ top: document.getElementById('results').offsetTop,
+ behavior: 'smooth'
+ });
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..139f4c0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,134 @@
+: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;
+ }
+}
\ No newline at end of file