commit 895677c33b267dd4e16854a0f2d6c1dd92d0b2a9
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 02:25:42 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..15d3fda
--- /dev/null
+++ b/body.html
@@ -0,0 +1,76 @@
+<header>
+ <h1>Academic to Creator Career Calculator</h1>
+ <p class="tagline">Make an informed decision about your career path</p>
+</header>
+
+<main>
+ <section id="calculator">
+ <h2>Financial Comparison Tool</h2>
+ <div class="calculator-grid">
+ <div class="academic-side">
+ <h3>PhD Path</h3>
+ <div class="input-group">
+ <label for="stipend">Annual Stipend ($)</label>
+ <input type="number" id="stipend" min="0" value="30000">
+
+ <label for="years-remaining">Years Until Completion</label>
+ <input type="number" id="years-remaining" min="0" max="10" value="3">
+
+ <label for="post-phd-salary">Expected Post-PhD Salary ($)</label>
+ <input type="number" id="post-phd-salary" min="0" value="85000">
+ </div>
+ </div>
+
+ <div class="creator-side">
+ <h3>Creator Path</h3>
+ <div class="input-group">
+ <label for="expected-subs">Expected Monthly Subscribers</label>
+ <input type="number" id="expected-subs" min="0" value="100">
+
+ <label for="sub-price">Subscription Price ($)</label>
+ <input type="number" id="sub-price" min="0" value="9.99">
+
+ <label for="platform-cut">Platform Commission (%)</label>
+ <input type="number" id="platform-cut" min="0" max="100" value="20">
+ </div>
+ </div>
+ </div>
+
+ <button id="calculate" class="cta-button">Calculate Potential Earnings</button>
+
+ <div id="results" class="hidden">
+ <h3>5-Year Projection</h3>
+ <div class="results-grid">
+ <div id="phd-projection"></div>
+ <div id="creator-projection"></div>
+ </div>
+ <div id="recommendation"></div>
+ </div>
+ </section>
+
+ <section id="considerations">
+ <h2>Other Factors to Consider</h2>
+ <div class="factors-grid">
+ <div class="factor">
+ <h3>Career Longevity</h3>
+ <p>Academic careers can span decades, while creator careers may have different dynamics.</p>
+ </div>
+ <div class="factor">
+ <h3>Work-Life Balance</h3>
+ <p>Consider schedule flexibility and personal time management in both paths.</p>
+ </div>
+ <div class="factor">
+ <h3>Professional Development</h3>
+ <p>Each path offers unique skills and networking opportunities.</p>
+ </div>
+ <div class="factor">
+ <h3>Personal Satisfaction</h3>
+ <p>Consider which path aligns better with your long-term goals and values.</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>This is a decision-making tool for educational purposes only. Please consider all factors carefully before making career decisions.</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..b537493
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://phd-pivot.scroll.pub
+metaTags
+editButton /edit.html
+title Career Pivot Calculator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..2866081
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Vbe21ZiyYfbjX9dX3vtzfz",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a professional yet playful website to help with this unique career decision. Here's a memorable domain name that's subtle yet relevant:\n\n---domain---\nphd-pivot.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://phd-pivot.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Career Pivot Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Academic to Creator Career Calculator</h1>\n <p class=\"tagline\">Make an informed decision about your career path</p>\n</header>\n\n<main>\n <section id=\"calculator\">\n <h2>Financial Comparison Tool</h2>\n <div class=\"calculator-grid\">\n <div class=\"academic-side\">\n <h3>PhD Path</h3>\n <div class=\"input-group\">\n <label for=\"stipend\">Annual Stipend ($)</label>\n <input type=\"number\" id=\"stipend\" min=\"0\" value=\"30000\">\n \n <label for=\"years-remaining\">Years Until Completion</label>\n <input type=\"number\" id=\"years-remaining\" min=\"0\" max=\"10\" value=\"3\">\n \n <label for=\"post-phd-salary\">Expected Post-PhD Salary ($)</label>\n <input type=\"number\" id=\"post-phd-salary\" min=\"0\" value=\"85000\">\n </div>\n </div>\n \n <div class=\"creator-side\">\n <h3>Creator Path</h3>\n <div class=\"input-group\">\n <label for=\"expected-subs\">Expected Monthly Subscribers</label>\n <input type=\"number\" id=\"expected-subs\" min=\"0\" value=\"100\">\n \n <label for=\"sub-price\">Subscription Price ($)</label>\n <input type=\"number\" id=\"sub-price\" min=\"0\" value=\"9.99\">\n \n <label for=\"platform-cut\">Platform Commission (%)</label>\n <input type=\"number\" id=\"platform-cut\" min=\"0\" max=\"100\" value=\"20\">\n </div>\n </div>\n </div>\n \n <button id=\"calculate\" class=\"cta-button\">Calculate Potential Earnings</button>\n \n <div id=\"results\" class=\"hidden\">\n <h3>5-Year Projection</h3>\n <div class=\"results-grid\">\n <div id=\"phd-projection\"></div>\n <div id=\"creator-projection\"></div>\n </div>\n <div id=\"recommendation\"></div>\n </div>\n </section>\n\n <section id=\"considerations\">\n <h2>Other Factors to Consider</h2>\n <div class=\"factors-grid\">\n <div class=\"factor\">\n <h3>Career Longevity</h3>\n <p>Academic careers can span decades, while creator careers may have different dynamics.</p>\n </div>\n <div class=\"factor\">\n <h3>Work-Life Balance</h3>\n <p>Consider schedule flexibility and personal time management in both paths.</p>\n </div>\n <div class=\"factor\">\n <h3>Professional Development</h3>\n <p>Each path offers unique skills and networking opportunities.</p>\n </div>\n <div class=\"factor\">\n <h3>Personal Satisfaction</h3>\n <p>Consider which path aligns better with your long-term goals and values.</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>This is a decision-making tool for educational purposes only. Please consider all factors carefully before making career decisions.</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6b4de6;\n --secondary-color: #ff6b9d;\n --background: #f8f9ff;\n --text-color: #2c3e50;\n --border-radius: 12px;\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: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background);\n padding: 20px;\n}\n\nheader {\n text-align: center;\n margin-bottom: 3rem;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n border-radius: var(--border-radius);\n box-shadow: 0 4px 20px rgba(107, 77, 230, 0.15);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\n.calculator-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.input-group {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nlabel {\n font-weight: 600;\n margin-bottom: 0.25rem;\n}\n\ninput {\n padding: 0.8rem;\n border: 2px solid #e0e0e0;\n border-radius: var(--border-radius);\n font-size: 1rem;\n transition: var(--transition);\n}\n\ninput:focus {\n border-color: var(--primary-color);\n outline: none;\n box-shadow: 0 0 0 3px rgba(107, 77, 230, 0.1);\n}\n\n.cta-button {\n display: block;\n width: 100%;\n max-width: 400px;\n margin: 2rem auto;\n padding: 1rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n font-size: 1.1rem;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(107, 77, 230, 0.2);\n}\n\n.results-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.factors-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.factor {\n background: white;\n padding: 1.5rem;\n border-radius: var(--border-radius);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n transition: var(--transition);\n}\n\n.factor:hover {\n transform: translateY(-5px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n margin-top: 4rem;\n text-align: center;\n padding: 2rem;\n border-top: 1px solid #e0e0e0;\n}\n\n@media (max-width: 768px) {\n .calculator-grid {\n grid-template-columns: 1fr;\n }\n \n .results-grid {\n grid-template-columns: 1fr;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const calculateButton = document.getElementById('calculate');\n const resultsDiv = document.getElementById('results');\n \n calculateButton.addEventListener('click', () => {\n // Get PhD path inputs\n const stipend = parseFloat(document.getElementById('stipend').value);\n const yearsRemaining = parseFloat(document.getElementById('years-remaining').value);\n const postPhdSalary = parseFloat(document.getElementById('post-phd-salary').value);\n \n // Get creator path inputs\n const expectedSubs = parseFloat(document.getElementById('expected-subs').value);\n const subPrice = parseFloat(document.getElementById('sub-price').value);\n const platformCut = parseFloat(document.getElementById('platform-cut').value) / 100;\n \n // Calculate 5-year projections\n const phdProjection = calculatePhdProjection(stipend, yearsRemaining, postPhdSalary);\n const creatorProjection = calculateCreatorProjection(expectedSubs, subPrice, platformCut);\n \n // Display results\n displayResults(phdProjection, creatorProjection);\n resultsDiv.classList.remove('hidden');\n });\n \n function calculatePhdProjection(stipend, yearsRemaining, postPhdSalary) {\n let total = 0;\n for (let year = 1; year <= 5; year++) {\n if (year <= yearsRemaining) {\n total += stipend;\n } else {\n total += postPhdSalary;\n }\n }\n return total;\n }\n \n function calculateCreatorProjection(subs, price, platformCut) {\n const monthlyRevenue = subs * price * (1 - platformCut);\n const yearlyRevenue = monthlyRevenue * 12;\n // Assume 20% subscriber growth each year\n return Array(5).fill(0).reduce((total, _, index) => {\n return total + yearlyRevenue * Math.pow(1.2, index);\n }, 0);\n }\n \n function displayResults(phdTotal, creatorTotal) {\n const phdDiv = document.getElementById('phd-projection');\n const creatorDiv = document.getElementById('creator-projection');\n const recommendationDiv = document.getElementById('recommendation');\n \n phdDiv.innerHTML = `\n <h4>PhD Path Total:</h4>\n <p>$${phdTotal.toLocaleString()}</p>\n `;\n \n creatorDiv.innerHTML = `\n <h4>Creator Path Total:</h4>\n <p>$${creatorTotal.toLocaleString()}</p>\n `;\n \n const difference = creatorTotal - phdTotal;\n const recommendation = difference > 0 \n ? 'Based purely on financial projections, the creator path shows higher earning potential.'\n : 'Based purely on financial projections, completing your PhD shows higher earning potential.';\n \n recommendationDiv.innerHTML = `\n <p class=\"recommendation\">${recommendation}</p>\n <p class=\"disclaimer\">Remember to consider non-financial factors in your decision.</p>\n `;\n }\n});\n\n---end---\n\nThis website provides a sophisticated yet user-friendly tool for comparing academic and creator career paths. It features:\n\n1. Interactive financial calculator\n2. 5-year earnings projections\n3. Consideration of multiple factors\n4. Beautiful gradient header\n5. Responsive design\n6. Smooth animations and transitions\n7. Professional look and feel\n8. Clear data visualization\n9. Thoughtful UX/UI design\n10. Helpful recommendations\n\nThe design is modern and professional while maintaining accessibility and usability. The color scheme is engaging but not overwhelming, and the layout adjusts seamlessly for mobile devices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 354,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2964
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..42345f5
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# phd-pivot.scroll.pub
+Website generated by Claude from prompt: Tôi muốn có một trang web giúp quyết định liệu tôi có nên bỏ chương trình tiến sĩ để làm OnlyFans hay không. Web cần có một số công cụ tính toán và tính tương tác. Hãy sáng tạo.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b5f4e12
--- /dev/null
+++ b/script.js
@@ -0,0 +1,71 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const calculateButton = document.getElementById('calculate');
+ const resultsDiv = document.getElementById('results');
+
+ calculateButton.addEventListener('click', () => {
+ // Get PhD path inputs
+ const stipend = parseFloat(document.getElementById('stipend').value);
+ const yearsRemaining = parseFloat(document.getElementById('years-remaining').value);
+ const postPhdSalary = parseFloat(document.getElementById('post-phd-salary').value);
+
+ // Get creator path inputs
+ const expectedSubs = parseFloat(document.getElementById('expected-subs').value);
+ const subPrice = parseFloat(document.getElementById('sub-price').value);
+ const platformCut = parseFloat(document.getElementById('platform-cut').value) / 100;
+
+ // Calculate 5-year projections
+ const phdProjection = calculatePhdProjection(stipend, yearsRemaining, postPhdSalary);
+ const creatorProjection = calculateCreatorProjection(expectedSubs, subPrice, platformCut);
+
+ // Display results
+ displayResults(phdProjection, creatorProjection);
+ resultsDiv.classList.remove('hidden');
+ });
+
+ function calculatePhdProjection(stipend, yearsRemaining, postPhdSalary) {
+ let total = 0;
+ for (let year = 1; year <= 5; year++) {
+ if (year <= yearsRemaining) {
+ total += stipend;
+ } else {
+ total += postPhdSalary;
+ }
+ }
+ return total;
+ }
+
+ function calculateCreatorProjection(subs, price, platformCut) {
+ const monthlyRevenue = subs * price * (1 - platformCut);
+ const yearlyRevenue = monthlyRevenue * 12;
+ // Assume 20% subscriber growth each year
+ return Array(5).fill(0).reduce((total, _, index) => {
+ return total + yearlyRevenue * Math.pow(1.2, index);
+ }, 0);
+ }
+
+ function displayResults(phdTotal, creatorTotal) {
+ const phdDiv = document.getElementById('phd-projection');
+ const creatorDiv = document.getElementById('creator-projection');
+ const recommendationDiv = document.getElementById('recommendation');
+
+ phdDiv.innerHTML = `
+ <h4>PhD Path Total:</h4>
+ <p>$${phdTotal.toLocaleString()}</p>
+ `;
+
+ creatorDiv.innerHTML = `
+ <h4>Creator Path Total:</h4>
+ <p>$${creatorTotal.toLocaleString()}</p>
+ `;
+
+ const difference = creatorTotal - phdTotal;
+ const recommendation = difference > 0
+ ? 'Based purely on financial projections, the creator path shows higher earning potential.'
+ : 'Based purely on financial projections, completing your PhD shows higher earning potential.';
+
+ recommendationDiv.innerHTML = `
+ <p class="recommendation">${recommendation}</p>
+ <p class="disclaimer">Remember to consider non-financial factors in your decision.</p>
+ `;
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ee28cc7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,146 @@
+:root {
+ --primary-color: #6b4de6;
+ --secondary-color: #ff6b9d;
+ --background: #f8f9ff;
+ --text-color: #2c3e50;
+ --border-radius: 12px;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--background);
+ padding: 20px;
+}
+
+header {
+ text-align: center;
+ margin-bottom: 3rem;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 20px rgba(107, 77, 230, 0.15);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+.calculator-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ margin-bottom: 2rem;
+}
+
+.input-group {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+label {
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
+
+input {
+ padding: 0.8rem;
+ border: 2px solid #e0e0e0;
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+input:focus {
+ border-color: var(--primary-color);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(107, 77, 230, 0.1);
+}
+
+.cta-button {
+ display: block;
+ width: 100%;
+ max-width: 400px;
+ margin: 2rem auto;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--border-radius);
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.cta-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(107, 77, 230, 0.2);
+}
+
+.results-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.factors-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.factor {
+ background: white;
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+ transition: var(--transition);
+}
+
+.factor:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.hidden {
+ display: none;
+}
+
+footer {
+ margin-top: 4rem;
+ text-align: center;
+ padding: 2rem;
+ border-top: 1px solid #e0e0e0;
+}
+
+@media (max-width: 768px) {
+ .calculator-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .results-grid {
+ grid-template-columns: 1fr;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+}