Last 10 Commits for phdfinder.scroll.pub

commit fe2645700b5c12c8c58357687b3c8da05e690923 Author: root <root@hub.scroll.pub> Date: 2024-12-28 15:34:54 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..6afcdff --- /dev/null +++ b/body.html @@ -0,0 +1,79 @@ +<header> + <nav> + <div class="logo">PhD Finder</div> + <div class="nav-links"> + <a href="#advisor">Advisor</a> + <a href="#fields">Fields</a> + <a href="#universities">Universities</a> + </div> + </nav> +</header> + +<main> + <section id="hero"> + <h1>Find Your Research Path</h1> + <p>Discover your ideal PhD research field in Japanese universities through our interactive tool</p> + </section> + + <section id="advisor" class="glass-panel"> + <h2>Research Field Advisor</h2> + <div class="criteria-container"> + <div class="criteria"> + <h3>Rate Your Interests (1-10)</h3> + <div class="slider-group"> + <label>Medical Imaging Recognition + <input type="range" min="1" max="10" value="5" class="slider" id="imaging"> + <span class="value">5</span> + </label> + <label>Complex System Studies + <input type="range" min="1" max="10" value="5" class="slider" id="complex"> + <span class="value">5</span> + </label> + <label>System Simulation + <input type="range" min="1" max="10" value="5" class="slider" id="simulation"> + <span class="value">5</span> + </label> + <label>Medical Aid Engineering + <input type="range" min="1" max="10" value="5" class="slider" id="medical"> + <span class="value">5</span> + </label> + </div> + </div> + <button id="analyze" class="glow-button">Analyze Preferences</button> + </div> + <div id="result" class="result-container"></div> + </section> + + <section id="fields" class="glass-panel"> + <h2>Research Fields Overview</h2> + <div class="fields-grid"> + <div class="field-card"> + <h3>Medical Imaging Recognition</h3> + <p>Focus on AI-powered medical image analysis and diagnostic tools</p> + </div> + <div class="field-card"> + <h3>Complex System Studies</h3> + <p>Research on interconnected systems and emergent behaviors</p> + </div> + <div class="field-card"> + <h3>System Simulation</h3> + <p>Development of computational models for system behavior prediction</p> + </div> + <div class="field-card"> + <h3>Medical Aid Engineering</h3> + <p>Creating innovative solutions for healthcare accessibility</p> + </div> + </div> + </section> + + <section id="universities" class="glass-panel"> + <h2>Featured Universities</h2> + <div class="university-list" id="universityList"> +  + </div> + </section> +</main> + +<footer> + <p>PhD Finder | Helping researchers find their path</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..a7bc409 --- /dev/null +++ b/index.scroll @@ -0,0 +1,10 @@ +buildHtml +baseUrl https://phdfinder.scroll.pub +metaTags + description "Find your ideal PhD research field in Japanese universities through an interactive decision-making tool" + keywords "PhD research, Japanese universities, academic career, research field selector, graduate studies" +editButton /edit.html +title PhD Research Field Advisor +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..4ce7480 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_011Fo5UeXHbMxhnpaQpUzV59", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a PhD research field advisor website. For the domain, I suggest:\n\n---domain---\nphdfinder.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://phdfinder.scroll.pub\nmetaTags\n description \"Find your ideal PhD research field in Japanese universities through an interactive decision-making tool\"\n keywords \"PhD research, Japanese universities, academic career, research field selector, graduate studies\"\neditButton /edit.html\ntitle PhD Research Field Advisor\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">PhD Finder</div>\n <div class=\"nav-links\">\n <a href=\"#advisor\">Advisor</a>\n <a href=\"#fields\">Fields</a>\n <a href=\"#universities\">Universities</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\">\n <h1>Find Your Research Path</h1>\n <p>Discover your ideal PhD research field in Japanese universities through our interactive tool</p>\n </section>\n\n <section id=\"advisor\" class=\"glass-panel\">\n <h2>Research Field Advisor</h2>\n <div class=\"criteria-container\">\n <div class=\"criteria\">\n <h3>Rate Your Interests (1-10)</h3>\n <div class=\"slider-group\">\n <label>Medical Imaging Recognition\n <input type=\"range\" min=\"1\" max=\"10\" value=\"5\" class=\"slider\" id=\"imaging\">\n <span class=\"value\">5</span>\n </label>\n <label>Complex System Studies\n <input type=\"range\" min=\"1\" max=\"10\" value=\"5\" class=\"slider\" id=\"complex\">\n <span class=\"value\">5</span>\n </label>\n <label>System Simulation\n <input type=\"range\" min=\"1\" max=\"10\" value=\"5\" class=\"slider\" id=\"simulation\">\n <span class=\"value\">5</span>\n </label>\n <label>Medical Aid Engineering\n <input type=\"range\" min=\"1\" max=\"10\" value=\"5\" class=\"slider\" id=\"medical\">\n <span class=\"value\">5</span>\n </label>\n </div>\n </div>\n <button id=\"analyze\" class=\"glow-button\">Analyze Preferences</button>\n </div>\n <div id=\"result\" class=\"result-container\"></div>\n </section>\n\n <section id=\"fields\" class=\"glass-panel\">\n <h2>Research Fields Overview</h2>\n <div class=\"fields-grid\">\n <div class=\"field-card\">\n <h3>Medical Imaging Recognition</h3>\n <p>Focus on AI-powered medical image analysis and diagnostic tools</p>\n </div>\n <div class=\"field-card\">\n <h3>Complex System Studies</h3>\n <p>Research on interconnected systems and emergent behaviors</p>\n </div>\n <div class=\"field-card\">\n <h3>System Simulation</h3>\n <p>Development of computational models for system behavior prediction</p>\n </div>\n <div class=\"field-card\">\n <h3>Medical Aid Engineering</h3>\n <p>Creating innovative solutions for healthcare accessibility</p>\n </div>\n </div>\n </section>\n\n <section id=\"universities\" class=\"glass-panel\">\n <h2>Featured Universities</h2>\n <div class=\"university-list\" id=\"universityList\">\n \n </div>\n </section>\n</main>\n\n<footer>\n <p>PhD Finder | Helping researchers find their path</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2a6b9c;\n --secondary-color: #4a90e2;\n --background-color: #f0f4f8;\n --text-color: #333;\n --glass-color: rgba(255, 255, 255, 0.9);\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: linear-gradient(135deg, #f0f4f8 0%, #d7e3ec 100%);\n color: var(--text-color);\n}\n\n.glass-panel {\n background: var(--glass-color);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n padding: 2rem;\n box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);\n margin: 2rem;\n}\n\nheader {\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(5px);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\nmain {\n padding-top: 80px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n#hero {\n text-align: center;\n padding: 4rem 2rem;\n}\n\nh1 {\n font-size: 3rem;\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.slider-group label {\n display: block;\n margin: 1.5rem 0;\n}\n\n.slider {\n width: 100%;\n height: 8px;\n -webkit-appearance: none;\n background: #ddd;\n border-radius: 4px;\n outline: none;\n margin: 10px 0;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n background: var(--secondary-color);\n border-radius: 50%;\n cursor: pointer;\n transition: background 0.3s;\n}\n\n.glow-button {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 30px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: all 0.3s;\n margin: 2rem 0;\n}\n\n.glow-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 0 20px rgba(74, 144, 226, 0.5);\n}\n\n.fields-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.field-card {\n padding: 1.5rem;\n border-radius: 15px;\n background: white;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.field-card:hover {\n transform: translateY(-5px);\n}\n\n.university-list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n margin-top: 4rem;\n background: var(--glass-color);\n backdrop-filter: blur(10px);\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n text-align: center;\n }\n \n .nav-links {\n margin-top: 1rem;\n }\n \n .nav-links a {\n margin: 0 1rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .glass-panel {\n margin: 1rem;\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Update slider values\n document.querySelectorAll('.slider').forEach(slider => {\n const valueDisplay = slider.nextElementSibling;\n slider.addEventListener('input', () => {\n valueDisplay.textContent = slider.value;\n });\n });\n\n // Universities data\n const universities = [\n { name: 'Tohoku University', rank: '101-150', fields: ['Medical Imaging', 'Complex Systems'] },\n { name: 'Osaka University', rank: '201-300', fields: ['Medical Engineering', 'System Simulation'] },\n { name: 'Nagoya University', rank: '301-400', fields: ['Complex Systems', 'Medical Imaging'] },\n { name: 'Hokkaido University', rank: '401-500', fields: ['System Simulation', 'Medical Engineering'] }\n ];\n\n // Populate universities\n const universityList = document.getElementById('universityList');\n universities.forEach(uni => {\n const div = document.createElement('div');\n div.className = 'field-card';\n div.innerHTML = `\n <h3>${uni.name}</h3>\n <p>World Rank: ${uni.rank}</p>\n <p>Key Fields: ${uni.fields.join(', ')}</p>\n `;\n universityList.appendChild(div);\n });\n\n // Analyze preferences\n document.getElementById('analyze').addEventListener('click', () => {\n const scores = {\n imaging: parseInt(document.getElementById('imaging').value),\n complex: parseInt(document.getElementById('complex').value),\n simulation: parseInt(document.getElementById('simulation').value),\n medical: parseInt(document.getElementById('medical').value)\n };\n\n const result = document.getElementById('result');\n const maxScore = Math.max(...Object.values(scores));\n const topFields = Object.entries(scores)\n .filter(([_, score]) => score === maxScore)\n .map(([field, _]) => {\n const fields = {\n imaging: 'Medical Imaging Recognition',\n complex: 'Complex System Studies',\n simulation: 'System Simulation',\n medical: 'Medical Aid Engineering'\n };\n return fields[field];\n });\n\n result.innerHTML = `\n <h3>Analysis Results</h3>\n <p>Based on your preferences, you show the strongest interest in:</p>\n <ul>\n ${topFields.map(field => `<li>${field}</li>`).join('')}\n </ul>\n <p>Consider exploring these fields further and reaching out to relevant professors at the universities listed below.</p>\n `;\n \n result.style.opacity = '0';\n result.style.display = 'block';\n setTimeout(() => result.style.opacity = '1', 10);\n });\n});\n\n---end---\n\nThis website features:\n1. An interactive slider-based preference analyzer\n2. Beautiful glass-morphism design\n3. Responsive layout for all devices\n4. Smooth animations and transitions\n5. Real-time preference analysis\n6. University recommendations\n7. Detailed research field descriptions\n8. Clean, accessible, and semantic HTML\n9. Modern CSS with variables and gradients\n10. Interactive JavaScript functionality\n\nThe design uses a professional color scheme with a focus on readability and user experience. The glass-morphism effect creates depth while maintaining professionalism. All interactions are smooth and provide immediate feedback to the user." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 357, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3156 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..1e86a79 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# phdfinder.scroll.pub +Website generated by Claude from prompt: i want a website that can help decide which field of research I want to get in for my PhD plan. I am torned between Medical imaging recognition, Complex system study, System simulation study, or Socially benefitial medical aid engineering, and the list is still growing. I guess the website need some numerical tools. BTW, i have focused on Japanese University that rank in world 100-1000. Be creative. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..bdf76c1 --- /dev/null +++ b/script.js @@ -0,0 +1,67 @@ +document.addEventListener('DOMContentLoaded', () => { + // Update slider values + document.querySelectorAll('.slider').forEach(slider => { + const valueDisplay = slider.nextElementSibling; + slider.addEventListener('input', () => { + valueDisplay.textContent = slider.value; + }); + }); + + // Universities data + const universities = [ + { name: 'Tohoku University', rank: '101-150', fields: ['Medical Imaging', 'Complex Systems'] }, + { name: 'Osaka University', rank: '201-300', fields: ['Medical Engineering', 'System Simulation'] }, + { name: 'Nagoya University', rank: '301-400', fields: ['Complex Systems', 'Medical Imaging'] }, + { name: 'Hokkaido University', rank: '401-500', fields: ['System Simulation', 'Medical Engineering'] } + ]; + + // Populate universities + const universityList = document.getElementById('universityList'); + universities.forEach(uni => { + const div = document.createElement('div'); + div.className = 'field-card'; + div.innerHTML = ` + <h3>${uni.name}</h3> + <p>World Rank: ${uni.rank}</p> + <p>Key Fields: ${uni.fields.join(', ')}</p> + `; + universityList.appendChild(div); + }); + + // Analyze preferences + document.getElementById('analyze').addEventListener('click', () => { + const scores = { + imaging: parseInt(document.getElementById('imaging').value), + complex: parseInt(document.getElementById('complex').value), + simulation: parseInt(document.getElementById('simulation').value), + medical: parseInt(document.getElementById('medical').value) + }; + + const result = document.getElementById('result'); + const maxScore = Math.max(...Object.values(scores)); + const topFields = Object.entries(scores) + .filter(([_, score]) => score === maxScore) + .map(([field, _]) => { + const fields = { + imaging: 'Medical Imaging Recognition', + complex: 'Complex System Studies', + simulation: 'System Simulation', + medical: 'Medical Aid Engineering' + }; + return fields[field]; + }); + + result.innerHTML = ` + <h3>Analysis Results</h3> + <p>Based on your preferences, you show the strongest interest in:</p> + <ul> + ${topFields.map(field => `<li>${field}</li>`).join('')} + </ul> + <p>Consider exploring these fields further and reaching out to relevant professors at the universities listed below.</p> + `; + + result.style.opacity = '0'; + result.style.display = 'block'; + setTimeout(() => result.style.opacity = '1', 10); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..caa433e --- /dev/null +++ b/style.css @@ -0,0 +1,184 @@ +:root { + --primary-color: #2a6b9c; + --secondary-color: #4a90e2; + --background-color: #f0f4f8; + --text-color: #333; + --glass-color: rgba(255, 255, 255, 0.9); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + background: linear-gradient(135deg, #f0f4f8 0%, #d7e3ec 100%); + color: var(--text-color); +} + +.glass-panel { + background: var(--glass-color); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15); + margin: 2rem; +} + +header { + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(5px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: var(--primary-color); +} + +.nav-links a { + margin-left: 2rem; + text-decoration: none; + color: var(--text-color); + transition: color 0.3s; +} + +.nav-links a:hover { + color: var(--secondary-color); +} + +main { + padding-top: 80px; + max-width: 1200px; + margin: 0 auto; +} + +#hero { + text-align: center; + padding: 4rem 2rem; +} + +h1 { + font-size: 3rem; + margin-bottom: 1rem; + background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.slider-group label { + display: block; + margin: 1.5rem 0; +} + +.slider { + width: 100%; + height: 8px; + -webkit-appearance: none; + background: #ddd; + border-radius: 4px; + outline: none; + margin: 10px 0; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + background: var(--secondary-color); + border-radius: 50%; + cursor: pointer; + transition: background 0.3s; +} + +.glow-button { + background: var(--primary-color); + color: white; + border: none; + padding: 1rem 2rem; + border-radius: 30px; + font-size: 1.1rem; + cursor: pointer; + transition: all 0.3s; + margin: 2rem 0; +} + +.glow-button:hover { + transform: translateY(-2px); + box-shadow: 0 0 20px rgba(74, 144, 226, 0.5); +} + +.fields-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.field-card { + padding: 1.5rem; + border-radius: 15px; + background: white; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s; +} + +.field-card:hover { + transform: translateY(-5px); +} + +.university-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; +} + +footer { + text-align: center; + padding: 2rem; + margin-top: 4rem; + background: var(--glass-color); + backdrop-filter: blur(10px); +} + +@media (max-width: 768px) { + nav { + flex-direction: column; + text-align: center; + } + + .nav-links { + margin-top: 1rem; + } + + .nav-links a { + margin: 0 1rem; + } + + h1 { + font-size: 2rem; + } + + .glass-panel { + margin: 1rem; + padding: 1rem; + } +}