Changes to aicareermap.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     AI Career Map
+     
+       
+     
+     
+       Assessment
+       Opportunities
+       Challenges
+       Resources
+     
+   
+ 
+ 
+ 
+   
+     Navigate Your Career in the AI Era
+     Understand how artificial intelligence will impact your profession and discover new opportunities
+     Analyze Your Career
+   
+ 
+   
+     Career Assessment
+     
+       
+       
+       
+     
+     
+   
+ 
+   
+     AI Opportunities
+     
+       
+         Skill Enhancement
+         Learn how AI can augment your current skills and make you more valuable.
+       
+       
+         New Roles
+         Discover emerging positions created by AI advancement in your field.
+       
+       
+         Efficiency Gains
+         See how AI tools can improve your productivity and work quality.
+       
+     
+   
+ 
+   
+     Potential Challenges
+     
+       
+         Task Automation
+         
+           
+         
+       
+       
+         Skill Obsolescence
+         
+           
+         
+       
+       
+         Market Changes
+         
+           
+         
+       
+     
+   
+ 
+   
+     Adaptation Resources
+     
+       
+         Learning Paths
+         Curated courses and certifications to future-proof your career
+       
+       
+         AI Tools
+         Essential AI tools and platforms for your profession
+       
+       
+         Industry Insights
+         Latest trends and predictions for your sector
+       
+     
+   
+ 
+ 
+ 
+   
+     
+       AI Career Map
+       Empowering professionals in the AI era
+     
+     
+       Contact
+       info@aicareermap.scroll.pub
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://aicareermap.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AI Career Map - Understand AI's Impact on Your Future
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01X9rHYMEWMgunZuvXqnFDrG",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Let me create this website with a focus on helping people understand AI's impact on their careers.\n\n---domain---\naicareermap.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://aicareermap.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AI Career Map - Understand AI's Impact on Your Future\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    AI Career Map
\n    \n      \n    
\n    \n      Assessment
\n      Opportunities
\n      Challenges
\n      Resources
\n    \n  \n\n\n\n  \n    Navigate Your Career in the AI Era\n    Understand how artificial intelligence will impact your profession and discover new opportunities
\n    Analyze Your Career\n  \n\n  \n    Career Assessment\n    \n      \n      \n      \n    
\n    
\n  \n\n  \n    AI Opportunities\n    \n      \n        Skill Enhancement\n        Learn how AI can augment your current skills and make you more valuable.
\n      
\n      \n        New Roles\n        Discover emerging positions created by AI advancement in your field.
\n      
\n      \n        Efficiency Gains\n        See how AI tools can improve your productivity and work quality.
\n      
\n    
\n  \n\n  \n    Potential Challenges\n    \n      \n        Task Automation\n        \n          
\n        
\n      
\n      \n        Skill Obsolescence\n        \n          
\n        
\n      
\n      \n        Market Changes\n        \n          
\n        
\n      
\n    
\n  \n\n  \n    Adaptation Resources\n    \n      \n        Learning Paths\n        Curated courses and certifications to future-proof your career
\n      \n      \n        AI Tools\n        Essential AI tools and platforms for your profession
\n      \n      \n        Industry Insights\n        Latest trends and predictions for your sector
\n      \n    
\n  \n\n\n\n  \n    \n      AI Career Map\n      Empowering professionals in the AI era
\n    
\n    \n      Contact\n      info@aicareermap.scroll.pub
\n    
\n  
\n\n\n---style.css---\n:root {\n  --primary-color: #2a6ef5;\n  --secondary-color: #6c48ee;\n  --text-color: #333;\n  --light-bg: #f8f9fa;\n  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  --transition: all 0.3s ease;\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-color);\n}\n\n.main-header {\n  position: fixed;\n  width: 100%;\n  background: rgba(255, 255, 255, 0.95);\n  backdrop-filter: blur(10px);\n  z-index: 1000;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 5%;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: bold;\n  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n  -webkit-background-clip: text;\n  color: transparent;\n}\n\n.nav-links {\n  display: flex;\n  gap: 2rem;\n  list-style: none;\n}\n\n.nav-links a {\n  text-decoration: none;\n  color: var(--text-color);\n  position: relative;\n}\n\n.nav-links a::after {\n  content: '';\n  position: absolute;\n  width: 0;\n  height: 2px;\n  bottom: -4px;\n  left: 0;\n  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n  transition: var(--transition);\n}\n\n.nav-links a:hover::after {\n  width: 100%;\n}\n\n.hero {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding: 2rem;\n  background: linear-gradient(135deg, #f5f7ff 0%, #e8ecfd 100%);\n}\n\n.hero h1 {\n  font-size: 3.5rem;\n  margin-bottom: 1rem;\n  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n  -webkit-background-clip: text;\n  color: transparent;\n}\n\n.cta-button {\n  display: inline-block;\n  padding: 1rem 2rem;\n  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n  color: white;\n  text-decoration: none;\n  border-radius: 30px;\n  margin-top: 2rem;\n  transition: var(--transition);\n  box-shadow: 0 4px 15px rgba(106, 72, 238, 0.2);\n}\n\n.cta-button:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(106, 72, 238, 0.3);\n}\n\nsection {\n  padding: 5rem 2rem;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.cards-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n.card {\n  background: white;\n  padding: 2rem;\n  border-radius: 15px;\n  box-shadow: var(--card-shadow);\n  transition: var(--transition);\n}\n\n.card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);\n}\n\n.assessment-form {\n  display: flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n  margin: 2rem 0;\n}\n\nselect, button {\n  padding: 0.8rem 1.5rem;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  font-size: 1rem;\n}\n\nselect {\n  flex: 1;\n  min-width: 200px;\n}\n\n#analyzeBtn {\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  cursor: pointer;\n  transition: var(--transition);\n}\n\n#analyzeBtn:hover {\n  background: var(--secondary-color);\n}\n\n.progress-bar {\n  background: #eee;\n  height: 8px;\n  border-radius: 4px;\n  margin: 1rem 0;\n  overflow: hidden;\n}\n\n.progress {\n  height: 100%;\n  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n  width: 0;\n  transition: width 1s ease-in-out;\n}\n\n.resource-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n}\n\n.resource-card {\n  background: white;\n  padding: 2rem;\n  border-radius: 15px;\n  box-shadow: var(--card-shadow);\n  transition: var(--transition);\n}\n\n.resource-card:hover {\n  transform: scale(1.02);\n}\n\nfooter {\n  background: var(--light-bg);\n  padding: 3rem 2rem;\n  margin-top: 4rem;\n}\n\n.footer-content {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 2rem;\n}\n\n@media (max-width: 768px) {\n  .nav-toggle {\n    display: block;\n    cursor: pointer;\n  }\n  \n  .nav-toggle span {\n    display: block;\n    width: 25px;\n    height: 3px;\n    background: var(--text-color);\n    margin: 5px 0;\n    transition: var(--transition);\n  }\n  \n  .nav-links {\n    display: none;\n  }\n  \n  .nav-links.active {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: white;\n    padding: 1rem;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  }\n  \n  .hero h1 {\n    font-size: 2.5rem;\n  }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Navigation toggle\n  const navToggle = document.querySelector('.nav-toggle');\n  const navLinks = document.querySelector('.nav-links');\n  \n  navToggle?.addEventListener('click', () => {\n    navLinks.classList.toggle('active');\n  });\n\n  // Smooth scroll for navigation links\n  document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n    anchor.addEventListener('click', function (e) {\n      e.preventDefault();\n      const target = document.querySelector(this.getAttribute('href'));\n      if (target) {\n        target.scrollIntoView({\n          behavior: 'smooth'\n        });\n        navLinks.classList.remove('active');\n      }\n    });\n  });\n\n  // Initialize progress bars\n  const progressBars = document.querySelectorAll('.progress');\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const progressBar = entry.target;\n        const level = progressBar.getAttribute('data-level');\n        progressBar.style.width = `${level}%`;\n      }\n    });\n  }, { threshold: 0.5 });\n\n  progressBars.forEach(bar => observer.observe(bar));\n\n  // Career analysis functionality\n  const analyzeBtn = document.getElementById('analyzeBtn');\n  const resultsContainer = document.getElementById('results');\n\n  const analysisData = {\n    tech: {\n      opportunities: ['AI Integration Specialist', 'Data Ethics Officer', 'Machine Learning Engineer'],\n      challenges: ['Rapid skill obsolescence', 'Need for continuous learning']\n    },\n    healthcare: {\n      opportunities: ['AI Diagnostic Assistant', 'Medical Data Analyst', 'Remote Care Specialist'],\n      challenges: ['Adaptation to AI tools', 'Patient data privacy concerns']\n    },\n    finance: {\n      opportunities: ['AI Risk Analyst', 'Algorithmic Trading Specialist', 'FinTech Consultant'],\n      challenges: ['Automated decision-making systems', 'Complex regulatory compliance']\n    }\n  };\n\n  analyzeBtn?.addEventListener('click', () => {\n    const jobCategory = document.getElementById('jobCategory').value;\n    const experience = document.getElementById('experience').value;\n\n    if (!jobCategory || !experience) {\n      resultsContainer.innerHTML = 'Please select both field and experience level
';\n      return;\n    }\n\n    const analysis = analysisData[jobCategory];\n    if (analysis) {\n      resultsContainer.innerHTML = `\n        \n          Career Analysis Results\n          \n            Key Opportunities\n            ${analysis.opportunities.map(opp => `${opp}
`).join('')}\n          
\n          \n            Key Challenges\n            ${analysis.challenges.map(challenge => `${challenge}
`).join('')}\n          
\n        
\n      `;\n    }\n  });\n\n  // Add scroll-based animations\n  const revealElements = document.querySelectorAll('section');\n  const revealObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.style."
+     }
+   ],
+   "stop_reason": "max_tokens",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 294,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 4000
+   }
+ }

readme.scroll

Changed around line 1

+ # aicareermap.scroll.pub

+ Website generated by Claude from prompt: A website that helps humans from any job or background see the opportunities and threats to their current work lifestyle and goals from AI

style.css

Changed around line 1
+ :root {
+   --primary-color: #2a6ef5;
+   --secondary-color: #6c48ee;
+   --text-color: #333;
+   --light-bg: #f8f9fa;
+   --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+   --transition: all 0.3s ease;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', system-ui, sans-serif;
+   line-height: 1.6;
+   color: var(--text-color);
+ }
+ 
+ .main-header {
+   position: fixed;
+   width: 100%;
+   background: rgba(255, 255, 255, 0.95);
+   backdrop-filter: blur(10px);
+   z-index: 1000;
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 5%;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+   -webkit-background-clip: text;
+   color: transparent;
+ }
+ 
+ .nav-links {
+   display: flex;
+   gap: 2rem;
+   list-style: none;
+ }
+ 
+ .nav-links a {
+   text-decoration: none;
+   color: var(--text-color);
+   position: relative;
+ }
+ 
+ .nav-links a::after {
+   content: '';
+   position: absolute;
+   width: 0;
+   height: 2px;
+   bottom: -4px;
+   left: 0;
+   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+   transition: var(--transition);
+ }
+ 
+ .nav-links a:hover::after {
+   width: 100%;
+ }
+ 
+ .hero {
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   text-align: center;
+   padding: 2rem;
+   background: linear-gradient(135deg, #f5f7ff 0%, #e8ecfd 100%);
+ }
+ 
+ .hero h1 {
+   font-size: 3.5rem;
+   margin-bottom: 1rem;
+   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+   -webkit-background-clip: text;
+   color: transparent;
+ }
+ 
+ .cta-button {
+   display: inline-block;
+   padding: 1rem 2rem;
+   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+   color: white;
+   text-decoration: none;
+   border-radius: 30px;
+   margin-top: 2rem;
+   transition: var(--transition);
+   box-shadow: 0 4px 15px rgba(106, 72, 238, 0.2);
+ }
+ 
+ .cta-button:hover {
+   transform: translateY(-2px);
+   box-shadow: 0 6px 20px rgba(106, 72, 238, 0.3);
+ }
+ 
+ section {
+   padding: 5rem 2rem;
+   max-width: 1200px;
+   margin: 0 auto;
+ }
+ 
+ .cards-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+   gap: 2rem;
+   margin-top: 2rem;
+ }
+ 
+ .card {
+   background: white;
+   padding: 2rem;
+   border-radius: 15px;
+   box-shadow: var(--card-shadow);
+   transition: var(--transition);
+ }
+ 
+ .card:hover {
+   transform: translateY(-5px);
+   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+ }
+ 
+ .assessment-form {
+   display: flex;
+   gap: 1rem;
+   flex-wrap: wrap;
+   margin: 2rem 0;
+ }
+ 
+ select, button {
+   padding: 0.8rem 1.5rem;
+   border: 1px solid #ddd;
+   border-radius: 8px;
+   font-size: 1rem;
+ }
+ 
+ select {
+   flex: 1;
+   min-width: 200px;
+ }
+ 
+ #analyzeBtn {
+   background: var(--primary-color);
+   color: white;
+   border: none;
+   cursor: pointer;
+   transition: var(--transition);
+ }
+ 
+ #analyzeBtn:hover {
+   background: var(--secondary-color);
+ }
+ 
+ .progress-bar {
+   background: #eee;
+   height: 8px;
+   border-radius: 4px;
+   margin: 1rem 0;
+   overflow: hidden;
+ }
+ 
+ .progress {
+   height: 100%;
+   background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+   width: 0;
+   transition: width 1s ease-in-out;
+ }
+ 
+ .resource-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+   gap: 2rem;
+ }
+ 
+ .resource-card {
+   background: white;
+   padding: 2rem;
+   border-radius: 15px;
+   box-shadow: var(--card-shadow);
+   transition: var(--transition);
+ }
+ 
+ .resource-card:hover {
+   transform: scale(1.02);
+ }
+ 
+ footer {
+   background: var(--light-bg);
+   padding: 3rem 2rem;
+   margin-top: 4rem;
+ }
+ 
+ .footer-content {
+   max-width: 1200px;
+   margin: 0 auto;
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+   gap: 2rem;
+ }
+ 
+ @media (max-width: 768px) {
+   .nav-toggle {
+     display: block;
+     cursor: pointer;
+   }
+ 
+   .nav-toggle span {
+     display: block;
+     width: 25px;
+     height: 3px;
+     background: var(--text-color);
+     margin: 5px 0;
+     transition: var(--transition);
+   }
+ 
+   .nav-links {
+     display: none;
+   }
+ 
+   .nav-links.active {
+     display: flex;
+     flex-direction: column;
+     position: absolute;
+     top: 100%;
+     left: 0;
+     right: 0;
+     background: white;
+     padding: 1rem;
+     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+   }
+ 
+   .hero h1 {
+     font-size: 2.5rem;
+   }
+ }