Changes to aishift.scroll.pub

root
root
19 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Should You Pivot to an AI Career?

+

Calculate your AI career readiness score and get personalized insights

+
+
+
+

Career Shift Calculator

+
+
+
+
+ 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Your Results

+
+
+ 0
+ Readiness Score
+
+
+
+
+
+
+

Key Insights

+
+
+

Market Growth

+

AI content creation market expected to grow by 34% annually through 2028

+
+
+

Skills Gap

+

High demand for AI educators and content creators with practical experience

+
+
+

Income Potential

+

Average AI content creator salary ranges from $60K to $120K annually

+
+
+
+
+
+
+
+

Made with passion by AIshift

+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://aishift.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AI Career Shift Calculator
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01Vo7PitJLdcnwxpzkkdphmN",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a creative AI career assessment website:\n\n---domain---\naishift.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://aishift.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AI Career Shift Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n \n
\n\n
\n
\n

Should You Pivot to an AI Career?

\n

Calculate your AI career readiness score and get personalized insights

\n
\n\n
\n

Career Shift Calculator

\n
\n
\n \n \n 5\n
\n\n
\n \n \n
\n\n
\n \n
\n \n \n \n \n
\n
\n\n \n
\n
\n\n
\n

Your Results

\n
\n
\n 0\n Readiness Score\n
\n
\n
\n
\n\n
\n

Key Insights

\n
\n
\n

Market Growth

\n

AI content creation market expected to grow by 34% annually through 2028

\n
\n
\n

Skills Gap

\n

High demand for AI educators and content creators with practical experience

\n
\n
\n

Income Potential

\n

Average AI content creator salary ranges from $60K to $120K annually

\n
\n
\n
\n
\n\n\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --secondary-color: #818cf8;\n --text-color: #1f2937;\n --background-color: #ffffff;\n --accent-color: #c7d2fe;\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 background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);\n}\n\n/* Header & Navigation */\nheader {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 10px 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-size: 1.5rem;\n font-weight: bold;\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 {\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 transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n/* Hero Section */\n.hero {\n 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: radial-gradient(circle at 50% 50%, var(--accent-color) 0%, transparent 50%);\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 -webkit-text-fill-color: transparent;\n}\n\n/* Calculator Section */\n.calculator {\n max-width: 800px;\n margin: 4rem auto;\n padding: 2rem;\n background: white;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n}\n\n.form-group {\n margin-bottom: 2rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--accent-color);\n border-radius: 3px;\n outline: none;\n}\n\nselect {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid var(--accent-color);\n border-radius: 8px;\n background: white;\n}\n\n.checkbox-group {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n\n.calculate-btn {\n width: 100%;\n padding: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: white;\n border: none;\n border-radius: 8px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.calculate-btn:hover {\n transform: translateY(-2px);\n}\n\n/* Results Section */\n.results {\n text-align: center;\n padding: 2rem;\n}\n\n.score-circle {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n color: white;\n margin: 2rem auto;\n}\n\n.score {\n font-size: 3rem;\n font-weight: bold;\n}\n\n/* Cards Section */\n.cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.card {\n background: white;\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n/* Footer */\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.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-bottom: 1rem;\n}\n\n.footer-links a {\n color: var(--text-color);\n text-decoration: none;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n }\n \n .menu-toggle span {\n width: 25px;\n height: 3px;\n background: var(--text-color);\n border-radius: 3px;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n.hidden {\n display: none;\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const form = document.getElementById('assessment-form');\n const results = document.getElementById('results');\n const scoreElement = document.querySelector('.score');\n const recommendationsElement = document.querySelector('.recommendations');\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n // Handle range input display\n const rangeInput = document.getElementById('current-satisfaction');\n const rangeValue = document.querySelector('.range-value');\n \n rangeInput.addEventListener('input', (e) => {\n rangeValue.textContent = e.target.value;\n });\n \n // Mobile menu toggle\n menuToggle.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\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 target.scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n \n // Form submission and score calculation\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const satisfaction = parseInt(document.getElementById('current-satisfaction').value);\n const experience = parseInt(document.getElementById('ai-experience').value);\n const skills = document.querySelectorAll('input[name=\"skills\"]:checked').length;\n \n // Calculate score (0-100)\n let score = Math.round(((10 - satisfaction) * 3) + (experience * 10) + (skills * 5));\n score = Math.min(Math.max(score, 0), 100);\n \n // Animate score counter\n let currentScore = 0;\n const interval = setInterval(() => {\n if (currentScore >= score) {\n clearInterval(interval);\n } else {\n currentScore++;\n scoreElement.textContent = currentScore;\n }\n }, 20);\n \n // Generate recommendations\n let recommendation = '';\n if (score >= 80) {\n recommendation = \"You're highly suited for an AI career transition! Your current situation and skill set strongly align with AI content creation and education.\";\n } else if (score >= 60) {\n recommendation = \"You show good potential for an AI career shift. Consider building more skills while maintaining your current job.\";\n } else {\n recommendation = \"Start by exploring AI fundamentals and content creation as a side project before making a full transition.\";\n }\n \n recommendationsElement.innerHTML = `

${recommendation}

`;\n results.classList.remove('hidden');\n \n // Smooth scroll to results\n results.scrollIntoView({ behavior: 'smooth' });\n });\n \n // Add intersection observer for animation\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n });\n \n // Observe all cards and sections\n document.querySelectorAll('.card, section').forEach((el) => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n el.style.transition = 'all 0.6s ease-out';\n observer.observe(el);\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 303,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3625
+ }
+ }
readme.scroll
Changed around line 1
+ # aishift.scroll.pub
+ Website generated by Claude from prompt: Build a website where I want to assess if I should quit my boring job and get full time in AI content production and education do some funky analysis and be creative
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const form = document.getElementById('assessment-form');
+ const results = document.getElementById('results');
+ const scoreElement = document.querySelector('.score');
+ const recommendationsElement = document.querySelector('.recommendations');
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ // Handle range input display
+ const rangeInput = document.getElementById('current-satisfaction');
+ const rangeValue = document.querySelector('.range-value');
+
+ rangeInput.addEventListener('input', (e) => {
+ rangeValue.textContent = e.target.value;
+ });
+
+ // Mobile menu toggle
+ menuToggle.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ });
+
+ // Smooth scroll for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Form submission and score calculation
+ form.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const satisfaction = parseInt(document.getElementById('current-satisfaction').value);
+ const experience = parseInt(document.getElementById('ai-experience').value);
+ const skills = document.querySelectorAll('input[name="skills"]:checked').length;
+
+ // Calculate score (0-100)
+ let score = Math.round(((10 - satisfaction) * 3) + (experience * 10) + (skills * 5));
+ score = Math.min(Math.max(score, 0), 100);
+
+ // Animate score counter
+ let currentScore = 0;
+ const interval = setInterval(() => {
+ if (currentScore >= score) {
+ clearInterval(interval);
+ } else {
+ currentScore++;
+ scoreElement.textContent = currentScore;
+ }
+ }, 20);
+
+ // Generate recommendations
+ let recommendation = '';
+ if (score >= 80) {
+ recommendation = "You're highly suited for an AI career transition! Your current situation and skill set strongly align with AI content creation and education.";
+ } else if (score >= 60) {
+ recommendation = "You show good potential for an AI career shift. Consider building more skills while maintaining your current job.";
+ } else {
+ recommendation = "Start by exploring AI fundamentals and content creation as a side project before making a full transition.";
+ }
+
+ recommendationsElement.innerHTML = `

${recommendation}

`;
+ results.classList.remove('hidden');
+
+ // Smooth scroll to results
+ results.scrollIntoView({ behavior: 'smooth' });
+ });
+
+ // Add intersection observer for animation
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ });
+
+ // Observe all cards and sections
+ document.querySelectorAll('.card, section').forEach((el) => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(20px)';
+ el.style.transition = 'all 0.6s ease-out';
+ observer.observe(el);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #6366f1;
+ --secondary-color: #818cf8;
+ --text-color: #1f2937;
+ --background-color: #ffffff;
+ --accent-color: #c7d2fe;
+ }
+
+ * {
+ 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);
+ background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
+ }
+
+ /* Header & Navigation */
+ header {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 10px 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-size: 1.5rem;
+ font-weight: bold;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ color: var(--primary-color);
+ }
+
+ /* Hero Section */
+ .hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ background: radial-gradient(circle at 50% 50%, var(--accent-color) 0%, transparent 50%);
+ }
+
+ .hero 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;
+ }
+
+ /* Calculator Section */
+ .calculator {
+ max-width: 800px;
+ margin: 4rem auto;
+ padding: 2rem;
+ background: white;
+ border-radius: 20px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ }
+
+ .form-group {
+ margin-bottom: 2rem;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+ }
+
+ input[type="range"] {
+ width: 100%;
+ height: 6px;
+ background: var(--accent-color);
+ border-radius: 3px;
+ outline: none;
+ }
+
+ select {
+ width: 100%;
+ padding: 0.8rem;
+ border: 2px solid var(--accent-color);
+ border-radius: 8px;
+ background: white;
+ }
+
+ .checkbox-group {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ }
+
+ .calculate-btn {
+ width: 100%;
+ padding: 1rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ border: none;
+ border-radius: 8px;
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+ }
+
+ .calculate-btn:hover {
+ transform: translateY(-2px);
+ }
+
+ /* Results Section */
+ .results {
+ text-align: center;
+ padding: 2rem;
+ }
+
+ .score-circle {
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ margin: 2rem auto;
+ }
+
+ .score {
+ font-size: 3rem;
+ font-weight: bold;
+ }
+
+ /* Cards Section */
+ .cards-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 2rem;
+ }
+
+ .card {
+ background: white;
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .card:hover {
+ transform: translateY(-5px);
+ }
+
+ /* Footer */
+ footer {
+ background: white;
+ padding: 2rem;
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ text-align: center;
+ }
+
+ .footer-links {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ .footer-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .menu-toggle {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ cursor: pointer;
+ }
+
+ .menu-toggle span {
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ border-radius: 3px;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+ }
+
+ .hidden {
+ display: none;
+ }