Changes to waitcalc.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+

Queue Time Calculator

+

Estimate your waiting time with precision

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Average Time Per Number

+

--:--

+
+
+
+

Estimated Wait Time

+

--:--

+
+
+
+

Expected Service Time

+

--:--

+
+
+
+
+
+
+

Built for efficiency and accuracy

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://waitcalc.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Queue Time Calculator
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01EQs1b2M1NjY1Y6QqxuhGmG",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a queue time calculator website. For the domain, I suggest:\n\nwaitcalc.scroll.pub\n\nHere's the complete website:\n\n---domain---\nwaitcalc.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://waitcalc.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Queue Time Calculator\nstyle.css\nbody.html\nscript.js\n---body.html---\n
\n

Queue Time Calculator

\n

Estimate your waiting time with precision

\n
\n\n
\n
\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n \n\n
\n
\n

Average Time Per Number

\n

--:--

\n
\n \n
\n

Estimated Wait Time

\n

--:--

\n
\n\n
\n

Expected Service Time

\n

--:--

\n
\n
\n
\n
\n\n
\n

Built for efficiency and accuracy

\n
\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --background-color: #f9fafb;\n --card-background: #ffffff;\n --text-color: #2c3e50;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --gradient: linear-gradient(135deg, #3498db, #2980b9);\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 min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n background: var(--gradient);\n color: white;\n padding: 2rem 1rem;\n text-align: center;\n box-shadow: var(--shadow);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n font-weight: 700;\n}\n\n.tagline {\n font-size: 1.1rem;\n opacity: 0.9;\n}\n\nmain {\n flex: 1;\n padding: 2rem 1rem;\n max-width: 800px;\n margin: 0 auto;\n width: 100%;\n}\n\n.calculator-container {\n background: var(--card-background);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: var(--shadow);\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n color: var(--primary-color);\n}\n\ninput {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid #e2e8f0;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--accent-color);\n}\n\n.primary-button {\n background: var(--gradient);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n font-size: 1.1rem;\n cursor: pointer;\n width: 100%;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.primary-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n}\n\n.results {\n margin-top: 2rem;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.result-card {\n background: var(--card-background);\n padding: 1.5rem;\n border-radius: 0.5rem;\n box-shadow: var(--shadow);\n text-align: center;\n border: 1px solid #e2e8f0;\n}\n\n.result-card h2 {\n font-size: 1rem;\n color: var(--primary-color);\n margin-bottom: 0.5rem;\n}\n\n.result-card p {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--accent-color);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .calculator-container {\n padding: 1rem;\n }\n \n .results {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const calculateButton = document.getElementById('calculate');\n const averageTimeElement = document.getElementById('averageTime');\n const waitTimeElement = document.getElementById('waitTime');\n const expectedTimeElement = document.getElementById('expectedTime');\n\n // Set default last update time to current time\n const lastUpdateInput = document.getElementById('lastUpdate');\n const now = new Date();\n const formattedDateTime = now.toISOString().slice(0, 16);\n lastUpdateInput.value = formattedDateTime;\n\n calculateButton.addEventListener('click', calculateWaitTime);\n\n function calculateWaitTime() {\n const yourNumber = parseInt(document.getElementById('yourNumber').value);\n const currentNumber = parseInt(document.getElementById('currentNumber').value);\n const lastUpdate = new Date(document.getElementById('lastUpdate').value);\n\n if (!yourNumber || !currentNumber || !lastUpdate) {\n alert('Please fill in all fields');\n return;\n }\n\n if (yourNumber < currentNumber) {\n alert('Your number should be greater than or equal to the current number');\n return;\n }\n\n const now = new Date();\n const timeDifferenceMinutes = (now - lastUpdate) / (1000 * 60);\n const numbersDifference = currentNumber - parseInt(localStorage.getItem('lastNumber') || currentNumber);\n \n // Calculate average time per number\n let averageTimePerNumber;\n if (numbersDifference > 0) {\n averageTimePerNumber = timeDifferenceMinutes / numbersDifference;\n } else {\n averageTimePerNumber = parseFloat(localStorage.getItem('averageTime')) || 5; // Default 5 minutes\n }\n\n // Store current values for future calculations\n localStorage.setItem('lastNumber', currentNumber);\n localStorage.setItem('averageTime', averageTimePerNumber);\n\n // Calculate estimated wait time\n const numbersAhead = yourNumber - currentNumber;\n const estimatedWaitMinutes = numbersAhead * averageTimePerNumber;\n\n // Calculate expected service time\n const expectedTime = new Date(now.getTime() + estimatedWaitMinutes * 60000);\n\n // Update display\n averageTimeElement.textContent = `${averageTimePerNumber.toFixed(1)} minutes`;\n waitTimeElement.textContent = `${Math.round(estimatedWaitMinutes)} minutes`;\n expectedTimeElement.textContent = formatTime(expectedTime);\n\n // Animate results\n document.querySelectorAll('.result-card').forEach(card => {\n card.style.animation = 'none';\n card.offsetHeight; // Trigger reflow\n card.style.animation = 'fadeIn 0.5s ease-out';\n });\n }\n\n function formatTime(date) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n }\n});\n\n// Add some CSS animations\nconst style = document.createElement('style');\nstyle.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n`;\ndocument.head.appendChild(style);\n---end---\n\nThis website features:\n1. Clean, semantic HTML5 structure\n2. Modern, responsive design with CSS Grid and Flexbox\n3. Smooth animations and transitions\n4. Local storage to improve average time calculations\n5. Error handling and input validation\n6. Accessible form controls with proper labels\n7. Mobile-first approach\n8. Beautiful gradient backgrounds and card-based design\n9. Interactive hover effects\n10. Clean typography and spacing\n\nThe calculator provides three key metrics:\n- Average time per number\n- Estimated wait time in minutes\n- Expected service time (actual clock time)\n\nIt's both functional and visually appealing, with a professional look that works well on all devices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 311,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2584
+ }
+ }
readme.scroll
Changed around line 1
+ # waitcalc.scroll.pub
+ Website generated by Claude from prompt: create a website that asks for your queue number and for the number being served now. After updating the number being served, the website calculates the average waiting time per number and estimates when will be our turn
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const calculateButton = document.getElementById('calculate');
+ const averageTimeElement = document.getElementById('averageTime');
+ const waitTimeElement = document.getElementById('waitTime');
+ const expectedTimeElement = document.getElementById('expectedTime');
+
+ // Set default last update time to current time
+ const lastUpdateInput = document.getElementById('lastUpdate');
+ const now = new Date();
+ const formattedDateTime = now.toISOString().slice(0, 16);
+ lastUpdateInput.value = formattedDateTime;
+
+ calculateButton.addEventListener('click', calculateWaitTime);
+
+ function calculateWaitTime() {
+ const yourNumber = parseInt(document.getElementById('yourNumber').value);
+ const currentNumber = parseInt(document.getElementById('currentNumber').value);
+ const lastUpdate = new Date(document.getElementById('lastUpdate').value);
+
+ if (!yourNumber || !currentNumber || !lastUpdate) {
+ alert('Please fill in all fields');
+ return;
+ }
+
+ if (yourNumber < currentNumber) {
+ alert('Your number should be greater than or equal to the current number');
+ return;
+ }
+
+ const now = new Date();
+ const timeDifferenceMinutes = (now - lastUpdate) / (1000 * 60);
+ const numbersDifference = currentNumber - parseInt(localStorage.getItem('lastNumber') || currentNumber);
+
+ // Calculate average time per number
+ let averageTimePerNumber;
+ if (numbersDifference > 0) {
+ averageTimePerNumber = timeDifferenceMinutes / numbersDifference;
+ } else {
+ averageTimePerNumber = parseFloat(localStorage.getItem('averageTime')) || 5; // Default 5 minutes
+ }
+
+ // Store current values for future calculations
+ localStorage.setItem('lastNumber', currentNumber);
+ localStorage.setItem('averageTime', averageTimePerNumber);
+
+ // Calculate estimated wait time
+ const numbersAhead = yourNumber - currentNumber;
+ const estimatedWaitMinutes = numbersAhead * averageTimePerNumber;
+
+ // Calculate expected service time
+ const expectedTime = new Date(now.getTime() + estimatedWaitMinutes * 60000);
+
+ // Update display
+ averageTimeElement.textContent = `${averageTimePerNumber.toFixed(1)} minutes`;
+ waitTimeElement.textContent = `${Math.round(estimatedWaitMinutes)} minutes`;
+ expectedTimeElement.textContent = formatTime(expectedTime);
+
+ // Animate results
+ document.querySelectorAll('.result-card').forEach(card => {
+ card.style.animation = 'none';
+ card.offsetHeight; // Trigger reflow
+ card.style.animation = 'fadeIn 0.5s ease-out';
+ });
+ }
+
+ function formatTime(date) {
+ return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+ }
+ });
+
+ // Add some CSS animations
+ const style = document.createElement('style');
+ style.textContent = `
+ @keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+ `;
+ document.head.appendChild(style);
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --background-color: #f9fafb;
+ --card-background: #ffffff;
+ --text-color: #2c3e50;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --gradient: linear-gradient(135deg, #3498db, #2980b9);
+ }
+
+ * {
+ 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);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ header {
+ background: var(--gradient);
+ color: white;
+ padding: 2rem 1rem;
+ text-align: center;
+ box-shadow: var(--shadow);
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ font-weight: 700;
+ }
+
+ .tagline {
+ font-size: 1.1rem;
+ opacity: 0.9;
+ }
+
+ main {
+ flex: 1;
+ padding: 2rem 1rem;
+ max-width: 800px;
+ margin: 0 auto;
+ width: 100%;
+ }
+
+ .calculator-container {
+ background: var(--card-background);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: var(--shadow);
+ }
+
+ .input-group {
+ margin-bottom: 1.5rem;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: var(--primary-color);
+ }
+
+ input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 2px solid #e2e8f0;
+ border-radius: 0.5rem;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ }
+
+ input:focus {
+ outline: none;
+ border-color: var(--accent-color);
+ }
+
+ .primary-button {
+ background: var(--gradient);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ font-size: 1.1rem;
+ cursor: pointer;
+ width: 100%;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .primary-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+ }
+
+ .results {
+ margin-top: 2rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ }
+
+ .result-card {
+ background: var(--card-background);
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ box-shadow: var(--shadow);
+ text-align: center;
+ border: 1px solid #e2e8f0;
+ }
+
+ .result-card h2 {
+ font-size: 1rem;
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+ }
+
+ .result-card p {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--accent-color);
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 600px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .calculator-container {
+ padding: 1rem;
+ }
+
+ .results {
+ grid-template-columns: 1fr;
+ }
+ }