body.html
Changed around line 7
-
+
+ type="text"
+ id="goalInput"
+ required
+ placeholder="Enter your goal here"
+ />
-
+
-
+
-
+
-
+
+ type="email"
+ id="emailInput"
+ required
+ placeholder="your@email.com"
+ />
-
+
Changed around line 40
-
Now stop procrastinating and go fucking do it!
+
Now stop procrastinating and do it!
body.html
Changed around line 1
+
+
Go Fucking Do It
+
Set a goal. Set a deadline. Get it done.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Your Active Goals
+
+
+
+
+
+
Now stop procrastinating and go fucking do it!
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://justdoit.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Go Fucking Do It - Goal Achievement Tracker
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01XMjc58VxdTgNKQTJW6qQh4",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create this motivational goal-tracking website.\n\n---domain---\njustdoit.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://justdoit.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Go Fucking Do It - Goal Achievement Tracker\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n\n \n\n \n \n \n\n\n\n---style.css---\n:root {\n --primary-color: #ff4757;\n --secondary-color: #2f3542;\n --background-color: #f1f2f6;\n --text-color: #2f3542;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n min-height: 100vh;\n}\n\nheader {\n background: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n box-shadow: var(--shadow);\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 0.5rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\nmain {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.goal-form {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n margin-bottom: 2rem;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: bold;\n color: var(--secondary-color);\n}\n\ninput {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #ddd;\n border-radius: 5px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n\ninput:focus {\n border-color: var(--primary-color);\n outline: none;\n}\n\n.submit-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n font-size: 1.1rem;\n border-radius: 5px;\n cursor: pointer;\n width: 100%;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.submit-btn:hover {\n background: #ff2741;\n transform: translateY(-2px);\n}\n\n.goals-list {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n}\n\n.goals-list h2 {\n margin-bottom: 1rem;\n color: var(--secondary-color);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--secondary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .goal-form {\n padding: 1rem;\n }\n \n .submit-btn {\n padding: 0.8rem 1.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const goalForm = document.getElementById('goalForm');\n const activeGoals = document.getElementById('activeGoals');\n\n // Load existing goals from localStorage\n let goals = JSON.parse(localStorage.getItem('goals')) || [];\n \n function saveGoal(goal) {\n goals.push(goal);\n localStorage.setItem('goals', JSON.stringify(goals));\n displayGoals();\n }\n\n function displayGoals() {\n activeGoals.innerHTML = '';\n goals.forEach((goal, index) => {\n const goalElement = document.createElement('div');\n goalElement.classList.add('goal-item');\n \n const deadline = new Date(goal.deadline);\n const timeLeft = deadline - new Date();\n \n goalElement.innerHTML = `\n
Go Fucking Do It
\nSet a goal. Set a deadline. Get it done.
\n${goal.text}
\nDeadline: ${deadline.toLocaleDateString()} ${deadline.toLocaleTimeString()}
\nTime left: ${Math.ceil(timeLeft / (1000 * 60 * 60 * 24))} days
\n `;\n \n activeGoals.appendChild(goalElement);\n });\n }\n\n function checkDeadlines() {\n const now = new Date();\n goals = goals.filter(goal => {\n const deadline = new Date(goal.deadline);\n if (deadline <= now) {\n // In a real implementation, this would send an email using a backend service\n console.log(`Sending email for goal: ${goal.text} to ${goal.email}`);\n return false;\n }\n return true;\n });\n localStorage.setItem('goals', JSON.stringify(goals));\n displayGoals();\n }\n\n goalForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const goal = {\n text: document.getElementById('goalInput').value,\n deadline: document.getElementById('deadlineInput').value,\n email: document.getElementById('emailInput').value,\n created: new Date()\n };\n \n saveGoal(goal);\n goalForm.reset();\n });\n\n // Check deadlines every minute\n setInterval(checkDeadlines, 60000);\n \n // Initial display\n displayGoals();\n});\n\n---end---\n\nThis implementation includes:\n\n1. A clean, modern design with a bold color scheme\n2. Responsive layout that works on all devices\n3. Local storage to persist goals\n4. Form validation\n5. Deadline tracking\n6. Accessibility features\n7. Clean semantic HTML\n8. Modern CSS with variables and transitions\n9. JavaScript for handling goals and checking deadlines\n\nNote: The email sending functionality would require a backend service in a real implementation. This frontend-only version just logs to the console when a deadline is reached.\n\nThe design is bold and motivational, matching the \"Go Fucking Do It\" theme while remaining professional. The color scheme and typography create visual impact while maintaining readability and usability."+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 311,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2079
+ }
+ }
readme.scroll
Changed around line 1
+ # justdoit.scroll.pub
+ Website generated by Claude from prompt: I want to build a website "go fucking do it", it will ask you goal with a dealine, if the deadline meets, automately send you a email to ask whether you finish your goal
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const goalForm = document.getElementById('goalForm');
+ const activeGoals = document.getElementById('activeGoals');
+
+ // Load existing goals from localStorage
+ let goals = JSON.parse(localStorage.getItem('goals')) || [];
+
+ function saveGoal(goal) {
+ goals.push(goal);
+ localStorage.setItem('goals', JSON.stringify(goals));
+ displayGoals();
+ }
+
+ function displayGoals() {
+ activeGoals.innerHTML = '';
+ goals.forEach((goal, index) => {
+ const goalElement = document.createElement('div');
+ goalElement.classList.add('goal-item');
+
+ const deadline = new Date(goal.deadline);
+ const timeLeft = deadline - new Date();
+
+ goalElement.innerHTML = `
+
${goal.text}
+
Deadline: ${deadline.toLocaleDateString()} ${deadline.toLocaleTimeString()}
+
Time left: ${Math.ceil(timeLeft / (1000 * 60 * 60 * 24))} days
+ `;
+
+ activeGoals.appendChild(goalElement);
+ });
+ }
+
+ function checkDeadlines() {
+ const now = new Date();
+ goals = goals.filter(goal => {
+ const deadline = new Date(goal.deadline);
+ if (deadline <= now) {
+ // In a real implementation, this would send an email using a backend service
+ console.log(`Sending email for goal: ${goal.text} to ${goal.email}`);
+ return false;
+ }
+ return true;
+ });
+ localStorage.setItem('goals', JSON.stringify(goals));
+ displayGoals();
+ }
+
+ goalForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const goal = {
+ text: document.getElementById('goalInput').value,
+ deadline: document.getElementById('deadlineInput').value,
+ email: document.getElementById('emailInput').value,
+ created: new Date()
+ };
+
+ saveGoal(goal);
+ goalForm.reset();
+ });
+
+ // Check deadlines every minute
+ setInterval(checkDeadlines, 60000);
+
+ // Initial display
+ displayGoals();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #ff4757;
+ --secondary-color: #2f3542;
+ --background-color: #f1f2f6;
+ --text-color: #2f3542;
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background-color);
+ min-height: 100vh;
+ }
+
+ header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ box-shadow: var(--shadow);
+ }
+
+ h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ }
+
+ main {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .goal-form {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+ margin-bottom: 2rem;
+ }
+
+ .form-group {
+ margin-bottom: 1.5rem;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: bold;
+ color: var(--secondary-color);
+ }
+
+ input {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid #ddd;
+ border-radius: 5px;
+ font-size: 1rem;
+ transition: border-color 0.3s ease;
+ }
+
+ input:focus {
+ border-color: var(--primary-color);
+ outline: none;
+ }
+
+ .submit-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ border-radius: 5px;
+ cursor: pointer;
+ width: 100%;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ transition: transform 0.2s ease, background-color 0.2s ease;
+ }
+
+ .submit-btn:hover {
+ background: #ff2741;
+ transform: translateY(-2px);
+ }
+
+ .goals-list {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+ }
+
+ .goals-list h2 {
+ margin-bottom: 1rem;
+ color: var(--secondary-color);
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--secondary-color);
+ color: white;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 600px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .goal-form {
+ padding: 1rem;
+ }
+
+ .submit-btn {
+ padding: 0.8rem 1.5rem;
+ }
+ }