commit b43ea1d55b4f8bd04ede3309f9eb29d3b18f3ad0
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 01:28:02 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..40e8a24
--- /dev/null
+++ b/body.html
@@ -0,0 +1,32 @@
+<header>
+ <h1>PomoDoro Timer</h1>
+</header>
+
+<main>
+ <div class="timer-container">
+ <div class="timer" id="timer">25:00</div>
+ <div class="controls">
+ <button id="startBtn" class="btn">Start</button>
+ <button id="resetBtn" class="btn">Reset</button>
+ </div>
+ </div>
+
+ <div class="settings">
+ <div class="setting-group">
+ <label for="workTime">Work Duration (minutes):</label>
+ <input type="number" id="workTime" min="1" max="60" value="25">
+ </div>
+ <div class="setting-group">
+ <label for="breakTime">Break Duration (minutes):</label>
+ <input type="number" id="breakTime" min="1" max="60" value="5">
+ </div>
+ </div>
+
+ <div class="mode-indicator">
+ <span id="modeText">Work Time</span>
+ </div>
+</main>
+
+<footer>
+ <p>Built with focus in mind</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..55bb804
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://pomofocus.scroll.pub
+metaTags
+editButton /edit.html
+title PomoDoro Timer - Stay Focused & Productive
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d251e4d
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01PjErtdTy7KPPWym7udfW9L",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a Pomodoro timer website with the requested features.\n\n---domain---\npomofocus.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://pomofocus.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PomoDoro Timer - Stay Focused & Productive\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>PomoDoro Timer</h1>\n</header>\n\n<main>\n <div class=\"timer-container\">\n <div class=\"timer\" id=\"timer\">25:00</div>\n <div class=\"controls\">\n <button id=\"startBtn\" class=\"btn\">Start</button>\n <button id=\"resetBtn\" class=\"btn\">Reset</button>\n </div>\n </div>\n\n <div class=\"settings\">\n <div class=\"setting-group\">\n <label for=\"workTime\">Work Duration (minutes):</label>\n <input type=\"number\" id=\"workTime\" min=\"1\" max=\"60\" value=\"25\">\n </div>\n <div class=\"setting-group\">\n <label for=\"breakTime\">Break Duration (minutes):</label>\n <input type=\"number\" id=\"breakTime\" min=\"1\" max=\"60\" value=\"5\">\n </div>\n </div>\n\n <div class=\"mode-indicator\">\n <span id=\"modeText\">Work Time</span>\n </div>\n</main>\n\n<footer>\n <p>Built with focus in mind</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #ff6b6b;\n --secondary-color: #4ecdc4;\n --bg-color: #f7f7f7;\n --text-color: #2d3436;\n --transition: all 0.3s ease;\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-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nmain {\n flex: 1;\n max-width: 600px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.timer-container {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.timer {\n font-size: 6rem;\n font-weight: bold;\n color: var(--primary-color);\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n margin: 2rem 0;\n transition: var(--transition);\n}\n\n.timer.flash {\n animation: flash 1s infinite;\n}\n\n@keyframes flash {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.controls {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n.btn {\n padding: 0.8rem 2rem;\n font-size: 1.1rem;\n border: none;\n border-radius: 25px;\n background: var(--primary-color);\n color: white;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n}\n\n.settings {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n}\n\n.setting-group {\n margin: 1rem 0;\n}\n\n.setting-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\n.setting-group input {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #eee;\n border-radius: 8px;\n font-size: 1rem;\n}\n\n.mode-indicator {\n text-align: center;\n margin-top: 2rem;\n font-size: 1.2rem;\n font-weight: 500;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--text-color);\n color: white;\n}\n\n@media (max-width: 768px) {\n .timer {\n font-size: 4rem;\n }\n \n main {\n padding: 1rem;\n }\n}\n\n---script.js---\nclass PomodoroTimer {\n constructor() {\n this.timeLeft = 25 * 60;\n this.isRunning = false;\n this.isWorkTime = true;\n this.timer = null;\n this.audio = new Audio('data:audio/wav;base64,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"
+ }
+ ],
+ "stop_reason": "max_tokens",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 323,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 4000
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1b72e3a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# pomofocus.scroll.pub
+Website generated by Claude from prompt: create a website with a pomadoro timer. you should be able to set the interval time for work, and the interval time for rest. When the timer runs out, it should flash, and it should make an alarm noise that can be heard
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3746489
--- /dev/null
+++ b/style.css
@@ -0,0 +1,132 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --bg-color: #f7f7f7;
+ --text-color: #2d3436;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+main {
+ flex: 1;
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 2rem;
+}
+
+.timer-container {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.timer {
+ font-size: 6rem;
+ font-weight: bold;
+ color: var(--primary-color);
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+ margin: 2rem 0;
+ transition: var(--transition);
+}
+
+.timer.flash {
+ animation: flash 1s infinite;
+}
+
+@keyframes flash {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+
+.controls {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.btn {
+ padding: 0.8rem 2rem;
+ font-size: 1.1rem;
+ border: none;
+ border-radius: 25px;
+ background: var(--primary-color);
+ color: white;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.settings {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.setting-group {
+ margin: 1rem 0;
+}
+
+.setting-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+.setting-group input {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid #eee;
+ border-radius: 8px;
+ font-size: 1rem;
+}
+
+.mode-indicator {
+ text-align: center;
+ margin-top: 2rem;
+ font-size: 1.2rem;
+ font-weight: 500;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--text-color);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .timer {
+ font-size: 4rem;
+ }
+
+ main {
+ padding: 1rem;
+ }
+}