Changes to aifuture.scroll.pub

root
root
24 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+ Assess
+ Impact
+ Action
+
+
+
+
+
+
+

Navigate Your Career in the AI Era

+

Understand the risks. Seize the opportunities. Take action today.

+
+
+
+
+

Where Do You Stand?

+
+
+
+
+
+
+
+
+
+

AI Impact Zones

+
+
+

High Risk

+
    +
  • Data Entry
    • +
  • Basic Analysis
    • +
  • Customer Service
    • +
    +
    +
    +

    Medium Risk

    +
      +
    • Content Writing
      • +
    • Basic Programming
      • +
    • Administrative Work
      • +
      +
      +
      +

      Low Risk

      +
        +
      • Creative Direction
        • +
      • Strategic Planning
        • +
      • Human Leadership
        • +
        +
        +
        +
        +
        +
        +

        Your Action Plan

        +
        +
        + 1
        +

        Upskill

        +

        Focus on human-centric skills that AI can't easily replicate

        +
        +
        + 2
        +

        Adapt

        +

        Learn to work alongside AI tools in your field

        +
        +
        + 3
        +

        Pivot

        +

        Identify emerging opportunities in AI-adjacent roles

        +
        +
        +
        +
        +
        +
        +

        Built to help humans thrive in the AI era

        +
        + Privacy Policy
        + Terms of Use
        +
        +
        index.scroll
        Changed around line 1
        + buildHtml
        + baseUrl https://aifuture.scroll.pub
        + metaTags
        + description "Understand your professional future in the age of AI - threats, opportunities, and practical actions to take"
        + keywords "AI careers, artificial intelligence jobs, future of work, AI disruption, career planning"
        + author "AI Career Navigator"
        + editButton /edit.html
        + title AI Career Navigator
        + style.css
        + body.html
        + script.js
        prompt.json
        Changed around line 1
        + {
        + "id": "msg_01G7QYSPYGRYq8EdsxJ4tPeU",
        + "type": "message",
        + "role": "assistant",
        + "model": "claude-3-5-sonnet-20241022",
        + "content": [
        + {
        + "type": "text",
        + "text": "Here's a complete website design for an AI Career Navigator:\n\n---domain---\naifuture.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://aifuture.scroll.pub\nmetaTags\ndescription \"Understand your professional future in the age of AI - threats, opportunities, and practical actions to take\"\nkeywords \"AI careers, artificial intelligence jobs, future of work, AI disruption, career planning\"\nauthor \"AI Career Navigator\"\neditButton /edit.html\ntitle AI Career Navigator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
        \n \n
        \n\n
        \n
        \n

        Navigate Your Career in the AI Era

        \n

        Understand the risks. Seize the opportunities. Take action today.

        \n \n
        \n\n
        \n

        Where Do You Stand?

        \n
        \n \n
        \n
        \n
        \n
        \n
        \n\n
        \n

        AI Impact Zones

        \n
        \n
        \n

        High Risk

        \n
          \n
        • Data Entry
          • \n
        • Basic Analysis
          • \n
        • Customer Service
          • \n
        \n
        \n
        \n

        Medium Risk

        \n
          \n
        • Content Writing
          • \n
        • Basic Programming
          • \n
        • Administrative Work
          • \n
        \n
        \n
        \n

        Low Risk

        \n
          \n
        • Creative Direction
          • \n
        • Strategic Planning
          • \n
        • Human Leadership
          • \n
        \n
        \n
        \n
        \n\n
        \n

        Your Action Plan

        \n
        \n
        \n 1\n

        Upskill

        \n

        Focus on human-centric skills that AI can't easily replicate

        \n
        \n
        \n 2\n

        Adapt

        \n

        Learn to work alongside AI tools in your field

        \n
        \n
        \n 3\n

        Pivot

        \n

        Identify emerging opportunities in AI-adjacent roles

        \n
        \n
        \n
        \n
        \n\n\n\n---style.css---\n:root {\n --primary-color: #2a2a72;\n --secondary-color: #009ffd;\n --accent-color: #ff6b6b;\n --text-color: #333;\n --light-bg: #f8f9fa;\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: 'Inter', system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n overflow-x: hidden;\n}\n\nheader {\n position: fixed;\n width: 100%;\n top: 0;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-weight: 700;\n font-size: 1.5rem;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\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-color);\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\nmain {\n margin-top: 4rem;\n}\n\nsection {\n padding: 5rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n#hero {\n min-height: 90vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, rgba(42,42,114,0.05) 0%, rgba(0,159,253,0.05) 100%);\n}\n\nh1 {\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 -webkit-text-fill-color: transparent;\n}\n\n.tagline {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n border: none;\n border-radius: 50px;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: white;\n cursor: pointer;\n transition: var(--transition);\n transform: translateY(0);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.impact-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.impact-card {\n padding: 2rem;\n border-radius: 15px;\n background: white;\n box-shadow: 0 5px 30px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.impact-card:hover {\n transform: translateY(-5px);\n}\n\n.impact-card.high {\n border-top: 5px solid var(--accent-color);\n}\n\n.impact-card.medium {\n border-top: 5px solid var(--secondary-color);\n}\n\n.impact-card.low {\n border-top: 5px solid #28a745;\n}\n\n.action-steps {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.step {\n position: relative;\n padding: 2rem;\n background: white;\n border-radius: 15px;\n box-shadow: 0 5px 30px rgba(0,0,0,0.1);\n}\n\n.step-number {\n position: absolute;\n top: -20px;\n left: 20px;\n width: 40px;\n height: 40px;\n background: var(--secondary-color);\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n}\n\nfooter {\n background: var(--light-bg);\n padding: 2rem;\n text-align: center;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n h1 {\n font-size: 2.5rem;\n }\n \n .nav-links {\n display: none;\n }\n \n section {\n padding: 3rem 1rem;\n }\n \n .impact-grid, .action-steps {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Risk assessment functionality\n const jobCategory = document.getElementById('jobCategory');\n const riskMeter = document.querySelector('.meter-fill');\n \n const riskLevels = {\n 'creative': 60,\n 'technical': 40,\n 'service': 85,\n 'management': 30,\n 'data': 70\n };\n\n jobCategory.addEventListener('change', function() {\n const selectedJob = this.value;\n if (selectedJob) {\n const riskPercentage = riskLevels[selectedJob];\n riskMeter.style.width = `${riskPercentage}%`;\n riskMeter.style.backgroundColor = getRiskColor(riskPercentage);\n }\n });\n\n function getRiskColor(percentage) {\n if (percentage >= 70) return '#ff6b6b';\n if (percentage >= 40) return '#ffd93d';\n return '#6bff84';\n }\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n document.querySelectorAll('section').forEach(section => {\n section.classList.add('fade-in');\n observer.observe(section);\n });\n});\n\n---end---\n\nThis design features:\n1. Clean, modern UI with gradient accents\n2. Interactive risk assessment tool\n3. Responsive grid layouts\n4. Smooth scroll navigation\n5. Animated elements using Intersection Observer\n6. Accessible color contrast and semantic HTML\n7. Mobile-first approach\n8. Performance optimized with minimal JavaScript\n9. Beautiful transitions and hover effects\n10. Clear information hierarchy and visual flow\n\nThe domain name \"aifuture.scroll.pub\" is memorable, relevant, and accurately represents the website's purpose of helping people navigate their future careers in relation to AI."
        + }
        + ],
        + "stop_reason": "end_turn",
        + "stop_sequence": null,
        + "usage": {
        + "input_tokens": 321,
        + "cache_creation_input_tokens": 0,
        + "cache_read_input_tokens": 0,
        + "output_tokens": 3088
        + }
        + }
        readme.scroll
        Changed around line 1
        + # aifuture.scroll.pub
        + Website generated by Claude from prompt: A super simple one-page website to help any human worried about AI job disruption understand where the threats and opportunities lie for them (should be the minimum viable information with a beautifully simple presentatino) with practical output they can take action against
        script.js
        Changed around line 1
        + document.addEventListener('DOMContentLoaded', function() {
        + // Smooth scroll for navigation links
        + document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        + anchor.addEventListener('click', function (e) {
        + e.preventDefault();
        + document.querySelector(this.getAttribute('href')).scrollIntoView({
        + behavior: 'smooth'
        + });
        + });
        + });
        +
        + // Risk assessment functionality
        + const jobCategory = document.getElementById('jobCategory');
        + const riskMeter = document.querySelector('.meter-fill');
        +
        + const riskLevels = {
        + 'creative': 60,
        + 'technical': 40,
        + 'service': 85,
        + 'management': 30,
        + 'data': 70
        + };
        +
        + jobCategory.addEventListener('change', function() {
        + const selectedJob = this.value;
        + if (selectedJob) {
        + const riskPercentage = riskLevels[selectedJob];
        + riskMeter.style.width = `${riskPercentage}%`;
        + riskMeter.style.backgroundColor = getRiskColor(riskPercentage);
        + }
        + });
        +
        + function getRiskColor(percentage) {
        + if (percentage >= 70) return '#ff6b6b';
        + if (percentage >= 40) return '#ffd93d';
        + return '#6bff84';
        + }
        +
        + // Intersection Observer for fade-in animations
        + const observerOptions = {
        + threshold: 0.1,
        + rootMargin: '0px 0px -50px 0px'
        + };
        +
        + const observer = new IntersectionObserver((entries) => {
        + entries.forEach(entry => {
        + if (entry.isIntersecting) {
        + entry.target.classList.add('visible');
        + }
        + });
        + }, observerOptions);
        +
        + document.querySelectorAll('section').forEach(section => {
        + section.classList.add('fade-in');
        + observer.observe(section);
        + });
        + });
        style.css
        Changed around line 1
        + :root {
        + --primary-color: #2a2a72;
        + --secondary-color: #009ffd;
        + --accent-color: #ff6b6b;
        + --text-color: #333;
        + --light-bg: #f8f9fa;
        + --transition: all 0.3s ease;
        + }
        +
        + * {
        + margin: 0;
        + padding: 0;
        + box-sizing: border-box;
        + }
        +
        + body {
        + font-family: 'Inter', system-ui, -apple-system, sans-serif;
        + line-height: 1.6;
        + color: var(--text-color);
        + overflow-x: hidden;
        + }
        +
        + header {
        + position: fixed;
        + width: 100%;
        + top: 0;
        + background: rgba(255, 255, 255, 0.95);
        + backdrop-filter: blur(10px);
        + z-index: 1000;
        + box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        + }
        +
        + nav {
        + max-width: 1200px;
        + margin: 0 auto;
        + padding: 1rem;
        + display: flex;
        + justify-content: space-between;
        + align-items: center;
        + }
        +
        + .logo {
        + font-weight: 700;
        + font-size: 1.5rem;
        + background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        + -webkit-background-clip: text;
        + -webkit-text-fill-color: transparent;
        + }
        +
        + .nav-links a {
        + margin-left: 2rem;
        + text-decoration: none;
        + color: var(--text-color);
        + transition: var(--transition);
        + }
        +
        + .nav-links a:hover {
        + color: var(--secondary-color);
        + }
        +
        + main {
        + margin-top: 4rem;
        + }
        +
        + section {
        + padding: 5rem 2rem;
        + max-width: 1200px;
        + margin: 0 auto;
        + }
        +
        + #hero {
        + min-height: 90vh;
        + display: flex;
        + flex-direction: column;
        + justify-content: center;
        + align-items: center;
        + text-align: center;
        + background: linear-gradient(135deg, rgba(42,42,114,0.05) 0%, rgba(0,159,253,0.05) 100%);
        + }
        +
        + h1 {
        + font-size: 3.5rem;
        + margin-bottom: 1rem;
        + background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        + -webkit-background-clip: text;
        + -webkit-text-fill-color: transparent;
        + }
        +
        + .tagline {
        + font-size: 1.5rem;
        + margin-bottom: 2rem;
        + }
        +
        + .cta-button {
        + padding: 1rem 2rem;
        + font-size: 1.1rem;
        + border: none;
        + border-radius: 50px;
        + background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        + color: white;
        + cursor: pointer;
        + transition: var(--transition);
        + transform: translateY(0);
        + }
        +
        + .cta-button:hover {
        + transform: translateY(-2px);
        + box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        + }
        +
        + .impact-grid {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        + gap: 2rem;
        + margin-top: 3rem;
        + }
        +
        + .impact-card {
        + padding: 2rem;
        + border-radius: 15px;
        + background: white;
        + box-shadow: 0 5px 30px rgba(0,0,0,0.1);
        + transition: var(--transition);
        + }
        +
        + .impact-card:hover {
        + transform: translateY(-5px);
        + }
        +
        + .impact-card.high {
        + border-top: 5px solid var(--accent-color);
        + }
        +
        + .impact-card.medium {
        + border-top: 5px solid var(--secondary-color);
        + }
        +
        + .impact-card.low {
        + border-top: 5px solid #28a745;
        + }
        +
        + .action-steps {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        + gap: 2rem;
        + margin-top: 3rem;
        + }
        +
        + .step {
        + position: relative;
        + padding: 2rem;
        + background: white;
        + border-radius: 15px;
        + box-shadow: 0 5px 30px rgba(0,0,0,0.1);
        + }
        +
        + .step-number {
        + position: absolute;
        + top: -20px;
        + left: 20px;
        + width: 40px;
        + height: 40px;
        + background: var(--secondary-color);
        + color: white;
        + border-radius: 50%;
        + display: flex;
        + align-items: center;
        + justify-content: center;
        + font-weight: bold;
        + }
        +
        + footer {
        + background: var(--light-bg);
        + padding: 2rem;
        + text-align: center;
        + margin-top: 4rem;
        + }
        +
        + @media (max-width: 768px) {
        + h1 {
        + font-size: 2.5rem;
        + }
        +
        + .nav-links {
        + display: none;
        + }
        +
        + section {
        + padding: 3rem 1rem;
        + }
        +
        + .impact-grid, .action-steps {
        + grid-template-columns: 1fr;
        + }
        + }