commit 448527f723640f8755d2cc5dce0ed68837e1eb17
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 10:01:36 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..f61ce1d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,46 @@
+<header>
+ <h1>Queue Time Calculator</h1>
+ <p class="tagline">Estimate your waiting time with precision</p>
+</header>
+
+<main>
+ <div class="calculator-container">
+ <div class="input-group">
+ <label for="yourNumber">Your Queue Number</label>
+ <input type="number" id="yourNumber" min="1" required>
+ </div>
+
+ <div class="input-group">
+ <label for="currentNumber">Currently Serving Number</label>
+ <input type="number" id="currentNumber" min="1" required>
+ </div>
+
+ <div class="input-group">
+ <label for="lastUpdate">Time of Last Number Update</label>
+ <input type="datetime-local" id="lastUpdate" required>
+ </div>
+
+ <button id="calculate" class="primary-button">Calculate Wait Time</button>
+
+ <div class="results" id="results">
+ <div class="result-card">
+ <h2>Average Time Per Number</h2>
+ <p id="averageTime">--:--</p>
+ </div>
+
+ <div class="result-card">
+ <h2>Estimated Wait Time</h2>
+ <p id="waitTime">--:--</p>
+ </div>
+
+ <div class="result-card">
+ <h2>Expected Service Time</h2>
+ <p id="expectedTime">--:--</p>
+ </div>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Built for efficiency and accuracy</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..80a2206
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://waitcalc.scroll.pub
+metaTags
+editButton /edit.html
+title Queue Time Calculator
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..162b288
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <h1>Queue Time Calculator</h1>\n <p class=\"tagline\">Estimate your waiting time with precision</p>\n</header>\n\n<main>\n <div class=\"calculator-container\">\n <div class=\"input-group\">\n <label for=\"yourNumber\">Your Queue Number</label>\n <input type=\"number\" id=\"yourNumber\" min=\"1\" required>\n </div>\n\n <div class=\"input-group\">\n <label for=\"currentNumber\">Currently Serving Number</label>\n <input type=\"number\" id=\"currentNumber\" min=\"1\" required>\n </div>\n\n <div class=\"input-group\">\n <label for=\"lastUpdate\">Time of Last Number Update</label>\n <input type=\"datetime-local\" id=\"lastUpdate\" required>\n </div>\n\n <button id=\"calculate\" class=\"primary-button\">Calculate Wait Time</button>\n\n <div class=\"results\" id=\"results\">\n <div class=\"result-card\">\n <h2>Average Time Per Number</h2>\n <p id=\"averageTime\">--:--</p>\n </div>\n \n <div class=\"result-card\">\n <h2>Estimated Wait Time</h2>\n <p id=\"waitTime\">--:--</p>\n </div>\n\n <div class=\"result-card\">\n <h2>Expected Service Time</h2>\n <p id=\"expectedTime\">--:--</p>\n </div>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Built for efficiency and accuracy</p>\n</footer>\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
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..0e832c4
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..72df1ad
--- /dev/null
+++ b/script.js
@@ -0,0 +1,79 @@
+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);
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..dc5c26e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,151 @@
+: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;
+ }
+}
\ No newline at end of file