commit d4778343cb0670004d83a5b393171abd4ab714fc
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 21:50:04 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..a2a51ce
--- /dev/null
+++ b/body.html
@@ -0,0 +1,77 @@
+<header>
+ <nav>
+ <div class="logo">SEO vs PPC</div>
+ <div class="nav-links">
+ <a href="#tool">Decision Tool</a>
+ <a href="#comparison">Comparison</a>
+ <a href="#about">About</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Find Your Perfect Marketing Strategy</h1>
+ <p>Answer a few questions to discover whether SEO or PPC is better for your website</p>
+ <a href="#tool" class="cta-button">Get Started</a>
+ </section>
+
+ <section id="tool" class="decision-tool">
+ <h2>Decision Tool</h2>
+ <div class="quiz-container">
+ <div class="progress-bar">
+ <div class="progress"></div>
+ </div>
+ <div class="question-container">
+ <div class="question" data-question="1">
+ <h3>What's your primary goal?</h3>
+ <div class="options">
+ <button data-score="seo">Long-term organic growth</button>
+ <button data-score="ppc">Immediate results</button>
+ <button data-score="neutral">Both</button>
+ </div>
+ </div>
+ </div>
+ <div class="result-container hidden">
+ <h3>Your Recommended Strategy:</h3>
+ <div class="result"></div>
+ <button class="restart-btn">Start Over</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="comparison" class="comparison">
+ <h2>SEO vs PPC Comparison</h2>
+ <div class="comparison-grid">
+ <div class="comparison-card seo">
+ <h3>SEO</h3>
+ <ul>
+ <li>Long-term results</li>
+ <li>Lower cost over time</li>
+ <li>Builds authority</li>
+ <li>Organic traffic</li>
+ </ul>
+ </div>
+ <div class="comparison-card ppc">
+ <h3>PPC</h3>
+ <ul>
+ <li>Immediate results</li>
+ <li>Precise targeting</li>
+ <li>Controlled budget</li>
+ <li>Measurable ROI</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-links">
+ <a href="#tool">Decision Tool</a>
+ <a href="#comparison">Comparison</a>
+ <a href="#about">About</a>
+ </div>
+ <p>Created by Digital Marketing Experts</p>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..08a76a1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://seovsppc.scroll.pub
+metaTags
+ description "Interactive tool to help you decide whether SEO or PPC is better for your website marketing strategy"
+ keywords "SEO vs PPC, digital marketing strategy, marketing decision tool, SEO or PPC"
+editButton /edit.html
+title SEO vs PPC Decision Tool
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..57567f4
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_016Yf8TyAHnersYDSW6jwPii",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website to help users decide between SEO and PPC strategies with an interactive assessment tool.\n\n---domain---\nseovsppc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://seovsppc.scroll.pub\nmetaTags\n description \"Interactive tool to help you decide whether SEO or PPC is better for your website marketing strategy\"\n keywords \"SEO vs PPC, digital marketing strategy, marketing decision tool, SEO or PPC\"\neditButton /edit.html\ntitle SEO vs PPC Decision Tool\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">SEO vs PPC</div>\n <div class=\"nav-links\">\n <a href=\"#tool\">Decision Tool</a>\n <a href=\"#comparison\">Comparison</a>\n <a href=\"#about\">About</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Find Your Perfect Marketing Strategy</h1>\n <p>Answer a few questions to discover whether SEO or PPC is better for your website</p>\n <a href=\"#tool\" class=\"cta-button\">Get Started</a>\n </section>\n\n <section id=\"tool\" class=\"decision-tool\">\n <h2>Decision Tool</h2>\n <div class=\"quiz-container\">\n <div class=\"progress-bar\">\n <div class=\"progress\"></div>\n </div>\n <div class=\"question-container\">\n <div class=\"question\" data-question=\"1\">\n <h3>What's your primary goal?</h3>\n <div class=\"options\">\n <button data-score=\"seo\">Long-term organic growth</button>\n <button data-score=\"ppc\">Immediate results</button>\n <button data-score=\"neutral\">Both</button>\n </div>\n </div>\n </div>\n <div class=\"result-container hidden\">\n <h3>Your Recommended Strategy:</h3>\n <div class=\"result\"></div>\n <button class=\"restart-btn\">Start Over</button>\n </div>\n </div>\n </section>\n\n <section id=\"comparison\" class=\"comparison\">\n <h2>SEO vs PPC Comparison</h2>\n <div class=\"comparison-grid\">\n <div class=\"comparison-card seo\">\n <h3>SEO</h3>\n <ul>\n <li>Long-term results</li>\n <li>Lower cost over time</li>\n <li>Builds authority</li>\n <li>Organic traffic</li>\n </ul>\n </div>\n <div class=\"comparison-card ppc\">\n <h3>PPC</h3>\n <ul>\n <li>Immediate results</li>\n <li>Precise targeting</li>\n <li>Controlled budget</li>\n <li>Measurable ROI</li>\n </ul>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-links\">\n <a href=\"#tool\">Decision Tool</a>\n <a href=\"#comparison\">Comparison</a>\n <a href=\"#about\">About</a>\n </div>\n <p>Created by Digital Marketing Experts</p>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6cff;\n --secondary: #ff6b6b;\n --background: #f8f9fa;\n --text: #2d3436;\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);\n background: var(--background);\n}\n\nheader {\n position: fixed;\n width: 100%;\n top: 0;\n background: white;\n box-shadow: var(--shadow);\n z-index: 1000;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n background: linear-gradient(45deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\nmain {\n margin-top: 4rem;\n}\n\n.hero {\n text-align: center;\n padding: 6rem 2rem;\n background: linear-gradient(135deg, #f6f8ff 0%, #f0f2ff 100%);\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n margin-top: 2rem;\n background: var(--primary);\n color: white;\n text-decoration: none;\n border-radius: 50px;\n transition: transform 0.3s ease;\n box-shadow: var(--shadow);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n}\n\n.decision-tool {\n max-width: 800px;\n margin: 4rem auto;\n padding: 2rem;\n}\n\n.quiz-container {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n}\n\n.progress-bar {\n height: 4px;\n background: #eee;\n border-radius: 2px;\n margin-bottom: 2rem;\n}\n\n.progress {\n height: 100%;\n background: var(--primary);\n width: 0;\n transition: width 0.3s ease;\n}\n\n.question {\n text-align: center;\n}\n\n.options {\n display: grid;\n gap: 1rem;\n margin-top: 2rem;\n}\n\n.options button {\n padding: 1rem;\n border: none;\n background: #f8f9fa;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.options button:hover {\n background: var(--primary);\n color: white;\n}\n\n.comparison {\n background: white;\n padding: 4rem 2rem;\n}\n\n.comparison h2 {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.comparison-grid {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.comparison-card {\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--shadow);\n transition: transform 0.3s ease;\n}\n\n.comparison-card:hover {\n transform: translateY(-5px);\n}\n\n.comparison-card.seo {\n background: linear-gradient(135deg, #e0e7ff 0%, #f0f2ff 100%);\n}\n\n.comparison-card.ppc {\n background: linear-gradient(135deg, #ffe0e0 0%, #fff0f0 100%);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n background: white;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n \n .comparison-grid {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const questions = [\n {\n text: \"What's your primary goal?\",\n options: [\n { text: \"Long-term organic growth\", score: \"seo\" },\n { text: \"Immediate results\", score: \"ppc\" },\n { text: \"Both\", score: \"neutral\" }\n ]\n },\n {\n text: \"What's your monthly marketing budget?\",\n options: [\n { text: \"Less than $500\", score: \"seo\" },\n { text: \"More than $2000\", score: \"ppc\" },\n { text: \"$500-$2000\", score: \"neutral\" }\n ]\n },\n {\n text: \"How competitive is your industry?\",\n options: [\n { text: \"Very competitive\", score: \"ppc\" },\n { text: \"Moderately competitive\", score: \"neutral\" },\n { text: \"Not very competitive\", score: \"seo\" }\n ]\n }\n ];\n\n let currentQuestion = 0;\n let scores = { seo: 0, ppc: 0, neutral: 0 };\n\n const questionContainer = document.querySelector('.question-container');\n const progressBar = document.querySelector('.progress');\n const resultContainer = document.querySelector('.result-container');\n const resultDiv = document.querySelector('.result');\n const restartBtn = document.querySelector('.restart-btn');\n\n function showQuestion(index) {\n const question = questions[index];\n questionContainer.innerHTML = `\n <div class=\"question\" data-question=\"${index + 1}\">\n <h3>${question.text}</h3>\n <div class=\"options\">\n ${question.options.map(option => `\n <button data-score=\"${option.score}\">${option.text}</button>\n `).join('')}\n </div>\n </div>\n `;\n\n progressBar.style.width = `${((index + 1) / questions.length) * 100}%`;\n\n const optionButtons = questionContainer.querySelectorAll('button');\n optionButtons.forEach(button => {\n button.addEventListener('click', handleAnswer);\n });\n }\n\n function handleAnswer(e) {\n const score = e.target.dataset.score;\n scores[score]++;\n currentQuestion++;\n\n if (currentQuestion < questions.length) {\n showQuestion(currentQuestion);\n } else {\n showResult();\n }\n }\n\n function showResult() {\n questionContainer.classList.add('hidden');\n resultContainer.classList.remove('hidden');\n\n const recommendation = getRecommendation();\n resultDiv.innerHTML = `\n <h4>${recommendation.title}</h4>\n <p>${recommendation.description}</p>\n `;\n }\n\n function getRecommendation() {\n if (scores.seo > scores.ppc) {\n return {\n title: \"SEO is Your Best Choice!\",\n description: \"Based on your answers, focusing on SEO would be most beneficial for your website. This will help you build long-term organic traffic and sustainable growth.\"\n };\n } else if (scores.ppc > scores.seo) {\n return {\n title: \"PPC is Your Best Choice!\",\n description: \"Based on your answers, PPC would be most effective for your needs. This will help you achieve quick results and precise targeting.\"\n };\n } else {\n return {\n title: \"Consider a Hybrid Approach\",\n description: \"Based on your answers, a combination of both SEO and PPC would work best for your situation. This will give you both immediate results and long-term benefits.\"\n };\n }\n }\n\n restartBtn.addEventListener('click', () => {\n currentQuestion = 0;\n scores = { seo: 0, ppc: 0, neutral: 0 };\n resultContainer.classList.add('hidden');\n questionContainer.classList.remove('hidden');\n showQuestion(0);\n });\n\n showQuestion(0);\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 284,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3287
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..2d9467c
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# seovsppc.scroll.pub
+Website generated by Claude from prompt: website to decide whether seo or ppc is better for a website
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..87cc895
--- /dev/null
+++ b/script.js
@@ -0,0 +1,110 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const questions = [
+ {
+ text: "What's your primary goal?",
+ options: [
+ { text: "Long-term organic growth", score: "seo" },
+ { text: "Immediate results", score: "ppc" },
+ { text: "Both", score: "neutral" }
+ ]
+ },
+ {
+ text: "What's your monthly marketing budget?",
+ options: [
+ { text: "Less than $500", score: "seo" },
+ { text: "More than $2000", score: "ppc" },
+ { text: "$500-$2000", score: "neutral" }
+ ]
+ },
+ {
+ text: "How competitive is your industry?",
+ options: [
+ { text: "Very competitive", score: "ppc" },
+ { text: "Moderately competitive", score: "neutral" },
+ { text: "Not very competitive", score: "seo" }
+ ]
+ }
+ ];
+
+ let currentQuestion = 0;
+ let scores = { seo: 0, ppc: 0, neutral: 0 };
+
+ const questionContainer = document.querySelector('.question-container');
+ const progressBar = document.querySelector('.progress');
+ const resultContainer = document.querySelector('.result-container');
+ const resultDiv = document.querySelector('.result');
+ const restartBtn = document.querySelector('.restart-btn');
+
+ function showQuestion(index) {
+ const question = questions[index];
+ questionContainer.innerHTML = `
+ <div class="question" data-question="${index + 1}">
+ <h3>${question.text}</h3>
+ <div class="options">
+ ${question.options.map(option => `
+ <button data-score="${option.score}">${option.text}</button>
+ `).join('')}
+ </div>
+ </div>
+ `;
+
+ progressBar.style.width = `${((index + 1) / questions.length) * 100}%`;
+
+ const optionButtons = questionContainer.querySelectorAll('button');
+ optionButtons.forEach(button => {
+ button.addEventListener('click', handleAnswer);
+ });
+ }
+
+ function handleAnswer(e) {
+ const score = e.target.dataset.score;
+ scores[score]++;
+ currentQuestion++;
+
+ if (currentQuestion < questions.length) {
+ showQuestion(currentQuestion);
+ } else {
+ showResult();
+ }
+ }
+
+ function showResult() {
+ questionContainer.classList.add('hidden');
+ resultContainer.classList.remove('hidden');
+
+ const recommendation = getRecommendation();
+ resultDiv.innerHTML = `
+ <h4>${recommendation.title}</h4>
+ <p>${recommendation.description}</p>
+ `;
+ }
+
+ function getRecommendation() {
+ if (scores.seo > scores.ppc) {
+ return {
+ title: "SEO is Your Best Choice!",
+ description: "Based on your answers, focusing on SEO would be most beneficial for your website. This will help you build long-term organic traffic and sustainable growth."
+ };
+ } else if (scores.ppc > scores.seo) {
+ return {
+ title: "PPC is Your Best Choice!",
+ description: "Based on your answers, PPC would be most effective for your needs. This will help you achieve quick results and precise targeting."
+ };
+ } else {
+ return {
+ title: "Consider a Hybrid Approach",
+ description: "Based on your answers, a combination of both SEO and PPC would work best for your situation. This will give you both immediate results and long-term benefits."
+ };
+ }
+ }
+
+ restartBtn.addEventListener('click', () => {
+ currentQuestion = 0;
+ scores = { seo: 0, ppc: 0, neutral: 0 };
+ resultContainer.classList.add('hidden');
+ questionContainer.classList.remove('hidden');
+ showQuestion(0);
+ });
+
+ showQuestion(0);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c1f8a3d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,209 @@
+:root {
+ --primary: #2a6cff;
+ --secondary: #ff6b6b;
+ --background: #f8f9fa;
+ --text: #2d3436;
+ --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);
+ background: var(--background);
+}
+
+header {
+ position: fixed;
+ width: 100%;
+ top: 0;
+ background: white;
+ box-shadow: var(--shadow);
+ z-index: 1000;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+main {
+ margin-top: 4rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 6rem 2rem;
+ background: linear-gradient(135deg, #f6f8ff 0%, #f0f2ff 100%);
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ margin-top: 2rem;
+ background: var(--primary);
+ color: white;
+ text-decoration: none;
+ border-radius: 50px;
+ transition: transform 0.3s ease;
+ box-shadow: var(--shadow);
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+}
+
+.decision-tool {
+ max-width: 800px;
+ margin: 4rem auto;
+ padding: 2rem;
+}
+
+.quiz-container {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+}
+
+.progress-bar {
+ height: 4px;
+ background: #eee;
+ border-radius: 2px;
+ margin-bottom: 2rem;
+}
+
+.progress {
+ height: 100%;
+ background: var(--primary);
+ width: 0;
+ transition: width 0.3s ease;
+}
+
+.question {
+ text-align: center;
+}
+
+.options {
+ display: grid;
+ gap: 1rem;
+ margin-top: 2rem;
+}
+
+.options button {
+ padding: 1rem;
+ border: none;
+ background: #f8f9fa;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.options button:hover {
+ background: var(--primary);
+ color: white;
+}
+
+.comparison {
+ background: white;
+ padding: 4rem 2rem;
+}
+
+.comparison h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.comparison-grid {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.comparison-card {
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+ transition: transform 0.3s ease;
+}
+
+.comparison-card:hover {
+ transform: translateY(-5px);
+}
+
+.comparison-card.seo {
+ background: linear-gradient(135deg, #e0e7ff 0%, #f0f2ff 100%);
+}
+
+.comparison-card.ppc {
+ background: linear-gradient(135deg, #ffe0e0 0%, #fff0f0 100%);
+}
+
+.hidden {
+ display: none;
+}
+
+footer {
+ background: white;
+ padding: 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .comparison-grid {
+ grid-template-columns: 1fr;
+ }
+}