commit a9c3f599289b5b682439462b4a6f12d78ffed3a5
Author: ffff:105.158.88.190 <ffff:105.158.88.190@hub.scroll.pub>
Date: 2024-12-27 18:38:43 +0000
Subject: updated script.js
diff --git a/script.js b/script.js
index 4c8f823..886677a 100644
--- a/script.js
+++ b/script.js
@@ -1,26 +1,27 @@
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
const trackers = {};
const motivationalQuotes = [
"Every day is a new beginning.",
"Progress is progress, no matter how small.",
"You are stronger than you think.",
"One day at a time.",
- "Your future self will thank you."
+ "Your future self will thank you.",
+ "You Stop Now You Fucking Looser.",
];
// Initialize trackers from localStorage
- document.querySelectorAll('.addiction-card').forEach(card => {
- const type = card.querySelector('.start-btn').dataset.type;
+ document.querySelectorAll(".addiction-card").forEach((card) => {
+ const type = card.querySelector(".start-btn").dataset.type;
trackers[type] = {
startDate: localStorage.getItem(`${type}_start`),
- counter: card.querySelector('.counter')
+ counter: card.querySelector(".counter"),
};
updateCounter(type);
});
// Start button handlers
- document.querySelectorAll('.start-btn').forEach(btn => {
- btn.addEventListener('click', () => {
+ document.querySelectorAll(".start-btn").forEach((btn) => {
+ btn.addEventListener("click", () => {
const type = btn.dataset.type;
if (!trackers[type].startDate) {
trackers[type].startDate = new Date().toISOString();
@@ -31,8 +32,8 @@ document.addEventListener('DOMContentLoaded', () => {
});
// Reset button handlers
- document.querySelectorAll('.reset-btn').forEach(btn => {
- btn.addEventListener('click', () => {
+ document.querySelectorAll(".reset-btn").forEach((btn) => {
+ btn.addEventListener("click", () => {
const type = btn.dataset.type;
trackers[type].startDate = null;
localStorage.removeItem(`${type}_start`);
@@ -41,11 +42,12 @@ document.addEventListener('DOMContentLoaded', () => {
});
// Motivation button handler
- const motivationBtn = document.querySelector('.motivation-btn');
- const motivationText = document.querySelector('.motivation-text');
-
- motivationBtn.addEventListener('click', () => {
- const randomQuote = motivationalQuotes[Math.floor(Math.random() * motivationalQuotes.length)];
+ const motivationBtn = document.querySelector(".motivation-btn");
+ const motivationText = document.querySelector(".motivation-text");
+
+ motivationBtn.addEventListener("click", () => {
+ const randomQuote =
+ motivationalQuotes[Math.floor(Math.random() * motivationalQuotes.length)];
motivationText.textContent = randomQuote;
motivationText.style.opacity = 0;
setTimeout(() => {
@@ -56,11 +58,13 @@ document.addEventListener('DOMContentLoaded', () => {
function updateCounter(type) {
const startDate = trackers[type].startDate;
if (!startDate) {
- trackers[type].counter.textContent = '0 days clean';
+ trackers[type].counter.textContent = "0 days clean";
return;
}
- const days = Math.floor((new Date() - new Date(startDate)) / (1000 * 60 * 60 * 24));
+ const days = Math.floor(
+ (new Date() - new Date(startDate)) / (1000 * 60 * 60 * 24),
+ );
trackers[type].counter.textContent = `${days} days clean`;
}
commit 68e455a9f61f3c230435c0fa44f405a4bc732c08
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 18:35:56 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..9d1ab05
--- /dev/null
+++ b/body.html
@@ -0,0 +1,64 @@
+<header>
+ <nav>
+ <div class="logo">QuitWise</div>
+ <div class="menu">
+ <a href="#home">Home</a>
+ <a href="#tracker">Tracker</a>
+ <a href="#resources">Resources</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <h1>Take Control of Your Life</h1>
+ <p>Every journey begins with a single step. Choose your path to freedom.</p>
+ </section>
+
+ <section id="tracker" class="addiction-tracker">
+ <h2>Track Your Progress</h2>
+ <div class="addiction-grid">
+ <div class="addiction-card">
+ <h3>Smoking</h3>
+ <div class="counter">0 days clean</div>
+ <div class="button-group">
+ <button class="start-btn" data-type="smoking">Start Journey</button>
+ <button class="reset-btn" data-type="smoking">Reset</button>
+ </div>
+ </div>
+
+ <div class="addiction-card">
+ <h3>Alcohol</h3>
+ <div class="counter">0 days clean</div>
+ <div class="button-group">
+ <button class="start-btn" data-type="alcohol">Start Journey</button>
+ <button class="reset-btn" data-type="alcohol">Reset</button>
+ </div>
+ </div>
+
+ <div class="addiction-card">
+ <h3>Social Media</h3>
+ <div class="counter">0 days clean</div>
+ <div class="button-group">
+ <button class="start-btn" data-type="social">Start Journey</button>
+ <button class="reset-btn" data-type="social">Reset</button>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="resources" class="resources">
+ <h2>Support Resources</h2>
+ <div class="resource-grid">
+ <article class="resource-card">
+ <h3>Daily Motivation</h3>
+ <button class="motivation-btn">Get Inspired</button>
+ <p class="motivation-text"></p>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>QuitWise - Supporting Your Journey to Freedom</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..76fa268
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://quitwise.scroll.pub
+metaTags
+editButton /edit.html
+title QuitWise - Your Journey to Freedom from Addiction
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..2760a9f
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01HNUXjZ4m6JpjVeyJgPmtrG",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create an addiction recovery support website with interactive buttons.\n\n---domain---\nquitwise.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://quitwise.scroll.pub\nmetaTags\neditButton /edit.html\ntitle QuitWise - Your Journey to Freedom from Addiction\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">QuitWise</div>\n <div class=\"menu\">\n <a href=\"#home\">Home</a>\n <a href=\"#tracker\">Tracker</a>\n <a href=\"#resources\">Resources</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <h1>Take Control of Your Life</h1>\n <p>Every journey begins with a single step. Choose your path to freedom.</p>\n </section>\n\n <section id=\"tracker\" class=\"addiction-tracker\">\n <h2>Track Your Progress</h2>\n <div class=\"addiction-grid\">\n <div class=\"addiction-card\">\n <h3>Smoking</h3>\n <div class=\"counter\">0 days clean</div>\n <div class=\"button-group\">\n <button class=\"start-btn\" data-type=\"smoking\">Start Journey</button>\n <button class=\"reset-btn\" data-type=\"smoking\">Reset</button>\n </div>\n </div>\n\n <div class=\"addiction-card\">\n <h3>Alcohol</h3>\n <div class=\"counter\">0 days clean</div>\n <div class=\"button-group\">\n <button class=\"start-btn\" data-type=\"alcohol\">Start Journey</button>\n <button class=\"reset-btn\" data-type=\"alcohol\">Reset</button>\n </div>\n </div>\n\n <div class=\"addiction-card\">\n <h3>Social Media</h3>\n <div class=\"counter\">0 days clean</div>\n <div class=\"button-group\">\n <button class=\"start-btn\" data-type=\"social\">Start Journey</button>\n <button class=\"reset-btn\" data-type=\"social\">Reset</button>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"resources\" class=\"resources\">\n <h2>Support Resources</h2>\n <div class=\"resource-grid\">\n <article class=\"resource-card\">\n <h3>Daily Motivation</h3>\n <button class=\"motivation-btn\">Get Inspired</button>\n <p class=\"motivation-text\"></p>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <p>QuitWise - Supporting Your Journey to Freedom</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6bc2;\n --secondary: #1d4e8f;\n --accent: #ff6b6b;\n --background: #f5f7fa;\n --text: #333;\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);\n background: var(--background);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.menu a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s;\n}\n\n.menu a:hover {\n color: var(--primary);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.addiction-tracker {\n padding: 4rem 5%;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 2rem;\n color: var(--primary);\n}\n\n.addiction-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.addiction-card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n text-align: center;\n transition: transform 0.3s;\n}\n\n.addiction-card:hover {\n transform: translateY(-5px);\n}\n\n.counter {\n font-size: 1.5rem;\n margin: 1rem 0;\n color: var(--primary);\n}\n\n.button-group {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\nbutton {\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n transition: transform 0.2s, background 0.3s;\n}\n\n.start-btn {\n background: var(--primary);\n color: white;\n}\n\n.reset-btn {\n background: var(--accent);\n color: white;\n}\n\nbutton:hover {\n transform: scale(1.05);\n}\n\n.resources {\n padding: 4rem 5%;\n background: white;\n}\n\n.resource-card {\n background: var(--background);\n padding: 2rem;\n border-radius: 15px;\n text-align: center;\n}\n\n.motivation-btn {\n background: var(--secondary);\n color: white;\n margin: 1rem 0;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary);\n color: white;\n}\n\n@media (max-width: 768px) {\n .menu {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n \n .addiction-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const trackers = {};\n const motivationalQuotes = [\n \"Every day is a new beginning.\",\n \"Progress is progress, no matter how small.\",\n \"You are stronger than you think.\",\n \"One day at a time.\",\n \"Your future self will thank you.\"\n ];\n\n // Initialize trackers from localStorage\n document.querySelectorAll('.addiction-card').forEach(card => {\n const type = card.querySelector('.start-btn').dataset.type;\n trackers[type] = {\n startDate: localStorage.getItem(`${type}_start`),\n counter: card.querySelector('.counter')\n };\n updateCounter(type);\n });\n\n // Start button handlers\n document.querySelectorAll('.start-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const type = btn.dataset.type;\n if (!trackers[type].startDate) {\n trackers[type].startDate = new Date().toISOString();\n localStorage.setItem(`${type}_start`, trackers[type].startDate);\n updateCounter(type);\n }\n });\n });\n\n // Reset button handlers\n document.querySelectorAll('.reset-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const type = btn.dataset.type;\n trackers[type].startDate = null;\n localStorage.removeItem(`${type}_start`);\n updateCounter(type);\n });\n });\n\n // Motivation button handler\n const motivationBtn = document.querySelector('.motivation-btn');\n const motivationText = document.querySelector('.motivation-text');\n \n motivationBtn.addEventListener('click', () => {\n const randomQuote = motivationalQuotes[Math.floor(Math.random() * motivationalQuotes.length)];\n motivationText.textContent = randomQuote;\n motivationText.style.opacity = 0;\n setTimeout(() => {\n motivationText.style.opacity = 1;\n }, 100);\n });\n\n function updateCounter(type) {\n const startDate = trackers[type].startDate;\n if (!startDate) {\n trackers[type].counter.textContent = '0 days clean';\n return;\n }\n\n const days = Math.floor((new Date() - new Date(startDate)) / (1000 * 60 * 60 * 24));\n trackers[type].counter.textContent = `${days} days clean`;\n }\n\n // Update counters every minute\n setInterval(() => {\n Object.keys(trackers).forEach(updateCounter);\n }, 60000);\n});\n\n---end---\n\nThis website features:\n1. Clean, modern design with smooth animations\n2. Progress tracking for different addiction types\n3. Local storage to persist progress\n4. Motivational quotes system\n5. Responsive design for all devices\n6. Accessibility-friendly elements\n7. Semantic HTML structure\n8. Beautiful gradient backgrounds and card designs\n9. Interactive buttons with hover effects\n10. Real-time counter updates\n\nThe domain name \"quitwise\" combines \"quit\" with \"wise,\" suggesting wisdom in the journey of breaking free from addictions. It's memorable, relevant, and positive."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 282,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2518
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..32b6933
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# quitwise.scroll.pub
+Website generated by Claude from prompt: create a website that allows anybody to quit their addiction using buttons
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4c8f823
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const trackers = {};
+ const motivationalQuotes = [
+ "Every day is a new beginning.",
+ "Progress is progress, no matter how small.",
+ "You are stronger than you think.",
+ "One day at a time.",
+ "Your future self will thank you."
+ ];
+
+ // Initialize trackers from localStorage
+ document.querySelectorAll('.addiction-card').forEach(card => {
+ const type = card.querySelector('.start-btn').dataset.type;
+ trackers[type] = {
+ startDate: localStorage.getItem(`${type}_start`),
+ counter: card.querySelector('.counter')
+ };
+ updateCounter(type);
+ });
+
+ // Start button handlers
+ document.querySelectorAll('.start-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const type = btn.dataset.type;
+ if (!trackers[type].startDate) {
+ trackers[type].startDate = new Date().toISOString();
+ localStorage.setItem(`${type}_start`, trackers[type].startDate);
+ updateCounter(type);
+ }
+ });
+ });
+
+ // Reset button handlers
+ document.querySelectorAll('.reset-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const type = btn.dataset.type;
+ trackers[type].startDate = null;
+ localStorage.removeItem(`${type}_start`);
+ updateCounter(type);
+ });
+ });
+
+ // Motivation button handler
+ const motivationBtn = document.querySelector('.motivation-btn');
+ const motivationText = document.querySelector('.motivation-text');
+
+ motivationBtn.addEventListener('click', () => {
+ const randomQuote = motivationalQuotes[Math.floor(Math.random() * motivationalQuotes.length)];
+ motivationText.textContent = randomQuote;
+ motivationText.style.opacity = 0;
+ setTimeout(() => {
+ motivationText.style.opacity = 1;
+ }, 100);
+ });
+
+ function updateCounter(type) {
+ const startDate = trackers[type].startDate;
+ if (!startDate) {
+ trackers[type].counter.textContent = '0 days clean';
+ return;
+ }
+
+ const days = Math.floor((new Date() - new Date(startDate)) / (1000 * 60 * 60 * 24));
+ trackers[type].counter.textContent = `${days} days clean`;
+ }
+
+ // Update counters every minute
+ setInterval(() => {
+ Object.keys(trackers).forEach(updateCounter);
+ }, 60000);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6950d98
--- /dev/null
+++ b/style.css
@@ -0,0 +1,162 @@
+:root {
+ --primary: #2a6bc2;
+ --secondary: #1d4e8f;
+ --accent: #ff6b6b;
+ --background: #f5f7fa;
+ --text: #333;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary);
+}
+
+.menu a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text);
+ transition: color 0.3s;
+}
+
+.menu a:hover {
+ color: var(--primary);
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.addiction-tracker {
+ padding: 4rem 5%;
+}
+
+h2 {
+ text-align: center;
+ margin-bottom: 2rem;
+ color: var(--primary);
+}
+
+.addiction-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.addiction-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ text-align: center;
+ transition: transform 0.3s;
+}
+
+.addiction-card:hover {
+ transform: translateY(-5px);
+}
+
+.counter {
+ font-size: 1.5rem;
+ margin: 1rem 0;
+ color: var(--primary);
+}
+
+.button-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+button {
+ padding: 0.8rem 1.5rem;
+ border: none;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: transform 0.2s, background 0.3s;
+}
+
+.start-btn {
+ background: var(--primary);
+ color: white;
+}
+
+.reset-btn {
+ background: var(--accent);
+ color: white;
+}
+
+button:hover {
+ transform: scale(1.05);
+}
+
+.resources {
+ padding: 4rem 5%;
+ background: white;
+}
+
+.resource-card {
+ background: var(--background);
+ padding: 2rem;
+ border-radius: 15px;
+ text-align: center;
+}
+
+.motivation-btn {
+ background: var(--secondary);
+ color: white;
+ margin: 1rem 0;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .menu {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .addiction-grid {
+ grid-template-columns: 1fr;
+ }
+}