Changes to careerpath1.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     Career Crossroads
+     🌓
+   
+ 
+ 
+ 
+   
+     Your Career Decision Platform
+     Compare and evaluate your potential paths in Language Education vs. PET Manufacturing
+   
+ 
+   
+     
+       
+         Language Education
+         
+           Advantages
+           
+             Creative freedom
+             Work-life balance
+             Location flexibility
+             Personal impact
+           
+         
+         
+           Challenges
+           
+             Market competition
+             Income variability
+             Content creation demands
+           
+         
+         
+         0
+       
+ 
+       
+         PET Manufacturing
+         
+           Advantages
+           
+             Stable income
+             Growing industry
+             Clear career path
+             B2B opportunities
+           
+         
+         
+           Challenges
+           
+             Technical knowledge required
+             Market fluctuations
+             Complex supply chains
+           
+         
+         
+         0
+       
+     
+ 
+     
+       
+     
+   
+ 
+   
+     Your Current Inclination
+     Start comparing the paths above to see your preference emerge.
+   
+ 
+ 
+ 
+   Made with care for career decisions
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://careerpath.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Career Crossroads: Education vs. Manufacturing
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  \n    Career Crossroads
\n    🌓
\n  \n\n\n\n  \n    Your Career Decision Platform\n    Compare and evaluate your potential paths in Language Education vs. PET Manufacturing
\n  \n\n  \n    \n      \n        Language Education\n        \n          Advantages\n          \n            Creative freedom
\n            Work-life balance
\n            Location flexibility
\n            Personal impact
\n          \n        
\n        \n          Challenges\n          \n            Market competition
\n            Income variability
\n            Content creation demands
\n          \n        
\n        \n        0
\n      
\n\n      \n        PET Manufacturing\n        \n          Advantages\n          \n            Stable income
\n            Growing industry
\n            Clear career path
\n            B2B opportunities
\n          \n        
\n        \n          Challenges\n          \n            Technical knowledge required
\n            Market fluctuations
\n            Complex supply chains
\n          \n        
\n        \n        0
\n      
\n    
\n\n    \n      
\n    
\n  \n\n  \n    Your Current Inclination\n    Start comparing the paths above to see your preference emerge.
\n  \n\n\n\n  Made with care for career decisions
\n\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
+   }
+ }

readme.scroll

Changed around line 1

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

script.js

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

style.css

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