Changes to timeflow.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   TimeFlow
+   Track time with precision
+ 
+ 
+ 
+   
+     Add New Event
+     
+       
+         Event Name
+         
+       
+       
+         Date & Time
+         
+       
+       
+     
+   
+ 
+   
+     Your Events
+     
+       
+     
+   
+ 
+ 
+ 
+   TimeFlow - Making every second count
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://timeflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title TimeFlow - Event Countdown Tracker
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_017jz3Mqboz1rTuUZBnmoH2N",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "I'll help create an event countdown tracker website. For the domain, I suggest:\n\n---domain---\ntimeflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://timeflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TimeFlow - Event Countdown Tracker\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  TimeFlow\n  Track time with precision
\n\n\n\n  \n    Add New Event\n    \n      \n        Event Name\n        \n      
\n      \n        Date & Time\n        \n      
\n      \n    \n  \n\n  \n    Your Events\n    \n      \n    
\n  \n\n\n\n  TimeFlow - Making every second count
\n\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --accent-color: #3498db;\n  --bg-color: #f9fafb;\n  --card-bg: #ffffff;\n  --text-color: #2c3e50;\n  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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  background: var(--bg-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\nheader {\n  background: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n  box-shadow: var(--shadow);\n}\n\nh1 {\n  font-size: 2.5rem;\n  margin-bottom: 0.5rem;\n  background: linear-gradient(45deg, #3498db, #2ecc71);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.tagline {\n  font-size: 1.1rem;\n  opacity: 0.9;\n}\n\nmain {\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 0 1rem;\n}\n\n.add-event {\n  background: var(--card-bg);\n  padding: 2rem;\n  border-radius: 10px;\n  box-shadow: var(--shadow);\n  margin-bottom: 2rem;\n}\n\n.form-group {\n  margin-bottom: 1rem;\n}\n\nlabel {\n  display: block;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n}\n\ninput {\n  width: 100%;\n  padding: 0.8rem;\n  border: 2px solid #e2e8f0;\n  border-radius: 5px;\n  font-size: 1rem;\n  transition: border-color 0.3s;\n}\n\ninput:focus {\n  border-color: var(--accent-color);\n  outline: none;\n}\n\nbutton {\n  background: var(--accent-color);\n  color: white;\n  padding: 0.8rem 1.5rem;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 1rem;\n  transition: transform 0.2s, background 0.3s;\n}\n\nbutton:hover {\n  background: #2980b9;\n  transform: translateY(-2px);\n}\n\n.events-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n.event-card {\n  background: var(--card-bg);\n  padding: 1.5rem;\n  border-radius: 10px;\n  box-shadow: var(--shadow);\n  transition: transform 0.3s;\n}\n\n.event-card:hover {\n  transform: translateY(-5px);\n}\n\n.event-name {\n  font-size: 1.2rem;\n  font-weight: 600;\n  margin-bottom: 1rem;\n}\n\n.countdown {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0.5rem;\n  text-align: center;\n}\n\n.time-unit {\n  background: var(--primary-color);\n  color: white;\n  padding: 0.5rem;\n  border-radius: 5px;\n}\n\n.time-value {\n  font-size: 1.5rem;\n  font-weight: bold;\n}\n\n.time-label {\n  font-size: 0.8rem;\n  opacity: 0.8;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: var(--primary-color);\n  color: white;\n  margin-top: 3rem;\n}\n\n@media (max-width: 768px) {\n  header {\n    padding: 1.5rem;\n  }\n  \n  h1 {\n    font-size: 2rem;\n  }\n  \n  .events-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const eventForm = document.getElementById('eventForm');\n  const eventsList = document.getElementById('eventsList');\n  \n  // Load events from localStorage\n  let events = JSON.parse(localStorage.getItem('events')) || [];\n  \n  eventForm.addEventListener('submit', (e) => {\n    e.preventDefault();\n    \n    const name = document.getElementById('eventName').value;\n    const date = document.getElementById('eventDate').value;\n    \n    const newEvent = {\n      id: Date.now(),\n      name,\n      date: new Date(date).getTime()\n    };\n    \n    events.push(newEvent);\n    localStorage.setItem('events', JSON.stringify(events));\n    \n    renderEvents();\n    eventForm.reset();\n  });\n  \n  function renderEvents() {\n    eventsList.innerHTML = '';\n    \n    events.forEach(event => {\n      const card = document.createElement('div');\n      card.className = 'event-card';\n      \n      const countdown = createCountdownHTML(event);\n      \n      card.innerHTML = `\n        ${event.name}\n        ${countdown}\n        \n      `;\n      \n      eventsList.appendChild(card);\n    });\n  }\n  \n  function createCountdownHTML(event) {\n    const now = new Date().getTime();\n    const distance = event.date - now;\n    \n    const days = Math.floor(distance / (1000 * 60 * 60 * 24));\n    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n    const seconds = Math.floor((distance % (1000 * 60)) / 1000);\n    \n    return `\n      \n        \n          ${days}
\n          Days
\n        
\n        \n          ${hours}
\n          Hours
\n        
\n        \n          ${minutes}
\n          Minutes
\n        
\n        \n          ${seconds}
\n          Seconds
\n        
\n      
\n    `;\n  }\n  \n  window.deleteEvent = (id) => {\n    events = events.filter(event => event.id !== id);\n    localStorage.setItem('events', JSON.stringify(events));\n    renderEvents();\n  };\n  \n  // Update countdowns every second\n  setInterval(renderEvents, 1000);\n  \n  // Initial render\n  renderEvents();\n});\n\n---end---\n\nThis implementation creates a beautiful, responsive event countdown tracker with the following features:\n\n1. Add new events with name and date/time\n2. Real-time countdown display showing days, hours, minutes, and seconds\n3. Persistent storage using localStorage\n4. Responsive grid layout for event cards\n5. Modern gradient effects and smooth animations\n6. Clean, accessible semantic HTML\n7. Delete functionality for events\n8. Mobile-friendly design\n9. Beautiful color scheme and typography\n\nThe design features a gradient-text logo, floating cards with hover effects, and a clean, professional layout. The countdown timers update every second, and all data persists between page refreshes."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 296,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2449
+   }
+ }

readme.scroll

Changed around line 1

+ # timeflow.scroll.pub

+ Website generated by Claude from prompt: Create a website to track how many days pending for each event. I can create events and they should show dates time and secs

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const eventForm = document.getElementById('eventForm');
+   const eventsList = document.getElementById('eventsList');
+ 
+   // Load events from localStorage
+   let events = JSON.parse(localStorage.getItem('events')) || [];
+ 
+   eventForm.addEventListener('submit', (e) => {
+     e.preventDefault();
+ 
+     const name = document.getElementById('eventName').value;
+     const date = document.getElementById('eventDate').value;
+ 
+     const newEvent = {
+       id: Date.now(),
+       name,
+       date: new Date(date).getTime()
+     };
+ 
+     events.push(newEvent);
+     localStorage.setItem('events', JSON.stringify(events));
+ 
+     renderEvents();
+     eventForm.reset();
+   });
+ 
+   function renderEvents() {
+     eventsList.innerHTML = '';
+ 
+     events.forEach(event => {
+       const card = document.createElement('div');
+       card.className = 'event-card';
+ 
+       const countdown = createCountdownHTML(event);
+ 
+       card.innerHTML = `
+         ${event.name}
+         ${countdown}
+         
+       `;
+ 
+       eventsList.appendChild(card);
+     });
+   }
+ 
+   function createCountdownHTML(event) {
+     const now = new Date().getTime();
+     const distance = event.date - now;
+ 
+     const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+     const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+     const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+     const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+ 
+     return `
+       
+         
+           ${days}
+           Days
+         
+         
+           ${hours}
+           Hours
+         
+         
+           ${minutes}
+           Minutes
+         
+         
+           ${seconds}
+           Seconds
+         
+       
+     `;
+   }
+ 
+   window.deleteEvent = (id) => {
+     events = events.filter(event => event.id !== id);
+     localStorage.setItem('events', JSON.stringify(events));
+     renderEvents();
+   };
+ 
+   // Update countdowns every second
+   setInterval(renderEvents, 1000);
+ 
+   // Initial render
+   renderEvents();
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --accent-color: #3498db;
+   --bg-color: #f9fafb;
+   --card-bg: #ffffff;
+   --text-color: #2c3e50;
+   --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;
+   background: var(--bg-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ header {
+   background: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+   box-shadow: var(--shadow);
+ }
+ 
+ h1 {
+   font-size: 2.5rem;
+   margin-bottom: 0.5rem;
+   background: linear-gradient(45deg, #3498db, #2ecc71);
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+ }
+ 
+ .tagline {
+   font-size: 1.1rem;
+   opacity: 0.9;
+ }
+ 
+ main {
+   max-width: 1200px;
+   margin: 2rem auto;
+   padding: 0 1rem;
+ }
+ 
+ .add-event {
+   background: var(--card-bg);
+   padding: 2rem;
+   border-radius: 10px;
+   box-shadow: var(--shadow);
+   margin-bottom: 2rem;
+ }
+ 
+ .form-group {
+   margin-bottom: 1rem;
+ }
+ 
+ label {
+   display: block;
+   margin-bottom: 0.5rem;
+   font-weight: 500;
+ }
+ 
+ input {
+   width: 100%;
+   padding: 0.8rem;
+   border: 2px solid #e2e8f0;
+   border-radius: 5px;
+   font-size: 1rem;
+   transition: border-color 0.3s;
+ }
+ 
+ input:focus {
+   border-color: var(--accent-color);
+   outline: none;
+ }
+ 
+ button {
+   background: var(--accent-color);
+   color: white;
+   padding: 0.8rem 1.5rem;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+   font-size: 1rem;
+   transition: transform 0.2s, background 0.3s;
+ }
+ 
+ button:hover {
+   background: #2980b9;
+   transform: translateY(-2px);
+ }
+ 
+ .events-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+   gap: 1.5rem;
+ }
+ 
+ .event-card {
+   background: var(--card-bg);
+   padding: 1.5rem;
+   border-radius: 10px;
+   box-shadow: var(--shadow);
+   transition: transform 0.3s;
+ }
+ 
+ .event-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .event-name {
+   font-size: 1.2rem;
+   font-weight: 600;
+   margin-bottom: 1rem;
+ }
+ 
+ .countdown {
+   display: grid;
+   grid-template-columns: repeat(4, 1fr);
+   gap: 0.5rem;
+   text-align: center;
+ }
+ 
+ .time-unit {
+   background: var(--primary-color);
+   color: white;
+   padding: 0.5rem;
+   border-radius: 5px;
+ }
+ 
+ .time-value {
+   font-size: 1.5rem;
+   font-weight: bold;
+ }
+ 
+ .time-label {
+   font-size: 0.8rem;
+   opacity: 0.8;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: var(--primary-color);
+   color: white;
+   margin-top: 3rem;
+ }
+ 
+ @media (max-width: 768px) {
+   header {
+     padding: 1.5rem;
+   }
+ 
+   h1 {
+     font-size: 2rem;
+   }
+ 
+   .events-grid {
+     grid-template-columns: 1fr;
+   }
+ }