commit d1fde5c8f7defafe95e1fdbfef5f8ced7e0b2488
Author: ffff:1.46.24.111 <ffff:1.46.24.111@hub.scroll.pub>
Date: 2024-12-28 10:34:13 +0000
Subject: updated script.js
diff --git a/script.js b/script.js
index 28ea979..1a13824 100644
--- a/script.js
+++ b/script.js
@@ -7,14 +7,13 @@ document.addEventListener("DOMContentLoaded", function () {
// Average time per person (in minutes)
const baseTimePerPerson = 3;
- let timeVariance = 1;
+ const timeVariance = 1; // Variance in minutes
calculateBtn.addEventListener("click", function () {
- const yourNumberInput = document.getElementById("yourNumber");
- const currentNumberInput = document.getElementById("currentNumber");
-
- const yourNumber = parseInt(yourNumberInput.value);
- const currentNumber = parseInt(currentNumberInput.value);
+ const yourNumber = parseInt(document.getElementById("yourNumber").value);
+ const currentNumber = parseInt(
+ document.getElementById("currentNumber").value,
+ );
if (isNaN(yourNumber) || isNaN(currentNumber)) {
alert("Please enter valid numbers");
@@ -35,12 +34,14 @@ document.addEventListener("DOMContentLoaded", function () {
// Update UI
resultCard.classList.remove("hidden");
- numbersAheadEl.textContent = `You have ${numbersAhead} numbers ahead of you`;
- avgTimeEl.textContent = `Average time per person: ${avgTimePerPerson.toFixed(1)} mins`;
- estimatedTimeEl.textContent = `Estimated wait time: ${formatTime(estimatedTime)}`;
+ numbersAheadEl.textContent = numbersAhead;
+ avgTimeEl.textContent = `${avgTimePerPerson.toFixed(1)} mins`;
+ estimatedTimeEl.textContent = formatTime(estimatedTime);
// Animate the card
- resultCard.style.animation = "fadeIn 0.5s ease-out";
+ resultCard.style.animation = "none"; // Reset animation
+ void resultCard.offsetWidth; // Trigger reflow
+ resultCard.style.animation = "fadeIn 0.5s ease-out"; // Restart animation
});
function formatTime(date) {
commit da7e197b61bc5bb2739afec7d8ee2e5482db5916
Author: ffff:1.46.24.111 <ffff:1.46.24.111@hub.scroll.pub>
Date: 2024-12-28 10:32:05 +0000
Subject: updated script.js
diff --git a/script.js b/script.js
index 6f5c2b0..28ea979 100644
--- a/script.js
+++ b/script.js
@@ -1,56 +1,59 @@
-document.addEventListener('DOMContentLoaded', function() {
- const calculateBtn = document.getElementById('calculate');
- const resultCard = document.getElementById('resultCard');
- const numbersAheadEl = document.getElementById('numbersAhead');
- const avgTimeEl = document.getElementById('avgTime');
- const estimatedTimeEl = document.getElementById('estimatedTime');
-
+document.addEventListener("DOMContentLoaded", function () {
+ const calculateBtn = document.getElementById("calculate");
+ const resultCard = document.getElementById("resultCard");
+ const numbersAheadEl = document.getElementById("numbersAhead");
+ const avgTimeEl = document.getElementById("avgTime");
+ const estimatedTimeEl = document.getElementById("estimatedTime");
+
// Average time per person (in minutes)
const baseTimePerPerson = 3;
let timeVariance = 1;
-
- calculateBtn.addEventListener('click', function() {
- const yourNumber = parseInt(document.getElementById('yourNumber').value);
- const currentNumber = parseInt(document.getElementById('currentNumber').value);
-
+
+ calculateBtn.addEventListener("click", function () {
+ const yourNumberInput = document.getElementById("yourNumber");
+ const currentNumberInput = document.getElementById("currentNumber");
+
+ const yourNumber = parseInt(yourNumberInput.value);
+ const currentNumber = parseInt(currentNumberInput.value);
+
if (isNaN(yourNumber) || isNaN(currentNumber)) {
- alert('Please enter valid numbers');
+ alert("Please enter valid numbers");
return;
}
-
+
if (yourNumber < currentNumber) {
- alert('Your number cannot be less than the current number');
+ alert("Your number cannot be less than the current number");
return;
}
-
+
const numbersAhead = yourNumber - currentNumber;
- const avgTimePerPerson = baseTimePerPerson + (Math.random() * timeVariance);
+ const avgTimePerPerson = baseTimePerPerson + Math.random() * timeVariance;
const totalWaitTime = numbersAhead * avgTimePerPerson;
-
+
const estimatedTime = new Date();
estimatedTime.setMinutes(estimatedTime.getMinutes() + totalWaitTime);
-
+
// Update UI
- resultCard.classList.remove('hidden');
- numbersAheadEl.textContent = numbersAhead;
- avgTimeEl.textContent = `${avgTimePerPerson.toFixed(1)} mins`;
- estimatedTimeEl.textContent = formatTime(estimatedTime);
-
+ resultCard.classList.remove("hidden");
+ numbersAheadEl.textContent = `You have ${numbersAhead} numbers ahead of you`;
+ avgTimeEl.textContent = `Average time per person: ${avgTimePerPerson.toFixed(1)} mins`;
+ estimatedTimeEl.textContent = `Estimated wait time: ${formatTime(estimatedTime)}`;
+
// Animate the card
- resultCard.style.animation = 'fadeIn 0.5s ease-out';
+ resultCard.style.animation = "fadeIn 0.5s ease-out";
});
-
+
function formatTime(date) {
return date.toLocaleTimeString([], {
- hour: '2-digit',
- minute: '2-digit'
+ hour: "2-digit",
+ minute: "2-digit",
});
}
-
+
// Add input validation
const inputs = document.querySelectorAll('input[type="number"]');
- inputs.forEach(input => {
- input.addEventListener('input', function() {
+ inputs.forEach((input) => {
+ input.addEventListener("input", function () {
if (this.value < 0) this.value = 0;
});
});
commit 32d32fd82e30c8b90d4aa30d8fe1fb461b356b99
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 10:02:14 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..7846c5d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,41 @@
+<main class="container">
+ <h1>Queue Time Calculator</h1>
+
+ <section class="input-section">
+ <div class="input-group">
+ <label for="yourNumber">Your Queue Number</label>
+ <input type="number" id="yourNumber" min="0" required>
+ </div>
+
+ <div class="input-group">
+ <label for="currentNumber">Currently Serving</label>
+ <input type="number" id="currentNumber" min="0" required>
+ </div>
+
+ <button id="calculate" class="primary-button">Calculate Wait Time</button>
+ </section>
+
+ <section class="results-section" aria-live="polite">
+ <div class="result-card hidden" id="resultCard">
+ <h2>Estimated Wait Time</h2>
+ <div class="stats-grid">
+ <div class="stat-item">
+ <span class="stat-label">Numbers Ahead</span>
+ <span class="stat-value" id="numbersAhead">-</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">Average Time Per Number</span>
+ <span class="stat-value" id="avgTime">-</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">Your Turn At</span>
+ <span class="stat-value" id="estimatedTime">-</span>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ♥ for better queue management</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8de8f5b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://qtime.scroll.pub
+metaTags
+editButton /edit.html
+title Queue Time Calculator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..8a19783
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01CQqAxTAavepNPSwpNXswf4",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a complete queue time calculator website:\n\n---domain---\nqtime.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://qtime.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Queue Time Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"container\">\n <h1>Queue Time Calculator</h1>\n \n <section class=\"input-section\">\n <div class=\"input-group\">\n <label for=\"yourNumber\">Your Queue Number</label>\n <input type=\"number\" id=\"yourNumber\" min=\"0\" required>\n </div>\n \n <div class=\"input-group\">\n <label for=\"currentNumber\">Currently Serving</label>\n <input type=\"number\" id=\"currentNumber\" min=\"0\" required>\n </div>\n\n <button id=\"calculate\" class=\"primary-button\">Calculate Wait Time</button>\n </section>\n\n <section class=\"results-section\" aria-live=\"polite\">\n <div class=\"result-card hidden\" id=\"resultCard\">\n <h2>Estimated Wait Time</h2>\n <div class=\"stats-grid\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Numbers Ahead</span>\n <span class=\"stat-value\" id=\"numbersAhead\">-</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Average Time Per Number</span>\n <span class=\"stat-value\" id=\"avgTime\">-</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Your Turn At</span>\n <span class=\"stat-value\" id=\"estimatedTime\">-</span>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with ♥ for better queue management</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1d4ed8;\n --background-color: #f8fafc;\n --card-background: #ffffff;\n --text-color: #1e293b;\n --border-radius: 12px;\n --spacing: 1rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.container {\n max-width: 600px;\n margin: 0 auto;\n padding: 2rem var(--spacing);\n}\n\nh1 {\n text-align: center;\n color: var(--primary-color);\n margin-bottom: 2rem;\n font-size: 2.5rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.input-section {\n background: var(--card-background);\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\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}\n\ninput {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid #e2e8f0;\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n.primary-button {\n width: 100%;\n padding: 1rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.primary-button:hover {\n background: var(--secondary-color);\n}\n\n.result-card {\n background: var(--card-background);\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.result-card:hover {\n transform: translateY(-2px);\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-top: 1.5rem;\n}\n\n.stat-item {\n text-align: center;\n padding: 1rem;\n background: var(--background-color);\n border-radius: var(--border-radius);\n}\n\n.stat-label {\n display: block;\n font-size: 0.875rem;\n color: #64748b;\n margin-bottom: 0.5rem;\n}\n\n.stat-value {\n display: block;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--primary-color);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n color: #64748b;\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 1rem;\n }\n \n .stats-grid {\n grid-template-columns: 1fr;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const calculateBtn = document.getElementById('calculate');\n const resultCard = document.getElementById('resultCard');\n const numbersAheadEl = document.getElementById('numbersAhead');\n const avgTimeEl = document.getElementById('avgTime');\n const estimatedTimeEl = document.getElementById('estimatedTime');\n \n // Average time per person (in minutes)\n const baseTimePerPerson = 3;\n let timeVariance = 1;\n \n calculateBtn.addEventListener('click', function() {\n const yourNumber = parseInt(document.getElementById('yourNumber').value);\n const currentNumber = parseInt(document.getElementById('currentNumber').value);\n \n if (isNaN(yourNumber) || isNaN(currentNumber)) {\n alert('Please enter valid numbers');\n return;\n }\n \n if (yourNumber < currentNumber) {\n alert('Your number cannot be less than the current number');\n return;\n }\n \n const numbersAhead = yourNumber - currentNumber;\n const avgTimePerPerson = baseTimePerPerson + (Math.random() * timeVariance);\n const totalWaitTime = numbersAhead * avgTimePerPerson;\n \n const estimatedTime = new Date();\n estimatedTime.setMinutes(estimatedTime.getMinutes() + totalWaitTime);\n \n // Update UI\n resultCard.classList.remove('hidden');\n numbersAheadEl.textContent = numbersAhead;\n avgTimeEl.textContent = `${avgTimePerPerson.toFixed(1)} mins`;\n estimatedTimeEl.textContent = formatTime(estimatedTime);\n \n // Animate the card\n resultCard.style.animation = 'fadeIn 0.5s ease-out';\n });\n \n function formatTime(date) {\n return date.toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit'\n });\n }\n \n // Add input validation\n const inputs = document.querySelectorAll('input[type=\"number\"]');\n inputs.forEach(input => {\n input.addEventListener('input', function() {\n if (this.value < 0) this.value = 0;\n });\n });\n});\n\n---end---\n\nThis website features:\n\n1. Clean, modern design with smooth animations\n2. Responsive layout that works on all devices\n3. Accessible form controls with proper labels\n4. Real-time calculations with randomized variance\n5. Error handling and input validation\n6. Beautiful card-based UI with hover effects\n7. Gradient text effects\n8. Grid-based statistics display\n9. Smooth transitions and animations\n10. Professional typography and spacing\n\nThe domain name \"qtime\" is short, memorable and clearly represents the queue time calculation purpose of the website.\n\nThe interface is simple yet elegant, with a focus on usability and visual appeal. The color scheme uses modern blue tones with white space for clarity. The results are displayed in an easy-to-read card format with hover effects and animations."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 311,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2329
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2e48921
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# qtime.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..6f5c2b0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const calculateBtn = document.getElementById('calculate');
+ const resultCard = document.getElementById('resultCard');
+ const numbersAheadEl = document.getElementById('numbersAhead');
+ const avgTimeEl = document.getElementById('avgTime');
+ const estimatedTimeEl = document.getElementById('estimatedTime');
+
+ // Average time per person (in minutes)
+ const baseTimePerPerson = 3;
+ let timeVariance = 1;
+
+ calculateBtn.addEventListener('click', function() {
+ const yourNumber = parseInt(document.getElementById('yourNumber').value);
+ const currentNumber = parseInt(document.getElementById('currentNumber').value);
+
+ if (isNaN(yourNumber) || isNaN(currentNumber)) {
+ alert('Please enter valid numbers');
+ return;
+ }
+
+ if (yourNumber < currentNumber) {
+ alert('Your number cannot be less than the current number');
+ return;
+ }
+
+ const numbersAhead = yourNumber - currentNumber;
+ const avgTimePerPerson = baseTimePerPerson + (Math.random() * timeVariance);
+ const totalWaitTime = numbersAhead * avgTimePerPerson;
+
+ const estimatedTime = new Date();
+ estimatedTime.setMinutes(estimatedTime.getMinutes() + totalWaitTime);
+
+ // Update UI
+ resultCard.classList.remove('hidden');
+ numbersAheadEl.textContent = numbersAhead;
+ avgTimeEl.textContent = `${avgTimePerPerson.toFixed(1)} mins`;
+ estimatedTimeEl.textContent = formatTime(estimatedTime);
+
+ // Animate the card
+ resultCard.style.animation = 'fadeIn 0.5s ease-out';
+ });
+
+ function formatTime(date) {
+ return date.toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ }
+
+ // Add input validation
+ const inputs = document.querySelectorAll('input[type="number"]');
+ inputs.forEach(input => {
+ input.addEventListener('input', function() {
+ if (this.value < 0) this.value = 0;
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0d78f4a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,151 @@
+:root {
+ --primary-color: #2563eb;
+ --secondary-color: #1d4ed8;
+ --background-color: #f8fafc;
+ --card-background: #ffffff;
+ --text-color: #1e293b;
+ --border-radius: 12px;
+ --spacing: 1rem;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+.container {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 2rem var(--spacing);
+}
+
+h1 {
+ text-align: center;
+ color: var(--primary-color);
+ margin-bottom: 2rem;
+ font-size: 2.5rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.input-section {
+ background: var(--card-background);
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ margin-bottom: 2rem;
+}
+
+.input-group {
+ margin-bottom: 1.5rem;
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+input {
+ width: 100%;
+ padding: 0.75rem;
+ border: 2px solid #e2e8f0;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+}
+
+input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.primary-button {
+ width: 100%;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.primary-button:hover {
+ background: var(--secondary-color);
+}
+
+.result-card {
+ background: var(--card-background);
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.result-card:hover {
+ transform: translateY(-2px);
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+ margin-top: 1.5rem;
+}
+
+.stat-item {
+ text-align: center;
+ padding: 1rem;
+ background: var(--background-color);
+ border-radius: var(--border-radius);
+}
+
+.stat-label {
+ display: block;
+ font-size: 0.875rem;
+ color: #64748b;
+ margin-bottom: 0.5rem;
+}
+
+.stat-value {
+ display: block;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--primary-color);
+}
+
+.hidden {
+ display: none;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ color: #64748b;
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 1rem;
+ }
+
+ .stats-grid {
+ grid-template-columns: 1fr;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+}