Changes to sf2hyd.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
    +
  • Decision Calculator
    • +
  • City Comparison
    • +
  • Resources
    • +
    +
    +
    +
    +
    +
    +

    SF to Hyderabad

    +

    Make an informed decision about your engineering career move

    +
    +
    +
    +

    Decision Calculator

    +
    +
    +

    Rate These Factors (1-10)

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

    City Comparison

    +
    +
    +

    San Francisco

    +
      +
    • Higher salaries
      • +
    • Tech hub opportunities
      • +
    • Cultural diversity
      • +
    • High cost of living
      • +
    • Distance from family
      • +
      +
      +
      +

      Hyderabad

      +
        +
      • Growing tech scene
        • +
      • Lower cost of living
        • +
      • Family proximity
        • +
      • Cultural familiarity
        • +
      • Work-life balance
        • +
        +
        +
        +
        +
        +
        +

        Additional Resources

        +
        +
        +

        Visa Information

        +

        Understanding your visa status and implications

        +
        +
        +

        Job Market

        +

        Current tech job market analysis in both cities

        +
        +
        +

        Living Costs

        +

        Detailed cost of living comparison

        +
        +
        +
        +
        +
        +
        +

        Built to help engineers make informed decisions about their future

        +
        index.scroll
        Changed around line 1
        + buildHtml
        + baseUrl https://sf2hyd.scroll.pub
        + metaTags
        + editButton /edit.html
        + title SF to Hyderabad - Engineering Career Decision Helper
        + style.css
        + body.html
        + script.js
        prompt.json
        Changed around line 1
        + {
        + "id": "msg_01BEKemfoeWyMsmUa13NgwER",
        + "type": "message",
        + "role": "assistant",
        + "model": "claude-3-5-sonnet-20241022",
        + "content": [
        + {
        + "type": "text",
        + "text": "I'll create a website to help make this important life decision. Here's a suitable domain name and complete implementation:\n\n---domain---\nsf2hyd.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sf2hyd.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SF to Hyderabad - Engineering Career Decision Helper\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
        \n \n
        \n\n
        \n
        \n

        SF to Hyderabad

        \n

        Make an informed decision about your engineering career move

        \n
        \n\n
        \n

        Decision Calculator

        \n
        \n
        \n

        Rate These Factors (1-10)

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

        City Comparison

        \n
        \n
        \n

        San Francisco

        \n
          \n
        • Higher salaries
          • \n
        • Tech hub opportunities
          • \n
        • Cultural diversity
          • \n
        • High cost of living
          • \n
        • Distance from family
          • \n
        \n
        \n
        \n

        Hyderabad

        \n
          \n
        • Growing tech scene
          • \n
        • Lower cost of living
          • \n
        • Family proximity
          • \n
        • Cultural familiarity
          • \n
        • Work-life balance
          • \n
        \n
        \n
        \n
        \n\n
        \n

        Additional Resources

        \n
        \n
        \n

        Visa Information

        \n

        Understanding your visa status and implications

        \n
        \n
        \n

        Job Market

        \n

        Current tech job market analysis in both cities

        \n
        \n
        \n

        Living Costs

        \n

        Detailed cost of living comparison

        \n
        \n
        \n
        \n
        \n\n
        \n

        Built to help engineers make informed decisions about their future

        \n
        \n\n---style.css---\n:root {\n --primary-color: #2d3436;\n --accent-color: #0984e3;\n --background-color: #f5f6fa;\n --text-color: #2d3436;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\nheader {\n background: var(--primary-color);\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 gap: 2rem;\n list-style: none;\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(--accent-color);\n}\n\nmain {\n margin-top: 4rem;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n color: white;\n text-align: center;\n padding: 4rem 2rem;\n margin-bottom: 2rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\nsection {\n padding: 4rem 2rem;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 2rem;\n color: var(--primary-color);\n}\n\n.calculator {\n max-width: 800px;\n margin: 0 auto;\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n}\n\n.factor-input {\n display: flex;\n align-items: center;\n margin-bottom: 1.5rem;\n gap: 1rem;\n}\n\n.factor-input label {\n flex: 1;\n font-weight: 500;\n}\n\n.factor-input input {\n flex: 2;\n}\n\nbutton {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 4px;\n cursor: pointer;\n font-weight: 500;\n transition: transform 0.2s;\n width: 100%;\n margin-top: 1rem;\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.result {\n margin-top: 2rem;\n padding: 1rem;\n border-radius: 4px;\n text-align: center;\n font-weight: 500;\n}\n\n.comparison-grid {\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.city {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n}\n\n.city h3 {\n margin-bottom: 1rem;\n color: var(--accent-color);\n}\n\n.city ul {\n list-style-position: inside;\n}\n\n.resources-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-card {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s;\n}\n\n.resource-card:hover {\n transform: translateY(-5px);\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n text-align: center;\n padding: 2rem;\n margin-top: 4rem;\n}\n\n@media (max-width: 768px) {\n nav ul {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n\n .hero h1 {\n font-size: 2rem;\n }\n\n section {\n padding: 2rem 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const rangeInputs = document.querySelectorAll('input[type=\"range\"]');\n const calculateBtn = document.getElementById('calculate');\n const resultDiv = document.getElementById('result');\n\n // Update range input values\n rangeInputs.forEach(input => {\n input.addEventListener('input', (e) => {\n e.target.nextElementSibling.textContent = e.target.value;\n });\n });\n\n // Calculate decision\n calculateBtn.addEventListener('click', () => {\n const salary = parseInt(document.getElementById('salary').value);\n const family = parseInt(document.getElementById('family').value);\n const career = parseInt(document.getElementById('career').value);\n const lifestyle = parseInt(document.getElementById('lifestyle').value);\n\n // Calculate weighted score\n const sfScore = (salary * 0.9 + family * 0.3 + career * 0.8 + lifestyle * 0.6) / 2.6;\n const hydScore = (salary * 0.5 + family * 0.9 + career * 0.6 + lifestyle * 0.8) / 2.8;\n\n let decision = '';\n let color = '';\n\n if (Math.abs(sfScore - hydScore) < 1) {\n decision = \"This is a close call! Consider making a pros and cons list specific to your situation.\";\n color = \"#ffa502\";\n } else if (sfScore > hydScore) {\n decision = \"Based on your priorities, staying in San Francisco might be better for you.\";\n color = \"#2ed573\";\n } else {\n decision = \"Based on your priorities, moving to Hyderabad might be better for you.\";\n color = \"#2ed573\";\n }\n\n resultDiv.style.backgroundColor = color;\n resultDiv.style.color = color === \"#ffa502\" ? \"#000\" : \"#fff\";\n resultDiv.innerHTML = `\n

        ${decision}

        \n SF Score: ${sfScore.toFixed(1)} | Hyderabad Score: ${hydScore.toFixed(1)}\n `;\n });\n\n // Smooth scrolling for navigation\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n});\n\n---end---\n\nThis implementation creates a beautiful, interactive website that helps users make an informed decision about moving from San Francisco to Hyderabad. It features:\n\n1. A decision calculator with weighted factors\n2. Side-by-side city comparison\n3. Additional resources section\n4. Mobile-responsive design\n5. Smooth scrolling navigation\n6. Modern gradient hero section\n7. Clean card-based layout\n8. Interactive hover effects\n9. Accessible form controls\n10. Professional color scheme\n\nThe domain name \"sf2hyd\" is short, memorable, and clearly communicates the purpose of the website (SF to Hyderabad)."
        + }
        + ],
        + "stop_reason": "end_turn",
        + "stop_sequence": null,
        + "usage": {
        + "input_tokens": 322,
        + "cache_creation_input_tokens": 0,
        + "cache_read_input_tokens": 0,
        + "output_tokens": 3042
        + }
        + }
        readme.scroll
        Changed around line 1
        + # sf2hyd.scroll.pub
        + Website generated by Claude from prompt: I want a website that helps me decide if i should leave san francisco and go back to India to work as an engineer in hyderabad. I need to understand the pros and cons and a caluclated decision on whther i should leave or not
        script.js
        Changed around line 1
        + document.addEventListener('DOMContentLoaded', () => {
        + const rangeInputs = document.querySelectorAll('input[type="range"]');
        + const calculateBtn = document.getElementById('calculate');
        + const resultDiv = document.getElementById('result');
        +
        + // Update range input values
        + rangeInputs.forEach(input => {
        + input.addEventListener('input', (e) => {
        + e.target.nextElementSibling.textContent = e.target.value;
        + });
        + });
        +
        + // Calculate decision
        + calculateBtn.addEventListener('click', () => {
        + const salary = parseInt(document.getElementById('salary').value);
        + const family = parseInt(document.getElementById('family').value);
        + const career = parseInt(document.getElementById('career').value);
        + const lifestyle = parseInt(document.getElementById('lifestyle').value);
        +
        + // Calculate weighted score
        + const sfScore = (salary * 0.9 + family * 0.3 + career * 0.8 + lifestyle * 0.6) / 2.6;
        + const hydScore = (salary * 0.5 + family * 0.9 + career * 0.6 + lifestyle * 0.8) / 2.8;
        +
        + let decision = '';
        + let color = '';
        +
        + if (Math.abs(sfScore - hydScore) < 1) {
        + decision = "This is a close call! Consider making a pros and cons list specific to your situation.";
        + color = "#ffa502";
        + } else if (sfScore > hydScore) {
        + decision = "Based on your priorities, staying in San Francisco might be better for you.";
        + color = "#2ed573";
        + } else {
        + decision = "Based on your priorities, moving to Hyderabad might be better for you.";
        + color = "#2ed573";
        + }
        +
        + resultDiv.style.backgroundColor = color;
        + resultDiv.style.color = color === "#ffa502" ? "#000" : "#fff";
        + resultDiv.innerHTML = `
        +

        ${decision}

        + SF Score: ${sfScore.toFixed(1)} | Hyderabad Score: ${hydScore.toFixed(1)}
        + `;
        + });
        +
        + // Smooth scrolling for navigation
        + document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        + anchor.addEventListener('click', function (e) {
        + e.preventDefault();
        + document.querySelector(this.getAttribute('href')).scrollIntoView({
        + behavior: 'smooth'
        + });
        + });
        + });
        + });
        style.css
        Changed around line 1
        + :root {
        + --primary-color: #2d3436;
        + --accent-color: #0984e3;
        + --background-color: #f5f6fa;
        + --text-color: #2d3436;
        + --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        + }
        +
        + * {
        + margin: 0;
        + padding: 0;
        + box-sizing: border-box;
        + }
        +
        + body {
        + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        + line-height: 1.6;
        + color: var(--text-color);
        + background: var(--background-color);
        + }
        +
        + header {
        + background: var(--primary-color);
        + padding: 1rem;
        + position: fixed;
        + width: 100%;
        + top: 0;
        + z-index: 100;
        + }
        +
        + nav ul {
        + display: flex;
        + justify-content: center;
        + gap: 2rem;
        + list-style: none;
        + }
        +
        + nav a {
        + color: white;
        + text-decoration: none;
        + font-weight: 500;
        + transition: color 0.3s;
        + }
        +
        + nav a:hover {
        + color: var(--accent-color);
        + }
        +
        + main {
        + margin-top: 4rem;
        + }
        +
        + .hero {
        + background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        + color: white;
        + text-align: center;
        + padding: 4rem 2rem;
        + margin-bottom: 2rem;
        + }
        +
        + .hero h1 {
        + font-size: 3rem;
        + margin-bottom: 1rem;
        + }
        +
        + section {
        + padding: 4rem 2rem;
        + }
        +
        + h2 {
        + text-align: center;
        + margin-bottom: 2rem;
        + color: var(--primary-color);
        + }
        +
        + .calculator {
        + max-width: 800px;
        + margin: 0 auto;
        + background: white;
        + padding: 2rem;
        + border-radius: 8px;
        + box-shadow: var(--card-shadow);
        + }
        +
        + .factor-input {
        + display: flex;
        + align-items: center;
        + margin-bottom: 1.5rem;
        + gap: 1rem;
        + }
        +
        + .factor-input label {
        + flex: 1;
        + font-weight: 500;
        + }
        +
        + .factor-input input {
        + flex: 2;
        + }
        +
        + button {
        + background: var(--accent-color);
        + color: white;
        + border: none;
        + padding: 1rem 2rem;
        + border-radius: 4px;
        + cursor: pointer;
        + font-weight: 500;
        + transition: transform 0.2s;
        + width: 100%;
        + margin-top: 1rem;
        + }
        +
        + button:hover {
        + transform: translateY(-2px);
        + }
        +
        + .result {
        + margin-top: 2rem;
        + padding: 1rem;
        + border-radius: 4px;
        + text-align: center;
        + font-weight: 500;
        + }
        +
        + .comparison-grid {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        + gap: 2rem;
        + max-width: 1200px;
        + margin: 0 auto;
        + }
        +
        + .city {
        + background: white;
        + padding: 2rem;
        + border-radius: 8px;
        + box-shadow: var(--card-shadow);
        + }
        +
        + .city h3 {
        + margin-bottom: 1rem;
        + color: var(--accent-color);
        + }
        +
        + .city ul {
        + list-style-position: inside;
        + }
        +
        + .resources-grid {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        + gap: 2rem;
        + max-width: 1200px;
        + margin: 0 auto;
        + }
        +
        + .resource-card {
        + background: white;
        + padding: 2rem;
        + border-radius: 8px;
        + box-shadow: var(--card-shadow);
        + transition: transform 0.3s;
        + }
        +
        + .resource-card:hover {
        + transform: translateY(-5px);
        + }
        +
        + footer {
        + background: var(--primary-color);
        + color: white;
        + text-align: center;
        + padding: 2rem;
        + margin-top: 4rem;
        + }
        +
        + @media (max-width: 768px) {
        + nav ul {
        + flex-direction: column;
        + align-items: center;
        + gap: 1rem;
        + }
        +
        + .hero h1 {
        + font-size: 2rem;
        + }
        +
        + section {
        + padding: 2rem 1rem;
        + }
        + }