commit cac0664740cd773420dde9aaf24100845615149a
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 08:16:34 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8c068e7
--- /dev/null
+++ b/body.html
@@ -0,0 +1,87 @@
+<header>
+ <nav>
+ <ul>
+ <li><a href="#compare">Compare</a></li>
+ <li><a href="#calculator">Calculator</a></li>
+ <li><a href="#resources">Resources</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>PhD or Work?</h1>
+ <p>Make an informed decision about your future career path</p>
+ </section>
+
+ <section id="compare" class="comparison">
+ <h2>Compare Your Options</h2>
+ <div class="cards">
+ <div class="card phd">
+ <h3>Pursuing a PhD</h3>
+ <ul>
+ <li>Advanced research skills</li>
+ <li>Academic career path</li>
+ <li>3-6 years commitment</li>
+ <li>Funding/stipend options</li>
+ <li>Research contribution</li>
+ </ul>
+ </div>
+ <div class="card work">
+ <h3>Starting Work</h3>
+ <ul>
+ <li>Immediate income</li>
+ <li>Industry experience</li>
+ <li>Career progression</li>
+ <li>Practical skills</li>
+ <li>Work-life balance</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <section id="calculator" class="decision-tool">
+ <h2>Decision Calculator</h2>
+ <div class="calculator">
+ <div class="factors">
+ <h3>Rate these factors (1-5):</h3>
+ <div class="factor-input">
+ <label for="research">Interest in Research</label>
+ <input type="range" id="research" min="1" max="5" value="3">
+ </div>
+ <div class="factor-input">
+ <label for="income">Immediate Income Need</label>
+ <input type="range" id="income" min="1" max="5" value="3">
+ </div>
+ <div class="factor-input">
+ <label for="academia">Interest in Academia</label>
+ <input type="range" id="academia" min="1" max="5" value="3">
+ </div>
+ <button id="calculate">Calculate Recommendation</button>
+ </div>
+ <div id="result" class="result"></div>
+ </div>
+ </section>
+
+ <section id="resources" class="resources">
+ <h2>Additional Resources</h2>
+ <div class="resource-grid">
+ <article>
+ <h3>Talk to Mentors</h3>
+ <p>Seek advice from professors and industry professionals</p>
+ </article>
+ <article>
+ <h3>Research Programs</h3>
+ <p>Explore PhD programs and their requirements</p>
+ </article>
+ <article>
+ <h3>Industry Insights</h3>
+ <p>Learn about career opportunities in your field</p>
+ </article>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Created to help students make informed career decisions</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..cf1a0f0
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://phd-or-work.scroll.pub
+metaTags
+editButton /edit.html
+title Career Crossroads: PhD vs Work Decision Helper
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..928ad5e
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Lk8pqTkoYR67pmc8dScgZN",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a thoughtful career decision website with an elegant design.\n\n---domain---\nphd-or-work.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://phd-or-work.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Career Crossroads: PhD vs Work Decision Helper\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <ul>\n <li><a href=\"#compare\">Compare</a></li>\n <li><a href=\"#calculator\">Calculator</a></li>\n <li><a href=\"#resources\">Resources</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>PhD or Work?</h1>\n <p>Make an informed decision about your future career path</p>\n </section>\n\n <section id=\"compare\" class=\"comparison\">\n <h2>Compare Your Options</h2>\n <div class=\"cards\">\n <div class=\"card phd\">\n <h3>Pursuing a PhD</h3>\n <ul>\n <li>Advanced research skills</li>\n <li>Academic career path</li>\n <li>3-6 years commitment</li>\n <li>Funding/stipend options</li>\n <li>Research contribution</li>\n </ul>\n </div>\n <div class=\"card work\">\n <h3>Starting Work</h3>\n <ul>\n <li>Immediate income</li>\n <li>Industry experience</li>\n <li>Career progression</li>\n <li>Practical skills</li>\n <li>Work-life balance</li>\n </ul>\n </div>\n </div>\n </section>\n\n <section id=\"calculator\" class=\"decision-tool\">\n <h2>Decision Calculator</h2>\n <div class=\"calculator\">\n <div class=\"factors\">\n <h3>Rate these factors (1-5):</h3>\n <div class=\"factor-input\">\n <label for=\"research\">Interest in Research</label>\n <input type=\"range\" id=\"research\" min=\"1\" max=\"5\" value=\"3\">\n </div>\n <div class=\"factor-input\">\n <label for=\"income\">Immediate Income Need</label>\n <input type=\"range\" id=\"income\" min=\"1\" max=\"5\" value=\"3\">\n </div>\n <div class=\"factor-input\">\n <label for=\"academia\">Interest in Academia</label>\n <input type=\"range\" id=\"academia\" min=\"1\" max=\"5\" value=\"3\">\n </div>\n <button id=\"calculate\">Calculate Recommendation</button>\n </div>\n <div id=\"result\" class=\"result\"></div>\n </div>\n </section>\n\n <section id=\"resources\" class=\"resources\">\n <h2>Additional Resources</h2>\n <div class=\"resource-grid\">\n <article>\n <h3>Talk to Mentors</h3>\n <p>Seek advice from professors and industry professionals</p>\n </article>\n <article>\n <h3>Research Programs</h3>\n <p>Explore PhD programs and their requirements</p>\n </article>\n <article>\n <h3>Industry Insights</h3>\n <p>Learn about career opportunities in your field</p>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Created to help students make informed career decisions</p>\n</footer>\n\n---style.css---\n:root {\n --primary: #2a4365;\n --secondary: #4299e1;\n --background: #f7fafc;\n --text: #2d3748;\n --card-bg: #ffffff;\n --accent: #805ad5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav ul {\n display: flex;\n justify-content: center;\n list-style: none;\n gap: 2rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s;\n}\n\nnav a:hover {\n color: var(--secondary);\n}\n\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 background: linear-gradient(135deg, var(--primary), var(--accent));\n color: white;\n padding: 2rem;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.hero p {\n font-size: 1.5rem;\n opacity: 0.9;\n}\n\nsection {\n padding: 5rem 2rem;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 3rem;\n color: var(--primary);\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card h3 {\n color: var(--primary);\n margin-bottom: 1rem;\n}\n\n.card ul {\n list-style: none;\n}\n\n.card li {\n margin-bottom: 0.5rem;\n padding-left: 1.5rem;\n position: relative;\n}\n\n.card li::before {\n content: \"→\";\n position: absolute;\n left: 0;\n color: var(--accent);\n}\n\n.calculator {\n max-width: 600px;\n margin: 0 auto;\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.factor-input {\n margin-bottom: 1.5rem;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n margin: 0.5rem 0;\n}\n\nbutton {\n background: var(--accent);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n cursor: pointer;\n width: 100%;\n font-size: 1rem;\n transition: background 0.3s;\n}\n\nbutton:hover {\n background: var(--primary);\n}\n\n.result {\n margin-top: 2rem;\n padding: 1rem;\n border-radius: 0.5rem;\n text-align: center;\n}\n\n.resource-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.resource-grid article {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nfooter {\n background: var(--primary);\n color: white;\n text-align: center;\n padding: 2rem;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .hero p {\n font-size: 1.2rem;\n }\n \n section {\n padding: 3rem 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const calculateBtn = document.getElementById('calculate');\n const resultDiv = document.getElementById('result');\n \n calculateBtn.addEventListener('click', function() {\n const research = parseInt(document.getElementById('research').value);\n const income = parseInt(document.getElementById('income').value);\n const academia = parseInt(document.getElementById('academia').value);\n \n const phdScore = (research * 0.4) + (academia * 0.4) + ((6 - income) * 0.2);\n const workScore = (income * 0.4) + ((6 - academia) * 0.3) + ((6 - research) * 0.3);\n \n let recommendation = '';\n if (phdScore > workScore) {\n recommendation = `\n <h3 style=\"color: var(--accent)\">PhD Path Recommended</h3>\n <p>Based on your preferences, pursuing a PhD might be a better fit for you.</p>\n <p>PhD Score: ${phdScore.toFixed(1)} | Work Score: ${workScore.toFixed(1)}</p>\n `;\n } else {\n recommendation = `\n <h3 style=\"color: var(--primary)\">Work Path Recommended</h3>\n <p>Based on your preferences, entering the workforce might be a better fit for you.</p>\n <p>Work Score: ${workScore.toFixed(1)} | PhD Score: ${phdScore.toFixed(1)}</p>\n `;\n }\n \n resultDiv.innerHTML = recommendation;\n resultDiv.style.animation = 'fadeIn 0.5s ease-out';\n });\n\n // Smooth scrolling 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 block: 'start'\n });\n });\n });\n});\n\n---end---\n\nThis website features:\n1. A modern, clean design with smooth animations\n2. An interactive decision calculator\n3. Comparison cards for both paths\n4. Mobile-responsive layout\n5. Smooth scrolling navigation\n6. Accessible form controls\n7. Beautiful gradient backgrounds\n8. Card hover effects\n9. Semantic HTML structure\n10. Clear typography and spacing\n11. Professional color scheme\n12. Interactive elements with visual feedback\n\nThe domain name \"phd-or-work.scroll.pub\" is:\n- Descriptive of the purpose\n- Easy to remember\n- Professional\n- Clear and straightforward\n- Relevant to the target audience"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 284,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2931
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..9d0b177
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# phd-or-work.scroll.pub
+Website generated by Claude from prompt: I want to decide whether to read my PHD or go to work.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cda42e9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const calculateBtn = document.getElementById('calculate');
+ const resultDiv = document.getElementById('result');
+
+ calculateBtn.addEventListener('click', function() {
+ const research = parseInt(document.getElementById('research').value);
+ const income = parseInt(document.getElementById('income').value);
+ const academia = parseInt(document.getElementById('academia').value);
+
+ const phdScore = (research * 0.4) + (academia * 0.4) + ((6 - income) * 0.2);
+ const workScore = (income * 0.4) + ((6 - academia) * 0.3) + ((6 - research) * 0.3);
+
+ let recommendation = '';
+ if (phdScore > workScore) {
+ recommendation = `
+ <h3 style="color: var(--accent)">PhD Path Recommended</h3>
+ <p>Based on your preferences, pursuing a PhD might be a better fit for you.</p>
+ <p>PhD Score: ${phdScore.toFixed(1)} | Work Score: ${workScore.toFixed(1)}</p>
+ `;
+ } else {
+ recommendation = `
+ <h3 style="color: var(--primary)">Work Path Recommended</h3>
+ <p>Based on your preferences, entering the workforce might be a better fit for you.</p>
+ <p>Work Score: ${workScore.toFixed(1)} | PhD Score: ${phdScore.toFixed(1)}</p>
+ `;
+ }
+
+ resultDiv.innerHTML = recommendation;
+ resultDiv.style.animation = 'fadeIn 0.5s ease-out';
+ });
+
+ // Smooth scrolling 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',
+ block: 'start'
+ });
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..61ce31b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,205 @@
+:root {
+ --primary: #2a4365;
+ --secondary: #4299e1;
+ --background: #f7fafc;
+ --text: #2d3748;
+ --card-bg: #ffffff;
+ --accent: #805ad5;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--background);
+}
+
+header {
+ background: var(--primary);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 100;
+}
+
+nav ul {
+ display: flex;
+ justify-content: center;
+ list-style: none;
+ gap: 2rem;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+ font-weight: 500;
+ transition: color 0.3s;
+}
+
+nav a:hover {
+ color: var(--secondary);
+}
+
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, var(--primary), var(--accent));
+ color: white;
+ padding: 2rem;
+}
+
+.hero h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.hero p {
+ font-size: 1.5rem;
+ opacity: 0.9;
+}
+
+section {
+ padding: 5rem 2rem;
+}
+
+h2 {
+ text-align: center;
+ margin-bottom: 3rem;
+ color: var(--primary);
+}
+
+.cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.card {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.card h3 {
+ color: var(--primary);
+ margin-bottom: 1rem;
+}
+
+.card ul {
+ list-style: none;
+}
+
+.card li {
+ margin-bottom: 0.5rem;
+ padding-left: 1.5rem;
+ position: relative;
+}
+
+.card li::before {
+ content: "→";
+ position: absolute;
+ left: 0;
+ color: var(--accent);
+}
+
+.calculator {
+ max-width: 600px;
+ margin: 0 auto;
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.factor-input {
+ margin-bottom: 1.5rem;
+}
+
+input[type="range"] {
+ width: 100%;
+ margin: 0.5rem 0;
+}
+
+button {
+ background: var(--accent);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ width: 100%;
+ font-size: 1rem;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background: var(--primary);
+}
+
+.result {
+ margin-top: 2rem;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ text-align: center;
+}
+
+.resource-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.resource-grid article {
+ background: var(--card-bg);
+ padding: 2rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+footer {
+ background: var(--primary);
+ color: white;
+ text-align: center;
+ padding: 2rem;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .hero p {
+ font-size: 1.2rem;
+ }
+
+ section {
+ padding: 3rem 1rem;
+ }
+}