Changes to pomofocus.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+     PomoDoro Timer
+ 
+ 
+ 
+     
+         25:00
+         
+             
+             
+         
+     
+ 
+     
+         
+             Work Duration (minutes):
+             
+         
+         
+             Break Duration (minutes):
+             
+         
+     
+ 
+     
+         Work Time
+     
+ 
+ 
+ 
+     Built with focus in mind
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://pomofocus.scroll.pub
+ metaTags
+ editButton /edit.html
+ title PomoDoro Timer - Stay Focused & Productive
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n    PomoDoro Timer\n\n\n\n    \n        25:00
\n        \n            \n            \n        
\n    
\n\n    \n        \n            Work Duration (minutes):\n            \n        
\n        \n            Break Duration (minutes):\n            \n        
\n    
\n\n    \n        Work Time\n    
\n\n\n\n    Built with focus in mind
\n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # 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

style.css

Changed around line 1
+ :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;
+     }
+ }