commit fb6596511546ac90588564778eaf008c2aa159c3
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 22:42:19 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..2dbb430
--- /dev/null
+++ b/body.html
@@ -0,0 +1,67 @@
+<header>
+ <h1>PhD vs OF Career Calculator</h1>
+ <p class="tagline">Make an informed decision about your career path</p>
+</header>
+
+<main>
+ <section class="calculator-container">
+ <div class="input-section">
+ <h2>Current PhD Statistics</h2>
+ <div class="input-group">
+ <label for="yearsLeft">Years Left in PhD:</label>
+ <input type="number" id="yearsLeft" min="0" max="10" value="3">
+ </div>
+ <div class="input-group">
+ <label for="stipend">Annual Stipend ($):</label>
+ <input type="number" id="stipend" min="0" value="30000">
+ </div>
+ <div class="input-group">
+ <label for="satisfaction">Current Satisfaction (1-10):</label>
+ <input type="range" id="satisfaction" min="1" max="10" value="5">
+ <span id="satisfactionValue">5</span>
+ </div>
+ </div>
+
+ <div class="input-section">
+ <h2>Content Creation Potential</h2>
+ <div class="input-group">
+ <label for="followers">Current Social Media Followers:</label>
+ <input type="number" id="followers" min="0" value="1000">
+ </div>
+ <div class="input-group">
+ <label for="marketability">Marketability Score (1-10):</label>
+ <input type="range" id="marketability" min="1" max="10" value="5">
+ <span id="marketabilityValue">5</span>
+ </div>
+ <div class="input-group">
+ <label for="comfort">Comfort Level (1-10):</label>
+ <input type="range" id="comfort" min="1" max="10" value="5">
+ <span id="comfortValue">5</span>
+ </div>
+ </div>
+
+ <button id="calculateBtn" class="gradient-btn">Calculate Decision</button>
+
+ <div id="result" class="result-container hidden">
+ <h2>Analysis Results</h2>
+ <div class="gauge-container">
+ <div class="gauge">
+ <div class="gauge-fill"></div>
+ </div>
+ <p id="recommendationText"></p>
+ </div>
+ <div class="factors">
+ <h3>Key Factors:</h3>
+ <ul id="factorsList"></ul>
+ </div>
+ </div>
+ </section>
+
+ <section class="disclaimer">
+ <p>This tool is for entertainment purposes only. Career decisions should be made after careful consideration of all factors, including personal values, long-term goals, and consultation with mentors.</p>
+ </section>
+</main>
+
+<footer>
+ <p>Created with humor and empathy by Career Decision Tools</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..7399043
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,11 @@
+buildHtml
+baseUrl https://phdecide.scroll.pub
+metaTags
+editButton /edit.html
+title PhD vs OnlyFans Calculator - Make an Informed Career Decision
+description A professional decision-making tool to evaluate career paths between academic pursuits and content creation
+keywords PhD, career change, calculator, decision making, academic career, content creation
+author Career Decision Tools
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..a67ab03
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01XyM2ufg9vFPnzCvymDouY7",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a fun but professional decision-making tool website for this unique career choice question.\n\n---domain---\nphdecide.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://phdecide.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PhD vs OnlyFans Calculator - Make an Informed Career Decision\ndescription A professional decision-making tool to evaluate career paths between academic pursuits and content creation\nkeywords PhD, career change, calculator, decision making, academic career, content creation\nauthor Career Decision Tools\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>PhD vs OF Career Calculator</h1>\n <p class=\"tagline\">Make an informed decision about your career path</p>\n</header>\n\n<main>\n <section class=\"calculator-container\">\n <div class=\"input-section\">\n <h2>Current PhD Statistics</h2>\n <div class=\"input-group\">\n <label for=\"yearsLeft\">Years Left in PhD:</label>\n <input type=\"number\" id=\"yearsLeft\" min=\"0\" max=\"10\" value=\"3\">\n </div>\n <div class=\"input-group\">\n <label for=\"stipend\">Annual Stipend ($):</label>\n <input type=\"number\" id=\"stipend\" min=\"0\" value=\"30000\">\n </div>\n <div class=\"input-group\">\n <label for=\"satisfaction\">Current Satisfaction (1-10):</label>\n <input type=\"range\" id=\"satisfaction\" min=\"1\" max=\"10\" value=\"5\">\n <span id=\"satisfactionValue\">5</span>\n </div>\n </div>\n\n <div class=\"input-section\">\n <h2>Content Creation Potential</h2>\n <div class=\"input-group\">\n <label for=\"followers\">Current Social Media Followers:</label>\n <input type=\"number\" id=\"followers\" min=\"0\" value=\"1000\">\n </div>\n <div class=\"input-group\">\n <label for=\"marketability\">Marketability Score (1-10):</label>\n <input type=\"range\" id=\"marketability\" min=\"1\" max=\"10\" value=\"5\">\n <span id=\"marketabilityValue\">5</span>\n </div>\n <div class=\"input-group\">\n <label for=\"comfort\">Comfort Level (1-10):</label>\n <input type=\"range\" id=\"comfort\" min=\"1\" max=\"10\" value=\"5\">\n <span id=\"comfortValue\">5</span>\n </div>\n </div>\n\n <button id=\"calculateBtn\" class=\"gradient-btn\">Calculate Decision</button>\n\n <div id=\"result\" class=\"result-container hidden\">\n <h2>Analysis Results</h2>\n <div class=\"gauge-container\">\n <div class=\"gauge\">\n <div class=\"gauge-fill\"></div>\n </div>\n <p id=\"recommendationText\"></p>\n </div>\n <div class=\"factors\">\n <h3>Key Factors:</h3>\n <ul id=\"factorsList\"></ul>\n </div>\n </div>\n </section>\n\n <section class=\"disclaimer\">\n <p>This tool is for entertainment purposes only. Career decisions should be made after careful consideration of all factors, including personal values, long-term goals, and consultation with mentors.</p>\n </section>\n</main>\n\n<footer>\n <p>Created with humor and empathy by Career Decision Tools</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a8a4e6;\n --background-color: #f8f9fa;\n --text-color: #2d3436;\n --border-radius: 12px;\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 background: var(--background-color);\n color: var(--text-color);\n min-height: 100vh;\n padding: 2rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 3rem;\n}\n\nh1 {\n font-size: 2.5rem;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 0.5rem;\n}\n\n.tagline {\n color: #666;\n font-size: 1.2rem;\n}\n\n.calculator-container {\n max-width: 800px;\n margin: 0 auto;\n background: white;\n padding: 2rem;\n border-radius: var(--border-radius);\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n\n.input-section {\n margin-bottom: 2rem;\n padding: 1.5rem;\n background: #f8f9fa;\n border-radius: var(--border-radius);\n}\n\n.input-group {\n margin: 1rem 0;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\nlabel {\n flex: 1;\n font-weight: 500;\n}\n\ninput[type=\"number\"],\ninput[type=\"range\"] {\n flex: 2;\n padding: 0.5rem;\n border: 2px solid var(--secondary-color);\n border-radius: var(--border-radius);\n transition: border-color 0.3s;\n}\n\ninput[type=\"number\"]:focus,\ninput[type=\"range\"]:focus {\n outline: none;\n border-color: var(--primary-color);\n}\n\n.gradient-btn {\n display: block;\n width: 100%;\n padding: 1rem;\n margin: 2rem 0;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n color: white;\n border: none;\n border-radius: var(--border-radius);\n font-size: 1.2rem;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.gradient-btn:hover {\n transform: translateY(-2px);\n}\n\n.result-container {\n padding: 2rem;\n background: white;\n border-radius: var(--border-radius);\n opacity: 0;\n transform: translateY(20px);\n transition: all 0.5s;\n}\n\n.result-container.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.gauge-container {\n text-align: center;\n margin: 2rem 0;\n}\n\n.gauge {\n width: 200px;\n height: 100px;\n background: #eee;\n border-radius: 100px 100px 0 0;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n}\n\n.gauge-fill {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 0%;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n transition: height 1s ease-out;\n}\n\n.factors {\n margin-top: 2rem;\n}\n\n.factors ul {\n list-style: none;\n padding: 1rem;\n}\n\n.factors li {\n margin: 0.5rem 0;\n padding-left: 1.5rem;\n position: relative;\n}\n\n.factors li::before {\n content: \"•\";\n color: var(--primary-color);\n position: absolute;\n left: 0;\n}\n\n.disclaimer {\n max-width: 800px;\n margin: 2rem auto;\n padding: 1rem;\n font-size: 0.9rem;\n color: #666;\n text-align: center;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n margin-top: 3rem;\n color: #666;\n}\n\n@media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n \n .input-group {\n flex-direction: column;\n align-items: stretch;\n }\n \n label {\n margin-bottom: 0.5rem;\n }\n \n .calculator-container {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const rangeInputs = document.querySelectorAll('input[type=\"range\"]');\n const calculateBtn = document.getElementById('calculateBtn');\n const result = document.getElementById('result');\n \n // Update range input values\n rangeInputs.forEach(input => {\n const valueDisplay = document.getElementById(`${input.id}Value`);\n input.addEventListener('input', () => {\n valueDisplay.textContent = input.value;\n });\n });\n \n calculateBtn.addEventListener('click', calculateDecision);\n \n function calculateDecision() {\n const yearsLeft = parseInt(document.getElementById('yearsLeft').value);\n const stipend = parseInt(document.getElementById('stipend').value);\n const satisfaction = parseInt(document.getElementById('satisfaction').value);\n const followers = parseInt(document.getElementById('followers').value);\n const marketability = parseInt(document.getElementById('marketability').value);\n const comfort = parseInt(document.getElementById('comfort').value);\n \n // Calculate PhD score (0-100)\n const phdScore = calculatePhDScore(yearsLeft, stipend, satisfaction);\n \n // Calculate OF score (0-100)\n const ofScore = calculateOFScore(followers, marketability, comfort);\n \n // Calculate final recommendation\n const recommendationScore = (ofScore - phdScore + 100) / 2;\n \n displayResults(recommendationScore, phdScore, ofScore);\n }\n \n function calculatePhDScore(years, stipend, satisfaction) {\n const yearsFactor = Math.max(0, 100 - (years * 10));\n const stipendFactor = Math.min(100, (stipend / 50000) * 100);\n const satisfactionFactor = satisfaction * 10;\n \n return (yearsFactor + stipendFactor + satisfactionFactor) / 3;\n }\n \n function calculateOFScore(followers, marketability, comfort) {\n const followersFactor = Math.min(100, (followers / 10000) * 100);\n const marketabilityFactor = marketability * 10;\n const comfortFactor = comfort * 10;\n \n return (followersFactor + marketabilityFactor + comfortFactor) / 3;\n }\n \n function displayResults(score, phdScore, ofScore) {\n result.classList.remove('hidden');\n \n // Animate gauge fill\n const gaugeFill = document.querySelector('.gauge-fill');\n gaugeFill.style.height = `${score}%`;\n \n // Set recommendation text\n const recommendationText = document.getElementById('recommendationText');\n if (score < 40) {\n recommendationText.textContent = \"Stick with your PhD! The academic path looks promising for you.\";\n } else if (score < 60) {\n recommendationText.textContent = \"It's a close call! Consider exploring content creation as a side hustle while continuing your PhD.\";\n } else {\n recommendationText.textContent = \"The numbers suggest content creation might be your calling!\";\n }\n \n // Display factors\n const factorsList = document.getElementById('factorsList');\n factorsList.innerHTML = `\n <li>PhD Potential Score: ${phdScore.toFixed(1)}/100</li>\n <li>Content Creation Potential Score: ${ofScore.toFixed(1)}/100</li>\n <li>Years to Completion Impact: ${score < 50 ? 'Manageable' : 'Significant'}</li>\n <li>Financial Outlook: ${ofScore > phdScore ? 'Favors content creation' : 'Favors academia'}</li>\n `;\n \n // Smooth scroll to results\n result.scrollIntoView({ behavior: 'smooth' });\n }\n});\n\n---end---\n\nThis implementation creates a sophisticated yet playful decision-making tool that:\n\n1. Features a beautiful gradient-based design system\n2. Includes interactive sliders and inputs\n3. Provides real-time calculations\n4. Shows an animated gauge visualization\n5. Offers detailed factor analysis\n6. Is fully responsive\n7. Maintains professional tone while addressing a potentially controversial topic\n8. Includes appropriate disclaimers\n9. Uses modern CSS features like custom properties and gradients\n10. Implements smooth animations and transitions\n\nThe tool takes into account various factors from both career paths and provides a weighted recommendation while remaining respectful and professional. The design is clean and modern, with attention to accessibility and user experience."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 306,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3335
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7f4cc04
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# phdecide.scroll.pub
+Website generated by Claude from prompt: I want a website that will help decide if I should drop out of PhD program to do only Fans. So it should have some numerical tools and interactivity. Be creative
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..129efd9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const rangeInputs = document.querySelectorAll('input[type="range"]');
+ const calculateBtn = document.getElementById('calculateBtn');
+ const result = document.getElementById('result');
+
+ // Update range input values
+ rangeInputs.forEach(input => {
+ const valueDisplay = document.getElementById(`${input.id}Value`);
+ input.addEventListener('input', () => {
+ valueDisplay.textContent = input.value;
+ });
+ });
+
+ calculateBtn.addEventListener('click', calculateDecision);
+
+ function calculateDecision() {
+ const yearsLeft = parseInt(document.getElementById('yearsLeft').value);
+ const stipend = parseInt(document.getElementById('stipend').value);
+ const satisfaction = parseInt(document.getElementById('satisfaction').value);
+ const followers = parseInt(document.getElementById('followers').value);
+ const marketability = parseInt(document.getElementById('marketability').value);
+ const comfort = parseInt(document.getElementById('comfort').value);
+
+ // Calculate PhD score (0-100)
+ const phdScore = calculatePhDScore(yearsLeft, stipend, satisfaction);
+
+ // Calculate OF score (0-100)
+ const ofScore = calculateOFScore(followers, marketability, comfort);
+
+ // Calculate final recommendation
+ const recommendationScore = (ofScore - phdScore + 100) / 2;
+
+ displayResults(recommendationScore, phdScore, ofScore);
+ }
+
+ function calculatePhDScore(years, stipend, satisfaction) {
+ const yearsFactor = Math.max(0, 100 - (years * 10));
+ const stipendFactor = Math.min(100, (stipend / 50000) * 100);
+ const satisfactionFactor = satisfaction * 10;
+
+ return (yearsFactor + stipendFactor + satisfactionFactor) / 3;
+ }
+
+ function calculateOFScore(followers, marketability, comfort) {
+ const followersFactor = Math.min(100, (followers / 10000) * 100);
+ const marketabilityFactor = marketability * 10;
+ const comfortFactor = comfort * 10;
+
+ return (followersFactor + marketabilityFactor + comfortFactor) / 3;
+ }
+
+ function displayResults(score, phdScore, ofScore) {
+ result.classList.remove('hidden');
+
+ // Animate gauge fill
+ const gaugeFill = document.querySelector('.gauge-fill');
+ gaugeFill.style.height = `${score}%`;
+
+ // Set recommendation text
+ const recommendationText = document.getElementById('recommendationText');
+ if (score < 40) {
+ recommendationText.textContent = "Stick with your PhD! The academic path looks promising for you.";
+ } else if (score < 60) {
+ recommendationText.textContent = "It's a close call! Consider exploring content creation as a side hustle while continuing your PhD.";
+ } else {
+ recommendationText.textContent = "The numbers suggest content creation might be your calling!";
+ }
+
+ // Display factors
+ const factorsList = document.getElementById('factorsList');
+ factorsList.innerHTML = `
+ <li>PhD Potential Score: ${phdScore.toFixed(1)}/100</li>
+ <li>Content Creation Potential Score: ${ofScore.toFixed(1)}/100</li>
+ <li>Years to Completion Impact: ${score < 50 ? 'Manageable' : 'Significant'}</li>
+ <li>Financial Outlook: ${ofScore > phdScore ? 'Favors content creation' : 'Favors academia'}</li>
+ `;
+
+ // Smooth scroll to results
+ result.scrollIntoView({ behavior: 'smooth' });
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6b59986
--- /dev/null
+++ b/style.css
@@ -0,0 +1,201 @@
+:root {
+ --primary-color: #6c5ce7;
+ --secondary-color: #a8a4e6;
+ --background-color: #f8f9fa;
+ --text-color: #2d3436;
+ --border-radius: 12px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ background: var(--background-color);
+ color: var(--text-color);
+ min-height: 100vh;
+ padding: 2rem;
+}
+
+header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+h1 {
+ font-size: 2.5rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ margin-bottom: 0.5rem;
+}
+
+.tagline {
+ color: #666;
+ font-size: 1.2rem;
+}
+
+.calculator-container {
+ max-width: 800px;
+ margin: 0 auto;
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.input-section {
+ margin-bottom: 2rem;
+ padding: 1.5rem;
+ background: #f8f9fa;
+ border-radius: var(--border-radius);
+}
+
+.input-group {
+ margin: 1rem 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+label {
+ flex: 1;
+ font-weight: 500;
+}
+
+input[type="number"],
+input[type="range"] {
+ flex: 2;
+ padding: 0.5rem;
+ border: 2px solid var(--secondary-color);
+ border-radius: var(--border-radius);
+ transition: border-color 0.3s;
+}
+
+input[type="number"]:focus,
+input[type="range"]:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.gradient-btn {
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ margin: 2rem 0;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ border: none;
+ border-radius: var(--border-radius);
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: transform 0.3s;
+}
+
+.gradient-btn:hover {
+ transform: translateY(-2px);
+}
+
+.result-container {
+ padding: 2rem;
+ background: white;
+ border-radius: var(--border-radius);
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.5s;
+}
+
+.result-container.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.gauge-container {
+ text-align: center;
+ margin: 2rem 0;
+}
+
+.gauge {
+ width: 200px;
+ height: 100px;
+ background: #eee;
+ border-radius: 100px 100px 0 0;
+ margin: 0 auto;
+ position: relative;
+ overflow: hidden;
+}
+
+.gauge-fill {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 0%;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ transition: height 1s ease-out;
+}
+
+.factors {
+ margin-top: 2rem;
+}
+
+.factors ul {
+ list-style: none;
+ padding: 1rem;
+}
+
+.factors li {
+ margin: 0.5rem 0;
+ padding-left: 1.5rem;
+ position: relative;
+}
+
+.factors li::before {
+ content: "•";
+ color: var(--primary-color);
+ position: absolute;
+ left: 0;
+}
+
+.disclaimer {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 1rem;
+ font-size: 0.9rem;
+ color: #666;
+ text-align: center;
+}
+
+.hidden {
+ display: none;
+}
+
+footer {
+ text-align: center;
+ margin-top: 3rem;
+ color: #666;
+}
+
+@media (max-width: 768px) {
+ body {
+ padding: 1rem;
+ }
+
+ .input-group {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ label {
+ margin-bottom: 0.5rem;
+ }
+
+ .calculator-container {
+ padding: 1rem;
+ }
+}