commit d5508b8af2fbcfa16518e2a1448386a0eaafeb43
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 19:08:18 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..4aeec9f
--- /dev/null
+++ b/body.html
@@ -0,0 +1,57 @@
+<header>
+ <nav>
+ <div class="logo">WanderPlan</div>
+ <div class="nav-links">
+ <a href="#generator">Create Plan</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Plan Your Perfect Journey</h1>
+ <p>Generate customized travel itineraries based on your preferences</p>
+ </section>
+
+ <section id="generator" class="generator">
+ <div class="form-container">
+ <h2>Create Your Itinerary</h2>
+ <form id="itineraryForm">
+ <div class="form-group">
+ <label for="source">Starting Point</label>
+ <input type="text" id="source" required placeholder="e.g., New York">
+ </div>
+
+ <div class="form-group">
+ <label for="destination">Destination</label>
+ <input type="text" id="destination" required placeholder="e.g., Paris">
+ </div>
+
+ <div class="form-group">
+ <label for="type">Travel Style</label>
+ <select id="type" required>
+ <option value="touristy">Tourist Attractions</option>
+ <option value="unexplored">Off the Beaten Path</option>
+ </select>
+ </div>
+
+ <div class="form-group">
+ <label for="budget">Budget (USD)</label>
+ <input type="number" id="budget" required min="100" step="100" placeholder="e.g., 1000">
+ </div>
+
+ <button type="submit">Generate Itinerary</button>
+ </form>
+ </div>
+
+ <div id="result" class="result hidden">
+ <h3>Your Personalized Itinerary</h3>
+ <div id="itineraryContent"></div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with passion by WanderPlan</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..ab2b460
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://wanderplan.scroll.pub
+metaTags
+editButton /edit.html
+title WanderPlan - Smart Travel Itinerary Generator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d70f4d4
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_015WnuMTc2DCtzCJQuwqVmGZ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a travel itinerary generator website. For the domain, I suggest:\n\n---domain---\nwanderplan.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://wanderplan.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WanderPlan - Smart Travel Itinerary Generator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">WanderPlan</div>\n <div class=\"nav-links\">\n <a href=\"#generator\">Create Plan</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Plan Your Perfect Journey</h1>\n <p>Generate customized travel itineraries based on your preferences</p>\n </section>\n\n <section id=\"generator\" class=\"generator\">\n <div class=\"form-container\">\n <h2>Create Your Itinerary</h2>\n <form id=\"itineraryForm\">\n <div class=\"form-group\">\n <label for=\"source\">Starting Point</label>\n <input type=\"text\" id=\"source\" required placeholder=\"e.g., New York\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"destination\">Destination</label>\n <input type=\"text\" id=\"destination\" required placeholder=\"e.g., Paris\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"type\">Travel Style</label>\n <select id=\"type\" required>\n <option value=\"touristy\">Tourist Attractions</option>\n <option value=\"unexplored\">Off the Beaten Path</option>\n </select>\n </div>\n \n <div class=\"form-group\">\n <label for=\"budget\">Budget (USD)</label>\n <input type=\"number\" id=\"budget\" required min=\"100\" step=\"100\" placeholder=\"e.g., 1000\">\n </div>\n \n <button type=\"submit\">Generate Itinerary</button>\n </form>\n </div>\n \n <div id=\"result\" class=\"result hidden\">\n <h3>Your Personalized Itinerary</h3>\n <div id=\"itineraryContent\"></div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with passion by WanderPlan</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a6b9c;\n --secondary-color: #f0f7ff;\n --accent-color: #ff6b6b;\n --text-color: #333;\n --background-color: #ffffff;\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\nheader {\n background-color: var(--primary-color);\n padding: 1rem;\n box-shadow: 0 2px 8px 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 font-size: 1.5rem;\n font-weight: bold;\n color: white;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), #1a4971);\n color: white;\n text-align: center;\n padding: 4rem 1rem;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.generator {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n}\n\n.form-container {\n background: var(--secondary-color);\n padding: 2rem;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput, select {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #ddd;\n border-radius: 6px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus, select:focus {\n border-color: var(--primary-color);\n outline: none;\n}\n\nbutton {\n background-color: var(--accent-color);\n color: white;\n padding: 1rem 2rem;\n border: none;\n border-radius: 6px;\n font-size: 1rem;\n cursor: pointer;\n transition: transform 0.3s ease;\n width: 100%;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.result {\n margin-top: 2rem;\n padding: 2rem;\n background: white;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n background-color: var(--secondary-color);\n text-align: center;\n padding: 1rem;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2rem;\n }\n \n .generator {\n padding: 1rem;\n }\n \n .nav-links a {\n margin-left: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const form = document.getElementById('itineraryForm');\n const result = document.getElementById('result');\n const itineraryContent = document.getElementById('itineraryContent');\n\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const source = document.getElementById('source').value;\n const destination = document.getElementById('destination').value;\n const type = document.getElementById('type').value;\n const budget = document.getElementById('budget').value;\n \n generateItinerary(source, destination, type, budget);\n });\n\n function generateItinerary(source, destination, type, budget) {\n // This is a simplified example. In a real application, \n // this would connect to a backend service\n const daysToSpend = Math.floor(budget / 200);\n const isTouristy = type === 'touristy';\n \n let itinerary = `\n <div class=\"itinerary-details\">\n <h4>Trip Summary</h4>\n <p>From: ${source}</p>\n <p>To: ${destination}</p>\n <p>Style: ${isTouristy ? 'Popular Tourist Spots' : 'Hidden Gems'}</p>\n <p>Budget: $${budget}</p>\n <p>Recommended Days: ${daysToSpend}</p>\n \n <h4>Daily Schedule</h4>\n <ul>\n `;\n \n for (let i = 1; i <= daysToSpend; i++) {\n itinerary += `\n <li>\n <strong>Day ${i}:</strong>\n <ul>\n <li>${isTouristy ? 'Visit popular attraction' : 'Explore local neighborhood'}</li>\n <li>${isTouristy ? 'Famous restaurant' : 'Local eatery'}</li>\n <li>${isTouristy ? 'Shopping at main street' : 'Visit local markets'}</li>\n </ul>\n </li>\n `;\n }\n \n itinerary += `</ul></div>`;\n \n itineraryContent.innerHTML = itinerary;\n result.classList.remove('hidden');\n \n result.scrollIntoView({ behavior: 'smooth' });\n }\n});\n\n---end---\n\nThis creates a beautiful, responsive travel itinerary generator with a clean, modern design. The website features:\n\n1. A sleek navigation bar\n2. An attractive hero section\n3. A form to input travel details\n4. A dynamic result section that displays the generated itinerary\n5. Smooth animations and transitions\n6. Mobile-responsive design\n7. Accessibility features\n8. Modern color scheme and typography\n9. Clean, semantic HTML5 structure\n10. Progressive enhancement\n\nThe JavaScript provides a basic implementation that could be extended to include more complex itinerary generation logic or API integration. The CSS uses modern features like CSS variables, flexbox, and subtle animations to create an engaging user experience."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 302,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2373
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2767a4f
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# wanderplan1.scroll.pub
+Website generated by Claude from prompt: Make a website that generates the travel iteanrry based on the source, destination, the travel type (touristy or unexplored), and budget,
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ad74691
--- /dev/null
+++ b/script.js
@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const form = document.getElementById('itineraryForm');
+ const result = document.getElementById('result');
+ const itineraryContent = document.getElementById('itineraryContent');
+
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const source = document.getElementById('source').value;
+ const destination = document.getElementById('destination').value;
+ const type = document.getElementById('type').value;
+ const budget = document.getElementById('budget').value;
+
+ generateItinerary(source, destination, type, budget);
+ });
+
+ function generateItinerary(source, destination, type, budget) {
+ // This is a simplified example. In a real application,
+ // this would connect to a backend service
+ const daysToSpend = Math.floor(budget / 200);
+ const isTouristy = type === 'touristy';
+
+ let itinerary = `
+ <div class="itinerary-details">
+ <h4>Trip Summary</h4>
+ <p>From: ${source}</p>
+ <p>To: ${destination}</p>
+ <p>Style: ${isTouristy ? 'Popular Tourist Spots' : 'Hidden Gems'}</p>
+ <p>Budget: $${budget}</p>
+ <p>Recommended Days: ${daysToSpend}</p>
+
+ <h4>Daily Schedule</h4>
+ <ul>
+ `;
+
+ for (let i = 1; i <= daysToSpend; i++) {
+ itinerary += `
+ <li>
+ <strong>Day ${i}:</strong>
+ <ul>
+ <li>${isTouristy ? 'Visit popular attraction' : 'Explore local neighborhood'}</li>
+ <li>${isTouristy ? 'Famous restaurant' : 'Local eatery'}</li>
+ <li>${isTouristy ? 'Shopping at main street' : 'Visit local markets'}</li>
+ </ul>
+ </li>
+ `;
+ }
+
+ itinerary += `</ul></div>`;
+
+ itineraryContent.innerHTML = itinerary;
+ result.classList.remove('hidden');
+
+ result.scrollIntoView({ behavior: 'smooth' });
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ff432ea
--- /dev/null
+++ b/style.css
@@ -0,0 +1,149 @@
+:root {
+ --primary-color: #2a6b9c;
+ --secondary-color: #f0f7ff;
+ --accent-color: #ff6b6b;
+ --text-color: #333;
+ --background-color: #ffffff;
+}
+
+* {
+ 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);
+}
+
+header {
+ background-color: var(--primary-color);
+ padding: 1rem;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: white;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--secondary-color);
+}
+
+.hero {
+ background: linear-gradient(135deg, var(--primary-color), #1a4971);
+ color: white;
+ text-align: center;
+ padding: 4rem 1rem;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.generator {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+}
+
+.form-container {
+ background: var(--secondary-color);
+ padding: 2rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input, select {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid #ddd;
+ border-radius: 6px;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+}
+
+input:focus, select:focus {
+ border-color: var(--primary-color);
+ outline: none;
+}
+
+button {
+ background-color: var(--accent-color);
+ color: white;
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 6px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ width: 100%;
+}
+
+button:hover {
+ transform: translateY(-2px);
+}
+
+.result {
+ margin-top: 2rem;
+ padding: 2rem;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.hidden {
+ display: none;
+}
+
+footer {
+ background-color: var(--secondary-color);
+ text-align: center;
+ padding: 1rem;
+ margin-top: 4rem;
+}
+
+@media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .generator {
+ padding: 1rem;
+ }
+
+ .nav-links a {
+ margin-left: 1rem;
+ }
+}