Changes to wanderplan.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     WanderPlan
+     
+       
+       
+       
+     
+     
+       Plan Trip
+       Find Stays
+       Saved Plans
+     
+   
+ 
+ 
+ 
+   
+     Plan Your Perfect Family Adventure
+     
+       
+       
+     
+   
+ 
+   
+     Trip Planner
+     
+       
+         
+           
+           
+         
+         
+       
+       
+         Your Itinerary
+         
+         
+       
+     
+   
+ 
+   
+     Find Places to Stay
+     
+       
+       
+         
+         
+       
+     
+     
+   
+ 
+ 
+ 
+   
+     
+       About WanderPlan
+       Making family travel planning simple and enjoyable
+     
+     
+       Quick Links
+       
+         Plan Trip
+         Find Stays
+         Saved Plans
+       
+     
+     
+       Contact
+       hello@wanderplan.scroll.pub
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://wanderplan.scroll.pub
+ metaTags
+  description Plan your perfect family trip itinerary and find accommodations worldwide. Interactive travel planning made simple.
+  keywords travel planning, family vacation, itinerary planner, accommodation finder, trip organizer
+ editButton /edit.html
+ title WanderPlan - Family Travel Itinerary Planner
+ style.css
+ body.html
+ script.js

readme.scroll

Changed around line 1

+ # wanderplan.scroll.pub

+ Website generated by Claude from prompt: create a website where I can plan the itinerary for my choice of place in the world with my family and find places to stay

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   // Mobile Menu Toggle
+   const menuToggle = document.querySelector('.menu-toggle');
+   const navLinks = document.querySelector('.nav-links');
+ 
+   menuToggle.addEventListener('click', () => {
+     navLinks.classList.toggle('active');
+     const spans = menuToggle.getElementsByTagName('span');
+     spans[0].style.transform = navLinks.classList.contains('active') ?
+       'rotate(45deg) translate(5px, 6px)' : '';
+     spans[1].style.opacity = navLinks.classList.contains('active') ? '0' : '1';
+     spans[2].style.transform = navLinks.classList.contains('active') ?
+       'rotate(-45deg) translate(5px, -6px)' : '';
+   });
+ 
+   // Smooth Scroll
+   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+     anchor.addEventListener('click', function (e) {
+       e.preventDefault();
+       const target = document.querySelector(this.getAttribute('href'));
+       target.scrollIntoView({
+         behavior: 'smooth'
+       });
+     });
+   });
+ 
+   // Calendar Implementation
+   const calendar = document.getElementById('calendar');
+   const startDate = document.getElementById('start-date');
+   const endDate = document.getElementById('end-date');
+ 
+   function createCalendar() {
+     const date = new Date();
+     const month = date.getMonth();
+     const year = date.getFullYear();
+ 
+     const firstDay = new Date(year, month, 1);
+     const lastDay = new Date(year, month + 1, 0);
+ 
+     let html = '';+     ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].forEach(day => {
+       html += `
`;+     });
+     html += '
';+ 
+     let day = 1;
+     for (let i = 0; i < 6; i++) {
+       html += '
';+       for (let j = 0; j < 7; j++) {
+         if (i === 0 && j < firstDay.getDay()) {
+           html += '
';+         } else if (day > lastDay.getDate()) {
+           html += '
';+         } else {
+           html += `
`;+           day++;
+         }
+       }
+       html += '
';+     }
+     html += '
${day}
${day}
';
+     calendar.innerHTML = html;
+   }
+ 
+   createCalendar();
+ 
+   // Itinerary Builder
+   const itineraryList = document.getElementById('itinerary-list');
+   const addActivityBtn = document.querySelector('.add-activity');
+ 
+   let activities = [];
+ 
+   addActivityBtn.addEventListener('click', () => {
+     const activity = {
+       id: Date.now(),
+       title: 'New Activity',
+       time: '12:00',
+       description: 'Add description'
+     };
+     activities.push(activity);
+     renderActivities();
+   });
+ 
+   function renderActivities() {
+     itineraryList.innerHTML = activities.map(activity => `
+       
+         
+         
+         ${activity.description}
+         
+       
+     `).join('');
+   }
+ 
+   window.removeActivity = (id) => {
+     activities = activities.filter(activity => activity.id !== id);
+     renderActivities();
+   };
+ 
+   // Accommodation Search
+   const propertyType = document.getElementById('property-type');
+   const priceSlider = document.getElementById('price-slider');
+   const priceDisplay = document.querySelector('.price-display');
+   const accommodationsGrid = document.getElementById('accommodations');
+ 
+   priceSlider.addEventListener('input', () => {
+     priceDisplay.textContent = `$${priceSlider.value}`;
+   });
+ });

${day}
		${day}

style.css

Changed around line 1
+ :root {
+   --primary-color: #2a6b9c;
+   --secondary-color: #4ca1d8;
+   --accent-color: #f7c948;
+   --text-color: #333;
+   --light-bg: #f5f7fa;
+   --white: #ffffff;
+   --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ * {
+   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);
+ }
+ 
+ /* Header & Navigation */
+ .main-nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 2rem;
+   background: var(--white);
+   box-shadow: var(--shadow);
+   position: fixed;
+   width: 100%;
+   z-index: 1000;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: 700;
+   color: var(--primary-color);
+ }
+ 
+ .nav-links {
+   display: flex;
+   gap: 2rem;
+   list-style: none;
+ }
+ 
+ .nav-links a {
+   text-decoration: none;
+   color: var(--text-color);
+   font-weight: 500;
+   transition: color 0.3s ease;
+ }
+ 
+ .nav-links a:hover {
+   color: var(--secondary-color);
+ }
+ 
+ .menu-toggle {
+   display: none;
+ }
+ 
+ /* Hero Section */
+ .hero {
+   height: 100vh;
+   background: linear-gradient(rgba(42, 107, 156, 0.8), rgba(76, 161, 216, 0.8)),
+               url('data:image/svg+xml,');
+   background-size: cover;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   text-align: center;
+   padding: 2rem;
+ }
+ 
+ .hero h1 {
+   color: var(--white);
+   font-size: 3.5rem;
+   margin-bottom: 2rem;
+   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+ }
+ 
+ .search-container {
+   display: flex;
+   gap: 1rem;
+   max-width: 600px;
+   width: 100%;
+ }
+ 
+ .search-container input {
+   flex: 1;
+   padding: 1rem;
+   border: none;
+   border-radius: 4px;
+   font-size: 1.1rem;
+ }
+ 
+ .search-btn {
+   padding: 1rem 2rem;
+   background: var(--accent-color);
+   border: none;
+   border-radius: 4px;
+   color: var(--text-color);
+   font-weight: 600;
+   cursor: pointer;
+   transition: transform 0.3s ease;
+ }
+ 
+ .search-btn:hover {
+   transform: translateY(-2px);
+ }
+ 
+ /* Planner Section */
+ .planner-section {
+   padding: 4rem 2rem;
+   background: var(--light-bg);
+ }
+ 
+ .planner-grid {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .calendar-container {
+   background: var(--white);
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: var(--shadow);
+ }
+ 
+ .itinerary-builder {
+   background: var(--white);
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: var(--shadow);
+ }
+ 
+ /* Stays Section */
+ .stays-section {
+   padding: 4rem 2rem;
+ }
+ 
+ .filters {
+   display: flex;
+   gap: 2rem;
+   margin-bottom: 2rem;
+ }
+ 
+ .accommodations-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+   gap: 2rem;
+ }
+ 
+ /* Responsive Design */
+ @media (max-width: 768px) {
+   .menu-toggle {
+     display: block;
+     background: none;
+     border: none;
+     cursor: pointer;
+   }
+ 
+   .menu-toggle span {
+     display: block;
+     width: 25px;
+     height: 3px;
+     background: var(--text-color);
+     margin: 5px 0;
+     transition: 0.3s;
+   }
+ 
+   .nav-links {
+     display: none;
+     position: absolute;
+     top: 100%;
+     left: 0;
+     right: 0;
+     background: var(--white);
+     flex-direction: column;
+     padding: 1rem;
+     text-align: center;
+   }
+ 
+   .nav-links.active {
+     display: flex;
+   }
+ 
+   .planner-grid {
+     grid-template-columns: 1fr;
+   }
+ 
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ 
+   .search-container {
+     flex-direction: column;
+   }
+ }