Last 10 Commits for timeflow.scroll.pub

commit 9d009f36cc7bfb2c5e204f7dd4698727413f420f Author: root <root@hub.scroll.pub> Date: 2024-12-27 19:44:31 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..ffe8040 --- /dev/null +++ b/body.html @@ -0,0 +1,32 @@ +<header> + <h1>TimeFlow</h1> + <p class="tagline">Track time with precision</p> +</header> + +<main> + <section class="add-event"> + <h2>Add New Event</h2> + <form id="eventForm"> + <div class="form-group"> + <label for="eventName">Event Name</label> + <input type="text" id="eventName" required> + </div> + <div class="form-group"> + <label for="eventDate">Date & Time</label> + <input type="datetime-local" id="eventDate" required> + </div> + <button type="submit">Create Event</button> + </form> + </section> + + <section class="events"> + <h2>Your Events</h2> + <div id="eventsList" class="events-grid"> +  + </div> + </section> +</main> + +<footer> + <p>TimeFlow - Making every second count</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..6881517 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://timeflow.scroll.pub +metaTags +editButton /edit.html +title TimeFlow - Event Countdown Tracker +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..7288ab5 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "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<header>\n <h1>TimeFlow</h1>\n <p class=\"tagline\">Track time with precision</p>\n</header>\n\n<main>\n <section class=\"add-event\">\n <h2>Add New Event</h2>\n <form id=\"eventForm\">\n <div class=\"form-group\">\n <label for=\"eventName\">Event Name</label>\n <input type=\"text\" id=\"eventName\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"eventDate\">Date & Time</label>\n <input type=\"datetime-local\" id=\"eventDate\" required>\n </div>\n <button type=\"submit\">Create Event</button>\n </form>\n </section>\n\n <section class=\"events\">\n <h2>Your Events</h2>\n <div id=\"eventsList\" class=\"events-grid\">\n \n </div>\n </section>\n</main>\n\n<footer>\n <p>TimeFlow - Making every second count</p>\n</footer>\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 <h3 class=\"event-name\">${event.name}</h3>\n ${countdown}\n <button onclick=\"deleteEvent(${event.id})\" class=\"delete-btn\">Delete</button>\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 <div class=\"countdown\">\n <div class=\"time-unit\">\n <div class=\"time-value\">${days}</div>\n <div class=\"time-label\">Days</div>\n </div>\n <div class=\"time-unit\">\n <div class=\"time-value\">${hours}</div>\n <div class=\"time-label\">Hours</div>\n </div>\n <div class=\"time-unit\">\n <div class=\"time-value\">${minutes}</div>\n <div class=\"time-label\">Minutes</div>\n </div>\n <div class=\"time-unit\">\n <div class=\"time-value\">${seconds}</div>\n <div class=\"time-label\">Seconds</div>\n </div>\n </div>\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 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..c20bcaa --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# 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 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..69b28d8 --- /dev/null +++ b/script.js @@ -0,0 +1,88 @@ +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 = ` + <h3 class="event-name">${event.name}</h3> + ${countdown} + <button onclick="deleteEvent(${event.id})" class="delete-btn">Delete</button> + `; + + 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 ` + <div class="countdown"> + <div class="time-unit"> + <div class="time-value">${days}</div> + <div class="time-label">Days</div> + </div> + <div class="time-unit"> + <div class="time-value">${hours}</div> + <div class="time-label">Hours</div> + </div> + <div class="time-unit"> + <div class="time-value">${minutes}</div> + <div class="time-label">Minutes</div> + </div> + <div class="time-unit"> + <div class="time-value">${seconds}</div> + <div class="time-label">Seconds</div> + </div> + </div> + `; + } + + 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(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..9e7b297 --- /dev/null +++ b/style.css @@ -0,0 +1,166 @@ +: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; + } +}