commit 8a2fb8e5433e0398183492170385a69d168f8efa
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 03:26:21 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..a3ea745
--- /dev/null
+++ b/body.html
@@ -0,0 +1,76 @@
+<header>
+ <nav>
+ <div class="logo">Career Crossroads</div>
+ <div class="theme-toggle" onclick="toggleTheme()">🌓</div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Your Career Decision Platform</h1>
+ <p>Compare and evaluate your potential paths in Language Education vs. PET Manufacturing</p>
+ </section>
+
+ <section class="comparison">
+ <div class="path-container">
+ <div class="path education" id="education">
+ <h2>Language Education</h2>
+ <div class="pros">
+ <h3>Advantages</h3>
+ <ul id="edu-pros">
+ <li>Creative freedom</li>
+ <li>Work-life balance</li>
+ <li>Location flexibility</li>
+ <li>Personal impact</li>
+ </ul>
+ </div>
+ <div class="cons">
+ <h3>Challenges</h3>
+ <ul id="edu-cons">
+ <li>Market competition</li>
+ <li>Income variability</li>
+ <li>Content creation demands</li>
+ </ul>
+ </div>
+ <button onclick="voteEducation()">Choose This Path</button>
+ <div class="score" id="edu-score">0</div>
+ </div>
+
+ <div class="path manufacturing" id="manufacturing">
+ <h2>PET Manufacturing</h2>
+ <div class="pros">
+ <h3>Advantages</h3>
+ <ul id="mfg-pros">
+ <li>Stable income</li>
+ <li>Growing industry</li>
+ <li>Clear career path</li>
+ <li>B2B opportunities</li>
+ </ul>
+ </div>
+ <div class="cons">
+ <h3>Challenges</h3>
+ <ul id="mfg-cons">
+ <li>Technical knowledge required</li>
+ <li>Market fluctuations</li>
+ <li>Complex supply chains</li>
+ </ul>
+ </div>
+ <button onclick="voteManufacturing()">Choose This Path</button>
+ <div class="score" id="mfg-score">0</div>
+ </div>
+ </div>
+
+ <div class="decision-meter">
+ <div class="meter-fill" id="meter"></div>
+ </div>
+ </section>
+
+ <section class="recommendation" id="recommendation">
+ <h2>Your Current Inclination</h2>
+ <p id="recommendation-text">Start comparing the paths above to see your preference emerge.</p>
+ </section>
+</main>
+
+<footer>
+ <p>Made with care for career decisions</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8b79c84
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://careerpath.scroll.pub
+metaTags
+editButton /edit.html
+title Career Crossroads: Education vs. Manufacturing
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..d9c78fc
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_0183h1gRkUddgdh3FVthR91S",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a decision-making website for your career choice. For the domain, I suggest:\n\n---domain---\ncareerpath.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://careerpath.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Career Crossroads: Education vs. Manufacturing\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Career Crossroads</div>\n <div class=\"theme-toggle\" onclick=\"toggleTheme()\">🌓</div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Your Career Decision Platform</h1>\n <p>Compare and evaluate your potential paths in Language Education vs. PET Manufacturing</p>\n </section>\n\n <section class=\"comparison\">\n <div class=\"path-container\">\n <div class=\"path education\" id=\"education\">\n <h2>Language Education</h2>\n <div class=\"pros\">\n <h3>Advantages</h3>\n <ul id=\"edu-pros\">\n <li>Creative freedom</li>\n <li>Work-life balance</li>\n <li>Location flexibility</li>\n <li>Personal impact</li>\n </ul>\n </div>\n <div class=\"cons\">\n <h3>Challenges</h3>\n <ul id=\"edu-cons\">\n <li>Market competition</li>\n <li>Income variability</li>\n <li>Content creation demands</li>\n </ul>\n </div>\n <button onclick=\"voteEducation()\">Choose This Path</button>\n <div class=\"score\" id=\"edu-score\">0</div>\n </div>\n\n <div class=\"path manufacturing\" id=\"manufacturing\">\n <h2>PET Manufacturing</h2>\n <div class=\"pros\">\n <h3>Advantages</h3>\n <ul id=\"mfg-pros\">\n <li>Stable income</li>\n <li>Growing industry</li>\n <li>Clear career path</li>\n <li>B2B opportunities</li>\n </ul>\n </div>\n <div class=\"cons\">\n <h3>Challenges</h3>\n <ul id=\"mfg-cons\">\n <li>Technical knowledge required</li>\n <li>Market fluctuations</li>\n <li>Complex supply chains</li>\n </ul>\n </div>\n <button onclick=\"voteManufacturing()\">Choose This Path</button>\n <div class=\"score\" id=\"mfg-score\">0</div>\n </div>\n </div>\n\n <div class=\"decision-meter\">\n <div class=\"meter-fill\" id=\"meter\"></div>\n </div>\n </section>\n\n <section class=\"recommendation\" id=\"recommendation\">\n <h2>Your Current Inclination</h2>\n <p id=\"recommendation-text\">Start comparing the paths above to see your preference emerge.</p>\n </section>\n</main>\n\n<footer>\n <p>Made with care for career decisions</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a6b9c;\n --secondary: #4a90e2;\n --background: #ffffff;\n --text: #333333;\n --card-bg: #f5f7fa;\n --shadow: rgba(0,0,0,0.1);\n}\n\n[data-theme=\"dark\"] {\n --primary: #4a90e2;\n --secondary: #2a6b9c;\n --background: #1a1a1a;\n --text: #ffffff;\n --card-bg: #2d2d2d;\n --shadow: rgba(255,255,255,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n transition: all 0.3s ease;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\nheader {\n padding: 1rem;\n background: var(--primary);\n box-shadow: 0 2px 4px var(--shadow);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: white;\n}\n\n.theme-toggle {\n cursor: pointer;\n font-size: 1.5rem;\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: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.comparison {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.path-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.path {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px var(--shadow);\n transform: translateY(0);\n}\n\n.path:hover {\n transform: translateY(-5px);\n}\n\n.path h2 {\n color: var(--primary);\n margin-bottom: 1.5rem;\n}\n\n.pros, .cons {\n margin-bottom: 1.5rem;\n}\n\nul {\n list-style-position: inside;\n margin-left: 1rem;\n}\n\nbutton {\n width: 100%;\n padding: 1rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 1rem;\n margin-top: 1rem;\n}\n\nbutton:hover {\n background: var(--secondary);\n}\n\n.score {\n text-align: center;\n font-size: 1.5rem;\n margin-top: 1rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.decision-meter {\n height: 2rem;\n background: var(--card-bg);\n border-radius: 1rem;\n overflow: hidden;\n margin: 2rem 0;\n}\n\n.meter-fill {\n width: 50%;\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n transition: width 0.5s ease;\n}\n\n.recommendation {\n text-align: center;\n padding: 2rem;\n background: var(--card-bg);\n border-radius: 1rem;\n margin: 2rem auto;\n max-width: 800px;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--card-bg);\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2rem;\n }\n \n .path-container {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\nlet eduScore = 0;\nlet mfgScore = 0;\n\nfunction toggleTheme() {\n const body = document.body;\n if (body.getAttribute('data-theme') === 'dark') {\n body.removeAttribute('data-theme');\n } else {\n body.setAttribute('data-theme', 'dark');\n }\n}\n\nfunction updateMeter() {\n const total = Math.abs(eduScore) + Math.abs(mfgScore);\n if (total === 0) return;\n \n const percentage = ((mfgScore + total) / (2 * total)) * 100;\n document.getElementById('meter').style.width = `${percentage}%`;\n \n updateRecommendation();\n}\n\nfunction updateScores() {\n document.getElementById('edu-score').textContent = eduScore;\n document.getElementById('mfg-score').textContent = mfgScore;\n}\n\nfunction updateRecommendation() {\n const text = document.getElementById('recommendation-text');\n if (eduScore > mfgScore) {\n text.textContent = \"You're showing a preference for Language Education content creation. Consider exploring this path further!\";\n } else if (mfgScore > eduScore) {\n text.textContent = \"You're leaning towards PET Manufacturing sales and marketing. This might be your calling!\";\n } else {\n text.textContent = \"Your preferences are balanced. Keep exploring both options!\";\n }\n}\n\nfunction voteEducation() {\n eduScore++;\n updateScores();\n updateMeter();\n}\n\nfunction voteManufacturing() {\n mfgScore++;\n updateScores();\n updateMeter();\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n updateMeter();\n});\n\n---end---\n\nThis website features:\n1. Dark/light theme toggle\n2. Interactive voting system\n3. Visual decision meter\n4. Responsive design\n5. Smooth animations and transitions\n6. Professional color scheme\n7. Clean, semantic HTML structure\n8. Accessibility considerations\n9. Modern CSS Grid and Flexbox layout\n10. Dynamic recommendations based on user choices\n\nThe design is clean and professional while incorporating engaging interactive elements to help users make their career decision. The visual meter provides immediate feedback, and the recommendation section updates based on user preferences."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 310,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2547
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1a22fcb
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# careerpath1.scroll.pub
+Website generated by Claude from prompt: I want a website that will help me decide if i should go all in making contents for language education or in doing sales and marketing in Polyethylene terephthalate parts and components manufacturing.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5a7bf63
--- /dev/null
+++ b/script.js
@@ -0,0 +1,53 @@
+let eduScore = 0;
+let mfgScore = 0;
+
+function toggleTheme() {
+ const body = document.body;
+ if (body.getAttribute('data-theme') === 'dark') {
+ body.removeAttribute('data-theme');
+ } else {
+ body.setAttribute('data-theme', 'dark');
+ }
+}
+
+function updateMeter() {
+ const total = Math.abs(eduScore) + Math.abs(mfgScore);
+ if (total === 0) return;
+
+ const percentage = ((mfgScore + total) / (2 * total)) * 100;
+ document.getElementById('meter').style.width = `${percentage}%`;
+
+ updateRecommendation();
+}
+
+function updateScores() {
+ document.getElementById('edu-score').textContent = eduScore;
+ document.getElementById('mfg-score').textContent = mfgScore;
+}
+
+function updateRecommendation() {
+ const text = document.getElementById('recommendation-text');
+ if (eduScore > mfgScore) {
+ text.textContent = "You're showing a preference for Language Education content creation. Consider exploring this path further!";
+ } else if (mfgScore > eduScore) {
+ text.textContent = "You're leaning towards PET Manufacturing sales and marketing. This might be your calling!";
+ } else {
+ text.textContent = "Your preferences are balanced. Keep exploring both options!";
+ }
+}
+
+function voteEducation() {
+ eduScore++;
+ updateScores();
+ updateMeter();
+}
+
+function voteManufacturing() {
+ mfgScore++;
+ updateScores();
+ updateMeter();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ updateMeter();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..c55ca7d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,172 @@
+:root {
+ --primary: #2a6b9c;
+ --secondary: #4a90e2;
+ --background: #ffffff;
+ --text: #333333;
+ --card-bg: #f5f7fa;
+ --shadow: rgba(0,0,0,0.1);
+}
+
+[data-theme="dark"] {
+ --primary: #4a90e2;
+ --secondary: #2a6b9c;
+ --background: #1a1a1a;
+ --text: #ffffff;
+ --card-bg: #2d2d2d;
+ --shadow: rgba(255,255,255,0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ transition: all 0.3s ease;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+}
+
+header {
+ padding: 1rem;
+ background: var(--primary);
+ box-shadow: 0 2px 4px var(--shadow);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: white;
+}
+
+.theme-toggle {
+ cursor: pointer;
+ font-size: 1.5rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ color: white;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.comparison {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+}
+
+.path-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.path {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px var(--shadow);
+ transform: translateY(0);
+}
+
+.path:hover {
+ transform: translateY(-5px);
+}
+
+.path h2 {
+ color: var(--primary);
+ margin-bottom: 1.5rem;
+}
+
+.pros, .cons {
+ margin-bottom: 1.5rem;
+}
+
+ul {
+ list-style-position: inside;
+ margin-left: 1rem;
+}
+
+button {
+ width: 100%;
+ padding: 1rem;
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ font-size: 1rem;
+ margin-top: 1rem;
+}
+
+button:hover {
+ background: var(--secondary);
+}
+
+.score {
+ text-align: center;
+ font-size: 1.5rem;
+ margin-top: 1rem;
+ font-weight: bold;
+ color: var(--primary);
+}
+
+.decision-meter {
+ height: 2rem;
+ background: var(--card-bg);
+ border-radius: 1rem;
+ overflow: hidden;
+ margin: 2rem 0;
+}
+
+.meter-fill {
+ width: 50%;
+ height: 100%;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ transition: width 0.5s ease;
+}
+
+.recommendation {
+ text-align: center;
+ padding: 2rem;
+ background: var(--card-bg);
+ border-radius: 1rem;
+ margin: 2rem auto;
+ max-width: 800px;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--card-bg);
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .path-container {
+ grid-template-columns: 1fr;
+ }
+}